/* =========================================================
   Willow Marketing Co — design system
   Apple-inspired: big type, deep whitespace, light/dark bands.
   Everything here is reused by future pages. Add page-specific
   rules at the bottom under a clear heading, not inline.
   ========================================================= */

:root{
  /* Ink & surfaces */
  /* Warm neutrals. Every grey in this palette carries a little brown in it —
     that is what keeps the page reading as earthen rather than clinical. */
  --ink:        #211e1a;   /* primary text — warm near-black, never pure #000 */
  --ink-2:      #6b6259;   /* secondary text */
  --ink-3:      #756d63;   /* tertiary / captions — dark enough to pass AA at 14px */
  --line:       #ded6c9;   /* hairlines */
  --bg:         #faf7f2;   /* off-white, faintly warm */
  --bg-alt:     #f1ebe1;   /* sand — the alternating band */
  --surface:    #ffffff;   /* cards sit ABOVE the page, so they stay white */

  /* Dark bands — warm charcoal, not black */
  --dark:       #1b1815;
  --dark-2:     #232019;
  --dark-ink:   #f5f1e9;
  --dark-ink-2: #a8a093;
  --dark-line:  rgba(255,255,255,.14);

  /* Brand — clay. Rebrand by editing these four lines and nothing else.
     The -rgb pairs exist so tints can be written as rgba(var(--accent-rgb), .06)
     instead of hardcoding the colour a second time. */
  --accent:           #9a5b3d;   /* 5.3:1 on the off-white — safe for text */
  --accent-h:         #7e4930;   /* hover */
  --accent-rgb:       154, 91, 61;
  --accent-light:     #d9a88c;   /* the accent on dark bands — 8.3:1 */
  --accent-light-rgb: 217, 168, 140;

  /* Geometry */
  --wrap:       692px;     /* Apple's text measure */
  --wrap-wide:  1120px;
  --radius:     18px;
  --radius-lg:  28px;
  --nav-h:      48px;

  /* Motion */
  --ease:       cubic-bezier(.28,.11,.32,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------------------------------------------------------
   Layout containers
   --------------------------------------------------------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.wrap-wide{ max-width:var(--wrap-wide); margin-inline:auto; padding-inline:22px; }

section{ padding:110px 0; position:relative; }
section.hero{ padding:76px 0 0; }

.alt{ background:var(--bg-alt); }
.dark{ background:var(--dark); color:var(--dark-ink); }
.dark .lede.dim{ color:var(--dark-ink-2); }

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.06; }

h1{ font-size:clamp(40px,7.2vw,80px); letter-spacing:-.03em; }
h2{ font-size:clamp(32px,5.2vw,54px); }
h3{ font-size:22px; letter-spacing:-.02em; line-height:1.2; }

.eyebrow{
  margin:0 0 16px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); text-transform:none;
}
.dark .eyebrow{ color:var(--accent-light); }

.lede{
  margin:22px 0 0;
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.38;
  letter-spacing:-.018em;
  color:var(--ink-2);
  max-width:34em;
}
h1 + .lede, h2 + .lede{ margin-top:20px; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-block;
  background:var(--accent); color:#fff;
  font-size:17px; font-weight:500; line-height:1;
  padding:14px 24px; border-radius:980px;
  text-decoration:none; border:1px solid var(--accent);
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--accent-h); border-color:var(--accent-h); }
.btn:active{ transform:scale(.975); }

.btn.ghost{
  background:transparent; color:var(--accent); border-color:var(--line);
}
.btn.ghost:hover{ background:rgba(var(--accent-rgb), .06); border-color:var(--accent); }

.btn-text{
  display:inline-block;
  color:var(--accent); font-size:17px; text-decoration:none;
}
.btn-text::after{ content:" \203A"; transition:padding-left .2s var(--ease); }
.btn-text:hover{ text-decoration:underline; }
.btn-text:hover::after{ padding-left:3px; }
.btn-text.light{ color:var(--accent-light); }

