/* ============================================================
   INTERNET SIMPLIFIED — DESIGN SYSTEM
   Step 1: foundation tokens + Step 2: hero (revision 2)
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* palette — same mood as the reference */
  --cream:      #FAF3E7;
  --green:      #1D4732;
  --green-deep: #163A28;
  --blue:       #BCD3F2;   /* periwinkle — pills, badges */
  --blue-light: #DCE8FA;
  --plum:       #5C2145;
  --yellow:     #F2E97F;
  --pink:       #F3AEDB;
  --white:      #FFFFFF;

  /* type */
  --font: 'Hanken Grotesk', system-ui, sans-serif;
 /* Hero/heading display face. Swap the value to try each:
       'Clash Display', sans-serif
       'Fraunces', serif                        */
  --font-display: 'Fraunces', serif;

  /* radii */
  --r-pill: 999px;
  --r-tile: 24px;
  --r-card: 12px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}

body{
  background:var(--cream);
  color:var(--green);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* ============================================================
   TOP NAVBAR — white pill, centered, visible at page top.
   Swaps with the Menu pill once you scroll (see main.js).
   ============================================================ */
.navbar{
  position:fixed;top:26px;left:0;right:0;margin:0 auto;
  width:fit-content;
  z-index:55;
  display:flex;gap:4px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  padding:8px 12px;
  /* hidden until intro finishes (JS adds .ready) */
  opacity:0;transform:translateY(-16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.navbar.ready{opacity:1;transform:none}
.navbar.nav-away{opacity:0 !important;transform:translateY(-24px) !important;pointer-events:none}
.navbar a{
  font-size:16.5px;font-weight:500;color:var(--green);
  padding:13px 22px;border-radius:var(--r-pill);
  transition:background .3s;
  white-space:nowrap;
}
.navbar a:hover{background:rgba(255,255,255,.95)}

/* ---------- MENU PILL (hidden at top, appears on scroll) ---------- */
.menu-btn{
  position:fixed;top:26px;right:30px;z-index:60;
  background:var(--blue);
  color:var(--green);
  font-size:15px;font-weight:500;
  padding:16px 30px;
  border-radius:var(--r-pill);
  opacity:0;pointer-events:none;transform:translateY(-16px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s, scale .3s;
}
.menu-btn.is-visible{opacity:1;pointer-events:auto;transform:none}
.menu-btn:hover{background:var(--blue-light);scale:1.06}
.menu-btn:active{scale:.97}

/* ---------- MENU PANEL ---------- */
.menu-panel{
  position:fixed;top:16px;right:16px;z-index:70;
  width:min(380px, calc(100vw - 32px));
  background:var(--green);
  border-radius:var(--r-tile);
  padding:64px 40px 44px;
  display:flex;flex-direction:column;gap:6px;
  visibility:hidden;opacity:0;transform:translateY(-12px) scale(.98);
}
.menu-close{
  position:absolute;top:18px;right:22px;
  color:var(--cream);font-size:30px;line-height:1;
  transition:transform .3s var(--ease);
}
.menu-close:hover{transform:rotate(90deg)}
.menu-link{
  color:var(--cream);
  font-size:28px;font-weight:500;
  padding:8px 0;
  transition:padding-left .35s var(--ease), color .3s;
}
.menu-link:hover{padding-left:14px;color:var(--blue)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh;height:100svh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- background shapes ----------
   NOT a blurred gradient. These are large geometric shapes with hard
   edges whose radii exceed the viewport, so only an arc crosses the
   screen. They read soft because the green tints and the cream are
   close in LIGHTNESS, not because anything is blurred.

   HARD RULE: every shape here stays above ~85% lightness. The moment
   one goes properly green, the dark-green type dies on top of it.

   System rule for the whole site:
     green      = atmosphere (backgrounds, shapes)
     periwinkle = interaction (nav pill, menu, badge, hovers, eyebrows)
   Every blue thing on the page should be something you can click.  */
.hero-shapes{position:absolute;inset:0;z-index:0}
.shape{position:absolute;will-change:transform}

/* the only genuinely gradient-like element: a pale near-white radial
   that reads as light falling. Very low contrast against the cream. */
.shape-glow{
  width:82vw;aspect-ratio:1;
  left:9vw;top:2vh;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    #FFFDF8 0%, rgba(255,253,248,.55) 42%, rgba(255,253,248,0) 70%);
}
.shape-big{
  width:58vw;aspect-ratio:1;border-radius:50%;
  left:21vw;top:8vh;
  background:radial-gradient(circle at 30% 20%,
    #F2F8F2 0%, #E8F0E9 44%, #DCEADF 100%);
}
.shape-dome{
  width:46vw;height:50vh;
  left:-8vw;bottom:-10vh;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(168deg,
    #EFF6F0 0%, #E3EEE5 48%, #D6E5D9 100%);
}
.shape-right{
  width:38vw;aspect-ratio:1;border-radius:50%;
  right:-12vw;top:22vh;
  background:radial-gradient(circle at 32% 24%,
    #F1F7F1 0%, #E4EFE6 46%, #D8E7DB 100%);
}

/* ---------- the lockup: whisper / name / whisper ----------
   Centred as a BLOCK, with the two title lines staggered inside it.
   The stagger is what the scroll animation converges away — if the
   lines started aligned there would be nothing to converge.        */
.hero-lockup{
  position:relative;z-index:3;
  display:flex;flex-direction:column;
  align-items:center;
  margin-top:-4vh;                 /* leaves room for badge + tagline */
  user-select:none;
}

/* Whisper text. Subordination comes from opacity, tracking and weight
   — NOT from shrinking it past the legibility floor. 14px against a
   250px word is already ~6%; going smaller just looks like a bug.   */
.hero-whisper{
  font-size:14px;
  font-weight:500;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--green);
  opacity:.55;
  will-change:transform,opacity;
}
.hero-whisper-top{margin-bottom:1.1vh;padding-left:.30em}
.hero-whisper-bottom{
  margin-top:1.6vh;
  font-size:15px;
  letter-spacing:.16em;
  text-transform:none;
}
/* the one accent — a single italic serif word, never a whole line */
.whisper-accent{
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic;
  font-size:1.55em;
  letter-spacing:0;
  opacity:.95;
  margin-right:.06em;
}

/* ---------- giant title ---------- */
.hero-title{
  position:relative;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:.88;
  color:var(--green);
  display:flex;flex-direction:column;
  align-items:center;
  font-family: var(--font-display);
}
/* NOTE: no overflow:hidden here any more. The old build masked the
   lines for a vertical reveal; these now travel in from off-screen,
   so a mask would clip the journey. .hero has overflow:hidden, which
   hides them until they arrive.                                    */
.t-line{display:block}
.t-inner{display:inline-block;padding-bottom:.06em;will-change:transform}
.t-line-1{
  font-size:clamp(64px, 13vw, 250px);
  margin-right:14vw;               /* rest stagger: sits left of centre */
}
.t-line-2{
  font-size:clamp(64px, 13vw, 250px);
  margin-left:14vw;                /* rest stagger: sits right of centre */
  margin-top:0.8vw;               /* line 2 rides on line 1 descenders */
  position:relative;z-index:2;
}
/* the domain rides at the end of the name as a small mark, sized to
   match the whisper text so the giant type stays a wordmark          */
.t-domain{
  font-size:.18em;
  font-weight:500;
  letter-spacing:.04em;
  opacity:.5;
  margin-left:.10em;
}

/* ---------- photo cards ----------
   Matched pair: identical size, ratio and radius, in true diagonal
   opposition at an identical 6vw from their nearest edge. They sit
   BEHIND the type (z-index 2 vs 3) and overlap it decisively — the
   near-miss float is what read as accidental before.               */
.hero-card{
  position:absolute;z-index:2;
  width:clamp(190px, 19vw, 310px);
  aspect-ratio:3/2;
  border-radius:var(--r-tile);
  overflow:hidden;
  box-shadow:0 26px 64px rgba(22,58,40,.20);
}
.hero-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* these two photos are warm brown stock with lettering baked in.
     Desaturating and tinting drags them into the palette. Drop the
     filter entirely once they are replaced with real cool-toned
     photography that has no type in it.                          */
  filter:saturate(.96);
  will-change:transform;
  transition:transform 1s var(--ease), filter .6s ease;
}
.hero-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg, rgba(214,229,217,.40), rgba(29,71,50,.14));
  mix-blend-mode:multiply;
}
.hero-card:hover img{transform:scale(1.05);filter:saturate(1.05)}
.hero-card-left { left:6vw;  bottom:11vh }
.hero-card-right{ right:6vw; top:11vh }

/* ---------- rotating badge ----------
   Centred directly beneath the lockup so it relates to something.
   left:calc() rather than translateX so GSAP's scale doesn't clash. */
.roll-badge{
  position:absolute;z-index:3;
  left:calc(50% - 59px);
  bottom:4vh;
  width:118px;aspect-ratio:1;
  display:grid;place-items:center;
}
.roll-text{position:absolute;inset:0;animation:spin 14s linear infinite}
.roll-text text{
  font-size:11.5px;font-weight:600;letter-spacing:.32em;
  fill:var(--green);
}
.roll-badge:hover .roll-text{animation-duration:6s}
.roll-center{
  width:48px;height:48px;border-radius:50%;
  background:var(--green);
  display:grid;place-items:center;
  color:var(--cream);
  transition:transform .4s var(--ease);
}
.roll-center svg{width:20px;height:20px}
.roll-badge:hover .roll-center{transform:scale(1.12)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tagline ----------
   Same 6vw gutter as the cards, so the edges of the hero agree.    */
.hero-tagline{
  position:absolute;z-index:3;
  right:6vw;bottom:9vh;
  max-width:22ch;
  text-align:right;
  font-size:clamp(18px, 1.5vw, 24px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--green);
}


/* ---------- brand mark (hero, top-left) ---------- */
.hero-logo{
  position:absolute;z-index:4;          /* above the shapes and cards */
  top:3.2vh;left:5vw;
  width:clamp(49px,4.8vw,82px);
  display:block;line-height:0;
  transition:opacity .3s var(--ease);
}
.hero-logo img{width:100%;height:auto;display:block}
.hero-logo:hover{opacity:.78}

@media (max-width:900px){
  .hero-logo{top:2.4vh;left:5vw;width:clamp(41px,8.6vw,57px)}
}
@media (max-width:820px){
  .hero-logo{width:clamp(38px,10.4vw,50px)}
}
/* ============================================================
   INTRO STATEMENT
   Centered paragraph that darkens word-by-word on scroll,
   with a Contact us button below it.
   ============================================================ */
.intro{
  max-width:1180px;
  margin:0 auto;
  padding:20vh 6vw 22vh;
  text-align:center;
}
.intro-line{
  font-size:clamp(26px, 3.6vw, 52px);
  font-weight:500;
  line-height:1.32;
  letter-spacing:-.015em;
}
/* each word is wrapped in a span by JS; base state is dimmed */
.intro-line .word{
  color:rgba(29,71,50,.22);      /* faint green */
  transition:color .1s linear;    /* scrub drives it, keep tiny */
  will-change:color;
}

/* ---------- Contact us button ---------- */
.intro-cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:56px;
  font-size:18px;font-weight:600;
  color:var(--green);
}
.cta-arrow{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);color:var(--cream);
  transition:transform .4s var(--ease);
}
.cta-arrow svg{width:17px;height:17px}
.intro-cta:hover .cta-arrow{transform:translate(3px,-3px)}

@media (max-width:900px){
  .intro{padding:14vh 8vw 16vh}
  .intro-line{font-size:clamp(22px,6vw,34px)}
  .intro-cta{margin-top:40px;font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .intro-line .word{color:var(--green)}   /* no scrub — show full contrast */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .navbar a{font-size:15px;padding:11px 16px}
}
@media (max-width:900px){
  /* navbar can't fit — menu pill takes over full-time */
  .navbar{display:none}
 .menu-btn{opacity:1;pointer-events:auto;transform:none;top:18px;right:18px;padding:8px 20px;font-size:13px}

  .hero{min-height:560px}
  .hero-lockup{margin-top:-2vh}
  .t-line-1{font-size:17vw;margin-right:8vw}
  .t-line-2{font-size:17vw;margin-left:8vw;margin-top:-4.2vw}
  .hero-whisper{font-size:12px;letter-spacing:.24em}
  .hero-whisper-bottom{font-size:13px}

  .shape-glow{width:110vw;left:-5vw}
  .shape-big{width:88vw;left:6vw;top:16vh}
  .shape-right{width:50vw;right:-18vw;top:20vh}
  .shape-dome{width:70vw;height:34vh;left:-12vw}

  /* cards keep the matched-pair rule, just smaller */
  .hero-card{width:30vw}
  .hero-card-left{left:5vw;bottom:9vh}
  .hero-card-right{right:5vw;top:9vh}

  .roll-badge{left:calc(50% - 48px);bottom:6vh;width:96px}
  .roll-center{width:42px;height:42px}

  .hero-tagline{right:5vw;bottom:7vh;font-size:17px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .roll-text{animation:none}
  .t-inner{transform:none !important}
  .hero-whisper{opacity:.55 !important;transform:none !important}
  .navbar{opacity:1;transform:none;transition:none}
  .hero-card,.roll-badge,.hero-tagline,.shape{opacity:1 !important;transform:none !important}
}

/* ============================================================
   CASES GRID
   Two staggered columns: right column drops lower than left.
   Cards = rounded media tile + name + icon pill tags.
   ============================================================ */
.cases{
  padding:6vh 5vw 16vh;
  max-width:1500px;margin:0 auto;
}
.cases-head{text-align:center;margin-bottom:9vh}
.eyebrow{
  display:block;
  font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);margin-bottom:20px;
}
.cases-title{
  font-size:clamp(32px,4.6vw,64px);
  font-weight:600;letter-spacing:-.02em;line-height:1.05;
font-family: var(--font-display);
}

/* two-column grid; right column pushed down for the stagger */
.cases-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,3.5vw,64px);
  row-gap:clamp(60px,8vh,120px);
}
.cases-grid .case:nth-child(even){margin-top:14vh}  /* stagger */

/* ---------- card ---------- */
.case{display:flex;flex-direction:column}
.case-media{
  position:relative;
  border-radius:var(--r-tile);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--green);
}

  .case-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
  will-change:transform;
}

