/* ==========================================================================
   Web Design Newport - main stylesheet
   --------------------------------------------------------------------------
   1. Fonts          6. Header & menus      11. Process        16. Inner pages
   2. Tokens         7. Hero                12. Portfolio      17. Forms
   3. Base           8. Device mockups      13. Capabilities   18. Footer
   4. Layout         9. Services            14. FAQ            19. Motion
   5. Type & buttons 10. Why us             15. CTA            20. Utilities
   ========================================================================== */

/* 1. Fonts (self-hosted, latin subset) ------------------------------------ */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-grotesque-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/instrument-sans-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); }

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* Palette: Evergreen, Citron & Bone.
     Contrast (WCAG): brand on white 6.5:1 | citron on ink 13.2:1 | muted on paper 5.6:1
     | on-dark-muted on ink 8.4:1. Emerald is for large italic headline words only (4.2:1). */
  --ink: #0B1F1A;          /* deep evergreen: dark sections, dark text on citron */
  --ink-2: #112B24;        /* raised surface on dark */
  --forest: #0F3A2F;       /* lighter evergreen for feature panels (CTA block) */
  --brand: #136B50;        /* primary on light: buttons, links, icons */
  --brand-deep: #0D5340;   /* pressed / darker brand */
  --emerald: #13855E;      /* italic accent words on light backgrounds */
  --jade: #3FBF8A;         /* glows and gradient partner on dark */
  --citron: #CDF46B;       /* signature accent on dark: highlights, CTAs (with ink text) */
  --mint: #E2F1E8;         /* pale tint for icon tiles and soft panels */
  --paper: #F4F2EB;        /* warm bone page background */
  --paper-2: #EAE7DC;
  --white: #FFFFFF;
  --text: #12221D;
  --muted: #55635D;
  --line: #D8D4C6;
  --line-soft: #E6E3D8;
  --on-dark: #EEF4EF;
  --on-dark-muted: #A6BAB1;
  --line-dark: rgba(180, 225, 200, .15);
  --success: #137A4B;
  --error: #C2352B;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --fs-hero: clamp(2.6rem, 1.15rem + 5.7vw, 6.3rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.5vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.02rem + .3vw, 1.25rem);
  --fs-lead: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  --fs-small: .9rem;
  --fs-xs: .78rem;

  --gutter: clamp(16px, 4vw, 44px);
  --container: 1320px;
  --section-y: clamp(72px, 9vw, 136px);
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --shadow-1: 0 1px 2px rgba(11, 31, 26, .06), 0 8px 24px -12px rgba(11, 31, 26, .18);
  --shadow-2: 0 2px 6px rgba(11, 31, 26, .06), 0 30px 60px -24px rgba(11, 31, 26, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 84px;
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; color: inherit; text-wrap: balance; }
h3 { line-height: 1.18; letter-spacing: -.015em; }
h4, h5, h6 { line-height: 1.3; letter-spacing: -.01em; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--citron); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* Every dark surface gets a citron focus ring: brand green on evergreen would be under 3:1 */
.on-dark :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible,
.has-dark-hero .site-header:not(.is-scrolled) :focus-visible, .menu-open .site-header :focus-visible,
.page-hero--dark :focus-visible, .cta-band :focus-visible, .svc-panel--dark :focus-visible,
.tile--accent :focus-visible, .mega__aside :focus-visible { outline-color: var(--citron); }

.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 1000; background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* 4. Layout ---------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 880px); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; overflow-x: clip; }
.section--tight { padding-block: calc(var(--section-y) * .65); }
.section--white { background: var(--white); }
.section--paper-2 { background: var(--paper-2); }
/* Two neighbouring sections on the same background read as one space, so their paddings
   shouldn't stack: the first gives up most of its bottom padding, keeping the gap between
   their content at about one section's worth. (The second keeps its top padding, so
   in-page links still land with room above.) */
.section:not(.section--white, .section--dark, .section--paper-2):has(+ .section:not(.section--white, .section--dark, .section--paper-2)),
.section--white:has(+ .section--white), .section--paper-2:has(+ .section--paper-2) { padding-bottom: calc(var(--section-y) * .35); }
.section--dark, .on-dark { background: var(--ink); color: var(--on-dark); }
.section--dark, .on-dark { --muted: var(--on-dark-muted); --line: var(--line-dark); }
.cta-block__form, .mega__inner, .ui-card { --muted: #55635D; --line: #D8D4C6; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }

/* 5. Type & buttons -------------------------------------------------------- */
.display em, .section-title em, .page-title em, h1 em, h2 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.06em; line-height: .9;
  color: var(--emerald);
}
.on-dark h1 em, .on-dark h2 em, .section--dark h2 em, .section--dark .section-title em { color: var(--citron); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font: 600 var(--fs-xs)/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); /* 1.35: long labels that wrap on phones keep readable line spacing */
}
.eyebrow__num { flex-shrink: 0; white-space: nowrap; font-family: var(--font-display); letter-spacing: 0; color: var(--brand); font-weight: 700; }
.eyebrow__num::after { content: ''; display: inline-block; width: 22px; height: 1px; background: currentColor; margin-left: 10px; vertical-align: middle; opacity: .6; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }
.section--dark .eyebrow__num, .on-dark .eyebrow__num { color: var(--citron); }
.on-dark .eyebrow__dot { background: var(--citron); }

.section-title { font-size: var(--fs-h2); max-width: 17ch; }
.section-lead { font-size: var(--fs-lead); color: var(--muted); max-width: 38em; margin-top: 22px; line-height: 1.6; }
.section-head { margin-bottom: clamp(40px, 6vw, 80px); }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.section-head--split .section-lead { margin-top: 0; }
@media (max-width: 899px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
  .section-head--split .section-lead { margin-top: 22px; }
}
.section-head--center { text-align: center; }
.section-head--center .section-title, .section-head--center .section-lead { margin-inline: auto; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; }

.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--btn-bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); font: 600 1rem/1 var(--font-body); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-hover, var(--brand));
  transform: translateY(101%); transition: transform .45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, #fff); border-color: var(--btn-hover, var(--brand)); }
.btn i { font-size: .85em; transition: transform .35s var(--ease-out); }
.btn:hover i, .btn:focus-visible i { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn--primary { --btn-bg: var(--brand); --btn-hover: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: rgba(18, 34, 29, .25); --btn-hover: var(--ink); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-hover: var(--citron); --btn-hover-fg: var(--ink); }
.on-dark .btn--ghost, .section--dark .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); --btn-hover: #fff; --btn-hover-fg: var(--ink); }
/* On dark backgrounds the primary button is citron with evergreen text (13:1), so it stands out from the green */
.on-dark .btn--primary, .section--dark .btn--primary, .mobile-menu .btn--primary { --btn-bg: var(--citron); --btn-fg: var(--ink); --btn-hover: #fff; --btn-hover-fg: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .94rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--brand); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease-out);
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1.5px; }
.link-arrow i { font-size: .8em; transition: transform .3s var(--ease-out); }
.link-arrow:hover i { transform: translateX(4px); }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--citron); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  font: 500 var(--fs-xs)/1.2 var(--font-body); color: var(--muted); background: transparent;
}
.concept-note {
  display: inline-flex; align-items: center; gap: 8px; font: 500 .78rem/1.3 var(--font-body); color: var(--muted);
}
.concept-note i { color: var(--brand); font-size: .85em; }
.on-dark .concept-note { color: var(--on-dark-muted); }
.on-dark .concept-note i { color: var(--citron); }