/* Inline links inside body copy. Without this they fall back to the browser's
   default blue: fails contrast, and clashes with everything else on the page.
   :not([class]) deliberately leaves .btn and .btn-text alone. */
p a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:.06em;
}
p a:not([class]):hover{ color:var(--accent-h); }
.dark p a:not([class]),
.work p a:not([class]){ color:var(--accent-light); }

.cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }

/* ---------------------------------------------------------
   Nav — frosted, 48px, Apple's small 12px links
   --------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-inner{
  max-width:var(--wrap-wide); margin-inline:auto; padding-inline:22px;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
}
/* Wordmark: "Willow" carries the weight, "Marketing Co" trails it lighter and
   smaller. Two weights of one typeface reads as a considered mark; two words
   at the same weight just reads as a long name. */
.nav-brand{
  display:flex; align-items:baseline; gap:7px;
  color:var(--ink); text-decoration:none;
  font-size:18px; letter-spacing:-.02em;
  white-space:nowrap;
}
.brand-word{ font-weight:600; }
.brand-tail{
  font-weight:400; font-size:.82em; color:var(--ink-2);
  margin-left:.36em; letter-spacing:-.005em;
  transition:color .2s var(--ease);
}
.nav-brand:hover .brand-tail{ color:var(--ink); }
/* The wordmark aligns on the baseline so the two weights sit correctly; the
   leaf has no baseline of its own, so it centres itself instead. */
.nav-leaf{ width:19px; height:19px; fill:var(--accent); align-self:center; }
.nav-leaf .stroke{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; }

.nav-links{ display:flex; gap:34px; }
.nav-links a{
  color:var(--ink); opacity:.85; text-decoration:none;
  font-size:12px; letter-spacing:-.01em;
  transition:opacity .2s var(--ease);
}
.nav-links a:hover{ opacity:1; }

