/* ═════════════════════════════════════════════════════════════
   SEO LOCALE — FRONT PAGE
   Loaded only on the homepage, after global.css.

   Design intent: modern agency, not "AI landing page". One accent
   color used sparingly, real photography, big type, generous
   whitespace, thin borders — none of the gradient-text / glow /
   dashboard-widget language of the old build.
   ═════════════════════════════════════════════════════════════ */

/* Cream/ink tokens (--cream, --ink, --teal-ink, …) are defined
   in global.css :root so interior pages share them. */

/* ── HEX-DOT KICKERS ──
   Small hexagon marker on every homepage eyebrow — a nod to the
   brand's hexagon logo, used as punctuation instead of the old
   wall-to-wall hex decoration. currentColor keeps it teal on
   dark sections and teal-ink on cream ones automatically. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  /* V6 kicker voice: Space Mono, tracked-out uppercase. */
  font-family:var(--mono2);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.18em;
  line-height:1.5;
}
.eyebrow::before{
  content:"";
  width:9px;height:10px;
  flex-shrink:0;
  background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
/* When a long eyebrow wraps, align-items:center floats the hexagon
 * marker down between the two lines, where it reads as orphaned
 * punctuation rather than as the opening mark. Pin it to the first
 * line instead; the margin is the optical centering against a
 * 12px/1.5 line box. */
.eyebrow{align-items:flex-start;}
.eyebrow::before{margin-top:4px;}

/* Serif aside — lowercase Instrument Serif italic for the soft
 * counter-voice lines inside V6 components (case "what" lines,
 * package "for" lines). */
.serif-note{
  font-family:'Instrument Serif','Instrument Serif Fallback',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

/* ── SHARED SECTION HEADER — V6 display voice ── */
.sec-h2{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  /* Stepped up from a 42px ceiling. The page carries a lot of copy
     and the section headings were reading as labels rather than as
     the thing that stops a fast scroll. */
  font-size:clamp(30px,3.6vw,54px);
  line-height:1.03;
  letter-spacing:-0.02em;
  margin:16px 0 0;
  max-width:20ch;
}
.sec-sub{
  color:rgba(223,239,253,0.66);
  font-size:17px;
  line-height:1.7;
  max-width:560px;
  margin-top:16px;
}
.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.sec-head-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  font-size:15px;
  font-weight:700;
  color:var(--teal);
  text-decoration:none;
  padding-bottom:6px;
  border-bottom:1px solid rgba(22,192,183,0.35);
  transition:border-color 0.2s, gap 0.2s;
}
.sec-head-link:hover{border-color:var(--teal);gap:12px;}
.sec-head-link i{font-size:12px;}

/* ═════════════════════════════════════════════════════════════
   HERO — full-bleed autoplay video, copy bottom-left
   ═════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-video-wrap{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:#050b12 url('https://i.ytimg.com/vi/15WLxR6t6Yk/sddefault.jpg') center/cover no-repeat;
}
/* Phones play no video (front-page.js stops below 768px), so the
   poster was all they saw: a green-screen frame cropped to a phone.
   They get the team photo instead; front-page.php sets the variable
   from inc/hero-image.php, with the same file as the fallback. */
@media (max-width:767px){
  .hero-video-wrap{
    background-image:var(--hero-mobile-photo,url('/wp-content/uploads/2026/08/seo-team-working.jpg'));
    background-position:center 35%;
  }
}
.hero-video-wrap iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;
  min-height:100vh;min-width:177.78vh;
  transform:translate(-50%,-50%);
  pointer-events:none;border:none;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-video-wrap iframe.loaded{opacity:1;}
/* Native <video> variant — used when a self-hosted loop exists at
 * /wp-content/uploads/seolocale-hero-loop.mp4 (front-page.js probes
 * for it and prefers it over the YouTube facade). Same cover-fit
 * sizing as the iframe. */
.hero-video-wrap video{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;
  min-height:100vh;min-width:177.78vh;
  transform:translate(-50%,-50%);
  object-fit:cover;
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-video-wrap video.loaded{opacity:1;}
/* Light enough that the video reads immediately; heavy at the
 * left and bottom where the copy sits and the page begins. */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,var(--obsidian) 0%,rgba(5,11,18,0.35) 32%,rgba(5,11,18,0.25) 100%),
    linear-gradient(100deg,rgba(5,11,18,0.82) 0%,rgba(5,11,18,0.5) 45%,rgba(5,11,18,0.18) 100%);
}
.hero-content-wrap{
  position:relative;z-index:2;
  width:100%;
  padding-top:200px;
  padding-bottom:90px;
}
.hero-copy{max-width:860px;}
.hero-h1{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(30px,3.9vw,55px);
  /* Loose enough that the boxed accent below has room for its
   * border without colliding with the line above it. */
  line-height:1.24;
  letter-spacing:-0.5px;
  margin:18px 0 24px;
}
/* Boxed hero accent — the outlined keyword the interior templates
 * use on their own <h1>s (interior.css §9i). That rule lives in
 * interior.css, which never loads on the front page, so the
 * homepage had the script word but not the box around it.
 *
 * The section headings use the shared .boxed accent (global.css),
 * as every other page does; the hero keeps this older box of its
 * own because its accent sits inside a two-line display headline. */
.hero-h1 .script-accent{
  display:inline-block;
  max-width:100%;
  padding:0.14em 0.34em 0.18em 0.28em;
  border:2px solid var(--teal);
  border-radius:7px;
  transform:rotate(-1.2deg);
}
.hero-p{
  font-size:18px;
  line-height:1.7;
  color:rgba(248,250,252,0.85);
  max-width:560px;
  margin-bottom:34px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}

/* Social-proof pill — the bordered glass bar from the previous
 * build: gold stars, the rating, then divided proof points. */
.hero-proof{
  display:inline-flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  /* Opaque. It sits on the hero's own dark ground, so the blur had
     nothing behind it to soften — it just cost a compositor layer
     and gave the chip the stock frosted-glass look. */
  background:rgba(5,11,18,0.72);
}
.hero-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:#F4B400;
}
.hero-stars b{
  color:var(--teal);
  font-weight:800;
  font-size:14px;
  margin-left:6px;
  letter-spacing:-0.2px;
}
.hero-proof-sep{
  width:1px;
  height:16px;
  background:rgba(255,255,255,0.22);
}
.hero-proof-item{
  font-size:14px;
  font-weight:600;
  color:rgba(248,250,252,0.82);
  white-space:nowrap;
}

/* ═════════════════════════════════════════════════════════════
   TICKER — services marquee between hero and client strip.
   Track content is duplicated in the markup, so translating the
   track by -50% loops seamlessly with no JS.
   ═════════════════════════════════════════════════════════════ */