.checklist { display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 6px; background: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(19, 107, 80, .25);
}
.checklist li::after {
  content: ''; position: absolute; left: 6px; top: calc(.3em + 4px); width: 6px; height: 9px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.section--dark .checklist li::before, .on-dark .checklist li::before { background: rgba(205, 244, 107, .12); box-shadow: inset 0 0 0 1px rgba(205, 244, 107, .3); }
.section--dark .checklist li::after, .on-dark .checklist li::after { border-color: var(--citron); }

/* 6. Header & menus -------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); color: var(--text);
  transition: background-color .35s, box-shadow .35s, color .35s;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; background: rgba(244, 242, 235, .86); backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); opacity: 0; transition: opacity .35s; border-bottom: 1px solid rgba(18, 34, 29, .08);
}
.site-header.is-scrolled::before { opacity: 1; }
.has-dark-hero .site-header:not(.is-scrolled) { color: var(--on-dark); }
.site-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; color: var(--ink); transition: transform .5s var(--ease-out); }
.brand__n { stroke: #fff; }
.brand__px { fill: var(--citron); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
/* On dark: citron tile, evergreen letter and pixel */
.has-dark-hero .site-header:not(.is-scrolled) .brand__mark, .brand--light .brand__mark, .menu-open .site-header .brand__mark { color: var(--citron); }
.has-dark-hero .site-header:not(.is-scrolled) .brand__n, .brand--light .brand__n, .menu-open .site-header .brand__n { stroke: var(--ink); }
.has-dark-hero .site-header:not(.is-scrolled) .brand__px, .brand--light .brand__px, .menu-open .site-header .brand__px { fill: var(--ink); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__small { font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin-bottom: 4px; }
.brand__name { font: 700 1.42rem/1 var(--font-display); letter-spacing: -.035em; }

.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; }
.primary-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; background: none;
  font: 500 .98rem/1 var(--font-body); text-decoration: none; color: inherit; border-radius: 999px;
}
.primary-nav__link i { font-size: .62rem; transition: transform .3s var(--ease); }
.primary-nav__link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.primary-nav__link:hover::after, .primary-nav__link[aria-current="page"]::after, .primary-nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
.has-mega .primary-nav__link::after { right: 30px; }
.has-mega.is-open .primary-nav__link i { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: calc(100% - 6px); padding-top: 8px;
  visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.has-mega.is-open .mega, .no-js .has-mega:hover .mega, .has-mega:focus-within .mega {
  visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
}
/* The services and the side panel settle in one after another as the menu opens */
.mega__list > li, .mega__aside { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .45s var(--ease-out); }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) :is(.mega__list > li, .mega__aside) { opacity: 1; transform: none; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__list > li:nth-child(2) { transition-delay: .03s; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__list > li:nth-child(3) { transition-delay: .06s; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__list > li:nth-child(4) { transition-delay: .09s; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__list > li:nth-child(5) { transition-delay: .12s; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__list > li:nth-child(6) { transition-delay: .15s; }
:is(.has-mega.is-open, .no-js .has-mega:hover, .has-mega:focus-within) .mega__aside { transition-delay: .12s; }
.mega__inner {
  display: grid; grid-template-columns: 1fr 300px; gap: 8px; padding: 10px; color: var(--text);
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-2); border: 1px solid var(--line-soft);
}
.mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega__link { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; text-decoration: none; transition: background-color .25s; }
.mega__link:hover, .mega__link:focus-visible, .mega__link[aria-current="page"] { background: var(--paper); }
.mega__icon {
  flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand);
  transition: background-color .3s, color .3s, transform .4s var(--ease-out);
}
.mega__link:hover .mega__icon { background: var(--brand); color: #fff; transform: rotate(-6deg); }
.mega__label { display: block; font: 600 1.02rem/1.3 var(--font-display); letter-spacing: -.01em; }
.mega__blurb { display: block; font-size: .88rem; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.mega__aside { background: var(--ink); color: var(--on-dark); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 12px;
  background-image: radial-gradient(120% 80% at 100% 0, rgba(25, 150, 105, .45), transparent 60%); }
.mega__kicker { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.mega__note { font-size: .92rem; color: var(--on-dark-muted); line-height: 1.55; }
.mega__aside .link-arrow { color: var(--citron); margin-top: auto; }

.site-header__actions { display: flex; align-items: center; gap: 18px; }
.header-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.header-phone i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; border: 1px solid currentColor; opacity: .85; }
.has-dark-hero .site-header:not(.is-scrolled) .header-cta, .menu-open .header-cta { --btn-bg: var(--citron); --btn-fg: var(--ink); --btn-hover: #fff; --btn-hover-fg: var(--ink); }

.menu-toggle { display: none; align-items: center; gap: 12px; padding: 10px 4px 10px 14px; border: 0; background: none; font-weight: 600; font-size: .95rem; }
.menu-toggle__icon { position: relative; width: 26px; height: 12px; }
.menu-toggle__icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: 10px; left: 8px; }
.menu-open .menu-toggle__icon i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .menu-toggle__icon i:last-child { top: 5px; left: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--on-dark); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 12px) 0 32px;
  background-image: radial-gradient(90% 60% at 100% 0, rgba(25, 150, 105, .35), transparent 60%);
}
.mobile-menu[hidden] { display: none; }
.menu-open .site-header { color: var(--on-dark); }
.menu-open .site-header::before { opacity: 0; }

.mobile-menu__inner { display: flex; flex-direction: column; min-height: 100%; gap: 32px; }
.mobile-menu__group { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; }
.mobile-menu__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.mobile-menu__services a { display: block; padding: 8px 0; text-decoration: none; color: var(--on-dark); font-weight: 500; }
.mobile-menu__main { margin-top: 18px; }
.mobile-menu__main a { display: block; padding: 6px 0; font: 600 clamp(2rem, 9vw, 3rem)/1.1 var(--font-display); letter-spacing: -.035em; text-decoration: none; color: var(--on-dark); }
.mobile-menu a[aria-current="page"] { color: var(--citron); }
.mobile-menu__foot { margin-top: auto; display: grid; gap: 14px; }
.mobile-menu__contact { display: flex; align-items: center; gap: 12px; color: var(--on-dark-muted); text-decoration: none; font-weight: 500; }
.mobile-menu__contact i { color: var(--citron); width: 18px; }

@media (max-width: 1180px) {
  .header-phone span { display: none; }
  .header-phone { gap: 0; }
}
@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .primary-nav, .header-phone { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; gap: 10px; }
}
@media (max-width: 479px) {
  .header-cta { display: none; }
  .brand__name { font-size: 1.25rem; }
  .brand__mark { width: 36px; height: 36px; }
}

/* 7. Hero ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--on-dark);
  padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 0;
}
.hero::before { /* faint layout grid, like a design file; the lines draw down on load */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(to right, rgba(205, 244, 107, .07) 1px, transparent 1px);
  background-size: calc((min(100vw - 2 * var(--gutter), var(--container))) / 6) 100%;
  background-position: max(var(--gutter), calc((100vw - var(--container)) / 2)) 0;
  mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%);
  transform-origin: top; animation: hero-grid 1.8s var(--ease-out) .1s both;
}
.hero::after { /* slow drifting light, lower left (z-index -1 sits above the hero background thanks to isolation) */
  content: ''; position: absolute; z-index: -1; left: -16vw; bottom: -24vw; width: 56vw; height: 56vw; max-width: 860px; max-height: 860px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(205, 244, 107, .11), rgba(63, 191, 138, .06) 55%, transparent 75%);
  animation: hero-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-grid { from { transform: scaleY(0); } }
