/* Staatliches, self-hosted — the reference's display face, with no CDN dependency
   so it renders identically even when Google Fonts is slow or blocked. */
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/staatliches-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/staatliches-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =================================================================
   Tofayel Ahamed — portfolio
   Layout, type scale and palette replicated from the Beverr theme
   (startersites.io/blocksy/beverr) measured at a 1440px viewport.
   ================================================================= */

:root {
  /* palette — sampled from the reference */
  --teal: #096a61;        /* hero background, accents, buttons */
  --body: #365951;        /* body copy */
  --ink: #192c27;         /* headings */
  --dark: #1e1e1e;        /* card copy */
  --yellow: #fdd746;
  --mist: #e6f0ee;        /* card borders, oversized numerals */
  --paper: #f2f7f6;       /* CTA + footer background */
  --white: #ffffff;

  --display: 'Staatliches', 'Arial Narrow', Impact, sans-serif;
  --sans: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  /* identical to the reference */

  --shell: 1290px;
  --gutter: 24px;
  --header-h: 100px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;          /* 26.4px at 16px, as measured */
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: normal;
}

::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 999;
  background: var(--yellow); color: var(--ink); padding: 12px 20px; font-weight: 700;
}

/* spacer blocks, matching the reference rhythm */
.sp-350 { height: 350px; }
.sp-150 { height: 150px; }
.sp-100 { height: 100px; }

/* --------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  border: 0;
  border-radius: 20px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--yellow); color: var(--ink); transform: translateY(-2px); }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--white); color: var(--ink); }

.btn-light { background: var(--white); color: var(--teal); }
.btn-light:hover { background: var(--yellow); color: var(--ink); }

.link-all {
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .25s var(--ease);
}
.link-all:hover { gap: 14px; }

/* ---------------------------------------------------------- header -- */

/* Always pinned to the top — it never scrolls away. Out of flow, so it
   overlays the teal hero, which already reserves --header-h of padding. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .3s var(--ease), background-color .3s var(--ease);
}
/* Past the hero it goes compact and solid, so the nav stays readable
   over whatever is scrolling underneath. */
.site-header.is-fixed {
  height: 76px;
  background: rgba(9, 106, 97, .97);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(9, 32, 27, .18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--yellow);         /* the mark is fill="currentColor" */
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.brand-name {
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: .04em;
  color: var(--white);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: 46px; }
.nav-link {
  position: relative;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--yellow);
  transition: width .28s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--yellow); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