.ticker{
  overflow:hidden;
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  background:var(--obsidian);
}
.ticker-track{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation:tickerScroll 30s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.tick-item{
  font-size:15px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(248,250,252,0.85);
  white-space:nowrap;
}
.tick-hex{
  width:10px;height:11px;
  flex-shrink:0;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
@keyframes tickerScroll{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;}
}





/* Real logo files drop into a wordmark slot as an <img>; rendered
 * monochrome at a uniform height so mixed logo files read as one
 * set. Grayscale lifts on hover for a little life. */


/* ═════════════════════════════════════════════════════════════
   OUR WORK — sticky stacking case cards on a cream band.
   Each card pins at .case-card top while the next scrolls up
   over it (V6's stacked-receipts effect). Static on mobile.
   ═════════════════════════════════════════════════════════════ */
.work-section{background:var(--cream);}
.work-section .sec-h2{color:var(--ink);}
.work-section .sec-sub{color:var(--ink-soft);}
.work-section .eyebrow{color:var(--teal-ink);}
.work-section .script-accent{color:var(--teal-ink) !important;}
.work-section .sec-head-link{
  color:var(--teal-ink);
  border-bottom-color:rgba(11,138,130,0.4);
}
.work-section .sec-head-link:hover{border-bottom-color:var(--teal-ink);}

.case-card{
  position:sticky;
  top:150px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:52px;
  align-items:center;
  border-radius:24px;
  padding:48px 52px;
  margin-bottom:24px;
  min-height:340px;
  box-shadow:0 -18px 50px rgba(30,52,72,0.18);
}
.case-card:last-child{margin-bottom:0;}
.case-c1{background:#fff;color:var(--ink);border:1px solid rgba(30,52,72,0.1);}
.case-c2{background:var(--teal);color:#052e2c;}
.case-c3{background:#12293c;color:var(--text);border:1px solid rgba(255,255,255,0.1);}
.case-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  opacity:0.88;
  margin-bottom:22px;
}
.case-metrics{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap;}
.case-big{
  font-family:var(--disp);
  font-size:clamp(52px,7vw,96px);
  line-height:0.9;
  letter-spacing:-2px;
  display:block;
  /* The headline number is the whole reason the card exists, so it
     takes the card's accent rather than the body color it was sharing
     with the label underneath it. Set per variant below — each of the
     three backgrounds needs a different one to carry. */
  color:var(--case-accent,inherit);
}
.case-what{display:block;font-size:clamp(19px,2vw,26px);margin-top:12px;}

/* Supporting numbers.
   They were a single figure set beside a 96px headline, which read as
   a leftover rather than a result — and the third stat was not being
   rendered at all. Boxed and labeled, they scan as a row. */
.case-stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.case-stat{
  flex:1 1 150px;
  min-width:130px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--case-chip,rgba(30,52,72,0.05));
  border:1px solid var(--case-chip-line,rgba(30,52,72,0.1));
}
.case-stat-val{
  display:block;
  font-family:var(--disp);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1;
  letter-spacing:-1px;
  color:var(--case-accent,inherit);
}
.case-stat-label{
  display:block;
  font-family:var(--mono2),var(--mono),monospace;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.9;
  margin-top:7px;
}

/* Per-variant accents. The white card gets deep teal, the teal card
   keeps its near-black ink (teal on teal would vanish), and the navy
   card gets the bright teal that only works on a dark ground. */
.case-c1{--case-accent:var(--teal-ink);--case-chip:rgba(10,120,112,0.06);--case-chip-line:rgba(10,120,112,0.18);}
.case-c2{--case-accent:#052e2c;--case-chip:rgba(5,46,44,0.09);--case-chip-line:rgba(5,46,44,0.18);}
.case-c3{--case-accent:var(--teal);--case-chip:rgba(255,255,255,0.05);--case-chip-line:rgba(255,255,255,0.12);}
.case-how{
  font-size:15.5px;
  line-height:1.7;
  opacity:0.92;
  max-width:32em;
  margin:24px 0 28px;
}
.case-go{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  font-size:15px;
  color:inherit;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:4px;
  transition:gap 0.2s;
}
.case-go:hover{gap:14px;}
.case-go i{font-size:12px;}
.case-photo img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:16px;
  display:block;
}
.case-c2 .case-photo img{box-shadow:0 18px 40px rgba(5,46,44,0.3);}

/* The wp-admin cards carry the client's logo rather than a photo,
   so the slot becomes a white chip holding the same box. White
   regardless of the card's own color: a client logo is somebody
   else's artwork and the only background it is guaranteed to have
   been drawn for is white. */
.case-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:16px;
  aspect-ratio:16/11;
  padding:min(9%,52px);
  box-shadow:0 18px 40px rgba(30,52,72,0.16);
}
.case-c1 .case-mark{border:1px solid rgba(30,52,72,0.1);box-shadow:0 12px 30px rgba(30,52,72,0.1);}
.case-mark img{
  /* Client logos come in around 300x200. The chip is wider than
     that, and stretching a logo to fill it just renders it soft —
     so the image keeps its own size and the panel is the frame. */
  max-width:min(100%,320px);
  max-height:min(100%,212px);
  width:auto;
  height:auto;
  /* Reset .case-photo img, which crops to fill — a cropped logo is
     a broken logo. */
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  display:block;
}
/* With a hero photo set, the slot goes back to being a photo — the
   treatment the hand-built cards had — and the logo moves to a chip
   over the corner so the client is still named at a glance. */
.case-shot{position:relative;}
.case-shot > img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:16px;
  display:block;
}
/* Top of the photo, not the bottom. These cards are a sticky stack —
   each one pins while the next scrolls up over it — so the bottom
   edge is the first thing covered, and a logo parked there is hidden
   for most of the scroll. */
.case-shot-mark{
  position:absolute;
  left:16px;
  top:16px;
  width:118px;
  aspect-ratio:3/2;
  background:#fff;
  border-radius:11px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.32);
}
.case-shot-mark img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  /* Reset .case-photo img, which crops to fill. */
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  display:block;
}
@media(max-width:640px){
  .case-shot-mark{width:96px;left:12px;top:12px;padding:8px 10px;}
}