@keyframes hero-drift { to { transform: translate3d(16vw, -10vw, 0) scale(1.2); } }
.hero.is-paused::after, .hero.is-paused .hero__pin::after, .hero.is-paused .hero__comment { animation-play-state: paused; }
.hero__glow {
  position: absolute; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; right: -18vw; top: -10vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(25, 150, 105, .55), rgba(19, 107, 80, .18) 55%, transparent 75%); filter: blur(10px);
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero .eyebrow { color: var(--on-dark-muted); }
.hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.038em; font-weight: 600; font-stretch: 94%; max-width: 12ch; padding-left: .02em; }
.hero__title em { display: inline-block; padding-right: .08em; }

/* Hand-drawn underline under "properly." (drawn in by main.js; fully drawn without JS) */
.hero__mark { position: relative; display: inline-block; }
.hero__scribble { position: absolute; left: -3%; bottom: -.2em; width: 106%; height: auto; overflow: visible; pointer-events: none; }
.hero__scribble path { fill: none; stroke: var(--citron); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9; }

/* Rotating sector word in the eyebrow */
.hero__eyebrow { align-items: flex-start; line-height: 1.5; }
.hero__eyebrow .eyebrow__dot { flex-shrink: 0; margin-top: .45em; }
.hero__eyebrow > span:last-child { min-width: 0; }
.rotator { display: inline-block; vertical-align: bottom; overflow: hidden; padding: .25em .12em; margin: -.25em -.12em; color: var(--citron); }
.rotator__word { display: inline-block; }

/* Soft light that follows the pointer (desktop only, positioned by main.js) */
.hero__spot {
  position: absolute; left: 0; top: 0; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(63, 191, 138, .2), rgba(19, 107, 80, .08) 55%, transparent 75%);
  opacity: 0; transition: opacity .8s var(--ease); will-change: transform;
}
.hero.is-pointer .hero__spot { opacity: 1; }
.hero__lead { font-size: var(--fs-lead); color: var(--on-dark-muted); max-width: 31em; margin-top: 28px; line-height: 1.6; }
.hero__actions { margin-top: 36px; }
.hero__call { margin-top: 26px; font-size: .95rem; color: var(--on-dark-muted); }
.hero__call a { color: var(--on-dark); font-weight: 600; white-space: nowrap; }
.hero__visual { position: relative; padding: 24px 0 64px; margin-right: calc(-1 * clamp(0px, 6vw, 120px)); }
.hero__browser { transform: rotate(-1.2deg); transform-origin: 60% 40%; }
.hero .hero__phone { position: absolute; width: clamp(130px, 15vw, 210px); left: -6%; bottom: 0; transform: rotate(3deg); }
.hero__comment {
  position: absolute; z-index: 3; right: 6%; top: -2%; max-width: 250px; display: flex; gap: 10px; align-items: flex-start;
  background: #fff; color: var(--text); padding: 12px 14px; border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow-2);
  font-size: .84rem; line-height: 1.4;
}
.hero__comment b { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.hero__avatar { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 .7rem/1 var(--font-body); }
.hero__pin {
  position: absolute; z-index: 3; right: calc(6% + 230px); top: 10%; width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; background: var(--emerald);
  box-shadow: 0 0 0 5px rgba(25, 150, 105, .3);
}
.hero__pin::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(63, 191, 138, .7); animation: hero-pulse 2.6s var(--ease-out) infinite; }
.hero__comment { animation: hero-float 5.5s ease-in-out infinite alternate; } /* CSS translate composes with GSAP's transform */
@keyframes hero-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
@keyframes hero-float { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Invitation to explore the mockup, shown once the intro has played (mouse users only) */
@media (hover: hover) and (pointer: fine) {
  .hero__browser::after {
    content: 'Hover to scroll'; position: absolute; left: 50%; translate: -50% 0; bottom: 14px; padding: 7px 12px; border-radius: 999px; pointer-events: none;
    background: rgba(11, 31, 26, .8); color: #fff; font: 600 .72rem/1 var(--font-body); letter-spacing: .02em;
    opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease-out);
  }
  .hero.is-ready .hero__browser::after { opacity: 1; transform: none; }
  .hero.is-ready .hero__browser:hover::after { opacity: 0; transform: translateY(6px); }
}
.hero__note { position: absolute; right: calc(clamp(0px, 6vw, 120px) + 8px); bottom: 18px; display: flex; align-items: center; gap: 12px; }
/* Pause control for the looping hero motion (added by main.js) */
.hero__pause {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24); background: transparent; color: var(--on-dark); font-size: .62rem;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.hero__pause:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }

/* Design-review demo over the hero screenshot (built by main.js): a collaborator's cursor drags selections */
.hero-demo { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .4s var(--ease) 3s; }
@media (hover: hover) { .hero__browser:hover .hero-demo { opacity: 0; transition-delay: 0s; } } /* out of the way while the visitor scrolls the screenshot */
.hero-demo__box { position: absolute; opacity: 0; border: 1.5px solid var(--brand); background: rgba(19, 107, 80, .07); border-radius: 2px; }
.hero-demo__box i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--brand); border-radius: 1.5px; }
.hero-demo__box i:nth-of-type(1) { left: -4px; top: -4px; }
.hero-demo__box i:nth-of-type(2) { right: -4px; top: -4px; }
.hero-demo__box i:nth-of-type(3) { left: -4px; bottom: -4px; }
.hero-demo__box i:nth-of-type(4) { right: -4px; bottom: -4px; }
.hero-demo__tag { position: absolute; left: -1.5px; bottom: calc(100% + 6px); padding: 3px 7px; border-radius: 4px; background: var(--brand); color: #fff; font: 600 .66rem/1.2 var(--font-body); white-space: nowrap; }
.hero-demo__cursor { position: absolute; left: 80%; top: 20%; margin: -2px 0 0 -2px; opacity: 0; transform-origin: 2px 2px; }
.hero-demo__cursor svg { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(11, 31, 26, .35)); }
.hero-demo__cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.hero-demo__name {
  position: absolute; left: 16px; top: 19px; padding: 4px 9px; border-radius: 999px 999px 999px 4px; background: var(--citron); color: var(--ink);
  font: 600 .66rem/1.2 var(--font-body); white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(11, 31, 26, .45);
}
.hero-demo__click { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.hero__strip {
  position: relative; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero__strip li { padding: 26px 24px 30px 0; display: flex; gap: 14px; align-items: flex-start; font-size: .95rem; color: var(--on-dark-muted); line-height: 1.45; transition: color .3s var(--ease); }
.hero__strip li + li { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.hero__strip i { flex-shrink: 0; width: 16px; text-align: center; color: var(--citron); margin-top: 3px; transition: transform .45s var(--ease-out); } /* fixed width: icons differ in width, the text after them shouldn't */
.hero__strip li:hover { color: var(--on-dark); }
.hero__strip li:hover i { transform: translateY(-3px) scale(1.15); }
.hero__strip strong { display: block; color: var(--on-dark); font-weight: 600; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__title { max-width: 11ch; }
  .hero__visual { margin-right: 0; max-width: 720px; padding-top: 12px; }
  .hero .hero__phone { left: auto; right: -2%; }
  .hero__note { right: auto; left: 0; bottom: 8px; }
  .hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__strip li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__strip li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 599px) {
  .hero__comment { position: relative; right: auto; top: auto; margin: 0 0 18px auto; max-width: 260px; }
  .hero__pin { display: none; }
  .hero .hero__phone { width: 34%; bottom: 26px; }
  .hero__strip { grid-template-columns: minmax(0, 1fr); }
  .hero__strip li, .hero__strip li + li { padding: 18px 0; border-left: 0; }
  .hero__strip li + li { border-top: 1px solid var(--line-dark); }
}

/* 8. Device mockups -------------------------------------------------------- */
.browser {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-2);
  border: 1px solid rgba(11, 31, 26, .08);
}
.on-dark .browser, .section--dark .browser { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.browser__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #F1F0EC; border-bottom: 1px solid #E3E1DA; }
.browser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9D6CD; }
.browser__dots i:first-child { background: #F0857A; }
.browser__dots i:nth-child(2) { background: #F3C566; }
.browser__dots i:nth-child(3) { background: #7FCB8C; }
.browser__url { /* a centred block (not flex), so a label too long for a small mockup ends in an ellipsis instead of being cut at both ends */
  flex: 1 1 auto; max-width: 340px; margin-inline: auto; height: 24px; border-radius: 7px; background: #fff; display: block; text-align: center;
  font: 500 .72rem/24px var(--font-body); color: #6B736F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px;
}
.browser__url i { font-size: .62rem; color: #9BA39F; margin-right: 7px; }
.browser__spacer { flex: 0 0 48px; }
.browser__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f4f4; }
.browser__screen img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.browser__screen--scroll img { transition: transform 3.2s var(--ease); will-change: transform; }
.browser__screen--scroll:hover img, a:hover .browser__screen--scroll img, a:focus-visible .browser__screen--scroll img { transform: translateY(calc(-100% + var(--screen-h, 0px))); }

.phone { width: 100%; }
.phone__frame {
  position: relative; padding: 7px; border-radius: 34px; background: #0A1A15;
  box-shadow: 0 0 0 1.5px #24423A, 0 40px 70px -30px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.phone__notch { position: absolute; z-index: 2; top: 13px; left: 50%; width: 30%; height: 16px; border-radius: 999px; background: #0A1A15; transform: translateX(-50%); }
.phone__screen { border-radius: 27px; overflow: hidden; aspect-ratio: 390 / 820; background: #fff; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mock-caption { margin-top: 14px; }

.compare { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #ddd; box-shadow: var(--shadow-2); user-select: none; touch-action: pan-y; }
.compare__layer { position: absolute; inset: 0; }
.compare__layer img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 26, .15); pointer-events: none; }
.compare__handle {
  position: absolute; z-index: 2; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-2); pointer-events: none; transition: transform .25s var(--ease-out);
}
.compare:hover .compare__handle { transform: scale(1.08); }
.compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible ~ .compare__handle, .compare:focus-within .compare__handle { outline: 3px solid var(--brand); outline-offset: 3px; }
.compare__tag { position: absolute; z-index: 2; top: 14px; padding: 6px 12px; border-radius: 999px; font: 600 .75rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.compare__tag--before { left: 14px; background: rgba(11, 31, 26, .78); color: #fff; }
.compare__tag--after { right: 14px; background: var(--brand); color: #fff; }

/* Small floating UI cards used beside mockups */
.ui-card { background: #fff; color: var(--text); border-radius: 16px; box-shadow: var(--shadow-2); padding: 18px; font-size: .86rem; line-height: 1.45; border: 1px solid var(--line-soft); }
.ui-card__title { font: 600 .95rem/1.2 var(--font-display); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ui-card__title i { color: var(--brand); }
.ui-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); color: var(--muted); }
.ui-card__row b { color: var(--text); font-weight: 600; }
.ui-field { display: block; margin-top: 10px; }
.ui-field small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.ui-field span { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); background: var(--paper); }
.ui-btn { display: block; margin-top: 12px; padding: 10px; border-radius: 8px; background: var(--brand); color: #fff; text-align: center; font-weight: 600; }

.code-card {
  font: 500 .82rem/1.75 ui-monospace, 'Cascadia Code', Consolas, monospace; background: #06140F; color: #D3E5DA; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(205, 244, 107, .12); overflow-x: auto; white-space: pre; tab-size: 2;
}
@media (max-width: 419px) { .code-card { font-size: .7rem !important; padding: 18px; } }
.code-card .c-k { color: #CDF46B; } .code-card .c-s { color: #9BE3B9; } .code-card .c-c { color: #6F8C80; } .code-card .c-a { color: #F7C97E; }
/* Typed code (main.js wraps each line and reveals it a character at a time); the caret blinks briefly, then rests */
.code-line { display: inline-block; }
.code-card.is-typed .code-line:last-child::after {
  content: ''; display: inline-block; width: .55em; height: 1.15em; margin-left: 3px; vertical-align: text-bottom; background: var(--citron);
  animation: caret 1s steps(1) 4;
}
@keyframes caret { 50% { opacity: 0; } }

/* 9. Services -------------------------------------------------------------- */
.svc { display: grid; gap: clamp(64px, 9vw, 132px); }
.svc-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.svc-row__copy { grid-column: 1 / span 5; }
.svc-row__media { grid-column: 6 / -1; position: relative; }
.svc-row--reverse .svc-row__copy { grid-column: 8 / -1; grid-row: 1; }
.svc-row--reverse .svc-row__media { grid-column: 1 / span 7; grid-row: 1; }
.svc__num { display: block; font: 600 .82rem/1 var(--font-display); color: var(--brand); letter-spacing: .02em; margin-bottom: 18px; }
.svc__num span { color: var(--muted); }
.svc__title { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.7rem); line-height: 1.06; letter-spacing: -.03em; }
.svc__text { margin-top: 18px; color: var(--muted); max-width: 34em; }
.svc .checklist { margin-top: 24px; font-size: .97rem; }
.svc .link-arrow { margin-top: 28px; }
.svc-row--web .svc-row__media { margin-right: calc(-1 * clamp(0px, 5vw, 96px)); }
.svc-row--web .ui-card { position: absolute; left: -7%; bottom: -10%; width: 240px; }

.svc-pair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: start; }
.svc-pair--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.svc-panel { position: relative; border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 48px); overflow: hidden; background: var(--white); border: 1px solid var(--line-soft); }
.svc-panel--dark { background: var(--ink); color: var(--on-dark); border-color: transparent; --muted: var(--on-dark-muted);
  background-image: radial-gradient(90% 70% at 100% 100%, rgba(25, 150, 105, .45), transparent 65%); }
.svc-panel--dark .svc__num { color: var(--citron); }
.svc-panel--dark .link-arrow { color: var(--citron); }
.svc-panel--dark .checklist li::before { background: rgba(205, 244, 107, .12); box-shadow: inset 0 0 0 1px rgba(205, 244, 107, .3); }
.svc-panel--dark .checklist li::after { border-color: var(--citron); }
.svc-panel--offset { margin-top: clamp(0px, 8vw, 120px); }
.svc-panel__media { margin-top: 36px; position: relative; }
.svc-panel .code-card { margin-top: 36px; font-size: .78rem; }
.svc-shop { display: grid; grid-template-columns: 1fr 34%; gap: 18px; align-items: end; }
.svc-shop .phone { transform: translateY(18px); }

.svc-row--wp .ui-card { position: absolute; right: -4%; top: 12%; width: 230px; }
.svc-row--wp .ui-card .ui-btn { background: var(--ink); }
/* Hovering a mockup lifts it off the page; the floating card tips towards you (translate/rotate compose with the scroll parallax) */
.svc-row__media .browser, .svc-panel__media .browser { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.svc-row__media:hover .browser, .svc-panel__media:hover .browser { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(11, 31, 26, .06), 0 44px 72px -28px rgba(11, 31, 26, .42); }
.svc-row .ui-card { transition: translate .6s var(--ease-out), rotate .6s var(--ease-out); }
.svc-row__media:hover .ui-card { translate: 0 -8px !important; rotate: -1.5deg !important; } /* GSAP writes inline translate/rotate: none when it animates the card */

.type-specimen { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.type-specimen__card { border-radius: 14px; padding: 18px; background: var(--paper); border: 1px solid var(--line-soft); }
.type-specimen__card--dark { background: #1B1A17; color: #F1EBE1; border-color: transparent; }
.type-specimen__big { font: 400 2.8rem/1 var(--font-serif); font-style: italic; color: #C99D6B; }
.type-specimen__card small { display: block; margin-top: 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.swatches { display: flex; gap: 8px; margin-top: 4px; }
.swatches i { flex: 1; height: 44px; border-radius: 10px; }

@media (max-width: 1023px) {
  .svc-row, .svc-row--reverse { grid-template-columns: minmax(0, 1fr); }
  .svc-row__copy, .svc-row__media, .svc-row--reverse .svc-row__copy, .svc-row--reverse .svc-row__media { grid-column: 1; grid-row: auto; }
  .svc-row--web .svc-row__media { margin-right: 0; }
  .svc-pair, .svc-pair--flip { grid-template-columns: minmax(0, 1fr); }
  .svc-panel--offset { margin-top: 0; }
}
@media (max-width: 599px) {
  .svc-row--web .ui-card, .svc-row--wp .ui-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -24px 12px 0; }
  .svc-shop { grid-template-columns: 1fr 38%; }
}

/* 10. Why us --------------------------------------------------------------- */
.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.why__media { position: relative; margin-top: 40px; }
.why__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.4; }
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.why__inset { position: absolute; width: 44%; right: -8%; bottom: -10%; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--white); box-shadow: var(--shadow-2); transform: rotate(2.5deg); }
.why__inset img { aspect-ratio: 1; object-fit: cover; }
.why__caption { margin-top: 18px; font-size: .88rem; color: var(--muted); max-width: 26em; padding-right: 30%; }
.why__list { counter-reset: why; }
.why__item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 8px 20px; padding: 34px 0; border-top: 1px solid var(--line); }
.why__item:last-child { border-bottom: 1px solid var(--line); }
/* A brand rule draws across the top of each point as it arrives */
.why__item::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--brand); transform-origin: left; transition: transform 1.3s var(--ease-out) .15s; }
.motion .why__item:not(.is-in)::after { transform: scaleX(0); }
.why__item::before { counter-increment: why; content: counter(why, decimal-leading-zero); font: 600 .9rem/1.9 var(--font-display); color: var(--brand); }
.why__item h3 { font-size: var(--fs-h3); grid-column: 2; }
.why__item p { grid-column: 2; color: var(--muted); max-width: 36em; }

@media (max-width: 1023px) {
  .why { grid-template-columns: minmax(0, 1fr); }
  .why__aside { position: static; }
  .why__media { max-width: 560px; }
}
@media (max-width: 599px) {
  .why__item { grid-template-columns: minmax(0, 1fr); }
  .why__item h3, .why__item p { grid-column: 1; }
  .why__inset { right: -2%; }
  .why__caption { padding-right: 0; margin-top: 64px; }
}

/* 11. Process -------------------------------------------------------------- */
.process { position: relative; overflow: hidden; }
.process::before { content: ''; position: absolute; left: -10%; bottom: -30%; width: 60vw; height: 60vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(19, 107, 80, .25), transparent 70%); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); counter-reset: step; }
.step { position: relative; padding: 34px 0 48px; }
.step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-dark); }
.step__bar { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--citron), var(--jade)); transform-origin: left; transform: scaleX(.12); }
.reduced-motion .step__bar, .no-anim .step__bar, .no-js .step__bar { transform: none; }
.step__num { display: block; font: 600 clamp(3rem, 2rem + 3vw, 4.6rem)/1 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(205, 244, 107, .55); margin-bottom: 22px;
  /* outlined by default; main.js grows this fill with the step's rule as you scroll */
  background: linear-gradient(90deg, var(--citron), var(--jade)) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.step h3 { font-size: var(--fs-h3); color: var(--on-dark); }
.step p { margin-top: 12px; color: var(--on-dark-muted); font-size: .98rem; }
.step__out { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .82rem; color: var(--citron); font-weight: 600; }
.step__out::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.process__foot { position: relative; margin-top: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.process__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.process__photo img { width: 100%; height: 100%; object-fit: cover; }
.process__quote { font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--on-dark); }
.process__quote em { font-family: var(--font-serif); font-style: italic; color: var(--citron); }
.process__quote + p { margin-top: 18px; color: var(--on-dark-muted); }

@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process__foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .steps { grid-template-columns: minmax(0, 1fr); } .step { padding-bottom: 36px; } }