.nav-socials { display: none; }
.header-socials { display: flex; gap: 9px; }
.social {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social:hover { background: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.brand-icon { fill: currentColor; }

.burger { display: none; width: 42px; height: 42px; border: 0; background: none; padding: 9px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  background: var(--teal);      /* flat — no pattern behind the hero */
  /* An extra 44px below the header so the hero copy reads as its own block
     rather than butting straight up against the nav. The height grows to
     match, otherwise the copy would spill past the teal. */
  padding: calc(var(--header-h) + 44px) 0 0;
  height: 634px;
}
.hero-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}

.hero-kicker {
  color: var(--white);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.65;
  margin: 0 0 4px;
}
.hero-name {
  font-size: 120px;
  line-height: .9;              /* 108 / 120 */
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.hero-name span { display: block; }
.hero-squiggle { width: 250px; height: 36px; margin: 26px 0 22px; }
.hero-role {
  /* 70% white, as the reference does with a wrapper opacity. Set through the
     colour rather than `opacity`, because the riseIn entrance animation ends on
     opacity:1 and would otherwise cancel it out. */
  color: rgba(255, 255, 255, .7);
  font-size: 22px;
  font-weight: 300;             /* light — the reference uses 500 here */
  line-height: 1.65;
  text-transform: uppercase;
  margin: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* yellow pill + portrait — 423 x 684 with a 500px radius in the reference */
.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 423 / 684;
  background: var(--yellow);
  border-radius: 500px;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Reference spacing: 10px between a label and its number, 30px between the
   three blocks, so each stat reads as one unit. */
.hero-stats { text-align: right; display: grid; gap: 30px; }
.stat-label { color: var(--white); opacity: .7; font-size: 24px; font-weight: 500; line-height: 1.65; margin: 0; }
.hero-stats .stat-label { margin-bottom: 10px; }
.stat-value {
  font-family: var(--display);
  font-size: 70px;
  line-height: 1;
  color: var(--white);
  margin: 0;
}

/* --------------------------------------------------------- section -- */

.h2 {
  font-size: 45px;
  line-height: 1.5;          /* 67.5 / 45 */
  color: var(--ink);
}
.h2-light { color: var(--white); }
.lead { font-size: 16px; line-height: 1.65; color: var(--body); }

.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- skills -- */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 50px;
}
.skill-card {
  position: relative;
  top: 0;
  background: var(--white);
  border: 2px solid var(--mist);
  border-radius: 40px;
  padding: 45px 30px;
  text-align: center;
  cursor: pointer;
  transition: top .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.skill-card:hover,
.skill-card.is-active {
  top: -10px;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 50px 100px 0 rgba(9, 106, 97, .5);
}
.skill-card:hover .skill-name,
.skill-card.is-active .skill-name { color: var(--white); }
.skill-card:hover .skill-pct,
.skill-card.is-active .skill-pct { color: rgba(255, 255, 255, .7); }
.skill-logo {
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  transition: transform .35s var(--ease);
}
.skill-card:hover .skill-logo,
.skill-card.is-active .skill-logo { transform: scale(1.08); }
.skill-name { font-size: 18px; font-weight: 500; color: var(--dark); line-height: 1.65; margin: 0 0 6px; transition: color .35s var(--ease); }
.skill-pct { font-family: var(--display); font-size: 25px; line-height: 1.65; color: var(--ink); margin: 0; transition: color .35s var(--ease); }

/* -------------------------------------------------------- projects -- */

.projects-stagger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.projects-col { display: grid; gap: 40px; }
.projects-col-b { padding-top: 0; }

.proj-intro { padding-bottom: 22px; }
.proj-intro .lead { max-width: 350px; margin-top: 14px; }

.project-card { position: relative; display: block; overflow: hidden; }
.project-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mist);
}
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.project-card:hover .project-media img { transform: scale(1.1); }
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 32, 27, .82) 0%, rgba(9, 32, 27, .35) 32%, rgba(9, 32, 27, 0) 60%);
  transition: background .5s var(--ease);
}
.project-card:hover .project-media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .38) 100%);
}
.project-meta {
  position: absolute;
  left: 60px; right: 60px; bottom: 60px;
  z-index: 2;
}
.project-title { font-size: 25px; line-height: 1.5; color: var(--white); margin: 0 0 2px; }
.project-cat { font-size: 16px; font-weight: 600; color: var(--white); line-height: 1.65; margin: 0; }
.project-open {
  position: absolute;
  right: 40px; bottom: 40px;
  z-index: 2;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: all .35s var(--ease);
}
.project-card:hover .project-open { opacity: 1; transform: none; }

/* -------------------------------------------------------- timeline -- */

.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 57px;
  row-gap: 46px;
}
.tl-item { display: grid; grid-template-columns: 139px 1fr; align-items: start; }
.tl-period { font-family: var(--display); font-size: 20px; line-height: 1.5; color: var(--teal); margin: 0; }
.tl-title { font-size: 25px; line-height: 1.5; color: var(--ink); margin: 0 0 2px; }
.tl-text { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0; }

/* -------------------------------------------------------- services -- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
/* the About page lists all six, which sits better three-up */
.services-grid-6 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.services-grid-6 .service-card { padding: 70px 50px; }
.service-card {
  position: relative;
  top: 0;
  background-color: var(--white);
  overflow: hidden;
  border: 2px solid var(--mist);
  border-radius: 20px;
  padding: 56px 38px;
  cursor: pointer;
  transition: top .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* wave pattern on its own layer, dimmed once the card turns dark */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/img/waves-gray.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--wave, 50%) 100%;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.service-card:hover::before,
.service-card.is-active::before { opacity: .16; }

.service-card > * { position: relative; z-index: 1; }