.case-mark-word{
  font-family:var(--disp);
  font-size:clamp(20px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-1px;
  text-align:center;
  color:var(--ink);
}

/* ═════════════════════════════════════════════════════════════
   ABOUT — polaroid stack on cream (V6's Philly section)
   ═════════════════════════════════════════════════════════════ */
.people-section{background:var(--sand);}
.people-section .sec-h2{color:var(--ink);}
.people-section .eyebrow{color:var(--teal-ink);}
.people-section .script-accent{color:var(--teal-ink) !important;}
.people-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:72px;
  align-items:center;
}
.polaroids{position:relative;height:520px;}
.pol{
  position:absolute;
  margin:0;
  background:#fff;
  padding:12px 12px 46px;
  /* The band behind these used to be a warm beige, which gave the
     white frames their own edge for free. Now that it is a cool
     near-white the frames need a drawn border, or they dissolve
     into it and only the photos read. */
  border:1px solid rgba(30,52,72,0.1);
  box-shadow:0 18px 44px rgba(16,21,27,0.16);
  transition:transform 0.35s ease;
}
.pol img{width:100%;height:calc(100% - 0px);object-fit:cover;display:block;}
.pol figcaption{
  position:absolute;
  bottom:14px;left:16px;right:16px;
  font-size:12px;
  font-weight:600;
  /* Sits in the frame's 46px white bottom band, not over the photo,
     so it is 12px type on pure white. --ink-faint composites to
     rgb(142,154,164) there = 2.87:1, under AA; --ink-soft is 5.33:1. */
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pol-1{width:62%;height:340px;top:0;left:0;transform:rotate(-4deg);z-index:1;}
.pol-2{width:52%;height:300px;top:120px;right:0;transform:rotate(3deg);z-index:2;}
.pol-3{width:44%;height:250px;bottom:0;left:14%;transform:rotate(-2deg);z-index:3;}
.pol:hover{transform:rotate(0) scale(1.04);z-index:5;}
.people-copy p{
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-top:20px;
  max-width:540px;
}
.people-facts{
  display:flex;
  gap:44px;
  margin:34px 0 0;
  padding:26px 0;
  border-top:1px solid rgba(30,52,72,0.12);
  border-bottom:1px solid rgba(30,52,72,0.12);
}
.people-fact dt{
  font-family:var(--disp);
  font-size:28px;
  letter-spacing:-0.5px;
  line-height:1;
  color:var(--ink);
}
.people-fact dd{
  font-size:13px;
  font-weight:600;
  color:var(--ink-faint);
  margin:9px 0 0;
}
.people-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
/* .btn-ghost is styled for dark backgrounds — re-ink on cream. */
.people-section .btn-ghost{
  color:var(--ink);
  border-color:rgba(30,52,72,0.3);
}
.people-section .btn-ghost:hover{
  color:var(--teal-ink);
  border-color:var(--teal-ink);
}


/* ═════════════════════════════════════════════════════════════
   SERVICES — V6 rows: Archivo Black names, mono tags, and the
   full teal fill that sweeps up on hover.
   ═════════════════════════════════════════════════════════════ */
.svc-list{
  border-top:1px solid rgba(255,255,255,0.14);
}
.svc-row{
  display:grid;
  grid-template-columns:70px 1fr auto 50px;
  align-items:center;
  gap:28px;
  padding:28px 10px;
  border-bottom:1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  color:var(--text);
  position:relative;
  overflow:hidden;
  transition:color 0.25s,padding 0.25s;
}
.svc-row::before{
  content:"";
  position:absolute;inset:0;
  background:var(--teal);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform 0.3s cubic-bezier(0.2,0.6,0.2,1);
}
.svc-row > *{position:relative;}
.svc-row:hover::before{transform:scaleY(1);}
.svc-row:hover{color:#052e2c;padding-left:24px;}
.svc-num{
  font-family:var(--mono2);
  font-size:13px;
  font-weight:700;
  color:rgba(223,239,253,0.4);
  letter-spacing:0.08em;
  transition:color 0.25s;
}
.svc-row:hover .svc-num{color:rgba(5,46,44,0.6);}
.svc-name{
  font-family:var(--disp);
  text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);
  letter-spacing:-0.4px;
  line-height:1;
}
.svc-desc{
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  color:rgba(223,239,253,0.6);
  max-width:300px;
  text-align:right;
  transition:color 0.25s;
}
.svc-row:hover .svc-desc{color:rgba(5,46,44,0.7);}
.svc-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  color:rgba(248,250,252,0.75);
  font-size:14px;
  transition:transform 0.3s,border-color 0.25s,color 0.25s;
}
.svc-row:hover .svc-arrow{
  border-color:#052e2c;
  color:#052e2c;
  transform:rotate(-45deg);
}

/* ═════════════════════════════════════════════════════════════
   SEE HOW YOU'RE BEING FOUND — signature interactive.
   Six channel tabs drive a stage of panels; each panel pairs a
   small white "search surface" mock (SERP / map / chat / feed)
   with copy and a real client proof line. The mock has a
   before/after state: default (before) shows the visitor's
   business buried or missing; .after flips it to the top.
   front-page.js auto-plays the flip and advances the tabs.
   ═════════════════════════════════════════════════════════════ */
/* Its own tone. The services list above it sits on the base obsidian,
   and so did this, so the two met as 200px of the same black with a
   hairline in the middle. The band is the surface navy now, the panel
   inside drops to obsidian for contrast, and the padding on both sides
   of the seam comes down from 100px. */
.found-section{
  border-top:1px solid rgba(22,192,183,0.18);
  border-bottom:1px solid rgba(22,192,183,0.18);
  background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);
}
.found-section.section-pad{padding:84px 0 96px;}
.services-section.section-pad{padding-bottom:80px;}
.found-head{margin-bottom:44px;}
/* Two lines, not four: the headline runs the width of the tab rail
   under it, so it is released from the 20ch cap the other section
   headings use and sized so each sentence holds one line on a
   desktop. */
.found-head .sec-h2{max-width:none;font-size:clamp(30px,3.3vw,48px);}
.found-head .sec-sub{max-width:62ch;}
/* On a phone the forced break strands one word on a line of its own;
   the sentences flow instead. */
@media(max-width:700px){.found-head .sec-h2 br{display:none;}}
.found-wrap{
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  background:var(--obsidian);
  overflow:hidden;
}
.found-rail{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.found-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:18px 10px;
  background:transparent;
  border:none;
  border-right:1px solid rgba(255,255,255,0.07);
  border-bottom:2px solid transparent;
  cursor:pointer;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  color:rgba(223,239,253,0.55);
  transition:color 0.2s,background 0.2s,border-color 0.2s;
  white-space:nowrap;
}
.found-tab:last-child{border-right:none;}
.found-tab i{font-size:14px;}
.found-tab:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.found-tab.active{
  color:var(--teal);
  background:rgba(22,192,183,0.06);
  border-bottom-color:var(--teal);
}
.found-stage{position:relative;}
.found-panel{
  display:none;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:center;
  padding:44px 48px;
}
.found-panel.active{display:grid;animation:foundIn 0.35s ease;}
@keyframes foundIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── The mock: a small white search surface ──
   Tilted with a solid offset shadow — the "sticker on the desk"
   treatment from the V6 concept. */