/* 12. Portfolio ------------------------------------------------------------ */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); }
.work-card { grid-column: span 6; text-decoration: none; color: inherit; display: block; }
.work-card:nth-child(4n+1) { grid-column: 1 / span 7; }
.work-card:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: clamp(0px, 10vw, 140px); }
.work-card:nth-child(4n+3) { grid-column: 1 / span 5; }
.work-card:nth-child(4n+4) { grid-column: 6 / span 7; }
.work-card .browser { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.work-card:hover .browser, .work-card:focus-visible .browser { transform: translateY(-6px); }
.work-card__meta { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 20px; flex-wrap: wrap; }
.work-card__title { font: 600 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.work-card__title i { font-size: .6em; margin-left: 8px; color: var(--brand); transition: transform .35s var(--ease-out); display: inline-block; }
.work-card:hover .work-card__title i { transform: translate(3px, -3px); }
.work-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.work-card__text { margin-top: 8px; color: var(--muted); font-size: .97rem; max-width: 36em; }
.work-note { display: flex; gap: 14px; align-items: flex-start; max-width: 40em; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px dashed var(--line); color: var(--muted); font-size: .95rem; }
.work-note i { color: var(--brand); margin-top: 4px; }
.work-foot { margin-top: clamp(48px, 6vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

@media (max-width: 899px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-card, .work-card:nth-child(n) { grid-column: 1; margin-top: 0; }
}

/* 13. Capabilities --------------------------------------------------------- */
.spec { border-top: 1px solid var(--text); }
.spec__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.spec__label { display: flex; align-items: center; gap: 12px; font: 600 var(--fs-h4)/1.2 var(--font-display); letter-spacing: -.01em; align-self: start; }
.spec__label i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--mint); color: var(--brand); font-size: .9rem; flex-shrink: 0;
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .2s; }
.motion .spec__row:not(.is-in) .spec__label i { transform: scale(.4) rotate(-20deg); }
.spec__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.spec__items li { position: relative; padding-left: 20px; color: var(--muted); }
.spec__items li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--brand); }
.spec__items strong { color: var(--text); font-weight: 600; }
.spec-callout { margin-top: 40px; display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radius); background: var(--paper); }
.spec-callout p { max-width: 46em; }
.spec-callout strong { font-family: var(--font-display); font-size: 1.15rem; display: block; margin-bottom: 4px; }