.case:hover .case-media img{transform:scale(1.05)}

.case-name{
  font-size:clamp(22px,2vw,30px);
  font-weight:600;letter-spacing:-.01em;
  margin:26px 0 20px;
}

/* ---------- tag pills ---------- */
.case-tags{display:flex;flex-wrap:wrap;gap:12px}
.tag{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--white);
  border-radius:var(--r-pill);
  padding:11px 20px 11px 16px;
  font-size:15px;font-weight:500;
  box-shadow:0 2px 10px rgba(22,58,40,.05);
}
.tag svg{width:18px;height:18px;flex:none}

/* ---------- reveal (JS adds .in) ---------- */
.case{opacity:0;transform:translateY(48px)}
.case.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

@media (prefers-reduced-motion: reduce){
  .case{opacity:1;transform:none}
}

@media (max-width:820px){
  .cases-grid{grid-template-columns:1fr;row-gap:64px}
  .cases-grid .case:nth-child(even){margin-top:0}
  .case-media{aspect-ratio:3/2}
}

/* ============================================================
   PROCESS (pinned green panel)
   ============================================================ */

/* rising "hill": cream bridge with a big green circle sitting low in it.
   The circle's upward-curving TOP edge is the cream→green boundary, and
   it rises as you scroll so the arc sweeps up like a hill cresting. */