.found-mock{max-width:420px;width:100%;justify-self:center;position:relative;}
.fm-serp,.fm-map,.fm-chat,.fm-social{
  background:#fff;
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#1f2937;
  transform:rotate(1.2deg);
  box-shadow:14px 14px 0 rgba(22,192,183,0.13),0 22px 48px rgba(0,0,0,0.4);
  min-height:230px;
}
/* Handwritten annotation on the first panel */
.found-note{
  position:absolute;
  top:-38px;right:2px;
  z-index:2;
  font-family:'Instrument Serif','Instrument Serif Fallback',serif;
  font-style:italic;
  font-size:24px;
  color:var(--teal);
  transform:rotate(-5deg);
  white-space:nowrap;
  pointer-events:none;
}
.found-note svg{
  position:absolute;
  top:24px;right:56%;
  transform:rotate(8deg);
}
/* Faux browser chrome on the Google-surface mocks */
.fm-chrome{
  order:-3;
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:9px;
  margin-bottom:2px;
  border-bottom:1px solid #eef0f2;
}
/* Brand hexagon in place of the cliché mac traffic lights. */
.fm-hex{
  width:11px;height:12px;
  flex-shrink:0;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.fm-chrome-url{
  flex:1;
  background:#f3f4f6;
  border-radius:14px;
  padding:4px 12px;
  font-size:10px;
  color:#6b7280;
}
.fm-chrome-tag{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal-ink);
  border:1px solid rgba(11,138,130,0.35);
  border-radius:5px;
  padding:2px 7px;
  white-space:nowrap;
}
/* Live-proof line under the organic panel's toggle */
.found-live{
  margin-top:14px;
  font-size:12.5px;
  font-weight:600;
  color:rgba(223,239,253,0.5);
  text-align:center;
}
.found-live a{
  color:var(--teal);
  font-weight:700;
  text-decoration:none;
}
.found-live a:hover{text-decoration:underline;}
.fm-searchbar{
  display:flex;align-items:center;gap:9px;
  border:1px solid #e5e7eb;border-radius:24px;
  padding:9px 14px;font-size:12.5px;color:#374151;
  order:-2;margin-bottom:4px;
}
.fm-searchbar i{color:#9ca3af;font-size:12px;}
.fm-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  padding:10px 12px;border-radius:10px;
  transition:opacity 0.35s,background 0.35s;
}
.fm-url{font-size:10.5px;color:#6b7280;width:100%;}
.fm-title{font-size:13px;font-weight:700;color:#1d4ed8;}
.fm-map .fm-title{color:#1f2937;}
.fm-stars{font-size:10.5px;color:#b45309;margin-left:auto;}
.fm-ad-tag{font-size:9px;font-weight:800;letter-spacing:0.06em;color:#047857;border:1px solid #a7f3d0;border-radius:4px;padding:1px 5px;}
.fm-badge-rank{
  font-size:9.5px;font-weight:800;letter-spacing:0.04em;
  background:var(--teal);color:#052e2c;
  border-radius:5px;padding:2px 7px;
}
/* Before state: your row buried and dim, badge hidden */
.found-mock .fm-you{order:9;opacity:0.45;background:#f9fafb;}
.found-mock .fm-you .fm-badge-rank{display:none;}
/* After state: you first, competitors fade */
.found-mock.after .fm-you{order:-1;opacity:1;background:rgba(22,192,183,0.1);}
.found-mock.after .fm-you .fm-badge-rank{display:inline-block;}
.found-mock.after .fm-competitor{opacity:0.4;}

/* Map canvas */
.fm-map-canvas{
  position:relative;order:-1;
  height:86px;border-radius:10px;
  background:
    radial-gradient(circle at 30% 40%,#dbeafe 0%,transparent 35%),
    linear-gradient(90deg,#eef2f7 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(0deg,#eef2f7 1px,transparent 1px) 0 0/22px 22px,
    #f3f6fa;
  overflow:hidden;
}
.fm-pin{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#94a3b8;}
.fm-pin.p1{top:22px;left:34%;}
.fm-pin.p2{top:48px;left:58%;}
.fm-pin.p3{top:30px;left:76%;}
.found-mock .fm-pin-you{background:#cbd5e1;width:9px;height:9px;}
.found-mock.after .fm-pin-you{background:var(--teal);width:16px;height:16px;box-shadow:0 0 0 6px rgba(22,192,183,0.25);}

/* Chat mock */
.fm-chat{gap:12px;}
.fm-chat-q{
  align-self:flex-end;
  background:#f3f4f6;border-radius:14px 14px 4px 14px;
  padding:9px 14px;font-size:12.5px;font-weight:600;color:#374151;
  display:flex;align-items:center;gap:8px;
}
.fm-chat-q i{font-size:10px;color:#9ca3af;}
.fm-chat-a{display:flex;gap:10px;align-items:flex-start;}
.fm-chat-a > i{font-size:15px;color:#10a37f;margin-top:2px;flex-shrink:0;}
.fm-chat-a p{font-size:12.5px;line-height:1.6;color:#374151;margin:0;}
.fm-cite{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--teal-ink);margin-top:6px;}
.fm-cite i{font-size:8px;}
.fm-chat-after-text{display:none;}
.found-mock.after .fm-chat-after-text{display:block;}
.found-mock.after .fm-chat-before-text{display:none;}

/* AI Overview box */
.fm-aio{
  border:1px solid #dbeafe;border-radius:10px;
  background:linear-gradient(135deg,#f5f9ff,#f0fdfb);
  padding:12px 14px;order:-1;
}
.fm-aio-tag{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#4f46e5;margin-bottom:7px;}
.fm-aio p{font-size:12px;line-height:1.55;color:#374151;margin:0;}
.fm-aio-after-text{display:none;}
.found-mock.after .fm-aio-after-text{display:block;}
.found-mock.after .fm-aio-before-text{display:none;}

/* Social mock */
.fm-social{gap:12px;}
.fm-social-head{display:flex;align-items:center;gap:11px;}
.fm-social-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#213E59,#16C0B7);flex-shrink:0;}
.fm-social-sub{font-size:11px;color:#6b7280;margin-top:2px;}
.fm-social-after-text{display:none;color:var(--teal-ink);font-weight:700;}
.found-mock.after .fm-social-after-text{display:block;}
.found-mock.after .fm-social-before-text{display:none;}
.fm-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.fm-social-grid span{aspect-ratio:1;border-radius:8px;background:#e5e7eb;transition:background 0.4s;}
.found-mock.after .fm-social-grid span{background:linear-gradient(135deg,#d7f5f3,#bfe9f7);}
.found-mock.after .fm-social-grid span:nth-child(2n){background:linear-gradient(135deg,#213E59,#3a5a7d);}

/* Before/after toggle */
.found-ba{
  display:flex;gap:6px;justify-content:center;margin-top:16px;
}
.ba-btn{
  font-family:var(--font);font-size:12px;font-weight:700;
  padding:7px 16px;border-radius:20px;cursor:pointer;
  background:transparent;color:rgba(223,239,253,0.55);
  border:1px solid rgba(255,255,255,0.16);
  transition:all 0.2s;
}
.ba-btn:hover{color:var(--text);}
.ba-btn.active{background:var(--teal);border-color:var(--teal);color:#052e2c;}

/* ── Copy side ── */
.found-copy h3{font-size:24px;font-weight:800;letter-spacing:-0.4px;margin-bottom:14px;}
.found-problem,.found-fix{
  font-size:15.5px;line-height:1.7;color:rgba(223,239,253,0.75);
  margin-bottom:14px;
}
.found-fix{color:rgba(223,239,253,0.9);}
.found-proof{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:20px;padding-top:20px;
}
.found-proof-num{
  font-size:34px;font-weight:800;letter-spacing:-1px;
  color:var(--teal);line-height:1;
}
.found-proof-text{
  flex:1;min-width:180px;
  font-size:13px;font-weight:600;line-height:1.5;
  color:rgba(223,239,253,0.66);
}
.found-proof-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--teal);
  text-decoration:none;white-space:nowrap;transition:gap 0.2s;padding:6px 0;display:inline-flex;align-items:center;}
.found-proof-link:hover{gap:11px;}
.found-proof-link i{font-size:10px;}

.found-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:36px;
}
.found-footer p{font-size:16px;font-weight:600;color:rgba(223,239,253,0.8);}
.found-footer-btns{display:flex;gap:12px;flex-wrap:wrap;}

/* ═════════════════════════════════════════════════════════════
   TESTIMONIALS — real clients on video
   ═════════════════════════════════════════════════════════════ */
.testi-section{background:var(--sand);}
.testi-section .sec-h2{color:var(--ink);}
.testi-section .sec-sub{color:var(--ink-soft);}
.testi-section .eyebrow{color:var(--teal-ink);}
.testi-section .script-accent{color:var(--teal-ink) !important;}
.testi-section .sec-head-link{
  color:var(--teal-ink);
  border-bottom-color:rgba(11,138,130,0.4);
}
.testi-section .sec-head-link:hover{border-bottom-color:var(--teal-ink);}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.testi-card{
  cursor:pointer;
  border-radius:16px;
  outline-offset:4px;
}
.testi-thumb{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/10;
  margin-bottom:20px;
}
.testi-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}
.testi-card:hover .testi-thumb img{transform:scale(1.04);}
.testi-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:58px;height:58px;
  border-radius:50%;
  background:rgba(5,11,18,0.86);
  border:1px solid rgba(255,255,255,0.35);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
  padding-left:4px;
  transition:background 0.2s,transform 0.2s;
}
.testi-card:hover .testi-play{
  background:var(--teal);
  color:#050b12;
  transform:translate(-50%,-50%) scale(1.08);
}
.testi-quote{
  font-family:'Instrument Serif','Instrument Serif Fallback',serif;
  font-style:italic;
  font-size:21px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  margin:0 0 14px;
  color:var(--ink);
}
.testi-attr{display:flex;flex-direction:column;gap:2px;}
.testi-name{font-size:14px;font-weight:800;color:var(--ink);}
.testi-role{font-size:13px;color:var(--ink-faint);}

/* ═════════════════════════════════════════════════════════════
   FREE AUDIT
   ═════════════════════════════════════════════════════════════ */
.audit-panel{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  border-radius:20px;
  padding:64px;
  background:var(--cream);
  /* Solid offset shadow — same sticker language as the found-
   * section mocks, grounding the cream panel on the dark base. */
  box-shadow:18px 18px 0 rgba(22,192,183,0.12);
}
.audit-section .eyebrow{color:var(--teal-ink);}
.audit-section .sec-h2{color:var(--ink);}
.audit-copy p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink-soft);
  margin-top:18px;
  max-width:520px;
}

/* ═════════════════════════════════════════════════════════════
   FAQ
   ═════════════════════════════════════════════════════════════ */

.faq-layout{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:72px;
  align-items:start;
}
.faq-intro .sec-head-link{margin-top:26px;}
.faq-items{display:flex;flex-direction:column;}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.1);
  cursor:pointer;
  outline-offset:4px;
}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,0.1);}
.faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.2px;
  padding:24px 4px;
  transition:color 0.2s;
}
.faq-item:hover .faq-q{color:var(--teal);}
/* Hexagon toggle comes from global.css; only the size is tuned
   here for the homepage's larger FAQ rows. */
.faq-plus{width:34px;height:38px;font-size:15px;}
.faq-a{
  max-height:0;
  overflow:hidden;
  font-size:15.5px;
  line-height:1.7;
  color:rgba(223,239,253,0.72);
  max-width:640px;
  transition:max-height 0.3s ease,padding 0.3s ease;
  padding:0 4px;
}
.faq-item.open .faq-a{max-height:260px;padding-bottom:26px;}

/* ═════════════════════════════════════════════════════════════
   FROM THE BLOG — three recent posts
   ═════════════════════════════════════════════════════════════
   Its own .ins-* rules rather than reusing .post-card: that card's
   base styling lives in pages/blog.css, which the homepage does not
   load, so it would render unstyled here. Hoisting it into global.css
   would put a blog-grid tile in every page's CSS to serve one
   section. */
.ins-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(18px,2.2vw,26px);
}
.ins-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color 0.25s,transform 0.25s;
}
.ins-card:hover{
  border-color:rgba(22,192,183,0.32);
  transform:translateY(-3px);
}

/* The image is the object; the tile does not move under it. Same
   treatment the portfolio grid uses. */
.ins-shot{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:rgba(22,192,183,0.06);
}
.ins-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}
.ins-card:hover .ins-shot img{transform:scale(1.04);}
/* A post with no featured image keeps the same tile proportions, so
   one missing image does not make its card a different height. */
.ins-shot-empty{
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(22,192,183,0.12), transparent 70%),
    rgba(255,255,255,0.02);
}

.ins-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(18px,2vw,24px);
}
.ins-cat{
  display:inline-block;
  align-self:flex-start;
  margin-bottom:10px;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(22,192,183,0.12);
  color:var(--teal);
  font-family:var(--mono2,ui-monospace,monospace);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.ins-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.2px;
  color:var(--text);
  transition:color 0.2s;
}
.ins-card:hover .ins-title{color:var(--teal);}
.ins-meta{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(223,239,253,0.6);
}
.ins-dot{opacity:0.5;}

@media (prefers-reduced-motion:reduce){
  .ins-card,.ins-shot img,.ins-title{transition:none;}
  .ins-card:hover{transform:none;}
  .ins-card:hover .ins-shot img{transform:none;}
}

/* ═════════════════════════════════════════════════════════════
   THE LONG VERSION — long-form prose accordion
   ═════════════════════════════════════════════════════════════
   Native <details>, not the .faq-item pattern above: that one caps
   an open panel at max-height:260px, which is right for a three-line
   answer and would quietly cut a 200-word one in half. <details> has
   no cap, works with JavaScript off, and keeps the prose in the
   initial HTML whether or not a panel is open.

   Mirrored against the FAQ directly below it: the accordion is on the
   LEFT here and on the right there, so two split sections back to back
   alternate instead of repeating.

   This one is flipped rather than the FAQ because it is free to flip.
   .lf-intro holds an eyebrow, a heading and a line of copy — nothing
   focusable. .faq-intro holds a "Browse all FAQs" link, so reversing
   THAT column visually would leave the link first in tab order while
   sitting on the right, which is a focus-order mismatch (WCAG 2.4.3)
   for the sake of a layout preference. The FAQ also lands last before
   the CTA, where the conventional heading-left arrangement is worth
   more.

   Flipped with grid placement, not by reordering the markup: the DOM
   keeps heading-then-content, so a screen reader and a crawler still
   meet the h2 before the panels it introduces. With nothing focusable
   in the column, visual order and focus order cannot disagree. */
.lf-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:72px;
  align-items:start;
}
.lf-intro{
  position:sticky;
  top:132px;
  grid-column:2;
  grid-row:1;
}
.lf-items{grid-column:1;grid-row:1;}
.lf-items{
  display:flex;
  flex-direction:column;
}
.lf-item{
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.lf-item:first-child{border-top:1px solid rgba(255,255,255,0.1);}

.lf-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.2px;
  padding:24px 4px;
  cursor:pointer;
  list-style:none;
  transition:color 0.2s;
}
/* Safari still paints its own disclosure triangle without this. */
.lf-q::-webkit-details-marker{display:none;}
/* The title is an <h3> so a crawler sees a heading; it inherits the
   summary's type entirely so nothing about it looks like a heading. */
.lf-q h3{margin:0;font:inherit;letter-spacing:inherit;color:inherit;}
.lf-item:hover .lf-q,
.lf-item[open] .lf-q{color:var(--teal);}
.lf-q:focus-visible{outline:2px solid var(--teal);outline-offset:4px;}

/* Same hexagon toggle the FAQ rows use, drawn here rather than
   borrowed, because .faq-plus carries a "+" as text content and a
   <summary> has nowhere to put one. The bar rotates to an X instead. */
.lf-mark{
  flex:0 0 auto;
  position:relative;
  width:34px;
  height:38px;
  background:rgba(22,192,183,0.12);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background 0.2s;
}
.lf-mark::before,
.lf-mark::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:1.5px;
  background:var(--teal);
  transform:translate(-50%,-50%);
  transition:transform 0.25s ease;
}
.lf-mark::after{transform:translate(-50%,-50%) rotate(90deg);}
.lf-item[open] .lf-mark{background:rgba(22,192,183,0.2);}
.lf-item[open] .lf-mark::after{transform:translate(-50%,-50%) rotate(0deg);}

.lf-a{
  font-size:15.5px;
  line-height:1.75;
  color:rgba(223,239,253,0.72);
  max-width:72ch;
  padding:0 4px 28px;
}
.lf-a p + p{margin-top:15px;}
.lf-a a{
  color:var(--teal);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(22,192,183,0.4);
  transition:text-decoration-color 0.2s;
}
.lf-a a:hover{text-decoration-color:var(--teal);}

@media (prefers-reduced-motion:reduce){
  .lf-mark,.lf-mark::before,.lf-mark::after,.lf-q{transition:none;}
}

/* Below the split, the sticky intro has nothing to stick beside — and
   the placement has to be undone or the heading stacks underneath the
   panels it introduces. */
@media (max-width:1080px){
  .lf-layout{grid-template-columns:1fr;gap:40px;}
  .lf-intro{position:static;grid-column:1;grid-row:1;}
  .lf-items{grid-column:1;grid-row:2;}
}

/* ═════════════════════════════════════════════════════════════
   CLOSING CTA
   ═════════════════════════════════════════════════════════════ */
.cta-section{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:110px 0 120px;
  /* The team behind the closing ask. The overlay is heavy on purpose
     — the photo is a bright teal wall and white lettering, and this
     is the one section on the page that is nothing but type. It
     reads as texture and a suggestion of faces, not as a hero image;
     the point is that the last thing on the page is people. */
  /* Overlay sized against the worst case the photo can present — the
     white SEO LOCALE lettering on the office wall. Composited over
     pure white, 0.74 in the middle leaves rgb(70,74,80): 8.9:1 for
     the white headline and 7.1:1 for the sub-copy below, which is
     lightened for exactly this reason. The old muted slate would
     have needed the overlay at 0.82+, and at that strength the
     faces stop reading. */
  background-image:
    linear-gradient(180deg,rgba(5,11,18,0.86) 0%,rgba(5,11,18,0.74) 52%,rgba(5,11,18,0.88) 100%),
    var(--team-photo);
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
.cta-section .cta-inner p,
.cta-section .cta-sub{color:rgba(255,255,255,0.86);}
.cta-inner{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.cta-h{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(29px,3.4vw,46px);
  letter-spacing:-0.4px;
  line-height:1.04;
}
.cta-p{
  font-size:17px;
  line-height:1.7;
  color:rgba(223,239,253,0.7);
  margin:20px auto 36px;
  max-width:460px;
}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ═════════════════════════════════════════════════════════════
   ANCHOR BAR — numbered page index. Sticks below the fixed
   main nav once the page scrolls (the nav collapses to top:0 /
   78px tall in its .scrolled state, which is always true by the
   time this bar reaches the viewport top).
   ═════════════════════════════════════════════════════════════ */
.anchorbar{
  position:sticky;
  top:78px;
  z-index:250;
  background:#0A1520;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow-x:auto;
  scrollbar-width:none;
}
.anchorbar::-webkit-scrollbar{display:none;}
.anchorbar-in{
  max-width:1360px;
  margin:0 auto;
  padding:0 2.5rem;
  display:flex;
  gap:6px;
}
.anchorbar a{
  font-size:13px;
  font-weight:700;
  color:rgba(223,239,253,0.6);
  text-decoration:none;
  padding:13px 12px;
  white-space:nowrap;
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-bottom:2px solid transparent;
  transition:color 0.2s,border-color 0.2s;
}
.anchorbar a b{
  font-family:var(--mono2);
  font-weight:700;
  font-size:11px;
  color:var(--teal);
}
.anchorbar a:hover{color:#fff;border-bottom-color:var(--teal);}
.anchorbar .anchor-cta{color:var(--teal);margin-left:auto;}

/* ═════════════════════════════════════════════════════════════
   PACKAGES — three starting points. Custom-quoted, no fake
   placeholder prices.
   ═════════════════════════════════════════════════════════════ */
.pack-section{background:var(--cream);}
.pack-section .sec-h2{color:var(--ink);}
.pack-section .sec-sub{color:var(--ink-soft);}
.pack-section .eyebrow{color:var(--teal-ink);}
.pack-section .script-accent{color:var(--teal-ink) !important;}
.pack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.pack{
  background:var(--cream-card);
  border:1px solid rgba(30,52,72,0.12);
  box-shadow:0 2px 10px rgba(30,52,72,0.05);
  border-radius:20px;
  padding:40px 34px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform 0.25s,border-color 0.25s;
}
.pack::after{
  content:"";
  position:absolute;
  right:-40px;top:-46px;
  width:130px;height:147px;
  background:rgba(11,138,130,0.07);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  pointer-events:none;
}
.pack:hover{transform:translateY(-6px);border-color:rgba(11,138,130,0.5);box-shadow:0 18px 40px rgba(30,52,72,0.14);}
/* Featured tier inverts to dark so it lifts off the cream band. */
.pack-feat{
  background:linear-gradient(160deg,#123a35,#0d2536);
  border-color:rgba(22,192,183,0.5);
}
.pack-feat .pack-name,
.pack-feat .pack-price{color:var(--text);}
.pack-feat .pack-kick{color:var(--teal);}
.pack-feat .pack-for{color:rgba(223,239,253,0.7);}
.pack-feat .pack-list li{color:rgba(223,239,253,0.88);border-bottom-color:rgba(255,255,255,0.1);}
.pack-feat .pack-price small{color:rgba(223,239,253,0.55);}
.pack-best{
  position:absolute;
  top:20px;right:-34px;
  transform:rotate(38deg);
  background:var(--teal);
  color:#052e2c;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 40px;
  z-index:1;
}
.pack-kick{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-ink);
  margin-bottom:14px;
}
.pack-kick::before{
  content:"";
  width:9px;height:10px;
  background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pack-name{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  font-size:22px;
  line-height:1.08;
  margin-bottom:8px;
  color:var(--ink);
}
.pack-for{
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.pack-list{list-style:none;margin:0 0 26px;padding:0;flex:1;}
.pack-list li{
  padding:10px 0 10px 26px;
  position:relative;
  color:var(--ink-soft);
  font-size:14.5px;
  border-bottom:1px solid rgba(30,52,72,0.1);
}
/* Links inside a tier. The featured tile inverts to dark while the
   other two sit on cream, so this needs both inks — teal reads on the
   dark tile and fails on the light one, and --teal-ink the other way
   round. Written for both even though only the featured tier carries a
   link today, because the next one added will not come with a
   reminder. */
.pack-list a{
  color:var(--teal-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(11,138,130,0.4);
  transition:text-decoration-color 0.2s;
}
.pack-list a:hover{text-decoration-color:var(--teal-ink);}
.pack-feat .pack-list a{color:var(--teal);text-decoration-color:rgba(22,192,183,0.45);}
.pack-feat .pack-list a:hover{text-decoration-color:var(--teal);}
@media (prefers-reduced-motion:reduce){.pack-list a{transition:none;}}

.pack-list li::before{
  content:"";
  position:absolute;
  left:0;top:16px;
  width:10px;height:11px;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pack-price{
  font-family:var(--disp);
  font-size:24px;
  letter-spacing:-0.3px;
  line-height:1;
  color:var(--ink);
}
.pack-price small{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-faint);
  margin-top:8px;
}
.pack-btn{margin-top:22px;justify-content:center;position:relative;z-index:1;}
.pack-note{
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  text-align:center;
  margin-top:36px;
}

/* ═════════════════════════════════════════════════════════════
   PROCESS EXPLORER — phase list + sticky detail panel
   ═════════════════════════════════════════════════════════════ */
.px-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
.px-item{
  display:flex;
  gap:20px;
  align-items:center;
  width:100%;
  text-align:left;
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:14px;
  cursor:pointer;
  color:var(--text);
  font-family:var(--font);
  transition:border-color 0.25s,background 0.25s;
}
.px-item:hover{border-color:rgba(22,192,183,0.35);}
.px-item.active{
  border-color:rgba(22,192,183,0.55);
  background:var(--surface);
}
.px-num{
  position:relative;
  width:52px;height:59px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--disp);
  font-size:20px;
  color:rgba(223,239,253,0.35);
  transition:color 0.25s;
}
.px-num::before{
  content:"";
  position:absolute;inset:0;
  background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:0.28;
}
.px-num::after{
  content:"";
  position:absolute;inset:2px;
  background:var(--obsidian);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.px-item.active .px-num{color:var(--teal);}
.px-num b{position:relative;z-index:1;font-weight:400;}
.px-item-title{
  display:block;
  font-family:var(--disp);
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:0;
}
.px-when{
  display:block;
  font-size:14px;
  font-weight:600;
  color:rgba(223,239,253,0.62);
  margin-top:5px;
}
.px-item.active .px-when{color:var(--teal);}
.px-own{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:600;
  color:rgba(223,239,253,0.55);
  margin-top:34px;
  line-height:1.6;
}
.px-hex{
  width:11px;height:12px;
  flex-shrink:0;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.px-stage{position:sticky;top:150px;}
.px-detail{
  display:none;
  background:var(--surface);
  border:1px solid rgba(22,192,183,0.35);
  border-radius:20px;
  padding:40px;
  box-shadow:-16px 20px 0 rgba(22,192,183,0.08);
}
.px-detail.active{display:block;animation:foundIn 0.3s ease;}
.px-d-when{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--teal);
  margin-bottom:12px;
}
.px-detail h3{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  font-size:29px;
  margin-bottom:16px;
}
.px-detail p{
  color:rgba(233,243,252,0.86);
  font-size:17px;
  line-height:1.75;
  margin-bottom:24px;
}
.px-detail p strong{color:var(--text);}
.px-detail ul{list-style:none;margin:0;padding:0;}
.px-detail li{
  padding:13px 0 13px 32px;
  position:relative;
  color:rgba(233,243,252,0.92);
  font-size:16.5px;
  line-height:1.55;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.px-detail li::before{
  content:"";
  position:absolute;
  left:2px;top:20px;
  width:12px;height:13px;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.px-out{
  margin-top:24px !important;
  margin-bottom:0 !important;
  font-size:15.5px !important;
  font-weight:700;
  color:var(--teal) !important;
}

/* ═════════════════════════════════════════════════════════════
   SECTION SEPARATION — chapter rhythm

   The page reads as five chapters rather than a dozen alternating
   bands, because a tone flip every section is as tiring as none:

     1 dark   hero · ticker · anchor bar
     2 warm   client strip · Our Work (cream) · About (sand)
     3 dark   Services · Where You Show Up · Process
     4 warm   Packages (cream) · Testimonials (sand)
     5 dark   Free audit · FAQ · closing CTA

   A chapter's opening section gets the full seam treatment — rule,
   teal gradient wash, hexagon marker. Sections *inside* a chapter
   get only a hairline, so the eye reads them as continuous.
   ═════════════════════════════════════════════════════════════ */

/* — Chapter openers (dark) — */
.services-section,
.audit-section{
  position:relative;
  border-top:1px solid rgba(255,255,255,0.14);
}
.services-section::before,
.audit-section::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:140px;
  background:linear-gradient(180deg,rgba(22,192,183,0.06) 0%,transparent 100%);
  pointer-events:none;
}
.services-section::after,
.audit-section::after{
  content:"";
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%);
  width:11px;height:12px;
  background:var(--teal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:0.55;
}

/* — Inside a dark chapter: hairline only — */
.process-section,
.ins-section,
.lf-section,
.faq-section,
.cta-section{
  position:relative;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* — Light bands —
     This used to read "the background change is already the divide,
     so warm bands take a thin ink hairline", and .work-section and
     .people-section took no rule at all. That held when the two
     light tones were cream over beige. They are now a cool
     near-white and white — about 4/255 apart — so where one light
     band meets another the seam is the ONLY separation, and it has
     to be a real rule rather than a whisper.

     
/* Hexagon on the light seams too, so a chapter break looks the same
   whichever side of the palette it lands on. */
.work-section::after,
.people-section::after,
.pack-section::after,
.testi-section::after{
  content:"";
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%);
  width:11px;height:12px;
  background:var(--teal-ink);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:0.55;
  z-index:2;
}
.work-section,
.people-section,
.pack-section,
.testi-section{position:relative;}

/* Gentle depth shift inside the dark chapters so neighboring
   sections still separate without a tone flip. */
.process-section,
.lf-section,
.faq-section{background:rgba(12,26,38,0.45);}

/* ── VERTICAL RHYTHM ──
   Global .section-pad is 100px top and bottom, which made every
   band the same height and pushed the page past twelve screens.
   Homepage sections tighten to 88px, and the short closing
   sections tighten further, so the page has a cadence instead of
   a metronome. */
.work-section,
.people-section,
.services-section,
.found-section,
.process-section,
.pack-section,
.testi-section{padding:88px 0;}
.audit-section,
.ins-section,
.lf-section,
.faq-section{padding:76px 0;}
.cta-section{padding:96px 0 104px;}

/* Mobile: the same cadence, scaled to the screen.
 *
 * 88px at each end of a section is a fifth of a 390px-tall viewport,
 * and there are fourteen sections — that alone was several screens
 * of nothing between the content. The homepage measured 23.5 screens
 * on a phone against 15.4 on desktop and this was most of the gap.
 * The three-step rhythm above (88 / 76 / 96) is preserved in
 * proportion rather than flattened. */
@media (max-width:760px){
  .work-section,
  .people-section,
  .services-section,
  .found-section,
  .process-section,
  .pack-section,
  .testi-section{padding:54px 0;}
  .audit-section,
  .ins-section,
  .lf-section,
  .faq-section{padding:46px 0;}
  .cta-section{padding:60px 0 64px;}
  .statement{padding:52px 0;}
  .client-strip{padding:26px 0;}
}

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .svc-row{grid-template-columns:50px 1fr auto 46px;gap:20px;}
  .people-grid{gap:48px;}
  .pack-grid{gap:16px;}
}

@media (max-width:900px){
  .sec-h2{font-size:clamp(26px,6.6vw,34px);max-width:none;}
  .hero{min-height:82vh;}
  .hero-content-wrap{padding-top:170px;padding-bottom:70px;}
  .case-card{
    position:static;
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 28px;
    min-height:0;
  }
  .people-grid{grid-template-columns:1fr;gap:64px;}
  .polaroids{height:440px;}
  .svc-row{grid-template-columns:44px 1fr 46px;}
  .svc-desc{display:none;}
  .pack-grid{grid-template-columns:1fr;}
  .px-grid{grid-template-columns:1fr;}
  .px-stage{position:static;}
  .anchorbar{top:64px;}
  .found-rail{grid-template-columns:repeat(3,1fr);}
  .found-tab{border-bottom:1px solid rgba(255,255,255,0.07);}
  .found-tab.active{border-bottom-color:var(--teal);}
  .found-panel{grid-template-columns:1fr;gap:32px;padding:32px 24px;}
  .found-footer{justify-content:center;text-align:center;}
  .testi-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;}
  .audit-panel{grid-template-columns:1fr;padding:44px 32px;gap:36px;}
  .faq-layout{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:600px){
  .hero-h1{letter-spacing:-1.2px;}
  /* Space Mono is monospaced, so the eyebrow's width is entirely
   * predictable: 44 characters of "SEO · Paid Media · Web Design —
   * Philadelphia" at 12px/0.18em needs ~412px and wrapped to two
   * lines on every phone. Tightening the size and tracking brings
   * it back to one line inside a 390px viewport. */
  .eyebrow{font-size:10px;letter-spacing:0.1em;gap:8px;}
  .eyebrow::before{margin-top:3px;}
  .hero-btns .btn{width:100%;justify-content:center;}
  
  
  
  .sec-head{margin-bottom:40px;}
  .people-facts{gap:28px;}
  .domain-submit{padding:16px;}
  .people-btns .btn,.cta-btns .btn{width:100%;justify-content:center;}
  .found-rail{grid-template-columns:repeat(2,1fr);}
  .found-tab span{font-size:12px;}
  .found-footer-btns{width:100%;}
  .found-footer-btns .btn{flex:1;justify-content:center;}
}


/* ── Boxed accents in section headings ──
   The shared .boxed is inked for a dark band. The three light bands on
   this page (work, packages, testimonials) take the deep teal the cream
   statements use, so the box has contrast on cream and sand. */
.sec-h2 .boxed,.cta-h .boxed{margin-top:0.18em;}
.work-section .boxed,
.pack-section .boxed,
.testi-section .boxed{
  border-color:var(--teal-ink);
  color:var(--teal-ink);
  box-shadow:7px 7px 0 rgba(11,138,130,0.14);
}

/* ═══ PHILADELPHIA BAND ═══
   The city, the offices, the areas. Copy left, an offices card and
   the area links right, on the cream ground the work section uses. */
.phl-section{background:var(--cream);color:var(--ink);}
.phl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:56px;align-items:start;}
.phl-copy-col .sec-h2{margin:8px 0 18px;}
.phl-copy-col p{font-size:17px;line-height:1.7;color:var(--ink-soft,#3b4a5a);margin:0 0 16px;max-width:60ch;}
.phl-copy-col .hero-btns{margin-top:26px;}
.phl-side{display:flex;flex-direction:column;gap:18px;}
.phl-offices{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;
  padding:24px 26px;border-radius:20px;
  background:#fff;border:1px solid rgba(30,52,72,0.12);box-shadow:0 18px 44px rgba(30,52,72,0.08);
}
.phl-office-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-ink);}
.phl-office address{font-style:normal;font-size:15px;line-height:1.55;color:var(--ink);margin:8px 0 0;}
.phl-phone{
  grid-column:1 / -1;display:inline-flex;align-items:center;gap:10px;justify-self:start;
  padding:10px 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;text-decoration:none;
}
.phl-phone:hover{background:var(--teal);color:#052e2c;}
.phl-areas-label{display:block;font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
.phl-area-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.phl-area-list a{
  display:inline-block;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none;
  color:var(--navy);background:rgba(30,52,72,0.06);border:1px solid rgba(30,52,72,0.12);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.phl-area-list a:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.phl-area-list a.phl-area-all{background:transparent;border-style:dashed;color:var(--teal-ink);}
.phl-area-list a.phl-area-all i{font-size:11px;margin-left:4px;}
@media (max-width:960px){
  .phl-grid{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:560px){
  .phl-offices{grid-template-columns:1fr;}
}