@media (max-width: 767px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .spec__items { grid-template-columns: minmax(0, 1fr); }
}

/* 14. FAQ ------------------------------------------------------------------ */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-layout__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.faq-help { margin-top: 32px; padding: 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft); }
.faq-help p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.faq-help strong { color: var(--text); display: block; font: 600 1.1rem/1.3 var(--font-display); margin-bottom: 6px; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__title { font: 600 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.35 var(--font-display); letter-spacing: -.012em; transition: color .25s; }
.faq__q:hover .faq__title { color: var(--brand); }
.faq__icon { position: relative; flex: 0 0 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease-out); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--brand); }
.faq__item:not([open]) .faq__q:hover .faq__icon { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { overflow: hidden; }
.faq__a-inner { padding: 0 64px 28px 0; color: var(--muted); }
.faq__a-inner p + p { margin-top: 12px; }
.faq__a-inner a { color: var(--brand); font-weight: 500; }
.section--dark .faq__item[open] .faq__icon { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 1023px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout__aside { position: static; }
}
@media (max-width: 599px) { .faq__a-inner { padding-right: 0; } }

/* 15. CTA ------------------------------------------------------------------ */
.cta-block {
  position: relative; overflow: hidden; border-radius: clamp(20px, 3vw, 36px); padding: clamp(32px, 6vw, 88px);
  background: var(--forest); color: var(--on-dark);
  background-image: radial-gradient(70% 90% at 0% 0%, rgba(63, 191, 138, .32), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(205, 244, 107, .16), transparent 60%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start;
}
.cta-block .section-title { color: #fff; }
.cta-block .section-lead { color: #C6DBD0; }
.cta-block__contacts { margin-top: 36px; display: grid; gap: 14px; }
.cta-block__contacts > a, .cta-block__contacts > span { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-weight: 500; line-height: 1.35; }
.cta-block__contacts > a:hover { text-decoration: underline; }
.cta-block__contacts i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--citron); flex-shrink: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease-out); }
.cta-block__contacts > a:hover i, .cta-block__contacts > a:focus-visible i { background: var(--citron); color: var(--ink); transform: rotate(-10deg) scale(1.06); }
.cta-block__contacts small { display: block; color: #B3CBBF; font-size: .8rem; font-weight: 500; }
.cta-block__form { background: var(--white); color: var(--text); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 40px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.cta-block__form .btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; --btn-hover: var(--ink); --btn-hover-fg: #fff; }
/* Light panels sitting inside dark areas go back to the brand-green ring */
.cta-block__form :focus-visible, .has-dark-hero .site-header:not(.is-scrolled) .mega__list :focus-visible { outline-color: var(--brand); }
.cta-block__form-title { font: 600 1.4rem/1.2 var(--font-display); letter-spacing: -.02em; margin-bottom: 6px; }
.cta-block__form-intro { color: var(--muted); font-size: .95rem; margin-bottom: 24px; }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: clamp(32px, 5vw, 64px); border-radius: clamp(20px, 3vw, 32px);
  background: var(--ink); color: var(--on-dark); background-image: radial-gradient(60% 120% at 100% 0, rgba(25, 150, 105, .5), transparent 60%); }
.cta-band h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); max-width: 18ch; }
.cta-band h2 em { color: var(--citron); }
.cta-band p { color: var(--on-dark-muted); margin-top: 12px; max-width: 36em; }

@media (max-width: 1023px) { .cta-block { grid-template-columns: minmax(0, 1fr); } }

/* 16. Inner pages ---------------------------------------------------------- */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.page-hero--dark { background: var(--ink); color: var(--on-dark); --muted: var(--on-dark-muted); }
.page-hero--dark::before { content: ''; position: absolute; width: 60vw; height: 60vw; right: -15vw; top: -20vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(25, 150, 105, .5), rgba(19, 107, 80, .15) 55%, transparent 75%);
  animation: page-glow 2s var(--ease-out) both; } /* the glow blooms in once on load */
@keyframes page-glow { from { opacity: 0; transform: scale(.7); } }
.page-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero__grid--wide-copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.page-title { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.04em; font-stretch: 95%; max-width: 15ch; }
.page-hero__lead { margin-top: 24px; font-size: var(--fs-lead); color: var(--muted); max-width: 34em; line-height: 1.6; }
.page-hero .btn-row { margin-top: 34px; }
.page-hero__media { position: relative; }
.page-hero__photo { border-radius: var(--radius-lg); overflow: hidden; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--dark .eyebrow { color: var(--on-dark-muted); }
@media (max-width: 1023px) { .page-hero__grid, .page-hero__grid--wide-copy { grid-template-columns: minmax(0, 1fr); } }

.breadcrumbs { margin-bottom: 28px; font-size: .86rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: '/'; opacity: .5; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 500; }
.page-hero--dark .breadcrumbs [aria-current] { color: var(--on-dark); }
.page-hero--dark .breadcrumbs a:hover { color: var(--citron); }

/* Two-column text + media block */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.split--reverse > :first-child { order: 2; }
.split__media { position: relative; }
/* The shorter column of a two-column block can stay in view while the longer one scrolls past */
@media (min-width: 900px) { .split--top > .split__sticky { position: sticky; top: calc(var(--header-h) + 32px); } }
.split__photo { border-radius: var(--radius-lg); overflow: hidden; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
.split h2:not(.statement) { font-size: var(--fs-h2); }
.split h2 + p, .split h2 + .lead { margin-top: 22px; }
.prose-flow > * + * { margin-top: 18px; }
.prose-flow p { color: var(--muted); }
.prose-flow h3 { margin-top: 32px; font-size: var(--fs-h3); }
.prose-flow a, .lead a, .spec__items a, .tile p a, .numbered p a, .section-lead a { color: var(--brand); font-weight: 500; }
.on-dark .prose-flow a, .on-dark .lead a, .on-dark .numbered p a, .on-dark .section-lead a, .tile--accent p a { color: var(--citron); }
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
}

/* Feature tiles: deliberately varied sizes, not a uniform card grid */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.tile { grid-column: span 2; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
/* Icons spring in as each tile is revealed, and tip slightly on hover */
.tile__icon { transition: transform .5s var(--ease-out), scale .7s cubic-bezier(.34, 1.56, .64, 1) .2s, rotate .7s cubic-bezier(.34, 1.56, .64, 1) .2s; }
.motion .tile:not(.is-in) .tile__icon { scale: .5; rotate: -15deg; }
.tile:hover .tile__icon { transform: translateY(-2px) rotate(-6deg); }
.tile--wide { grid-column: span 3; }
.tile--accent { background: var(--ink); color: var(--on-dark); border-color: transparent; --muted: var(--on-dark-muted); background-image: radial-gradient(90% 90% at 100% 0, rgba(25, 150, 105, .45), transparent 60%); }
.tile--tint { background: var(--mint); border-color: transparent; }
.tile__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--mint); color: var(--brand); margin-bottom: 22px; }
.tile--tint .tile__icon { background: #fff; }
.tile--accent .tile__icon { background: rgba(205, 244, 107, .14); color: var(--citron); }
.tile h3 { font-size: var(--fs-h4); }
.tile p { margin-top: 10px; color: var(--muted); font-size: .97rem; }
.section--dark .tile { background: var(--ink-2); border-color: var(--line-dark); }
.section--dark .tile__icon { background: rgba(205, 244, 107, .12); color: var(--citron); }
@media (max-width: 1023px) { .tile, .tile--wide { grid-column: span 3; } }
@media (max-width: 599px) { .tiles { grid-template-columns: minmax(0, 1fr); } .tile, .tile--wide { grid-column: 1; } }

/* Numbered list for page-specific processes */
.numbered { counter-reset: n; display: grid; gap: 0; }
.numbered > li { position: relative; counter-increment: n; display: grid; grid-template-columns: 72px 1fr; gap: 6px 20px; padding: 28px 0; border-top: 1px solid var(--line); }
/* With motion, the top rule is redrawn as a line in the same colour that sweeps across as each step arrives */
.motion .numbered > li { border-top-color: transparent; }
.motion .numbered > li::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform-origin: left; transition: transform 1.1s var(--ease-out) .1s; }
.motion .numbered > li:not(.is-in)::after { transform: scaleX(0); }
.numbered > li:last-child { border-bottom: 1px solid var(--line); }
.numbered > li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font: 600 1.8rem/1 var(--font-display); color: var(--brand); letter-spacing: -.03em; }
.numbered h3 { font-size: var(--fs-h4); }
.numbered p { color: var(--muted); }
.section--dark .numbered > li::before { color: var(--citron); }

