/* =========================================================================
   sundew partners — shared design system
   One stylesheet for every page. No build step, no framework.
   Tokens first, then base, layout/atmosphere, chrome (nav/footer/buttons),
   section primitives, then page-specific blocks, then responsive.
   ========================================================================= */

:root{
  --warm:#FBF9F8;        /* warm off-white base — the calm */
  --warm2:#FBF9F8;
  --ink:#141A22;
  --body:#5B6472;
  --muted:#8E97A4;
  --line:#EAE5E2;
  --blue:#0B84E8;        /* the single action color */
  --blue-d:#0A6DBF;
  --accent:#B62F66;      /* readable warm accent for kickers/labels (not actions) */
  --accent-tint:#FBEEF3;
  --sun:#FFC24D; --rose:#F5688C; --dew:#2CA8D8;
  --grad:linear-gradient(180deg,var(--sun) 0%,var(--rose) 55%,var(--dew) 100%);
  --gradD:linear-gradient(135deg,var(--sun) 0%,var(--rose) 50%,var(--dew) 100%);
  --card-sh:0 2px 4px rgba(20,26,34,.03), 0 12px 28px -8px rgba(20,26,34,.07);
  --wrap:1180px;         /* max content width */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}  /* clip horizontal bleed at the scroll root (keeps position:sticky working) */