.process-bridge{
  position:relative;
  height:80vh;                 /* scroll distance over which it rises */
  background:var(--cream);     /* cream shows above the arc */
  overflow:hidden;
}
.bridge-circle{
  position:absolute;
  left:50%;
  top:40%;                     /* only the circle's top arc peeks into view */
  width:200vw;                 /* very wide → gentle upward arc */
  height:200vw;
  margin-left:-100vw;          /* centre horizontally (half width) */
  border-radius:50%;
  background:var(--green);     /* the green hill */
  will-change:transform;
}

.process{background:var(--green)}
.process-pin{
  position:relative;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* headings */
.process-heading{
  position:relative;z-index:2;
  width:100%;
  text-align:center;
  color:var(--cream);
  pointer-events:none;
}
.process-word{
  display:block;
  font-size:clamp(44px,8.5vw,140px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  will-change:transform,opacity;
  font-family: var(--font-display);
}
/* second line starts lower & hidden; JS brings it in */
.process-word[data-word="2"]{margin-top:14vh}

/* travelling photos */
.process-photos{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
}
.p-photo{
  position:absolute;
  display:block;
  width:clamp(180px,20vw,300px);
  aspect-ratio:3/4;
  border-radius:var(--r-tile);
  overflow:hidden;
  will-change:transform;
  /*  Translucent panels, not photos. Green + periwinkle over the deep
      green at varying opacity — where they overlap the transparency
      compounds, which is the point.                                  */
  border:1px solid rgba(236,229,218,.10);
  box-shadow:0 30px 60px rgba(0,0,0,.16);
}
.p-photo:nth-child(1){background:rgba(232,240,233,.14)}
.p-photo:nth-child(2){background:rgba(188,211,242,.12)}
.p-photo:nth-child(3){background:rgba(232,240,233,.09)}
.p-photo:nth-child(4){background:rgba(188,211,242,.16)}
.p-photo:nth-child(5){background:rgba(232,240,233,.11)}

/* ---------- PROCESS STEPS (below the pinned panel) ---------- */
.process-steps{
  background:var(--green);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(24px,2.6vw,44px);
  padding:0 5vw 16vh;
  max-width:1600px;margin:0 auto;
}
.p-step{color:var(--cream)}
.p-step-n{
  display:block;
  font-size:14px;font-weight:600;letter-spacing:.14em;
  color:var(--blue);
  margin-bottom:14px;
}
.p-step-t{
  font-family:var(--font-display);
  font-size:clamp(20px,1.5vw,28px);
  font-weight:600;line-height:1.15;
  margin-bottom:10px;
}
.p-step-d{
  font-size:clamp(15px,1vw,17px);
  line-height:1.55;
  color:rgba(236,229,218,.78);
}

/* stack on tablet, then single column on phones — a plain numbered
   list is the safest possible mobile layout                        */
@media (max-width:1000px){
  .process-steps{grid-template-columns:repeat(2,1fr);gap:36px 32px;padding-bottom:12vh}
}
@media (max-width:620px){
  .process-steps{grid-template-columns:1fr;gap:30px;padding:0 6vw 10vh}
  .p-step-t{font-size:21px}
  .p-step-d{font-size:16px}
}

/* ============================================================
   CONSOLIDATED MOBILE PASS (phones ≤600px)
   Keeps the process animation but tames sizes and spacing.
   ============================================================ */
@media (max-width:600px){
  body{font-size:15px}

  /* hero: stack cleanly, smaller floating pieces */
  .hero{min-height:88vh}
  .hero-lockup{margin-top:-6vh}
  /* stagger tightens on mobile — there isn't width to spare. The JS
     converge values are matched to this via gsap.matchMedia.        */
  .t-line-1,.t-line-2{font-size:21vw}
  .t-line-1{margin-right:4vw}
  .t-line-2{margin-left:4vw;margin-top:-5vw}
  .hero-whisper{font-size:11px;letter-spacing:.22em}
  .hero-whisper-bottom{font-size:12px}
  .t-domain{font-size:.085em}

  .hero-card{width:40vw}
  .hero-card-left{left:5vw;bottom:6vh}
  .hero-card-right{right:5vw;top:8vh}

  .roll-badge{left:calc(50% - 42px);bottom:4vh;width:84px}
  .hero-tagline{right:5vw;bottom:20vh;font-size:15px;max-width:16ch}

  /* intro */
  .intro{padding:12vh 7vw 14vh}

  /* cases already single-column at 820px; tighten spacing */
  .cases{padding:4vh 6vw 12vh}
  .cases-head{margin-bottom:6vh}

  /* process: keep the circle + pin, shrink photos so they don't
     swamp the type on a narrow screen */
  .process-bridge{height:56vh}
  .p-photo{width:44vw}
  .process-word{font-size:clamp(30px,11vw,52px)}
  .process-word[data-word="2"]{margin-top:10vh}

  /* menu panel a touch narrower */
  .menu-panel{padding:56px 30px 38px}
  .menu-link{font-size:24px}
}

/* very short landscape phones: don't let the pinned panel clip type */
@media (max-height:520px){
  .process-word{font-size:clamp(26px,7vw,44px)}
  .process-word[data-word="2"]{margin-top:8vh}
}

/* ============================================================
   SERVICES — stacked cards
   Each card sticks near the top; the next overlaps it, so the
   rounded tops peek out like a stacked deck.
   ============================================================ */
.services{
  background:var(--green);      /* continues from the process panel */
  padding:0 0 12vh;
}
.services-stack{
  max-width:1400px;
  margin:0 auto;
  padding:0 4vw;
}
.service-card{
  position:sticky;
  top:120px;                    /* where each card pins under the navbar */
  min-height:58vh;              /* was 78vh — kills the empty middle band */
  border-radius:var(--r-tile);
  padding:clamp(34px,3.6vw,56px);
  display:grid;
  grid-template-columns:1.45fr 1fr;
  grid-template-rows:auto 1fr;
  gap:22px;
  box-shadow:0 -8px 40px rgba(0,0,0,.16);
  overflow:hidden;
  max-width: 1500px;   /* try 1100–1200; lower = narrower */
  margin-left: auto;
  margin-right: auto;  /* keeps it centred once it's narrower */
}

.service-card + .service-card{margin-top:5vh}

/* header row: icon + title */
.service-head{
  grid-column:1/3;
  display:flex;align-items:center;gap:26px;
}
.service-icon{width:clamp(48px,4vw,72px);height:clamp(48px,4vw,72px);flex:none}
.service-icon svg{width:100%;height:100%}
.service-title{
  font-size:clamp(42px,4.4vw,72px);      /* bigger */
  font-weight:600;letter-spacing:-.02em;
  color:var(--card-ink,#000);            /* black on light cards, white on dark */
}

/* body: paragraph + pill list */
.service-body{align-self:end;max-width:52ch}
.service-body p{font-size:clamp(20px,1.35vw,26px);line-height:1.5;font-weight:500}
.service-tags{
  grid-column:2;align-self:end;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.service-tag{
  border:1.5px solid currentColor;
  border-radius:var(--r-pill);
  padding:13px 28px;
  font-size:17px;font-weight:600;
}

/* colour variants (palette order from the reference) */
/* --card-ink = HEADING colour. Checked against WCAG contrast: black wins
   on every light card (6.4:1–19:1); white wins on plum (11.9:1).      */
.service-card.c-blue  { background:var(--blue);   color:var(--green-deep); --card-ink:#000}
.service-card.c-orange{ background:#F0603A;       color:#1a1a1a;           --card-ink:#000}
.service-card.c-pink  { background:var(--pink);   color:#3a1230;           --card-ink:#000}
.service-card.c-plum  { background:var(--plum);   color:#f6e9f1;           --card-ink:#fff}
.service-card.c-yellow{ background:var(--yellow); color:#3a3410;           --card-ink:#000}
.service-card.c-cream { background:var(--cream);  color:var(--green);      --card-ink:#000}

@media (max-width:820px){
  .service-card{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    top:90px;min-height:70vh;
  }
  .service-head{grid-column:1}
  .service-tags{grid-column:1;flex-direction:row;flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){
  .service-card{position:relative;top:0}
}

/* ============================================================
   ABOUT — "Who I am" (green split section)
   ============================================================ */
.about{
  background:var(--green);
  color:var(--cream);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  align-items:center;
  padding:14vh 5vw 16vh;
}
.eyebrow-light{color:var(--blue)}
.about-title{
  font-size:clamp(40px,5.5vw,84px);
  font-weight:600;letter-spacing:-.02em;line-height:1;
  margin:18px 0 30px;
  font-family: var(--font-display);
}
.about-lead{
  font-size:clamp(17px,1.3vw,21px);
  line-height:1.6;
  color:rgba(236,229,218,.82);
  max-width:46ch;
  margin-bottom:44px;
}
/* pill button with arrow circle */
.about-cta{
  display:inline-flex;align-items:center;gap:4px;
}
.about-cta-label{
  background:var(--cream);color:var(--green);
  font-size:16px;font-weight:600;
  padding:18px 30px;
  border-radius:var(--r-pill);
  transition:background .3s;
}
.about-cta-arrow{
  width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:var(--green);
  display:grid;place-items:center;
  transition:transform .4s var(--ease);
}
.about-cta-arrow svg{width:22px;height:22px}
.about-cta:hover .about-cta-arrow{transform:translateX(5px)}
.about-cta:hover .about-cta-label{background:#fff}

.about-photo{
  border-radius:var(--r-tile);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px rgba(0,0,0,.28);
}
.about-photo img{transition:transform 1.2s var(--ease)}
.about-photo:hover img{transform:scale(1.05)}

@media (max-width:820px){
  .about{grid-template-columns:1fr;gap:44px;padding:10vh 6vw 12vh}
  .about-photo{aspect-ratio:3/2;order:-1}
}

/* ============================================================
   APPROACH — "How I work" (cream section, two photos)
   Three-column feel: small photo left, text centre, tall photo right.
   ============================================================ */
.approach{
  background:var(--cream);
  color:var(--green);
  display:grid;
  grid-template-columns:0.85fr 1.1fr 0.85fr;
  align-items:center;
  gap:3vw;
  padding:16vh 5vw;
}
.approach-photo{
  border-radius:var(--r-tile);
  overflow:hidden;
  box-shadow:0 24px 50px rgba(22,58,40,.14);
}
.approach-photo img{transition:transform 1.2s var(--ease)}
.approach-photo:hover img{transform:scale(1.05)}
.approach-photo-left{aspect-ratio:4/5;align-self:start;margin-top:2vh}
.approach-photo-right{aspect-ratio:3/4;align-self:stretch}

.approach-text{padding:0 1vw}
.approach-title{
  font-size:clamp(38px,5vw,76px);
  font-weight:600;letter-spacing:-.02em;line-height:1;
  margin:16px 0 28px;
  font-family: var(--font-display);
}
.approach-lead{
  font-size:clamp(17px,1.3vw,21px);
  line-height:1.6;
  color:rgba(29,71,50,.8);
  max-width:44ch;
}

@media (max-width:820px){
  .approach{grid-template-columns:1fr;gap:36px;padding:10vh 6vw}
  .approach-photo-left{aspect-ratio:3/2;margin-top:0;max-width:70%}
  .approach-photo-right{aspect-ratio:3/2;order:1}
  .approach-text{order:0;padding:0}
}

/* ============================================================
   TESTIMONIALS — heading + arrow-controlled slider
   ============================================================ */
.testimonials{
  background:var(--cream);
  padding:14vh 0 16vh;
  overflow:hidden;
}
.testi-heading{
  text-align:center;
  font-size:clamp(28px,4vw,60px);
  font-weight:600;letter-spacing:-.02em;line-height:1.12;
  padding:0 5vw;
  margin-bottom:8vh;
  font-family: var(--font-display);
}
.testi-viewport{overflow:hidden;padding:0 5vw}
.testi-track{
  display:flex;
  gap:36px;
  will-change:transform;
}
.testi-card{
  flex:0 0 clamp(360px, 56vw, 820px);   /* bigger cards */
  border-radius:var(--r-tile);
  padding:clamp(40px,4vw,68px);
  display:flex;flex-direction:column;
  min-height:clamp(440px,58vh,620px);
}
/* Every card is WHITE by default and turns GREEN when it's the active
   (focused) one — driven by .is-active, toggled in main.js. */
.testi-card{
  background:var(--white);
  border:1.5px solid rgba(29,71,50,.16);
  color:var(--green);
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease);
}
.testi-card.is-active{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(22,58,40,.22);
}
/* chunky double-quote glyph (SVG), tinted periwinkle */
.testi-mark{
  width:clamp(40px,4vw,58px);
  color:var(--blue);
  margin-bottom:28px;
}
.testi-mark svg{width:100%;height:auto;display:block}
.testi-card.is-active .testi-mark{color:var(--blue-light)}
.testi-quote{
  font-size:clamp(19px,1.55vw,27px);
  line-height:1.5;
  font-weight:400;
  margin-bottom:auto;
  color:inherit;
}
.testi-name{
  margin-top:40px;
  font-weight:600;line-height:1.4;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:15px;
  color:inherit;
  opacity:.85;
}

/* arrow controls */
.testi-controls{
  display:flex;gap:18px;justify-content:flex-end;
  padding:5vh 5vw 0;
}
.testi-arrow{
  width:64px;height:64px;border-radius:50%;
  background:var(--green);color:var(--cream);
  display:grid;place-items:center;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.testi-arrow svg{width:22px;height:22px}
.testi-arrow:hover{background:var(--green-deep);transform:scale(1.07)}
.testi-arrow:active{transform:scale(.96)}
/* infinite loop: no disabled state any more */

/* ============================================================
   CUSTOMERS — logo marquee (two drifting rows)
   ============================================================ */
.customers{
  background:var(--cream);
  padding:8vh 0 16vh;
  overflow:hidden;
}
.customers-head{text-align:center;margin-bottom:9vh}
.customers-title{
  font-size:clamp(30px,4.4vw,60px);
  font-weight:600;letter-spacing:-.02em;
  font-family: var(--font-display);
}
.marquee{
  display:flex;
  gap:4vw;
  width:max-content;
  padding:3.5vh 0;
  will-change:transform;
}
/*  Logo tiles. The spans are empty apart from an <img>, so they MUST be
    given a size here — without it the row collapses and shows nothing. */
.marquee-item{
  display:inline-flex;
  align-items:center;
  gap:14px;
  opacity:.85;
  transition:opacity .3s;
}
.marquee-item img{
  height:clamp(30px,3vw,44px);
  width:auto;display:block;
  filter:url(#tintGreen);
}
.marquee-label{
  font-size:clamp(20px,2vw,32px);
  font-weight:500;
  color:var(--green-deep);
  white-space:nowrap;
}
.marquee-item:hover{opacity:1}
.marquee-item.no-logo img{display:none}

@media (max-width:820px){
  .testi-card{flex-basis:84vw}
  .testi-heading{margin-bottom:6vh}
  .testi-arrow{width:54px;height:54px}
}
@media (prefers-reduced-motion: reduce){
  .marquee{flex-wrap:wrap;justify-content:center;width:auto;gap:5vw 7vw}
}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.footer{
  background:var(--green);
  color:var(--cream);
  padding:16vh 5vw 5vh;
  position:relative;
  overflow:hidden;
}
.footer-inner{max-width:1300px;margin:0 auto;position:relative;z-index:1}
.footer-eyebrow{display:block;margin-bottom:26px}
.footer-cta-title{
  font-size:clamp(44px,8vw,130px);
  font-weight:600;letter-spacing:-.03em;line-height:.95;
  margin-bottom:60px;
  font-family: var(--font-display);
}
.footer-contact-line{
  font-size:clamp(16px,1.2vw,20px);
  color:rgba(236,229,218,.7);
  margin-bottom:24px;
}
/* email + phone */
.footer-contacts{
  display:flex;flex-wrap:wrap;gap:20px 64px;
  margin-bottom:9vh;
}
.footer-contact-link{
  display:flex;flex-direction:column;gap:8px;
  position:relative;
}
.fc-label{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);
}
.fc-value{
  font-size:clamp(24px,3.2vw,48px);
  font-weight:600;letter-spacing:-.02em;
  transition:color .3s;
}
.footer-contact-link::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.footer-contact-link:hover::after{transform:scaleX(1)}
.footer-contact-link:hover .fc-value{color:var(--blue)}
/* phone block: one label, two separately tappable numbers */
.fc-multi{gap:4px}
.fc-multi::after{display:none}          /* no underline across the whole group */
.fc-multi .fc-value{
  display:inline-block;width:fit-content;position:relative;
  font-size:clamp(20px,2.4vw,34px);     /* smaller — two stacked at 48px is a lot */
}
.fc-multi .fc-value::after{
  content:'';position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.fc-multi .fc-value:hover::after{transform:scaleX(1)}
.fc-multi .fc-value:hover{color:var(--blue)}
/* Spotify now-playing strip */
.now-playing{
  display:inline-flex;align-items:center;gap:18px;
  background:rgba(236,229,218,.07);
  border:1px solid rgba(236,229,218,.16);
  border-radius:var(--r-pill);
  padding:16px 26px;
  margin-bottom:12vh;
  transition:background .3s, transform .3s var(--ease);
}
.now-playing:hover{background:rgba(236,229,218,.12);transform:translateY(-2px)}
.np-text{display:flex;flex-direction:column;gap:3px}
.np-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(236,229,218,.6)}
.np-song{font-size:17px;font-weight:600}
.np-dot{color:var(--blue);margin:0 4px}
.np-spotify{color:#1DB954;display:grid;place-items:center}
.np-spotify svg{width:30px;height:30px}
/* animated equaliser bars */
.np-eq{display:flex;align-items:flex-end;gap:3px;height:22px}
.np-eq i{width:3px;background:var(--blue);border-radius:2px;height:100%;
  animation:eq 1s ease-in-out infinite}
.np-eq i:nth-child(1){animation-delay:0s}
.np-eq i:nth-child(2){animation-delay:.2s}
.np-eq i:nth-child(3){animation-delay:.4s}
.np-eq i:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}

/* big falling headline */
.footer-fall{
  display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,60px);
  justify-content:center;
  margin:2vh 0 0;
  line-height:.9;
}
.fall-word{display:inline-flex}
.fall-char{
  display:inline-block;
  font-size:clamp(34px,11vw,168px);
  font-weight:600;letter: spacing -0.01em;  /* tighter: letters crowd together */
  color:var(--cream);
  transform-origin:50% 100%;               /* pivot at the BASE, so tilts read
                                              as leaning on a floor, not floating */;
  will-change:transform,opacity;
}

/* bottom bar */
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  padding-top:5vh;
  border-top:1px solid rgba(236,229,218,.16);
  font-size:15px;color:rgba(236,229,218,.75);
}
.heart{color:#ff5a7a;font-style:normal}
.made-with{letter-spacing:.01em}
.copyright{letter-spacing:.02em}

@media (prefers-reduced-motion: reduce){
  .np-eq i{animation:none;height:70%}
}
@media (max-width:820px){
  .footer{padding:12vh 6vw 5vh}
  .footer-contacts{gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}