/* Fit / not a fit */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fit__col { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft); }
.fit__col--no { background: transparent; border-style: dashed; border-color: var(--line); }
.fit__col h3 { font-size: var(--fs-h4); margin-bottom: 18px; display: flex; gap: 10px; align-items: center; }
.fit__col h3 i { color: var(--brand); }
.fit__col--no h3 i { color: var(--muted); }
.fit__col--no .checklist li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.fit__col--no .checklist li::after { border: 0; width: 8px; height: 1.5px; background: var(--muted); transform: none; left: 5px; top: calc(.3em + 8px); }
@media (max-width: 767px) { .fit { grid-template-columns: minmax(0, 1fr); } }

/* Statement / pull quote (not a testimonial) */
.statement { font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.8rem)/1.22 var(--font-display); letter-spacing: -.025em; max-width: 26ch; }
.statement em { font-family: var(--font-serif); font-style: italic; color: var(--emerald); }
.section--dark .statement em { color: var(--citron); }

/* Related services strip */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.related__link { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft); text-decoration: none; transition: border-color .3s, translate .5s var(--ease-out); }
/* The lift uses translate, not transform: the scroll reveal leaves an inline transform (and translate: none) on each card */
.related__link:hover, .related__link:focus-visible { border-color: var(--brand); translate: 0 -3px !important; }
.related__link > i.fa-solid:first-child { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand);
  transition: background-color .3s, color .3s, transform .5s var(--ease-out); }
.related__link:hover > i.fa-solid:first-child, .related__link:focus-visible > i.fa-solid:first-child { background: var(--brand); color: #fff; transform: rotate(-6deg); }
/* "Find out more": sized to its text (so the underline sits under the words, not across the card),
   kept at the foot of the card so the links line up, and animated whenever the card is hovered or focused */
.related__link .link-arrow { align-self: flex-start; margin-top: auto; font-size: .94rem; }
.related__link:hover .link-arrow, .related__link:focus-visible .link-arrow { background-size: 100% 1.5px; }
.related__link:hover .link-arrow i, .related__link:focus-visible .link-arrow i { transform: translateX(4px); }

/* Pointer spotlight on cards: main.js sets --mx/--my; the light sits above the card's background, below its content */
.tile, .related__link, .contact-card { position: relative; isolation: isolate; }
.tile::before, .related__link::before, .contact-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(19, 107, 80, .08), transparent 70%);
}
.tile--accent::before, .section--dark .tile::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 244, 107, .1), transparent 70%); }
@media (hover: hover) and (pointer: fine) { .tile:hover::before, .related__link:hover::before, .contact-card:hover::before { opacity: 1; } }
.related__link strong { font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -.01em; }
.related__link > span:not(.link-arrow) { color: var(--muted); font-size: .94rem; } /* the description only, not the arrow link */
@media (max-width: 899px) {
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd card out spans the row rather than leaving a hole */
}
@media (max-width: 599px) { .related { grid-template-columns: minmax(0, 1fr); } }

/* Long-form legal text */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: .92rem; }
.legal__toc p { font-weight: 600; margin-bottom: 12px; font-family: var(--font-display); }
.legal__toc ol { padding-left: 1.6em; display: grid; gap: 8px; color: var(--muted); } /* room for two-digit numbers inside the column */
.legal__toc a { text-decoration: none; }
.legal__toc a:hover { color: var(--brand); text-decoration: underline; }
.legal__toc a { transition: color .25s; }
.legal__toc a.is-active { color: var(--brand); } /* the section being read (main.js) */
.prose { max-width: 46em; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin: 48px 0 16px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin: 28px 0 10px; }
.prose p, .prose li { color: #3A4943; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 14px 0; display: grid; gap: 8px; }
.prose a { color: var(--brand); }
.prose .updated { display: inline-block; margin-bottom: 28px; font-size: .9rem; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-display); font-weight: 600; background: var(--white); }
@media (max-width: 899px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal__toc { position: static; padding: 20px; background: var(--white); border-radius: var(--radius); } }

/* Contact page */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft); text-decoration: none; transition: border-color .3s; }
a.contact-card:hover { border-color: var(--brand); }
.contact-card i { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--mint); color: var(--brand); flex-shrink: 0;
  transition: background-color .3s, color .3s, transform .5s var(--ease-out); }
a.contact-card:hover i, a.contact-card:focus-visible i { background: var(--brand); color: #fff; transform: rotate(-6deg); }
.contact-card h2, .contact-card h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.contact-card p { color: var(--muted); font-size: .95rem; margin-top: 2px; }
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 48px); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); }
@media (max-width: 1023px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

/* Portfolio filter */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }
.filter__btn { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 500; font-size: .94rem; transition: background-color .25s, color .25s, border-color .25s; }
.filter__btn:hover { border-color: var(--text); }
.filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.work-card.is-hidden { display: none; }