html,body{margin:0}
body{background:var(--warm);font-family:Manrope,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

/* ================= SITE SHELL ================= */
/* overflow-x:clip contains the bleeding decorative layers (atmos, ribbon,
   arccut) so their intentional overhang never creates a horizontal scrollbar,
   while leaving vertical flow untouched. */
.site{background:var(--warm);position:relative;overflow-x:clip}  /* clip here too, not just at the root: the decorative bleed (.arccut, .finalatmos)
     otherwise leaves the document wider than the viewport on phones. `clip` does NOT
     create a scroll container, so descendant position:sticky (.navwrap, .sd-sticky)
     keeps working — that is the difference from overflow:hidden. */

/* the big soft gradient wash behind the hero — Sword's signature move.
   Living gradient field — layered radial stops painted onto one element,
   animated by shifting background-position. Nothing to clip. */
.atmos{position:absolute;left:0;right:0;top:0;height:1000px;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 14% 10%,  #FFC2D2 0%, rgba(255,194,210,0) 66%),
    radial-gradient(52% 46% at 88% 6%,   #FFE3B8 0%, rgba(255,227,184,0) 64%),
    radial-gradient(62% 54% at 74% 50%,  #C8CCFF 0%, rgba(200,204,255,0) 66%),
    radial-gradient(56% 50% at 20% 60%,  #B8E9F2 0%, rgba(184,233,242,0) 66%),
    radial-gradient(74% 64% at 50% 30%,  #FFF4EC 0%, rgba(255,244,236,0) 72%);
  background-size:170% 170%,160% 160%,180% 180%,165% 165%,150% 150%;
  background-position:0% 0%,100% 0%,80% 60%,10% 70%,50% 40%;
  filter:blur(58px) saturate(.94);
  opacity:.58;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  will-change:background-position,filter;
  animation:field 26s ease-in-out infinite, hue 34s ease-in-out infinite;
}
/* shorter, lighter atmosphere for interior page heroes */
.atmos.sm{height:640px;opacity:.5}

@keyframes hue{0%,100%{filter:blur(58px) saturate(.94) hue-rotate(0deg)}
               50%{filter:blur(54px) saturate(1.08) hue-rotate(10deg)}}
@keyframes field{
  0%,100%{background-position:0% 0%,100% 0%,80% 60%,10% 70%,50% 40%}
  20%    {background-position:14% 9%,86% 14%,62% 44%,26% 56%,42% 52%}
  40%    {background-position:6% 20%,96% 4%,90% 68%,4% 78%,58% 30%}
  60%    {background-position:18% 12%,80% 18%,68% 38%,20% 62%,38% 48%}
  80%    {background-position:3% 16%,99% 8%,86% 62%,8% 72%,56% 36%}
}

/* ---- Stripe-style ribbon (SVG silk) ----
   Container is top-right, masked to a soft corner. The SVG inside runs a single
   5-stop gradient in userSpaceOnUse ALONG the diagonal flow (top-right→bottom-left)
   so the whole ramp shows, warped by turbulence into one morphing silk band. */
.ribbon{position:absolute;top:-60px;right:0;width:52%;aspect-ratio:1/1.7;z-index:1;pointer-events:none;
  /* the height is derived from the width so the spine keeps the same diagonal at
     every size — a fixed height made the sweep read near-vertical on phones */
  -webkit-mask-image:radial-gradient(105% 118% at 100% 14%,#000 62%,transparent 100%);
  mask-image:radial-gradient(105% 118% at 100% 14%,#000 62%,transparent 100%)}
.ribbon-canvas{width:100%;height:100%;display:block}
.ribbon.sm{width:38%;top:-80px;opacity:.85}
@media(max-width:900px){.ribbon{width:86%;opacity:.9}.ribbon.sm{width:80%}}

/* arc cut — page colour rising into the gradient field */
.arccut{position:absolute;left:-6%;right:-6%;top:770px;height:420px;z-index:2;pointer-events:none;
  background:var(--warm);
  border-radius:50% 50% 0 0 / 150px 150px 0 0;
  box-shadow:0 -1px 0 rgba(20,26,34,.05)}
.arccut.sm{top:520px}

@media (prefers-reduced-motion: reduce){
  .atmos,.ribbonsvg{animation:none}
}

/* ================= CHROME: announce / nav / buttons ================= */
.announce{position:relative;z-index:7;text-align:center;padding:13px 20px;font-size:13.5px;
  color:var(--ink);background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(20,26,34,.05)}
.announce a{color:var(--blue);font-weight:600;text-decoration:none;margin-left:6px}

/* The nav rides with the reader: it slides out of the way while scrolling down so the
   page gets the whole screen, and returns the moment you scroll up, so the menu and the
   CTA are always one gesture away. `.nav-hidden` is toggled by nav.js; with no JS the bar
   simply stays put, which is the old behaviour. */
.navwrap{position:sticky;top:0;z-index:60;padding:20px 30px 0;max-width:var(--wrap);margin:0 auto;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.navwrap.nav-hidden{transform:translateY(-118%)}
@media(prefers-reduced-motion:reduce){.navwrap{transition:none}}
nav{background:rgba(255,255,255,.80);backdrop-filter:blur(16px);border:1px solid rgba(20,26,34,.06);
    border-radius:10px;padding:11px 12px 11px 22px;display:flex;align-items:center;
    gap:34px;box-shadow:0 1px 2px rgba(20,26,34,.03)}
.brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.brand .wm{font-family:Newsreader,serif;font-size:28px;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;
  color:var(--ink);margin-right:auto;white-space:nowrap}
.navlinks a{color:inherit;text-decoration:none;position:relative;transition:color .15s}
.navlinks a:hover{color:var(--blue)}
.navlinks a.active{color:var(--blue)}
.navlinks a.active:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--blue)}
.navright{display:flex;align-items:center;gap:20px;flex:none;white-space:nowrap}
.link-u{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* mobile menu — no-JS <details>. Hidden on desktop, revealed ≤900px. */
.mobnav{display:none;position:relative}
.mobnav summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:10px;
  border:1px solid rgba(20,26,34,.10);background:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.mobnav summary::-webkit-details-marker{display:none}
.mobnav summary:hover{background:rgba(255,255,255,.85)}
.mobnav .bars,.mobnav .bars::before,.mobnav .bars::after{width:18px;height:2px;background:var(--ink);
  border-radius:2px;display:block;transition:transform .22s ease,opacity .18s ease}
.mobnav .bars{position:relative}
.mobnav .bars::before,.mobnav .bars::after{content:'';position:absolute;left:0}
.mobnav .bars::before{top:-6px}
.mobnav .bars::after{top:6px}
.mobnav[open] .bars{background:transparent}
.mobnav[open] .bars::before{transform:translateY(6px) rotate(45deg)}
.mobnav[open] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.mobpanel{position:absolute;right:0;top:calc(100% + 12px);min-width:210px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(20,26,34,.08);border-radius:12px;box-shadow:var(--card-sh);
  padding:8px;display:flex;flex-direction:column;gap:2px;z-index:20;
  animation:menupop .16s ease}
@keyframes menupop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mobpanel a{padding:12px 14px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.mobpanel a:hover{background:var(--warm);color:var(--blue)}
.mobpanel a.active{color:var(--blue)}
@media (prefers-reduced-motion: reduce){.mobpanel{animation:none}}

/* ---- Primary action button · 3D glass -----------------------------------
   Thick glass rather than a solid fill: a bright lit edge along the top, lit
   sides, and a shaded base so it reads as a slab with depth. Ink text, so
   legibility never depends on what is behind it — the failure mode of every
   translucent button. The fill carries a faint neutral tint so the shape still
   holds on a plain white section, where pure glass would disappear.
   Brand rule holds: no sunset gradient on the button itself. */
.btn{position:relative;overflow:hidden;border:0;border-radius:12px;padding:13px 26px;cursor:pointer;
  font:700 14.5px Manrope,system-ui,sans-serif;color:var(--ink);letter-spacing:.004em;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.40));
  -webkit-backdrop-filter:blur(16px) saturate(1.9);backdrop-filter:blur(16px) saturate(1.9);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 1.5px 0 0 rgba(255,255,255,.6),
    inset -1.5px 0 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(20,26,34,.10),
    inset 0 -12px 22px -14px rgba(20,26,34,.34),
    0 1px 2px rgba(20,26,34,.13),
    0 10px 24px -10px rgba(20,26,34,.24),
    0 26px 52px -26px rgba(20,26,34,.30);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .24s cubic-bezier(.2,.8,.3,1), background .24s ease}
/* specular sweep on hover */
.btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.62) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-1.5px);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.50));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 1.5px 0 0 rgba(255,255,255,.65),
    inset -1.5px 0 0 rgba(255,255,255,.38),
    inset 0 0 0 1px rgba(20,26,34,.12),
    inset 0 -12px 22px -14px rgba(20,26,34,.30),
    0 2px 4px rgba(20,26,34,.14),
    0 16px 32px -12px rgba(20,26,34,.26),
    0 34px 64px -30px rgba(20,26,34,.32)}
.btn:active{transform:translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(20,26,34,.22),
    inset 0 0 0 1px rgba(20,26,34,.14),
    0 1px 2px rgba(20,26,34,.12)}
.btn:focus-visible{outline:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(20,26,34,.12),
    0 0 0 3px rgba(11,132,232,.42),
    0 10px 24px -10px rgba(20,26,34,.24)}
@media (prefers-reduced-motion: reduce){
  .btn,.btn::after{transition:none}
  .btn:hover{transform:none}
}
.btn.lg{padding:15px 30px;font-size:15.5px;border-radius:13px}
/* nav variant — smaller, and a touch more defined because it sits on the nav's
   own frosted white bar, where plain glass would read as white-on-white */
.btn.navcta{padding:10px 18px;font-size:13.5px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(20,26,34,.16),
    inset 0 -8px 14px -10px rgba(20,26,34,.30),
    0 1px 2px rgba(20,26,34,.12),
    0 6px 14px -8px rgba(20,26,34,.22)}
.btn.navcta:hover{box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(20,26,34,.20),
    inset 0 -8px 14px -10px rgba(20,26,34,.26),
    0 2px 4px rgba(20,26,34,.14),
    0 10px 20px -8px rgba(20,26,34,.26)}

/* "Coming soon" — disabled CTA state (not yet live) */
.btn.soon,.btn.soon:hover,.btn.soon:active{background:#ECEAE8;color:var(--muted);
  cursor:default;pointer-events:none;transform:none;filter:none;
  box-shadow:inset 0 0 0 1px var(--line)}
.btn.soon::after{display:none}
.arrowlink.soon{color:var(--muted);pointer-events:none;cursor:default}
.foot-soon{display:block;color:#B4B0AB;font-size:13.5px;margin-bottom:11px;cursor:default}
.field input:disabled,.field textarea:disabled,.field select:disabled{
  background:#F6F4F2;color:var(--muted);cursor:default;-webkit-text-fill-color:var(--muted)}
.cform.soon{opacity:.92}

/* ================= HERO (home) ================= */
.hero{position:relative;z-index:5;text-align:center;padding:170px 30px 90px;max-width:900px;margin:0 auto}
h1{font-size:76px;line-height:1.05;letter-spacing:-.037em;font-weight:700;margin:0 0 28px;color:var(--ink)}
.hero p{font-size:17.5px;line-height:1.62;color:#535C6A;max-width:640px;margin:0 auto 34px}
.herocta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ================= PAGE HERO (interior pages) ================= */
.pagehero{position:relative;z-index:5;padding:150px 30px 70px;max-width:var(--wrap);margin:0 auto}
.pagehero .inner{max-width:760px}
.pagehero h1{font-size:62px;margin:0 0 22px}
.pagehero p{font-size:18px;line-height:1.6;color:#535C6A;max-width:600px;margin:0}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:22px;letter-spacing:.02em}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue)}

/* ================= SECTION PRIMITIVES ================= */
section{position:relative;z-index:2}
.wrap{max-width:var(--wrap);margin:0 auto}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:700;
  margin-bottom:16px;display:flex;align-items:center;gap:10px}
.eyebrow:before{content:'';width:26px;height:2px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,#FFC24D,#F5688C,#2CA8D8)}
.eyebrow.center{justify-content:center}
h2{font-size:44px;line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:0 0 16px}
h3{margin:0}
.lead{font-size:16px;line-height:1.65;color:var(--body)}
.arrowlink{color:var(--blue);font-weight:600;font-size:14.5px;text-decoration:none;display:inline-flex;gap:7px;align-items:center;transition:gap .15s}
.arrowlink:hover{gap:11px}

/* ================= HOME: track-record strip (§3) ================= */
.clients{position:relative;z-index:4;background:#fff;padding:34px 40px;display:flex;justify-content:center;
  align-items:center;border-bottom:1px solid var(--line)}
.clients .trustline{font-weight:600;font-size:13.5px;color:var(--body);letter-spacing:.01em;text-align:center;
  line-height:1.7}
.clients .trustline b{font-weight:600;white-space:nowrap}
@media(max-width:560px){.clients{padding:26px 22px}.clients .trustline{font-size:12.5px}}

/* ================= §6 The vocabulary isn't the problem ================= */
.noise{background:var(--warm);padding:92px 46px;border-top:1px solid var(--line)}
.noisewrap{max-width:720px;margin:0 auto;text-align:center}
.noise h2{font-size:34px;line-height:1.14;margin:0 0 24px}
/* One container of names the reader recognises but can't act on. Fifteen is
   enough to land it; the trailing ellipsis says the list never stops. Chips stay
   neutral — at this density colour would read as decoration, not overwhelm. */
.nzwall{border:1px solid var(--line);background:#fff;border-radius:16px;
  padding:22px 20px;margin:0 0 26px;box-shadow:var(--card-sh)}
.nzrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center}
.nzwall span{font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6E7884;
  background:var(--warm);border:1px solid var(--line);border-radius:8px;padding:6px 11px;
  white-space:nowrap;letter-spacing:-.01em}
.nzwall span.more{border-color:transparent;background:none;color:var(--muted);
  font-size:17px;padding:6px 4px;letter-spacing:.08em}
@media(max-width:560px){.nzwall{padding:18px 14px}
  .nzwall span{font-size:12px;padding:5px 9px}}
.noise p{font-size:16px;line-height:1.72;color:var(--body);margin:0 auto;max-width:600px}

/* ================= §7 What you own on day one ================= */
.ownership{background:#fff;padding:88px 46px;border-top:1px solid var(--line)}
.ownwrap{max-width:660px;margin:0 auto;text-align:center}
.ownership h2{font-size:34px;line-height:1.14;margin:0 0 18px}
.ownership p{font-size:16.5px;line-height:1.72;color:var(--body);margin:0}
@media(max-width:560px){.noise h2,.ownership h2{font-size:26px}}

/* ================= HOME: results (stat cards) ================= */
.results{background:#fff;padding:80px 46px 96px}
.results .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.statcard{background:#fff;border-radius:14px;border:1px solid var(--line);padding:28px 26px;box-shadow:var(--card-sh)}
.statcard .n{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.02}
.statcard .n sub{font-size:22px;font-weight:700;vertical-align:baseline}
.statcard .l{font-size:13.5px;color:var(--body);margin-top:8px;line-height:1.5}
.statcard sup{font-size:9px;color:var(--muted)}

/* ================= HOME: capability blocks ================= */
.cap{background:#fff;padding:86px 46px}
.cap .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cap.rev .capText{order:2}
.capbadge{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.capbadge b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.cap h3{font-size:38px;line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 14px}
.cap p{font-size:15.5px;line-height:1.66;color:var(--body);margin:0 0 20px}
.capVis{background:#fff;border-radius:14px;padding:24px;box-shadow:var(--card-sh);min-height:290px;
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.row{display:flex;gap:10px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:11px}
.row .k{width:7px;height:7px;border-radius:50%;flex:none}
.row p{margin:0;font-size:13px;color:var(--ink);font-weight:500}
.row .v{margin-left:auto;font-size:12px;color:var(--muted);font-family:ui-monospace,monospace}

/* ================= HOME: equation section ================= */
.equation{background:#fff;padding:100px 46px;text-align:center;position:relative}
.venn{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.venn i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.4}
.eqbadge{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background:var(--accent-tint);padding:8px 18px;border-radius:99px;font-weight:700;margin-bottom:26px}
.equation h2{font-size:52px;margin-bottom:20px}
.equation .lead{max-width:640px;margin:0 auto 22px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:900px;margin:64px auto 0}
.twocol h4{font-size:30px;font-weight:700;letter-spacing:-.025em;margin:0 0 10px}
.g-warm{background:linear-gradient(90deg,#F5688C,#B07AD6);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-cool{background:linear-gradient(90deg,#F5905E,#F5688C);-webkit-background-clip:text;background-clip:text;color:transparent}
.twocol p{font-size:14.5px;color:var(--body);margin:0}

/* ================= testimonial mosaic ================= */
.stories{padding:96px 46px 104px;background:var(--warm);position:relative;z-index:4}
.stohead{text-align:center;margin-bottom:52px}
.stohead h2{font-size:46px}
.stohead p{max-width:560px;margin:0 auto}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;max-width:var(--wrap);margin:0 auto}
.col{display:flex;flex-direction:column;gap:20px}
.tcard{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:var(--card-sh)}
.tcard .q{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 20px;font-weight:500}
.who{display:flex;align-items:center;gap:11px}
.who .pic{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,#DDD6D1,#C8BFB8)}
.who b{display:block;font-size:13.5px}
.who span{font-size:12.5px;color:var(--muted)}
.quotemark{font-size:34px;line-height:1;font-weight:800;margin-bottom:10px;
  background:var(--gradD);-webkit-background-clip:text;background-clip:text;color:transparent}
.tphoto{border-radius:14px;overflow:hidden;position:relative;min-height:330px;display:flex;align-items:flex-end;
  padding:26px 24px;color:#fff;box-shadow:var(--card-sh)}
.tphoto.a{background:linear-gradient(180deg,#8FA3B8 0%,#5C6B7D 55%,#2E3743 100%)}
.tphoto.b{background:linear-gradient(180deg,#C4A896 0%,#8A6F5E 60%,#3B302A 100%)}
.tphoto.c{background:linear-gradient(180deg,#9BB0A6 0%,#5F7369 60%,#2C3833 100%)}
.tphoto:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(20,26,34,.62) 100%)}
.tphoto .inner{position:relative;z-index:2}
.tphoto .q{color:#fff;font-size:15.5px;line-height:1.5;margin:0 0 16px;font-weight:500}
.tphoto b{font-size:13.5px;display:block}
.tphoto span{font-size:12.5px;opacity:.8}
.tsmall{background:#fff;border-radius:14px;padding:24px;box-shadow:var(--card-sh)}
.tsmall .lbl{font-size:12px;color:var(--muted);margin-top:14px}
.tlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);font-weight:600;margin-top:14px}

/* ================= final CTA ================= */
.finalatmos{position:absolute;left:-10%;top:-40%;width:120%;height:160%;pointer-events:none;filter:blur(80px);background:radial-gradient(60% 60% at 30% 30%,rgba(245,166,180,.42),transparent 64%),radial-gradient(60% 60% at 72% 60%,rgba(186,178,224,.40),transparent 64%),radial-gradient(50% 50% at 50% 20%,rgba(255,214,168,.34),transparent 66%)}
.final{padding:120px 46px 100px;text-align:center;position:relative;overflow:hidden;background:var(--warm2)}
.final h2{font-size:50px;margin-bottom:16px}
.final p{max-width:520px;margin:0 auto 32px;font-size:16.5px;color:var(--body)}

/* ================= OUR PROCESS (home strip + page) ================= */
.process{background:var(--warm);padding:90px 46px;border-top:1px solid var(--line)}
.prochead{max-width:620px;margin-bottom:48px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.pstep{padding:28px 26px 30px;border-right:1px solid var(--line);position:relative}
.pstep:last-child{border-right:0}
.pstep:before{content:'';position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--blue)}
.pstep .pn{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);letter-spacing:.14em;margin-bottom:16px}
.pstep h4{font-size:18px;letter-spacing:-.02em;margin:0 0 9px;font-weight:700}
.pstep p{font-size:13.5px;line-height:1.62;color:var(--body);margin:0}

/* ================= OUR SERVICES (home strip + page) ================= */
.services2{background:#fff;padding:92px 46px;border-top:1px solid var(--line)}
.svchead{max-width:640px;margin-bottom:48px}
.svclist{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:56px 1fr 1.15fr;gap:34px;padding:34px 0;
  border-bottom:1px solid var(--line);align-items:start}
.svc .num{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);
  letter-spacing:.14em;padding-top:6px}
.svc h3{font-size:25px;letter-spacing:-.025em;font-weight:700;margin:0 0 8px;line-height:1.18}
.svc .desc{font-size:14.5px;line-height:1.65;color:var(--body);margin:0}
.svc .deliver{display:flex;flex-wrap:wrap;gap:7px;padding-top:5px}
.svc .d{font-size:12px;padding:6px 12px;border:1px solid transparent;border-radius:99px;font-weight:600}
/* varied sunset-palette tags (cycle every 5) so they pop without being all-pink */
.svc .deliver .d:nth-child(5n+1){color:#A5670A;background:#FFF4D8;border-color:#F1E0AC}
.svc .deliver .d:nth-child(5n+2){color:#C0501C;background:#FFEADF;border-color:#F6D2BE}
.svc .deliver .d:nth-child(5n+3){color:#C43B7A;background:#FDEEF4;border-color:#F5D1E1}
.svc .deliver .d:nth-child(5n+4){color:#B0328C;background:#F9E9F4;border-color:#EFCDE6}
.svc .deliver .d:nth-child(5n+5){color:#1E7FA5;background:#E5F4FB;border-color:#C7E7F3}
.svc .out{margin-top:14px;font-size:13px;color:var(--ink);font-weight:600;
  display:flex;align-items:center;gap:9px}
.svc .out:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none}

/* ================= WHO WE SERVE ================= */
.serve{background:#fff;padding:92px 46px;border-top:1px solid var(--line)}
.servehead{max-width:620px;margin-bottom:46px}
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.seg{border:1px solid var(--line);border-radius:14px;padding:30px 26px;background:#fff;
  display:flex;flex-direction:column}
.seg .stage{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.seg h3{font-size:22px;letter-spacing:-.02em;font-weight:700;margin:0 0 10px}
.seg p{font-size:14px;line-height:1.65;color:var(--body);margin:0 0 18px}
.seg ul{list-style:none;padding:0;margin:0 0 4px}
.seg li{font-size:13.5px;color:var(--body);padding:7px 0;border-top:1px solid var(--line);
  display:flex;gap:9px;align-items:flex-start}
.seg li:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--rose);
  flex:none;margin-top:7px}
.fitrow{background:var(--warm);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:34px}
.fitrow h4{font-size:13px;letter-spacing:.02em;margin:0 0 12px;font-weight:700}
.fitrow p{font-size:13.5px;line-height:1.7;color:var(--body);margin:0}

/* ================= ABOUT ================= */
.about{background:var(--warm);padding:92px 46px;border-top:1px solid var(--line)}
.aboutgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
.about h2{margin-bottom:18px}
.about .lead{margin-bottom:18px}
.principles{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prin{background:#fff;padding:22px 24px}
.prin b{display:block;font-size:14.5px;margin-bottom:5px}
.prin p{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}
.teamrow{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.member{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 16px 11px 11px}
.member .pic{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#E4DCD6,#C9BEB5)}
.member b{display:block;font-size:13px}
.member span{font-size:12px;color:var(--muted)}

/* ================= CONTACT ================= */
.contact{background:#fff;padding:92px 46px;border-top:1px solid var(--line)}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cform{display:flex;flex-direction:column;gap:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:400 14px Manrope,sans-serif;color:var(--ink);
  background:#fff;border:1px solid #DDD8D4;border-radius:9px;padding:11px 13px;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,132,232,.12)}
.field textarea{min-height:104px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cinfo .block{padding:20px 0;border-top:1px solid var(--line)}
.cinfo .block:first-of-type{border-top:0;padding-top:0}
.cinfo h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 8px;font-weight:600}
.cinfo p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.cinfo a{color:var(--blue);text-decoration:none;font-weight:600}

/* ================= PROCESS PAGE: vertical timeline ================= */
.timeline{position:relative;max-width:860px;margin:0 auto;padding-left:12px}
.tstep{position:relative;padding:0 0 54px 58px;border-left:2px solid var(--line)}
.tstep:last-child{border-left-color:transparent;padding-bottom:0}
.tstep .dot{position:absolute;left:-16px;top:0;width:30px;height:30px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-size:11px;font-weight:600;color:var(--ink)}
.tstep .dot:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--gradD);opacity:0;transition:opacity .2s}
.tstep:hover .dot{border-color:transparent}
.tstep:hover .dot:after{opacity:1}
.tstep:hover .dot{color:#fff}
.tstep .thead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:-4px 0 12px}
.tstep h3{font-size:26px;letter-spacing:-.025em;font-weight:700}
.tstep .dur{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--warm);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.tstep .tbody{font-size:15px;line-height:1.68;color:var(--body);margin:0 0 18px;max-width:640px}
.tstep .deliv{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;max-width:640px}
.tstep .deliv div{font-size:13.5px;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.tstep .deliv div:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;margin-top:7px}
@media(max-width:640px){.tstep .deliv{grid-template-columns:1fr}}

/* ================= FAQ (shared accordion-lite) ================= */
.faq{background:var(--warm);padding:92px 46px;border-top:1px solid var(--line)}
.faqhead{max-width:620px;margin-bottom:40px}
.faqlist{border-top:1px solid var(--line);max-width:820px}
.faqitem{border-bottom:1px solid var(--line);padding:24px 0}
.faqitem h4{font-size:17px;letter-spacing:-.01em;margin:0 0 8px;font-weight:700}
.faqitem p{margin:0;font-size:14.5px;line-height:1.66;color:var(--body)}

/* ================= FOOTER ================= */
footer{position:relative;background:var(--warm2);color:var(--ink);padding:82px 46px 34px}
.fgrid{position:relative;z-index:2;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:50px;max-width:var(--wrap);margin-left:auto;margin-right:auto}
footer h5{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#9AA1AC;margin:0 0 17px;font-weight:600}
footer a{display:block;color:#4A5058;text-decoration:none;font-size:13.5px;margin-bottom:11px;transition:color .15s}
footer a:hover{color:var(--blue)}
.fbot{position:relative;z-index:2;border-top:1px solid rgba(20,26,34,.08);padding-top:26px;
  display:flex;justify-content:space-between;font-size:12.5px;color:#9AA1AC;max-width:var(--wrap);margin:0 auto}
.fbot a{color:inherit;text-decoration:none;transition:color .15s}
.fbot a:hover{color:var(--ink)}
.fnote{color:#7C7269 !important}
.fwm{color:var(--ink) !important}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .results .wrap,.cap .wrap,.twocol{grid-template-columns:1fr}
  .cap.rev .capText{order:0}      /* stacked: heading first… */
  .cap.rev .capVis{order:1}       /* …then the rows below it */
  .segments,.aboutgrid,.contactgrid,.fitrow{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr}
  h1{font-size:44px}h2{font-size:32px}
  .pagehero h1{font-size:44px}
}
/* phones: the H1 is a full sentence now — scale it so it never runs past 3 lines */
@media(max-width:620px){
  h1{font-size:31px;letter-spacing:-.028em}
  /* fill the screen so the next section never peeks in under the fold —
     svh accounts for the mobile URL bar, vh is the fallback */
  .hero{padding:28px 24px 56px;min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);
    display:flex;flex-direction:column;justify-content:center}
  .hero p{font-size:16px}
  .ribbon{width:118%;top:-70px;opacity:.85} /* sweeps the full hero; ribbon.js keeps the band slim */
  /* keep the white horizon tied to the bottom of the taller hero, and flatten it —
     at phone widths the default ellipse reads as a dome intruding into the hero */
  .arccut{top:calc(100vh - 132px);top:calc(100svh - 132px);
    left:-52%;right:-52%;border-radius:50% 50% 0 0 / 76px 76px 0 0}
}
@media(max-width:900px){
  .steps4{grid-template-columns:1fr 1fr}.pstep:nth-child(2){border-right:0}
  .svc{grid-template-columns:1fr;gap:14px}
  .navlinks{display:none}              /* desktop links hidden… */
  .mobnav{display:block}               /* …replaced by the hamburger */
  .brand{margin-right:auto}            /* push CTA + hamburger to the right */
  .navwrap{padding:16px 16px 0}
  nav{gap:12px}
  .navright{gap:10px}
  .navright .btn{padding:9px 14px;font-size:13px}
}
/* The footer's 4-up grid had no mobile rule at all. `fr` columns can't shrink past
   their content, so on a phone it stayed ~601px wide inside a 375px viewport: that is
   what made the page scroll sideways and left the dead band of whitespace. */
@media(max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;gap:34px 28px}
}
@media(max-width:600px){
  footer{padding:56px 22px 30px}
  .fgrid{grid-template-columns:1fr;gap:28px;margin-bottom:34px}
  .fbot{flex-direction:column;gap:8px;text-align:left}
}
/* phones: stack every 2-up grid to a single clean column so nothing gets clipped */
@media(max-width:600px){
  .statgrid{grid-template-columns:1fr}
  .statcard .n{font-size:34px}
  .two{grid-template-columns:1fr}
  .steps4{grid-template-columns:1fr}
  .pstep{border-right:0;border-bottom:1px solid var(--line)}
  .pstep:last-child{border-bottom:0}
  .tstep .deliv{grid-template-columns:1fr}
}

/* ===== "Coming soon" CTA dialog (cta.js) + testimonial placeholders ===== */
/* Booking is not live yet, so the Book-a-call CTAs open this instead of a mailto. */
.cta-modal[hidden]{display:none}
.cta-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.cta-backdrop{position:absolute;inset:0;background:rgba(20,26,34,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cta-panel{position:relative;z-index:1;width:min(400px,100%);background:#fff;border-radius:18px;
  padding:34px 32px 30px;text-align:center;box-shadow:0 30px 70px -24px rgba(20,26,34,.44);
  animation:ctaIn .22s cubic-bezier(.2,.8,.3,1)}
@keyframes ctaIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.cta-kicker{font:700 10.5px Manrope,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.cta-panel h2{font-size:27px;letter-spacing:-.02em;margin:0 0 10px}
.cta-panel p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 22px}
.cta-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;background:none;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px}
.cta-x:hover{background:var(--warm);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.cta-panel{animation:none}}

/* The three .tphoto blocks are reserved for real client testimonials (owner photo +
   attributed quote). Until those exist they carry a visible placeholder badge so the
   stand-in copy can never be mistaken for attributed proof. Remove the .tph-tag spans
   when the real quotes land. See COPY-SPEC "no invented proof". */
.tph-tag{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 9px;border-radius:999px;border:1px dashed rgba(255,255,255,.6);
  background:rgba(20,26,34,.30);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:700 10px Manrope,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.tph-tag:before{content:'';width:15px;height:15px;border-radius:50%;flex:none;
  border:1px dashed rgba(255,255,255,.75)}   /* stands in for the owner's photo */

/* ===== legal pages (privacy, terms) ===== */
.legal{max-width:760px;margin:0 auto;padding:6px 30px 60px}
.legal .eff{font-size:13px;letter-spacing:.02em;color:var(--muted);margin:0 0 26px}
.legal h2{font-size:21px;letter-spacing:-.02em;color:var(--ink);margin:32px 0 10px;font-weight:800}
.legal p,.legal li{font-size:15.5px;line-height:1.72;color:var(--body);margin:0 0 13px}
.legal ul{margin:0 0 13px;padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--blue);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal strong{color:var(--ink);font-weight:600}
@media(max-width:600px){.legal{padding:6px 22px 48px}.legal h2{font-size:19px}}

/* contact form */
.cform form{display:flex;flex-direction:column;gap:15px}
.cform .field{margin:0}
.cform button[type=submit]{align-self:flex-start;margin-top:4px}
.formnote{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.formdone{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--card-sh)}
.formdone h4{font-size:19px;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.formdone p{font-size:15px;line-height:1.65;color:var(--body);margin:0}
.formdone a{color:var(--blue);text-decoration:none}
.formdone a:hover{text-decoration:underline}

/* scroll-reveal (reveal.js). .rv is added by JS only to below-fold blocks. */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}