.service-card:hover,
.service-card.is-active {
  top: -10px;
  background-color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 50px 100px 0 rgba(25, 44, 39, .3);
}
.service-card:hover .service-title,
.service-card.is-active .service-title { color: var(--white); }
.service-card:hover .service-text,
.service-card.is-active .service-text { color: rgba(255, 255, 255, .75); }
.service-card:hover .service-num,
.service-card.is-active .service-num { color: rgba(255, 255, 255, .22); }
/* icon on the left, numeral right-aligned as in the reference */
.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
/* line icon straight on the card, no badge — as the reference does */
.service-glyph {
  width: 64px; height: 64px;
  flex: none;
  color: var(--ink);
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover .service-glyph,
.service-card.is-active .service-glyph {
  color: var(--yellow);
  transform: scale(1.05);
}
.service-num {
  font-family: var(--display);
  font-size: 50px;
  line-height: 1.5;
  color: var(--mist);
  transition: color .35s var(--ease);
}
.service-title { font-size: 30px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; transition: color .35s var(--ease); }
.service-text { font-size: 16px; line-height: 1.65; color: var(--dark); margin: 0; transition: color .35s var(--ease); }

/* ------------------------------------------------------- reviews -- */

/* Reviews scroll continuously right to left. The track holds the list twice,
   so animating it to -50% returns to an identical frame and loops with no jump.
   Duration scales with the number of cards to keep a steady speed. */
.reviews-marquee {
  overflow: hidden;
  padding: 10px 0 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.reviews-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: marquee calc(var(--count, 3) * 9s) linear infinite;
}
.reviews-track .contents { display: contents; }
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review-card {
  width: 380px;
  flex: none;
  /* Cards stretch to the tallest in the row; anchoring the caption to the
     bottom keeps every name on one line instead of leaving dead space below. */
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--white);
  border: 2px solid var(--mist);
  border-radius: 20px;
  padding: 34px 32px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.review-card:hover { border-color: var(--yellow); transform: translateY(-6px); }
.stars { display: flex; gap: 3px; margin-bottom: 18px; }
.star { color: var(--mist); }
.star.is-on { color: var(--yellow); }
.review-card blockquote {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.review-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review-card figcaption strong { font-family: var(--display); font-size: 20px; color: var(--ink); font-weight: 400; }
.review-card figcaption span { font-size: 15px; color: var(--teal); font-weight: 600; }

/* ------------------------------------------------------------- cta -- */

.cta {
  background: var(--paper);
  padding: 300px 0 150px;
  margin-top: -100px;
}
.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-copy { text-align: center; max-width: 432px; margin: 0 auto; }
.cta-kicker { color: var(--teal); font-size: 16px; font-weight: 600; line-height: 1.65; margin: 0 0 24px; }
.cta-title { font-size: 45px; line-height: 1.5; color: var(--ink); margin: 0 0 24px; }
.cta-photo {
  width: 500px; max-width: 100%;
  aspect-ratio: 1;
  margin-left: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--yellow);
}
.cta-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- footer -- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .65);
  padding: 56px 0 36px;
}
.footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.footer-logo .brand-name { color: var(--white); }
.footer-logo .brand-mark { width: 40px; height: 40px; }
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin-bottom: 32px;
}
.footer-contact li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: rgba(255, 255, 255, .75);
}
.footer-contact .icon,
.footer-contact .brand-icon { color: var(--yellow); flex: none; }
.footer-contact a { transition: color .2s var(--ease); }
.footer-contact a:hover { color: var(--yellow); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-copy { font-size: 15px; color: rgba(255, 255, 255, .6); margin: 0; }
.footer-nav { display: flex; gap: 34px; }
.footer-nav a {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;             /* 15.6px, as in the reference */
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  transition: color .2s var(--ease);
}
.footer-nav a:hover, .footer-nav a.is-active { color: var(--yellow); }
.footer-socials { display: flex; gap: 9px; }
.footer-socials .social { background: rgba(255, 255, 255, .1); color: var(--white); }
.footer-socials .social:hover { background: var(--yellow); color: var(--ink); }

/* ------------------------------------------------------- sub-pages -- */

.page-hero {
  background: var(--teal);
  padding: calc(var(--header-h) + 80px) 0 100px;
}
.page-title { font-size: 70px; line-height: .95; color: var(--white); margin: 0 0 18px; }
.page-kicker { color: var(--yellow); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; }
.page-lead { color: rgba(255, 255, 255, .85); font-size: 18px; max-width: 640px; margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 15px; font-weight: 600; margin-bottom: 20px; }
.back-link .icon { transform: rotate(180deg); }
.back-link:hover { color: var(--yellow); }

.section { padding: 150px 0; }
.section-sm { padding: 100px 0; }
.section-paper { background: var(--paper); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.grid-2-top { align-items: start; }

.about-photo {
  width: 100%;
  max-width: 423px;
  aspect-ratio: 423 / 684;
  background: var(--yellow);
  border-radius: 500px;
  overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.check-list { display: grid; gap: 12px; margin: 26px 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon { color: var(--teal); flex: none; margin-top: 5px; }

.bar-list { display: grid; gap: 22px; }
.bar-top { display: flex; justify-content: space-between; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.bar-track { height: 8px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width 1.1s var(--ease); }
.reveal.is-visible .bar-fill { width: var(--level); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: var(--mist); color: var(--teal); border-radius: 999px; padding: 9px 18px; font-size: 15px; font-weight: 600; }
.lang-list { display: grid; gap: 14px; }
.lang-item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--mist); }
.lang-name { font-family: var(--display); font-size: 25px; color: var(--ink); }
.lang-note { font-size: 15px; color: var(--teal); font-weight: 600; }

.steps { display: grid; gap: 26px; }
.steps li { display: flex; gap: 22px; }
.steps li > span { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--mist); flex: none; width: 62px; }
.steps h3 { font-size: 25px; line-height: 1.4; margin: 0 0 4px; }
.steps p { margin: 0; }

.stats-band { background: var(--teal); padding: 80px 0; }
.stats-band-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 60px; }
.filter {
  border: 2px solid var(--mist); background: var(--white); border-radius: 20px;
  padding: 11px 26px; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--body); cursor: pointer; transition: all .25s var(--ease);
}
.filter:hover { border-color: var(--teal); color: var(--teal); }
.filter.is-active { background: var(--teal); border-color: var(--teal); color: var(--white); }