/* 17. Forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: grid; gap: 7px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field__label { font-weight: 600; font-size: .93rem; }
.field__req { color: var(--error); }
.field__opt { color: var(--muted); font-weight: 400; }
.field__input {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper);
  color: var(--text); font-size: 1rem; line-height: 1.4; transition: border-color .2s, background-color .2s, box-shadow .2s; appearance: none;
}
textarea.field__input { min-height: 140px; resize: vertical; }
.field__input::placeholder { color: #66706B; }
.field__input:hover { border-color: #BDB9AC; }
.field__input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(19, 107, 80, .15); }
.field__select { position: relative; }
.field__select::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__select select { padding-right: 44px; cursor: pointer; }
.field__hint { font-size: .84rem; color: var(--muted); }
.field__error { font-size: .86rem; font-weight: 500; color: var(--error); display: none; }
.field.has-error .field__input { border-color: var(--error); background: #FFF7F6; }
.field.has-error .field__error { display: flex; gap: 6px; align-items: center; }
.field.has-error .field__error::before { content: '!'; flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--error); color: #fff; font: 700 .7rem/16px var(--font-body); text-align: center; }
.field-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-note { font-size: .86rem; color: var(--muted); max-width: 30em; }
.form-note a { color: var(--brand); }
.form-alert { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; font-size: .95rem; background: #FDEDEB; color: #8E2219; border: 1px solid #F3C4BE; }
.form-alert a { color: inherit; font-weight: 600; }
.btn--submit .btn__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn--submit.is-loading { pointer-events: none; }
.btn--submit.is-loading .btn__spinner { display: inline-block; }
.btn--submit.is-loading i { display: none; }
.form-success { text-align: left; padding: 8px 0; }
.form-success:focus { outline: none; }
.form-success__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #E3F4EB; color: var(--success); font-size: 1.3rem; margin-bottom: 18px; }
.form-success__title { font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; margin-bottom: 8px; }
.form-success p { color: var(--muted); }
.form-success a { color: var(--brand); font-weight: 600; }
.enquiry-form.is-sent .form-grid, .enquiry-form.is-sent .form-foot, .enquiry-form.is-sent .form-alert { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 599px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-foot .btn { width: 100%; } }

/* 18. Footer --------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding-top: clamp(64px, 8vw, 120px); }
.footer-lead { padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line-dark); }
.footer-lead__kicker { color: var(--on-dark-muted); font-size: var(--fs-lead); }
.footer-lead__line { font: 600 clamp(2.6rem, 1.4rem + 5.5vw, 6.2rem)/.98 var(--font-display); letter-spacing: -.045em; margin-top: 10px; }
.footer-lead__line em { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--citron); }
.footer-lead__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.footer-lead__mail { font: 500 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.3 var(--font-body); color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(205, 244, 107, .5); text-underline-offset: .25em; word-break: break-word; }
.footer-lead__mail:hover { text-decoration-color: var(--citron); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding: clamp(48px, 6vw, 72px) 0; }
.footer-brand p { margin-top: 20px; color: var(--on-dark-muted); font-size: .95rem; max-width: 30em; }
.footer-col__title { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-col a { color: var(--on-dark); text-decoration: none; font-size: .96rem; }
.footer-col a:hover, .footer-col a[aria-current="page"] { color: var(--citron); text-decoration: underline; }
.footer-col--contact address { display: grid; gap: 14px; font-size: .95rem; }
.footer-col--contact a, .footer-col--contact span { display: flex; gap: 12px; align-items: flex-start; color: var(--on-dark); line-height: 1.45; }
.footer-col--contact i { color: var(--citron); width: 16px; margin-top: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--line-dark); font-size: .88rem; color: var(--on-dark-muted); position: relative; z-index: 1; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: var(--on-dark-muted); text-decoration: none; }
.footer-bottom a:hover, .footer-bottom a[aria-current="page"] { color: #fff; text-decoration: underline; }
.to-top { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* 19. Motion --------------------------------------------------------------- */
/* Elements are only hidden once JS has confirmed it will animate them in. */
.js [data-reveal], .js [data-reveal-img], .js [data-split] { visibility: hidden; animation: wdn-show 0s 2.5s forwards; } /* failsafe if scripts never load */
@keyframes wdn-show { to { visibility: visible; } }
.js.reduced-motion [data-reveal], .js.reduced-motion [data-reveal-img], .js.reduced-motion [data-split],
.js.no-anim [data-reveal], .js.no-anim [data-reveal-img], .js.no-anim [data-split] { visibility: visible; }
/* Inner-page hero pieces that main.js brings in (initPageHero), held back the same way */
.js .page-hero :is(.breadcrumbs, .eyebrow, .pf-hero__shot, .nf-hero__code), .js .page-hero__media > :not([data-reveal-img]):not([data-reveal]) {
  visibility: hidden; animation: wdn-show 0s 2.5s forwards;
}
.js:is(.reduced-motion, .no-anim) .page-hero :is(.breadcrumbs, .eyebrow, .pf-hero__shot, .nf-hero__code),
.js:is(.reduced-motion, .no-anim) .page-hero__media > :not([data-reveal-img]):not([data-reveal]) { visibility: visible; }
/* Each word slides up inside a mask. The mask is padded generously on every side (and the
   padding cancelled with negative margins, so layout is unchanged) so tall letters, wide
   letters such as W and italic overhangs are never clipped, whatever the font rendering.
   Once a heading has revealed, main.js adds .is-revealed and the masks stop clipping at all. */
.split-line { display: inline-block; vertical-align: top; overflow: hidden; padding: .16em .12em .2em; margin: -.16em -.12em -.2em; }
em .split-line { padding-right: .18em; margin-right: -.18em; }
.is-revealed .split-line { overflow: visible; }
.split-word { display: inline-block; will-change: transform; }

/* Small details that play when their block is revealed. main.js adds .motion only when it will
   animate, and .is-in as each block arrives, so without JS (or with reduced motion) all of these
   simply show in their finished state. */
.eyebrow--anim .eyebrow__num::after { transform-origin: left; transition: transform .9s var(--ease-out) .35s; }
.eyebrow--anim:not(.is-in) .eyebrow__num::after { transform: scaleX(0); }
.checklist li::after { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .3s; }
.checklist li:nth-child(2)::after { transition-delay: .4s; }
.checklist li:nth-child(3)::after { transition-delay: .5s; }
.checklist li:nth-child(n+4)::after { transition-delay: .6s; }
.motion [data-reveal]:not(.is-in) .checklist li::after { transform: rotate(45deg) scale(0); }
/* Magnetic buttons are moved by GSAP every frame, so a CSS transform transition would only make them lag */
[data-magnetic] { transition-property: color, border-color; }

/* Cursor tag: a label that follows the mouse over [data-cursor] areas (decorative, made by main.js) */
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.cursor-tag > span {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 0 16px; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 .78rem/1 var(--font-body); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(11, 31, 26, .55);
  opacity: 0; transform: scale(.5); transform-origin: 0 0; transition: opacity .25s var(--ease), transform .4s var(--ease-out);
}
.cursor-tag > span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--citron); }
.cursor-tag.is-active > span { opacity: 1; transform: none; }

/* Page-to-page transitions (browsers that support cross-document view transitions; others just navigate) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .25s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
  .site-header { view-transition-name: site-header; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .browser__screen--scroll:hover img { transform: none; }
}

/* 20. Utilities ------------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: clamp(40px, 5vw, 72px); }
.text-muted { color: var(--muted); }
.max-prose { max-width: 40em; }

/* 21. Page-specific --------------------------------------------------------- */
/* Web design */
.wd-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.wd-hero__photo { aspect-ratio: 4 / 3.3; }
.wd-hero__browser { position: absolute; width: 60%; left: -4%; bottom: 0; } /* overlaps the photo, not the gap beside the intro text */
.wd-process__photo { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .wd-hero__browser { left: 4%; width: 66%; } }