.nav-toggle{
  display:none; width:34px; height:34px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle span{
  width:17px; height:1px; background:var(--ink); display:block;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.nav-panel{ display:none; border-top:1px solid rgba(0,0,0,.08); padding:12px 22px 22px; }
.nav-panel a{
  display:block; padding:14px 0; color:var(--ink); text-decoration:none;
  font-size:22px; font-weight:500; letter-spacing:-.02em;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-panel a:last-child{ border-bottom:0; }

/* ---------------------------------------------------------
   Hero + the before/after browser art
   --------------------------------------------------------- */
.hero{ text-align:center; overflow:hidden; }
.hero .lede{ margin-inline:auto; }
.hero .cta-row{ justify-content:center; }

.hero-art{
  margin-top:64px; padding-bottom:110px;
  position:relative; height:430px;
}

.frame{
  position:absolute; border-radius:12px; overflow:hidden;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.14);
}
.frame-old{
  width:52%; left:0; top:34px; transform:rotate(-1.2deg);
  filter:saturate(.35);
}
.frame-new{
  width:64%; right:0; top:0; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.08), 0 36px 80px rgba(0,0,0,.22);
}

.chrome{
  display:flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  background:#e9e9ec; border-bottom:1px solid rgba(0,0,0,.07);
}
.chrome i{ width:7px; height:7px; border-radius:50%; background:#c8c8cd; }
.chrome span{
  margin-left:10px; font-size:9px; color:#8b8b90; letter-spacing:0;
}
.chrome.dark-chrome{ background:#2a2a2e; border-bottom-color:rgba(255,255,255,.08); }
.chrome.dark-chrome i{ background:#48484d; }

.screen{ padding:14px; }
.screen-old{ background:#fdfdfa; height:230px; }
.o-bar{ height:14px; background:#c9d3c4; margin:-14px -14px 12px; }
.o-hero{ height:52px; background:#dfe4dc; margin-bottom:12px; }
.o-cols{ display:flex; gap:8px; margin-bottom:12px; }
.o-cols span{ flex:1; height:34px; background:#eceee9; }
.o-line{ height:7px; background:#e6e6e2; margin-bottom:6px; }
.o-line.short{ width:62%; }

.screen-new{ background:#fff; height:290px; padding:0; }
.n-nav{
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-bottom:1px solid #f0f0f2;
}
.n-nav b{ width:24px; height:7px; border-radius:2px; background:var(--accent); }
.n-nav span{ width:26px; height:5px; border-radius:2px; background:#e3e3e6; }
.n-hero{ padding:38px 16px 30px; text-align:center; }
.n-h1{ height:15px; border-radius:4px; background:#25252a; width:62%; margin:0 auto 9px; }
.n-h1.sm{ width:40%; }
.n-pill{
  width:88px; height:19px; border-radius:980px;
  background:var(--accent); margin:20px auto 0;
}
.n-cards{ display:flex; gap:10px; padding:0 16px; }
.n-cards span{ flex:1; height:74px; border-radius:9px; background:#f5f5f7; }

/* ---------------------------------------------------------
   Grids
   --------------------------------------------------------- */
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:64px;
}

.stat h3{ margin-bottom:12px; }
.stat p{ color:var(--dark-ink-2); font-size:17px; }

.cards .card{
  background:var(--surface); border-radius:var(--radius-lg); padding:38px 32px;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 2px 4px rgba(0,0,0,.02), 0 12px 30px rgba(0,0,0,.05);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cards .card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(0,0,0,.03), 0 20px 44px rgba(0,0,0,.09);
}
.card-ico{ margin-bottom:22px; }
.card-ico svg{
  width:32px; height:32px; fill:none;
  stroke:var(--accent); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ margin-bottom:12px; }
.card p{ color:var(--ink-2); font-size:16px; }
.card-meta{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-3);
}

/* ---------------------------------------------------------
   Work
   --------------------------------------------------------- */
.work{ background:var(--dark-2); color:var(--dark-ink); }

/* This section is dark but doesn't carry the .dark class, so the generic
   .dark descendant rules never reach it. Without these, .lede and .ticks keep
   their light-theme ink on a near-black background — about 2.7:1, effectively
   unreadable. Any future dark section needs the same treatment, or the
   .dark class. */
.work .lede,
.work .lede.dim{ color:var(--dark-ink-2); }
.work .ticks li{ color:var(--dark-ink-2); }
.work .ticks li::before{ border-color:var(--accent-light); }
.work .eyebrow{ color:var(--accent-light); }

/* Case study: visual on one side, copy on the other. .reverse flips it. */
.case{
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
  margin-top:72px;
}
.case + .case{ margin-top:100px; padding-top:100px; border-top:1px solid var(--dark-line); }
.case.reverse .case-visual{ order:2; }

.case-copy .num{
  margin:0 0 18px; font-size:13px; font-weight:600;
  letter-spacing:.08em; color:rgba(255,255,255,.35);
}
.case-copy .eyebrow{ color:var(--accent-light); }
.case-copy h3{ font-size:clamp(26px,3vw,34px); margin-bottom:16px; }
.case-copy > p{ color:var(--dark-ink-2); font-size:17px; }
.case-copy .ticks{ margin:24px 0 26px; }

.is-placeholder .case-copy h3{ color:rgba(255,255,255,.55); }

/* Screenshot frames */
.shot{
  border-radius:14px; overflow:hidden;
  background:#0b0b0c; border:1px solid var(--dark-line);
  box-shadow:0 2px 8px rgba(0,0,0,.3), 0 26px 60px rgba(0,0,0,.45);
}
.shot img{ width:100%; height:auto; }

.ba-item{ margin:0; }
.ba-item figcaption{
  margin-top:14px; font-size:13px; color:rgba(255,255,255,.42);
  letter-spacing:-.01em;
}
.work-cta{
  margin-top:64px; padding-top:36px; border-top:1px solid var(--dark-line);
  font-size:19px; color:var(--dark-ink-2);
}
.work-cta .btn-text{ margin-left:8px; }

/* --- Ready for the next case study -------------------------------------
   Unused until a second project is added. Keep: a Before/After pair needs
   the .ba grid and the Before/After tags. See README, "The Work section".
   --------------------------------------------------------------------- */
.tag{
  display:inline-block; padding:4px 11px; border-radius:980px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.55);
}
.tag-after{ background:rgba(var(--accent-rgb), .28); color:var(--accent-light); }

/* Before/after pair stacks inside one column */
.case-visual.ba{ display:grid; gap:26px; }
/* Force a matching height so the Before/After captions line up. */
.case-visual.ba .screen{ height:240px; }

/* --- Mock of the live realtor site (its own navy/gold/cream palette) --- */
.screen-jg{ background:#faf7f2; height:290px; padding:0; }
.jg-nav{
  display:flex; align-items:center; gap:9px;
  padding:10px 15px; background:#0d1f2d;
}
.jg-nav b{ width:30px; height:8px; border-radius:2px; background:#b89a5e; }
.jg-nav span{ width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.28); }
.jg-nav em{
  width:16px; height:9px; border-radius:2px; margin-left:auto;
  background:rgba(255,255,255,.16);
}
.jg-hero{
  display:flex; align-items:center; gap:18px; padding:26px 20px 22px;
}
.jg-portrait{
  width:74px; height:74px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#e8e2d9,#c9beac);
  border:2px solid #b89a5e;
}
.jg-copy{ flex:1; }
.jg-rule{ width:34px; height:2px; background:#b89a5e; margin-bottom:11px; }
.jg-h{ height:11px; border-radius:3px; background:#0d1f2d; width:78%; margin-bottom:7px; }
.jg-h.sm{ width:52%; background:#6b6560; height:7px; }
.jg-btn{
  width:74px; height:17px; border-radius:2px; background:#b89a5e; margin-top:14px;
}
.jg-cards{ display:flex; gap:9px; padding:0 20px; }
.jg-cards span{
  flex:1; height:66px; border-radius:3px;
  background:var(--surface); border:1px solid #e8e2d9;
}

/* ---------------------------------------------------------
   Pricing
   --------------------------------------------------------- */
.tiers{ align-items:start; }
.tier{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px 30px; display:flex; flex-direction:column; height:100%;
  position:relative;
}
.tier.featured{
  border-color:var(--accent);
  box-shadow:0 2px 6px rgba(var(--accent-rgb), .07), 0 22px 50px rgba(var(--accent-rgb), .13);
}
.badge{
  position:absolute; top:-13px; left:30px;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:6px 13px; border-radius:980px; margin:0;
}
.tier h3{ margin-bottom:18px; }
.price{ margin:0; line-height:1; }
.price .amt{ font-size:46px; font-weight:600; letter-spacing:-.035em; }
.price .amt.lets{ font-size:34px; }
.price-note{ margin:8px 0 26px; font-size:14px; color:var(--ink-3); }

.ticks{ list-style:none; margin:0 0 30px; padding:0; }
.ticks li{
  position:relative; padding:0 0 12px 26px;
  font-size:16px; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:6px;
  width:11px; height:6px; border-left:1.8px solid var(--accent);
  border-bottom:1.8px solid var(--accent); transform:rotate(-45deg);
}
.tier .btn, .tier .btn.ghost{ margin-top:auto; text-align:center; }
.dark .ticks li{ color:var(--dark-ink-2); }
.dark .ticks li::before{ border-color:var(--accent-light); }

/* Care plans */
.care{
  margin-top:80px; background:var(--bg-alt);
  border-radius:var(--radius-lg); padding:56px 48px;
}
.care-head h3{ font-size:32px; letter-spacing:-.026em; }
.care-head p{ margin-top:12px; color:var(--ink-2); max-width:46em; font-size:17px; }
.care-plans{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:36px;
}
.plan{ background:var(--surface); border-radius:var(--radius); padding:30px 28px; }
.plan-name{ margin:0; font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:.01em; }
.plan-price{
  margin:6px 0 20px; font-size:38px; font-weight:600; letter-spacing:-.03em; line-height:1;
}
.plan-price span{ font-size:16px; font-weight:400; color:var(--ink-3); letter-spacing:-.01em; }
.plan ul{ list-style:none; margin:0; padding:0; }
.plan li{
  position:relative; padding:0 0 10px 20px; font-size:15px; color:var(--ink-2);
}
.plan li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
/* On the sand band, --ink-3 drops to 4.3:1 at this size. --ink-2 keeps it
   above 4.5 without flattening the caption hierarchy elsewhere. */
.fineprint{
  margin-top:28px; font-size:13px; line-height:1.5; color:var(--ink-2); max-width:60em;
}

/* ---------------------------------------------------------
   Process
   --------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:64px;
}
.step{ border-top:1px solid var(--line); padding-top:22px; }
.num{
  margin:0 0 14px; font-size:13px; font-weight:600;
  color:var(--accent); letter-spacing:.08em;
}
.step h3{ font-size:20px; margin-bottom:10px; }
.step p{ font-size:15px; color:var(--ink-2); }

/* ---------------------------------------------------------
   Contact form
   --------------------------------------------------------- */
.contact .wrap{ max-width:760px; }
.form{
  margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:22px;
  text-align:left;
}
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-size:14px; color:var(--dark-ink-2); margin-bottom:8px;
}
.field .opt{ color:#6f6f76; }
.field input, .field textarea{
  font:inherit; font-size:17px; color:var(--dark-ink);
  background:rgba(255,255,255,.06);
  border:1px solid var(--dark-line); border-radius:12px;
  padding:13px 15px; width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder{ color:#6f6f76; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent-light); background:rgba(255,255,255,.09);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#ff6b6b;
}
.field textarea{ resize:vertical; min-height:96px; }
.submit{ display:flex; flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note{ margin:0; font-size:14px; color:var(--dark-ink-2); }
.form-note.ok{ color:var(--accent-light); }
.form-note.err{ color:#ff8f8f; }

/* ---------------------------------------------------------
   Thank-you page (thanks.html)
   --------------------------------------------------------- */
.thanks-page{
  min-height:calc(100vh - var(--nav-h) - 120px);
  display:flex; align-items:center; text-align:center;
}
.thanks-page .lede{ margin-inline:auto; }
.thanks-page .cta-row{ justify-content:center; }
.thanks-mark{
  width:76px; height:76px; margin:0 auto 34px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--accent-light-rgb), .12); border:1px solid rgba(var(--accent-light-rgb), .4);
}
.thanks-mark svg{
  width:34px; height:34px; fill:none; stroke:var(--accent-light);
  stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
}

/* Netlify honeypot. Must be genuinely unreachable — display:none keeps it out
   of the layout, the tab order, and the accessibility tree. Bots that parse the
   HTML fill it anyway, and Netlify silently discards those submissions. */
.hp{ display:none; }

.or{ margin-top:34px; font-size:15px; color:var(--dark-ink-2); }
.or a{ color:var(--accent-light); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer{
  background:var(--bg-alt); padding:52px 0 44px;
  font-size:12px; color:var(--ink-2);   /* 12px on sand needs the darker token */
}
.foot-cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:32px;
  padding-bottom:34px; border-bottom:1px solid var(--line);
}
.foot-h{ margin:0 0 12px; font-weight:600; color:var(--ink); font-size:12px; }
.foot-cols a{
  display:block; color:var(--ink-2); text-decoration:none; padding:5px 0;
}
.foot-cols a:hover{ color:var(--ink); text-decoration:underline; }
.foot-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-top:20px;
}
.foot-legal p{ margin:0; }

/* =========================================================
   SERVICES PAGE
   Everything below is used only by services.html.
   ========================================================= */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Sticky sub-nav under the main bar ------------------ */
.subnav{
  position:sticky; top:var(--nav-h); z-index:40;
  background:rgba(250,247,242,.82);   /* matches .nav — must stay off-white */
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.subnav-inner{
  max-width:var(--wrap-wide); margin-inline:auto; padding-inline:22px;
  height:52px; display:flex; align-items:center; gap:28px;
}
.subnav-title{
  font-size:20px; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.subnav-links{ display:flex; gap:26px; margin-left:auto; }
.subnav-links a{
  font-size:12px; color:var(--ink); opacity:.82; text-decoration:none;
  white-space:nowrap; transition:opacity .2s var(--ease);
}
.subnav-links a:hover{ opacity:1; }
.btn.small{ font-size:12px; padding:8px 16px; white-space:nowrap; }

/* Anchors must clear both bars. */
html:has(.subnav){ scroll-padding-top:112px; }

/* ---- Page hero ------------------------------------------ */
.page-hero{ padding:88px 0 76px; text-align:center; }
.page-hero .lede{ margin-inline:auto; }

/* ---- One service block ---------------------------------- */
.svc{ padding:96px 0; }
.svc-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;
}
.svc-grid.reverse .svc-visual{ order:2; }

.svc-num{
  margin:0 0 14px; font-size:13px; font-weight:600;
  letter-spacing:.08em; color:var(--ink-3);
}
.dark .svc-num{ color:rgba(255,255,255,.35); }
.svc-copy h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:14px; }
.svc-lede{
  font-size:21px; letter-spacing:-.018em; color:var(--ink);
  margin-bottom:16px;
}
.dark .svc-lede{ color:var(--dark-ink); }
.svc-copy > p{ color:var(--ink-2); font-size:17px; }
.dark .svc-copy > p{ color:var(--dark-ink-2); }

.spec-h{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); margin:34px 0 16px;
}
.dark .spec-h{ color:rgba(255,255,255,.4); }
.svc-copy .ticks{ margin-bottom:0; }

/* Price / timeline / revisions strip */
.facts{
  display:flex; flex-wrap:wrap; gap:0; margin:28px 0 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.dark .facts{ border-color:var(--dark-line); }
.facts > div{ flex:1; min-width:110px; padding:16px 18px 16px 0; }
.facts dt{
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}
.dark .facts dt{ color:rgba(255,255,255,.4); }
.facts dd{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.02em; }

/* "What we need from you" callout */
.needs{
  margin-top:32px; padding:22px 24px;
  background:var(--bg-alt); border-radius:var(--radius);
  border-left:3px solid var(--accent);
}
.dark .needs{ background:rgba(255,255,255,.05); border-left-color:var(--accent-light); }
.alt .needs{ background:var(--surface); }
.needs h3{
  font-size:15px; margin-bottom:8px; letter-spacing:-.01em;
}
.needs p{ font-size:15px; color:var(--ink-2); margin:0; }
.dark .needs p{ color:var(--dark-ink-2); }
.needs.warn{ border-left-color:#b8863a; }

.svc-copy code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px;
}
.dark .svc-copy code{ background:rgba(255,255,255,.1); }

/* ---- Service visuals ------------------------------------ */
.stack{ position:relative; height:340px; }
.stack .frame{ position:absolute; }
.stack .frame-back{
  width:74%; left:0; top:52px; filter:saturate(.3); transform:rotate(-1.5deg);
}
.stack .frame-front{ width:82%; right:0; top:0; z-index:2; }
.stack.single{ height:390px; }
.stack.single .frame-front{ width:100%; right:auto; left:0; }
.screen-new.tall{ height:340px; }
.n-band{
  height:52px; margin:14px 16px 0; border-radius:9px;
  background:linear-gradient(100deg,var(--accent),var(--accent-h));
}

/* Care log */
.log{
  background:var(--surface); border-radius:var(--radius-lg); padding:28px 30px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 6px rgba(0,0,0,.03), 0 18px 44px rgba(0,0,0,.07);
}
.log-h{
  margin:0 0 18px; font-size:12px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
.log ul{ list-style:none; margin:0; padding:0; }
.log li{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-top:1px solid var(--line); font-size:14px;
}
.log li:first-child{ border-top:0; padding-top:0; }
.log-d{ color:var(--ink-3); width:52px; flex:none; font-variant-numeric:tabular-nums; }
.log-t{ flex:1; color:var(--ink); }
.log-s{
  flex:none; font-size:11px; font-weight:600; padding:4px 10px; border-radius:980px;
  background:var(--bg-alt); color:var(--ink-3); white-space:nowrap;
}
.log-s.ok{ background:rgba(var(--accent-rgb), .1); color:var(--accent); }

/* ---- What we'll need from you --------------------------- */
.reqs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:60px;
}
.req{ padding-top:24px; border-top:1px solid var(--ink); }
.req-k{
  margin:0 0 10px; font-size:12px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
}
.req h3{ font-size:19px; margin-bottom:20px; }
.req .ticks li{ padding-bottom:14px; font-size:15px; }
.req .ticks strong{ color:var(--ink); font-weight:600; }
.req code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px;
}

.callouts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:56px;
}
.callout{
  padding:28px 30px; border-radius:var(--radius-lg);
  background:var(--bg-alt); border-left:3px solid var(--accent);
}
.callout h3{ font-size:18px; margin-bottom:12px; }
.callout p{ margin:0; font-size:15px; color:var(--ink-2); }
.callout.warn{ border-left-color:#b8863a; background:rgba(184,134,58,.07); }
.callout.secure{ border-left-color:var(--accent); background:rgba(var(--accent-rgb), .06); }

/* ---- What we don't do ----------------------------------- */
.dont-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px 32px; margin-top:60px;
}
.dont{ padding-top:22px; border-top:1px solid var(--dark-line); }
.dont h3{ font-size:18px; margin-bottom:10px; }
.dont p{ font-size:15px; color:var(--dark-ink-2); }

/* ---- Compare table -------------------------------------- */
.table-scroll{
  margin-top:56px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.compare{
  width:100%; border-collapse:collapse; min-width:620px; font-size:15px;
}
.compare th, .compare td{
  padding:15px 18px; text-align:left; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.compare thead th{
  font-size:18px; font-weight:600; letter-spacing:-.02em;
  border-bottom:1px solid var(--ink); padding-bottom:14px;
}
.compare tbody th{
  font-weight:400; color:var(--ink-2); white-space:nowrap;
}
.compare td{ color:var(--ink); }
.compare .hi{ background:rgba(var(--accent-rgb), .045); }
.compare thead .hi{ color:var(--accent); }
.compare td.y{ color:var(--accent); font-weight:500; }
.compare td.n{ color:var(--ink-3); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td{ border-bottom:0; }
.table-note{ margin-top:22px; font-size:14px; color:var(--ink-3); }

/* ---- FAQ ------------------------------------------------ */
.faq{ margin-top:52px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:19px; font-weight:500; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq summary:hover{ color:var(--accent); }
.faq details p{
  margin:0; padding:0 48px 26px 0; font-size:16px; color:var(--ink-2);
}

.cta-sec{ text-align:center; }
.cta-sec .lede{ margin-inline:auto; }
.cta-sec .cta-row{ justify-content:center; }

/* ---------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------- */
/* Only hidden when JS is running — a script failure must never blank the page. */
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.06s; }
.reveal:nth-child(3){ transition-delay:.12s; }
.reveal:nth-child(4){ transition-delay:.18s; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:900px){
  section{ padding:84px 0; }
  .grid-3, .steps, .care-plans{ grid-template-columns:1fr; }

  /* Case studies stack, visual always first */
  .case{ grid-template-columns:1fr; gap:36px; margin-top:52px; }
  .case.reverse .case-visual{ order:0; }
  .case + .case{ margin-top:64px; padding-top:64px; }
  .case-visual.ba{ grid-template-columns:1fr 1fr; gap:16px; }
  .case-visual.ba .screen{ height:170px; }
  .ba-item figcaption{ margin-top:10px; }

  /* Services page */
  .svc{ padding:72px 0; }
  .svc-grid{ grid-template-columns:1fr; gap:40px; }
  .svc-grid.reverse .svc-visual{ order:0; }
  .dont-grid{ grid-template-columns:1fr 1fr; gap:22px 28px; margin-top:44px; }
  .reqs-grid{ grid-template-columns:1fr; gap:28px; margin-top:44px; }
  .callouts{ grid-template-columns:1fr; gap:18px; margin-top:40px; }
  .stack{ height:250px; }
  .stack.single{ height:300px; }
  .screen-new.tall{ height:250px; }
  .n-band{ height:38px; margin:10px 12px 0; }
  .page-hero{ padding:68px 0 56px; }
  .grid-3, .steps{ gap:20px; margin-top:48px; }
  .step{ padding-top:18px; }
  .care{ padding:40px 26px; }
  .hero-art{ height:300px; margin-top:48px; padding-bottom:70px; }
  .screen-old{ height:150px; }
  .screen-new{ height:190px; }
  .n-hero{ padding:22px 12px 18px; }
  .n-cards span{ height:44px; }
  .form{ grid-template-columns:1fr; }
}

@media (max-width:734px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-panel[data-open="true"]{ display:block; }
  section{ padding:68px 0; }
  section.hero{ padding-top:56px; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .hero-art{ height:230px; }
  .frame-old{ width:56%; top:22px; }
  .frame-new{ width:66%; }
  .screen{ padding:9px; }
  .screen-old{ height:110px; }
  .o-bar{ margin:-9px -9px 8px; height:10px; }
  .o-hero{ height:30px; }
  .o-cols span{ height:20px; }
  .screen-new{ height:135px; }
  .n-nav{ padding:7px 10px; }
  .n-hero{ padding:14px 10px 10px; }
  .n-h1{ height:9px; }
  .n-pill{ width:56px; height:13px; margin-top:12px; }
  .n-cards span{ height:30px; }
  .care-head h3{ font-size:26px; }

  /* Before/after side-by-side is too small on a phone — stack it */
  .case-visual.ba{ grid-template-columns:1fr; gap:22px; }
  .case-visual.ba .screen{ height:150px; }

  /* Services page ------------------------------------------------------ */
  /* Sub-nav links scroll sideways rather than wrapping or being cut off. */
  .subnav-inner{ gap:16px; }
  .subnav-title{ font-size:17px; }
  .subnav-links{
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    gap:20px; margin-left:0;
  }
  .subnav-links::-webkit-scrollbar{ display:none; }
  .subnav .btn.small{ display:none; }

  .dont-grid{ grid-template-columns:1fr; }
  .dont{ padding-top:18px; }
  .stack{ height:190px; }
  .stack.single{ height:210px; }
  .screen-new.tall{ height:175px; }
  .n-band{ height:26px; margin:8px 10px 0; }
  .facts > div{ min-width:96px; padding:13px 14px 13px 0; }
  .facts dd{ font-size:17px; }
  .needs{ padding:18px 20px; }
  .callout{ padding:22px 22px; }
  .req h3{ margin-bottom:16px; }
  .faq summary{ font-size:17px; padding:18px 34px 18px 0; }
  .faq details p{ padding-right:12px; font-size:15px; }
  .svc-lede{ font-size:19px; }
  .screen-jg{ height:200px; }
  .jg-hero{ padding:16px 12px 14px; gap:12px; }
  .jg-portrait{ width:48px; height:48px; }
  .jg-h{ height:8px; }
  .jg-h.sm{ height:5px; }
  .jg-btn{ width:52px; height:12px; margin-top:9px; }
  .jg-cards{ padding:0 12px; }
  .jg-cards span{ height:40px; }
}

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