.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.empty-note { text-align: center; padding: 40px 0; }

/* case study */
.case-hero-img { overflow: hidden; margin-bottom: 80px; }
.case-hero-img img { width: 100%; }
.case-grid { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start; }
.case-facts { background: var(--paper); border: 2px solid var(--mist); border-radius: 20px; padding: 40px; position: sticky; top: 110px; }
.case-facts dl { margin: 0; display: grid; gap: 22px; }
.case-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--teal); font-weight: 700; margin-bottom: 4px; }
.case-facts dd { margin: 0; font-family: var(--display); font-size: 20px; color: var(--ink); }
.case-visit { margin-top: 24px; width: 100%; justify-content: center; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tag { background: var(--white); border: 2px solid var(--mist); border-radius: 20px; padding: 6px 16px; font-size: 12px; font-weight: 600; }
.case-body p { font-size: 17px; }
.case-body p:first-of-type { font-size: 20px; color: var(--ink); }

.next-project { background: var(--teal); padding: 90px 0; }
.next-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.next-title { font-size: 45px; line-height: 1.3; color: var(--white); margin: 0 0 4px; }
.next-title a:hover { color: var(--yellow); }
.next-cat { margin: 0; color: rgba(255, 255, 255, .75); font-size: 16px; font-weight: 600; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.contact-list { display: grid; gap: 20px; margin: 30px 0 36px; }
.contact-list li { display: flex; align-items: center; gap: 16px; }
.ci-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--teal); flex: none; }
.contact-list a { color: var(--ink); font-weight: 600; }
.contact-list a small { font-weight: 500; color: var(--body); }
.ci-icon-wa { background: #e7f9ee; color: #1da851; }
.contact-list a:hover { color: var(--teal); }
.availability { display: flex; gap: 14px; background: var(--paper); border: 2px solid var(--mist); border-radius: 20px; padding: 22px 24px; }
.availability strong { color: var(--ink); display: block; }
.availability p { margin: 2px 0 0; font-size: 15px; }
.dot-live { width: 11px; height: 11px; border-radius: 50%; background: #2fbf71; margin-top: 7px; flex: none; box-shadow: 0 0 0 0 rgba(47,191,113,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } }

.contact-form-wrap { background: var(--white); border: 2px solid var(--mist); border-radius: 20px; padding: 46px; }
.field { display: block; margin-bottom: 22px; }
.field > span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 9px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--mist); border-radius: 14px; padding: 14px 18px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); background: var(--white); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-note { font-size: 15px; margin: 18px 0 0; text-align: center; }
.btn-block { width: 100%; justify-content: center; }
.alert { border-radius: 14px; padding: 16px 20px; margin-bottom: 26px; }
.alert-ok { background: #e7f6ee; border: 2px solid #b9e3cb; color: #1c6b41; }
.alert-err { background: #fdeceb; border: 2px solid #f5c6c2; color: #a5302a; }

/* admin */
.msg-list { display: grid; gap: 22px; max-width: 880px; }
.msg-card { background: var(--white); border: 2px solid var(--mist); border-radius: 20px; padding: 30px 32px; }
.msg-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.msg-name { font-size: 25px; margin: 0; }
.msg-email { color: var(--teal); font-size: 15px; }
.msg-time { font-size: 12px; }
.msg-subject { margin: 0 0 10px; }
.msg-body { margin: 0 0 18px; color: var(--ink); }
.btn-sm { padding: 10px 22px; font-size: 15px; }

/* ------------------------------------------------------ responsive -- */

/* The reference holds every type size fixed down to 1000px — no fluid scaling.
   Below 1340 we only tighten spacing, never the font sizes. */
@media (max-width: 1340px) {
  .project-meta { left: 40px; right: 40px; bottom: 40px; }
  .skills-grid { gap: 24px; }
  .skill-card { padding: 34px 16px; border-radius: 30px; }
  .service-card, .services-grid-6 .service-card { padding: 46px 30px; }
  .service-top { margin-bottom: 30px; }
  .service-glyph { width: 56px; height: 56px; }
}

/* Reference tablet step: hero name 70, kicker/role/stat-label 18, h2 35.
   Everything else (skill 18/25, project 25, timeline 20/25, service 50/30)
   stays at its desktop size, exactly as the reference does. */
@media (max-width: 999px) {
  .hero-name { font-size: 70px; }
  .hero-kicker, .hero-role, .stat-label { font-size: 18px; }
  .stat-value { font-size: 40px; }
  .h2, .cta-title { font-size: 35px; }
  .page-title { font-size: 50px; }

  .hero { height: auto; padding-bottom: 90px; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-photo { max-width: 360px; }
  .hero-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); text-align: left; gap: 20px; }
  .sp-350 { height: 90px; }
  .sp-150 { height: 90px; }
  .skills-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid, .services-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; row-gap: 34px; }
  .cta { padding: 120px 0 100px; margin-top: 0; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-copy { order: 2; }
  .cta-photo { order: 1; margin: 0 auto; width: 360px; }
  .section { padding: 100px 0; }
  .grid-2, .case-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .case-facts { position: static; }
  .stats-band-inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .header-socials { display: none; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav-link { font-family: var(--display); font-size: 30px; }
  .nav-socials { display: flex; gap: 10px; margin-top: 14px; }
  body.nav-open { overflow: hidden; }
  .projects-stagger, .projects-grid { grid-template-columns: 1fr; }
  .services-grid, .services-grid-6 { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { margin: 0 auto; }
  .hero-stats { grid-template-columns: 1fr; }
}

/* Phones: the reference centres the whole hero — greeting, name, squiggle,
   role and the three counters. (Measured centred at 575px, left-aligned at
   767px, so the switch sits between them.) */
@media (max-width: 640px) {
  .hero-copy,
  .hero-kicker,
  .hero-name,
  .hero-role,
  .hero-stats,
  .stat-label,
  .stat-value { text-align: center; }

  .hero-squiggle { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { gap: 28px; }
}

/* Phones: the footer details stack one per line instead of wrapping into
   ragged rows of one and two, and the vertical rhythm tightens a little. */
@media (max-width: 640px) {
  .footer-contact {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
  }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 18px;
    padding-top: 22px;
  }
  .footer-nav { justify-content: center; gap: 24px; }
  .site-footer { padding: 44px 0 28px; }
  .footer-logo { margin-bottom: 24px; }

  .sp-350 { height: 70px; }
  .sp-150 { height: 70px; }
  .section { padding: 70px 0; }
  .cta { padding: 90px 0 80px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .hero-name { font-size: 90px; }   /* the reference enlarges it again on mobile */
  .page-title { font-size: 40px; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 26px 20px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .btn { padding: 13px 28px; font-size: 15px; }
  .project-meta { left: 24px; right: 24px; bottom: 26px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* =========================================================== motion == */

@keyframes riseIn  { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes pillIn  { from { opacity: 0; transform: translateY(46px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wipeIn  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes floaty  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* hero entrance, staggered like a title sequence */
.hero-kicker   { animation: riseIn .8s var(--ease) both .05s; }
.hero-name     { animation: riseIn .9s var(--ease) both .16s; }
.hero-squiggle { animation: wipeIn 1s var(--ease) both .4s; }
.hero-role     { animation: riseIn .8s var(--ease) both .46s; }
.hero-photo    { animation: pillIn 1.1s var(--ease) both .24s; }
.hero-actions  { animation: riseIn .8s var(--ease) both .58s; }

.hero-stats .stat { animation: riseIn .8s var(--ease) both; }
.hero-stats .stat:nth-child(1) { animation-delay: .52s; }
.hero-stats .stat:nth-child(2) { animation-delay: .64s; }
.hero-stats .stat:nth-child(3) { animation-delay: .76s; }

/* sub-page headers get the same treatment */
.page-kicker { animation: riseIn .7s var(--ease) both .05s; }
.page-title  { animation: riseIn .8s var(--ease) both .16s; }
.page-lead   { animation: riseIn .8s var(--ease) both .3s; }
.back-link   { animation: riseIn .6s var(--ease) both; }

/* the CTA portrait drifts gently */
.cta-photo.is-visible { animation: floaty 6s ease-in-out 1s infinite; }

/* scroll reveals — direction varies by component */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.tl-item.reveal { transform: translateX(-26px); }
.tl-item.reveal.is-visible { transform: none; }
.projects-col-b .project-card.reveal { transform: translateY(46px); }
.projects-col-b .project-card.reveal.is-visible { transform: none; }

/* logo, nav and footer micro-interactions */
.brand-mark { transition: transform .35s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
.project-title a { transition: color .25s var(--ease); }
.project-card:hover .project-title a { color: var(--yellow); }
.lang-item { transition: border-color .3s var(--ease); }
.lang-item:hover { border-color: var(--teal); }
.chip { transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.chip:hover { background: var(--teal); color: var(--white); transform: translateY(-3px); }
.tag { transition: border-color .3s var(--ease), color .3s var(--ease); }
.tag:hover { border-color: var(--teal); color: var(--teal); }
.msg-card { transition: border-color .3s var(--ease), transform .3s var(--ease); }
.msg-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.steps li > span { transition: color .35s var(--ease); }
.steps li:hover > span { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .cta-photo.is-visible { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  .reviews-marquee { overflow-x: auto; }
}

@media (max-width: 640px) {
  .reviews-marquee {
    padding: 6px 0 14px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
  .reviews-track { gap: 18px; }
  .review-card { width: 262px; border-radius: 16px; padding: 24px 22px; }
  .stars { gap: 2px; margin-bottom: 14px; }
  .star { width: 15px; height: 15px; }
  .review-card blockquote { margin-bottom: 18px; font-size: 15px; line-height: 1.55; }
  .review-card figcaption strong { font-size: 17px; }
  .review-card figcaption span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}