/* =================================================================
   THE NOW DESIGNS — shared stylesheet (index / about / services)
   Palette: powder blue · ink · cream · cherry accent
   Type: Fraunces (chunky retro display) + Hanken Grotesk (body)
   ================================================================= */

:root{
  --blue:#9FC2EA; --blue-deep:#7FA9DC; --ink:#15140F; --cream:#B3DCFF;
  --paper:#CDE8FF; --cherry:#E1452E; --cherry-deep:#C5391F; --muted:#494236;
  --line:rgba(21,20,15,.14);
  --display:'Unbounded','Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1240px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
section{position:relative;}
section[id]{scroll-margin-top:90px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}

/* ---- shared type ---- */
.eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.5;}
.display{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.015em;}
.display em{font-style:italic;color:var(--cherry);font-weight:600;}
.h-sec{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.015em;font-size:clamp(2.1rem,5vw,3.6rem);}
.h-sec em{font-style:italic;color:var(--cherry);font-weight:600;}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:46ch;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:.98rem;padding:15px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);}
.btn--cherry{background:var(--cherry);color:#fff;box-shadow:0 10px 30px -12px var(--cherry);}
.btn--cherry:hover{background:var(--cherry-deep);transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--cherry);}
.btn--ink{background:var(--ink);color:var(--paper);}
.btn--ink:hover{transform:translateY(-2px);}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.btn--light{background:var(--paper);color:var(--ink);}
.btn--light:hover{transform:translateY(-2px);}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translate(4px,-1px);}
.btn--lg{padding:17px 32px;font-size:1.04rem;}
.btn[disabled]{opacity:.62;cursor:progress;pointer-events:none;}

/* ---- the NOW live dot (present-moment pulse) ---- */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cherry);position:relative;flex:none;}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cherry);animation:nowpulse 2.4s var(--ease) infinite;}
@keyframes nowpulse{0%{transform:scale(1);opacity:.55;}70%,100%{transform:scale(3.4);opacity:0;}}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,56px);transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);}
.nav.scrolled{background:rgba(247,245,239,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:12px clamp(20px,5vw,56px);}
.brand{font-family:var(--display);font-style:italic;font-weight:900;font-size:1.25rem;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;}
.brand .dot{width:22px;height:22px;background:url('/cherry.svg') center/contain no-repeat;display:inline-block;vertical-align:-3px;}
.cherry-o{display:inline-block;width:.96em;height:.96em;background:url('/cherry-single.svg') center/contain no-repeat;vertical-align:-.2em;margin:0 -.2em;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:.92rem;font-weight:500;position:relative;}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--cherry);transition:width .3s var(--ease);}
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{width:100%;}
.nav-links a.active:not(.btn){color:var(--cherry);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease);}

/* ---- home hero ---- */
.hero{background:var(--blue);padding:clamp(130px,16vh,180px) 0 clamp(60px,9vw,110px);overflow:hidden;}
.hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}
.hero .eyebrow{color:var(--ink);margin-bottom:26px;}
.hero h1{font-size:clamp(2.9rem,9vw,7.2rem);margin-bottom:28px;max-width:15ch;}
.hero .lead{color:rgba(21,20,15,.72);max-width:48ch;margin-bottom:36px;font-size:clamp(1.1rem,1.7vw,1.35rem);}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;}
.hero__link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.98rem;color:var(--ink);opacity:.72;border-bottom:1.5px solid transparent;padding-bottom:2px;transition:opacity .3s var(--ease),border-color .3s var(--ease);}
.hero__link:hover{opacity:1;border-color:var(--cherry);}
.hero__link .arrow{transition:transform .3s var(--ease);}
.hero__link:hover .arrow{transform:translateX(4px);}
.hero__trust{margin-top:30px;font-size:.86rem;color:rgba(21,20,15,.6);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;}
.hero__trust b{color:var(--ink);font-weight:600;}
.hero__trust .sep{width:4px;height:4px;border-radius:50%;background:var(--cherry);}
.hero__visual{margin-top:clamp(46px,7vw,80px);position:relative;}
.hero__frame{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(21,20,15,.14);box-shadow:0 40px 80px -40px rgba(21,20,15,.4);}
.hero__frame img{width:100%;height:100%;object-fit:cover;display:block;}
.hero__frame .blob{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;top:50%;left:46%;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle at 50% 50%, #cdbfa3 0 6px, #c2b395 6px 12px);box-shadow:0 40px 70px -20px rgba(80,60,30,.5);}
.hero__frame figcaption{position:relative;z-index:2;font-family:var(--display);font-style:italic;font-size:clamp(1rem,1.5vw,1.25rem);color:#3a3325;}
.cherry-float{position:absolute;top:-26px;right:6%;z-index:3;width:clamp(64px,9vw,96px);filter:drop-shadow(0 16px 24px rgba(180,40,20,.35));animation:bob 5s var(--ease) infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-12px) rotate(3deg);}}

/* ---- page hero (about / services) ---- */
.page-hero{background:var(--blue);padding:clamp(120px,15vh,175px) 0 clamp(50px,7vw,90px);overflow:hidden;}
.page-hero .eyebrow{color:var(--ink);margin-bottom:20px;}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7.5vw,5.4rem);line-height:1.02;letter-spacing:-.015em;max-width:16ch;margin-bottom:22px;}
.page-hero h1 em{font-style:italic;color:var(--cherry);font-weight:600;}
.page-hero .lead{color:rgba(21,20,15,.72);max-width:54ch;font-size:clamp(1.1rem,1.6vw,1.3rem);}

/* ---- marquee ---- */
.marquee{background:var(--ink);color:var(--blue);padding:22px 0;overflow:hidden;}
.marquee__track{display:flex;width:max-content;animation:scroll 26s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee span{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;}
.marquee .pip{width:12px;height:12px;border-radius:50%;background:var(--cherry);flex:none;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ---- section shells ---- */
.sec{padding:clamp(70px,11vw,140px) 0;}
.sec--cream{background:var(--cream);}
.sec--blue{background:var(--blue);}
.sec-head{max-width:680px;margin-bottom:clamp(40px,5vw,64px);}
.sec-head .eyebrow{color:var(--cherry);margin-bottom:18px;}
.sec-head p{margin-top:18px;color:var(--muted);font-size:1.08rem;max-width:52ch;}

/* ---- services grid (home) ---- */
.svc-grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.svc{border:1px solid var(--line);border-radius:6px;padding:clamp(24px,2.4vw,34px);background:var(--paper);display:flex;flex-direction:column;gap:14px;min-height:300px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(21,20,15,.5);}
.svc__num{font-family:var(--display);font-style:italic;color:var(--cherry);font-size:1.1rem;}
.svc__name{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.04;letter-spacing:-.01em;}
.svc__desc{color:var(--muted);font-size:.98rem;margin-top:auto;}
.svc__tag{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600;opacity:.7;}

/* ---- service detail rows (services page) ---- */
.svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(44px,5vw,76px) 0;border-top:1px solid var(--line);}
.svc-detail:first-of-type{border-top:none;padding-top:0;}
.svc-detail:nth-child(even) .svc-detail__text{order:2;}
.svc-detail__num{font-family:var(--display);font-style:italic;color:var(--cherry);font-size:1.25rem;}
.svc-detail h3{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.04;margin:8px 0 16px;}
.svc-detail__intro{color:var(--muted);font-size:1.08rem;margin-bottom:22px;}
.svc-detail ul{list-style:none;display:grid;gap:11px;}
.svc-detail li{padding-left:24px;position:relative;font-size:.98rem;}
.svc-detail li::before{content:"\2713";position:absolute;left:0;color:var(--cherry);font-weight:700;}
.svc-detail__media{aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 130% at 75% 15%, #e9e3d6, #cdbfa3 70%, #b9ac92);position:relative;overflow:hidden;}
.svc-detail__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.svc-detail__media span{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(3rem,7vw,5.5rem);color:rgba(21,20,15,.16);}
.svc-detail__media .tag{position:absolute;bottom:18px;left:20px;font-family:var(--display);font-style:italic;color:#3a3325;font-size:1.05rem;}

/* ---- why / values ---- */
.why-quote{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.015em;max-width:18ch;margin-bottom:clamp(40px,5vw,70px);}
.why-quote em{font-style:italic;color:var(--cherry);font-weight:600;}
.why-grid{display:grid;gap:clamp(28px,3vw,48px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.why h3{font-family:var(--display);font-size:1.4rem;margin-bottom:10px;display:flex;align-items:baseline;gap:10px;}
.why h3 .i{font-style:italic;color:var(--cherry);font-size:1rem;}
.why p{color:var(--muted);font-size:.98rem;}
.why .why-item{padding-top:22px;border-top:2px solid var(--ink);}

/* ---- story (about) ---- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start;}
.story .big{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.22;letter-spacing:-.01em;margin-bottom:8px;}
.story .big em{font-style:italic;color:var(--cherry);}
.story p{color:var(--muted);font-size:1.06rem;margin-bottom:16px;}
.story p:last-child{margin-bottom:0;}

/* ---- process ---- */
.steps{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.step{position:relative;border-radius:8px;padding:clamp(22px,2.2vw,30px);background:rgba(255,255,255,.55);border:1px solid rgba(21,20,15,.18);transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);}
.step:hover{transform:translateY(-5px);background:#fff;box-shadow:0 26px 50px -32px rgba(21,20,15,.45);}
.step__n{font-family:var(--display);font-style:italic;font-weight:900;font-size:2.6rem;color:var(--cherry);line-height:1;}
.step h4{font-family:var(--display);font-size:1.5rem;margin:14px 0 8px;letter-spacing:-.01em;}
.step p{color:rgba(21,20,15,.7);font-size:.94rem;}
/* visual flow connector between steps */
.steps--flow .step:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(clamp(14px,1.6vw,20px) / -2);width:clamp(14px,1.6vw,20px);height:2px;background:linear-gradient(90deg,var(--cherry),transparent);transform:translateY(-50%);z-index:1;}
@media(max-width:719px){.steps--flow .step:not(:last-child)::after{display:none;}}

/* ---- proof ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,2vw,30px);margin-bottom:clamp(48px,6vw,80px);}
.stat__n{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.02em;}
.stat__n em{font-style:italic;color:var(--cherry);}
.stat__l{margin-top:8px;color:var(--muted);font-size:.92rem;}
.testi{max-width:880px;}
.testi blockquote{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.18;letter-spacing:-.01em;}
.testi blockquote::before{content:"\201C";color:var(--cherry);}
.testi blockquote::after{content:"\201D";color:var(--cherry);}
.testi cite{display:block;margin-top:20px;font-style:normal;font-weight:600;font-size:.95rem;}
.testi cite span{color:var(--muted);font-weight:400;}

/* ---- pricing ---- */
.price-note{max-width:60ch;color:var(--muted);margin-bottom:clamp(36px,4vw,52px);font-size:1.05rem;}
.price-note b{color:var(--ink);}
.tiers{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.tier{border:1px solid var(--line);border-radius:8px;padding:clamp(26px,2.6vw,38px);background:var(--paper);display:flex;flex-direction:column;gap:8px;}
.tier--feat{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.tier--feat .tier__price,.tier--feat .tier__name{color:var(--paper);}
.tier--feat .tier__price em{color:var(--blue);}
.tier__badge{align-self:flex-start;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--cherry);padding:5px 12px;border-radius:100px;margin-bottom:6px;}
.tier__name{font-family:var(--display);font-size:1.6rem;}
.tier__price{font-family:var(--display);font-weight:900;font-size:2.2rem;letter-spacing:-.02em;}
.tier__price em{font-style:italic;font-weight:400;font-size:1rem;color:var(--cherry);}
.tier__sub{color:var(--muted);font-size:.92rem;margin-bottom:8px;}
.tier--feat .tier__sub{color:rgba(247,245,239,.7);}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:10px 0 22px;}
.tier li{font-size:.92rem;padding-left:22px;position:relative;}
.tier li::before{content:"\2713";position:absolute;left:0;color:var(--cherry);font-weight:700;}
.tier .btn{margin-top:auto;justify-content:center;}
.tier--feat .btn--ghost{border-color:var(--paper);color:var(--paper);}
.tier--feat .btn--ghost:hover{background:var(--paper);color:var(--ink);}
.tier__hosting{font-size:.92rem;color:var(--muted);margin-top:-2px;}
.tier--feat .tier__hosting{color:rgba(247,245,239,.66);}

/* ---- SEO / advertising add-on band ---- */
.addon{margin-top:clamp(16px,2vw,22px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center;border:1px dashed var(--line);border-radius:8px;padding:clamp(24px,2.6vw,34px) clamp(26px,2.6vw,40px);background:var(--paper);}
.addon__tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--cherry);}
.addon__name{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1;}
.addon__price{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.02em;white-space:nowrap;}
.addon__price em{font-style:italic;font-weight:400;font-size:1rem;color:var(--cherry);}
.addon__desc{color:var(--muted);font-size:.95rem;margin-top:4px;max-width:52ch;}
@media(max-width:680px){.addon{grid-template-columns:1fr;text-align:left;gap:10px;}}

/* ---- security / "keep what's yours" section ---- */
.sec--ink{background:var(--ink);color:var(--paper);}
.sec--ink .sec-head .eyebrow{color:var(--blue);}
.sec--ink .h-sec{color:var(--paper);}
.sec--ink .h-sec em{color:var(--blue);}
.sec--ink .sec-head p{color:rgba(247,245,239,.74);}
.shield-grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:clamp(36px,4vw,52px);}
.shield{border:1px solid rgba(247,245,239,.16);border-radius:10px;padding:clamp(26px,2.6vw,36px);background:rgba(247,245,239,.04);}
.shield h3{font-family:var(--display);font-size:1.32rem;line-height:1.12;margin-bottom:12px;color:var(--paper);}
.shield h3 .ic{color:var(--cherry);margin-right:9px;}
.shield p{color:rgba(247,245,239,.72);font-size:.96rem;}
.trust-band{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(247,245,239,.16);}
.trust-band__lbl{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,245,239,.55);font-weight:600;margin-right:6px;}
.trust-chip{font-size:.86rem;font-weight:600;letter-spacing:.01em;color:var(--paper);background:rgba(247,245,239,.07);border:1px solid rgba(247,245,239,.2);padding:9px 16px;border-radius:100px;}
.trust-chip b{color:var(--blue);font-weight:700;}
.secure-kicker{margin-top:clamp(28px,3vw,40px);font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.18;letter-spacing:-.01em;color:var(--paper);max-width:30ch;}
.secure-kicker em{font-style:italic;color:var(--blue);font-weight:600;}

/* ---- social proof structure (under pricing) ---- */
.proof{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line);text-align:center;}
.proof__avail{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:1.02rem;color:var(--ink);max-width:54ch;margin:0 auto 24px;text-align:left;}
.proof__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;}
.proof__badge{font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:9px 16px;border-radius:100px;}
.proof__badge::before{content:"✓";color:var(--cherry);font-weight:700;margin-right:8px;}

/* ---- testimonial slot ---- */
.quotes{margin-top:clamp(40px,5vw,60px);display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.quotes.is-empty{display:none;}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:clamp(26px,3vw,38px);}
.quote blockquote{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.2;letter-spacing:-.01em;}
.quote blockquote::before{content:"\201C";color:var(--cherry);}
.quote blockquote::after{content:"\201D";color:var(--cherry);}
.quote figcaption{margin-top:18px;font-size:.95rem;display:flex;flex-direction:column;gap:2px;}
.quote figcaption b{font-weight:600;}
.quote figcaption span{color:var(--muted);}

/* ---- form reassurance ---- */
.form-reassure{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:24px;}

/* ---- case study detail (work) ---- */
.case{margin-top:16px;display:grid;gap:0;border-top:1px solid var(--line);}
.case>div{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.case dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cherry);}
.case dd{font-size:.92rem;color:var(--muted);line-height:1.5;}

/* ---- FAQ ---- */
.faq{max-width:840px;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.2;display:flex;justify-content:space-between;gap:24px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--cherry);font-size:1.7rem;line-height:1;transition:transform .3s var(--ease);flex:none;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{color:var(--muted);padding:0 0 24px;max-width:68ch;font-size:1rem;}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:start;}
.contact h2{margin-bottom:18px;}
.contact .lead{margin-bottom:28px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:7px;color:var(--ink);}
.field input,.field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);padding:16px 18px;border:1.5px solid var(--line);border-radius:10px;background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:rgba(21,20,15,.4);}
.field input:hover,.field textarea:hover{border-color:rgba(21,20,15,.3);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cherry);box-shadow:0 0 0 3px rgba(225,69,46,.18);}
.field textarea{resize:vertical;min-height:130px;}
.form-status{margin-top:14px;font-size:.98rem;font-weight:600;min-height:1.2em;}
.form-status.ok{color:#1f6b2e;}
.form-status.err{color:var(--cherry-deep);}
.contact__aside{background:var(--ink);color:var(--paper);border-radius:10px;padding:clamp(28px,3vw,40px);position:sticky;top:100px;}
.contact__aside h3{font-family:var(--display);font-size:1.7rem;margin-bottom:14px;}
.contact__aside p{color:rgba(247,245,239,.72);font-size:.96rem;margin-bottom:22px;}
.contact__aside a.mail{font-family:var(--display);font-style:italic;color:var(--blue);font-size:1.25rem;border-bottom:1px solid transparent;transition:border-color .3s;}
.contact__aside a.mail:hover{border-color:var(--blue);}
.contact__aside .pts{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.contact__aside .pts div{font-size:.92rem;display:flex;gap:10px;align-items:center;color:rgba(247,245,239,.85);}
.contact__aside .pts .c{color:var(--cherry);font-weight:700;}

/* ---- CTA band ---- */
.cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(72px,9vw,120px) 0;}
.cta-band h2{font-family:var(--display);font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.05;letter-spacing:-.015em;max-width:18ch;margin:0 auto 18px;}
.cta-band h2 em{font-style:italic;color:var(--blue);}
.cta-band p{color:rgba(247,245,239,.72);max-width:46ch;margin:0 auto 30px;font-size:1.08rem;}

/* ---- plain vanilla + cherry (Klaff Step 4) ---- */
.vanilla-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:stretch;}
.vanilla-tag,.cherry-tag{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:18px;}
.vanilla-tag{color:var(--muted);}
.vanilla-list{list-style:none;display:flex;flex-direction:column;gap:0;}
.vanilla-list li{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);opacity:.7;}
.cherry-card{background:var(--ink);color:var(--paper);border-radius:12px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center;box-shadow:0 30px 60px -34px rgba(21,20,15,.5);}
.cherry-tag{color:var(--cherry);}
.cherry-card h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.05;margin-bottom:16px;}
.cherry-card h3 em{font-style:italic;color:var(--blue);}
.cherry-card p{color:rgba(247,245,239,.82);font-size:1.05rem;margin-bottom:14px;}
.cherry-card .kicker{font-family:var(--display);font-style:italic;color:var(--paper);font-size:1.2rem;margin-bottom:0;}
.cherry-card .kicker em{color:var(--cherry);}
@media(max-width:760px){.vanilla-grid{grid-template-columns:1fr;}}

/* ---- work / portfolio ---- */
.work-grid{display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.work-card{display:flex;flex-direction:column;}
.work-card__media{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--cream);transition:box-shadow .5s var(--ease),transform .5s var(--ease);}
.work-card:hover .work-card__media{transform:translateY(-4px);box-shadow:0 32px 60px -34px rgba(21,20,15,.5);}
.work-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.work-card:hover .work-card__media img{transform:scale(1.05);}
.work-card__flag{position:absolute;top:12px;left:12px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);background:rgba(247,245,239,.9);padding:5px 10px;border-radius:100px;}
.work-card__cat{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--cherry);margin:16px 0 6px;}
.work-card h3{font-family:var(--display);font-size:1.5rem;line-height:1.05;margin-bottom:8px;}
.work-card p{color:var(--muted);font-size:.95rem;}
.work-note{max-width:62ch;color:var(--muted);font-size:.95rem;margin-top:clamp(36px,5vw,56px);font-style:italic;}

/* ---- agentic / AI (ACO) ---- */
.aco-pill{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink);background:rgba(255,255,255,.55);border:1px solid rgba(21,20,15,.2);padding:7px 14px;border-radius:100px;margin-bottom:20px;}
.aco-pill .spark{color:var(--cherry);font-size:.9rem;}
.aco{background:var(--ink);color:var(--paper);}
.aco__badge{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--paper);background:rgba(159,194,234,.14);border:1px solid rgba(159,194,234,.4);padding:8px 16px;border-radius:100px;margin-bottom:24px;}
.aco__badge .spark{color:var(--cherry);}
.aco__title{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.015em;max-width:16ch;margin-bottom:22px;}
.aco__title em{font-style:italic;color:var(--blue);}
.aco__lead{color:rgba(247,245,239,.78);font-size:clamp(1.08rem,1.6vw,1.3rem);max-width:62ch;margin-bottom:clamp(40px,5vw,60px);}
.aco__grid{display:grid;gap:clamp(20px,3vw,42px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.aco__item{border-top:2px solid var(--cherry);padding-top:20px;}
.aco__item h3{font-family:var(--display);font-size:1.4rem;margin-bottom:10px;}
.aco__item p{color:rgba(247,245,239,.72);font-size:.98rem;}
.aco__note{margin-top:clamp(28px,4vw,44px);font-size:.82rem;color:rgba(247,245,239,.5);max-width:60ch;}

/* ---- footer ---- */
.footer{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,90px) 0 40px;}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:flex-start;padding-bottom:40px;border-bottom:1px solid rgba(247,245,239,.14);}
.footer .brand{color:var(--paper);font-size:1.6rem;}
.footer-logo{height:46px;width:auto;display:block;}
.footer__big{font-family:var(--display);font-style:italic;font-size:clamp(2rem,5vw,3.4rem);max-width:14ch;}
.footer__big em{color:var(--cherry);}
.footer__links{display:flex;gap:26px;flex-wrap:wrap;font-size:.95rem;}
.footer__links a{color:rgba(247,245,239,.92);font-weight:500;}
.footer__links a:hover{color:var(--blue);}
.footer__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:30px;font-size:.86rem;color:rgba(247,245,239,.72);}
.footer__bot a:hover{color:var(--blue);}

/* ---- legal / prose pages ---- */
.legal{max-width:780px;}
.legal .updated{font-size:.9rem;color:var(--muted);font-style:italic;margin-bottom:30px;}
.legal h2{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.1;margin:38px 0 14px;}
.legal h2:first-of-type{margin-top:0;}
.legal h3{font-family:var(--display);font-size:1.2rem;margin:24px 0 10px;}
.legal p,.legal li{color:var(--muted);font-size:1.02rem;margin-bottom:14px;}
.legal ul{padding-left:22px;margin-bottom:16px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--cherry);font-weight:600;}
.legal strong{color:var(--ink);}

/* ---- cookie banner ---- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:700px;margin:0 auto;background:var(--ink);color:var(--paper);border-radius:12px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;box-shadow:0 20px 50px -20px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .5s var(--ease);}
.cookie-banner.show{transform:none;}
.cookie-banner p{font-size:.92rem;color:rgba(247,245,239,.85);margin:0;flex:1 1 300px;}
.cookie-banner p a{color:var(--blue);}
.cookie-actions{display:flex;gap:10px;}
.cookie-banner button{font-family:var(--body);font-weight:600;font-size:.88rem;padding:10px 18px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .25s var(--ease);}
.cookie-banner button:hover{transform:translateY(-1px);}
.cookie-banner .accept{background:var(--cherry);color:#fff;}
.cookie-banner .decline{background:transparent;border-color:rgba(247,245,239,.4);color:var(--paper);}
.footer__legal{display:flex;gap:10px;font-size:.84rem;}
.footer__legal a{color:rgba(247,245,239,.78);}
.footer__legal a:hover{color:var(--blue);}
@media(max-width:520px){.cookie-banner{flex-direction:column;align-items:stretch;}.cookie-actions{justify-content:stretch;}.cookie-banner button{flex:1;}}

/* ---- scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-d="1"]{transition-delay:.07s;}
[data-reveal][data-d="2"]{transition-delay:.14s;}
[data-reveal][data-d="3"]{transition-delay:.21s;}
[data-reveal][data-d="4"]{transition-delay:.28s;}

/* ---- responsive ---- */
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
  .contact__aside{position:static;}
  .svc-detail{grid-template-columns:1fr;gap:24px;}
  .svc-detail:nth-child(even) .svc-detail__text{order:0;}
  .svc-detail__media{order:-1;}
  .story{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px -20px rgba(0,0,0,.3);}
  .nav-links.open{transform:none;}
  .nav-links a{font-size:1.25rem;}
  .nav-toggle{display:flex;z-index:101;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap,.hero__inner{padding-left:18px;padding-right:18px;}
  .hero{padding:88px 0 60px;}
  .hero h1{font-size:clamp(2.3rem,10.5vw,3.1rem);max-width:100%;margin-bottom:20px;}
  .hero .lead{font-size:1.05rem;margin-bottom:26px;}
  .hero__trust{font-size:.8rem;gap:6px 12px;}
  .hero__cta{width:100%;flex-direction:column;align-items:stretch;gap:16px;}
  .hero__cta .btn,.tier .btn{width:100%;justify-content:center;}
  .hero__link{justify-content:center;}
  .hero__visual{margin-top:38px;}
  .hero__frame{aspect-ratio:4/3;}
  .cherry-float{width:56px;top:-18px;right:4%;}
  .page-hero{padding:96px 0 52px;}
  .page-hero h1{font-size:clamp(2.2rem,9.5vw,3.2rem);max-width:100%;}
  .sec{padding:60px 0;}
  .sec-head{margin-bottom:30px;}
  .h-sec{font-size:clamp(1.9rem,8vw,2.6rem);}
  .sec-head p{font-size:1rem;}
  .why-quote{font-size:clamp(1.8rem,8.5vw,2.6rem);margin-bottom:34px;}
  .svc{min-height:0;padding:24px;}
  .svc-detail h3{font-size:clamp(1.7rem,8vw,2.3rem);}
  .marquee{padding:18px 0;}
  .marquee span{font-size:1.7rem;gap:18px;}
  .stats{grid-template-columns:1fr 1fr;gap:26px 16px;}
  .stat__n{font-size:clamp(2.3rem,11vw,3rem);}
  .testi blockquote{font-size:1.45rem;}
  .tier{padding:26px;}
  .contact__aside{padding:26px;}
  .cta-band h2{font-size:clamp(2rem,9vw,2.8rem);}
  .footer__big{font-size:clamp(1.7rem,8vw,2.4rem);}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;}
}

/* =================================================================
   HOMEPAGE REDESIGN — "Atelier in Motion" (scoped: body.home + new
   classes only). Nothing above this block is modified; sub-pages
   (/about /services /work) are unaffected. Warm paper dominates;
   blue demoted to the single "Why us" panel.
   ================================================================= */

/* brand heartbeat dot on the wordmark */
.brand-dot{margin-left:9px;width:7px;height:7px;}

/* 1 · HERO — paper canvas, asymmetric split (text left / cherry right) */
.hero--split{background:var(--paper);}
.hero--split .eyebrow,.hero--split .aco-pill{color:var(--ink);}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}
.hero--split .hero__copy{max-width:none;}
.hero--split h1{font-size:clamp(2.9rem,8vw,6.4rem);margin-bottom:24px;max-width:13ch;}
.hero--split .lead{color:var(--muted);max-width:40ch;margin-bottom:34px;}
.hero__media{margin-top:0;}
.hero__frame--video{aspect-ratio:4/5;background:var(--cream);border-radius:14px;box-shadow:0 40px 80px -42px rgba(21,20,15,.4);}
.hero__video{width:100%;height:100%;object-fit:cover;display:block;background:var(--cream);}
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:36px;}
  .hero--split .hero__copy{order:0;}
  .hero__media{order:1;}
  .hero__frame--video{aspect-ratio:16/10;max-height:60vh;}
  .hero--split h1{max-width:100%;}
  .hero--split .lead{max-width:52ch;}
}

/* 3 · THE CHERRY — split: plate image left, statement right */
.split__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center;}
.split__media{margin:0;}
.split__frame{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:radial-gradient(120% 130% at 70% 20%,#efe8da,#d8c9ad 70%,#c2b395);border:1px solid var(--line);box-shadow:0 36px 70px -42px rgba(21,20,15,.4);}
.split__frame img{width:100%;height:100%;object-fit:cover;display:block;}
.split__copy .eyebrow{color:var(--cherry);margin-bottom:18px;display:inline-flex;}
.split__copy h2{margin-bottom:18px;}
.split__sub{color:var(--muted);font-size:clamp(1.1rem,1.7vw,1.35rem);max-width:34ch;margin-bottom:18px;}
.split__line{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.25;color:var(--ink);max-width:30ch;}
@media(max-width:760px){.split__grid{grid-template-columns:1fr;gap:28px;}.split__media{order:-1;}.split__frame{aspect-ratio:4/3;}}

/* 4 · NEURO-INFORMED DESIGN — dark, neuro-bloom backdrop, cherry icons */
.neuro{background:var(--ink);background-image:linear-gradient(rgba(21,20,15,.86),rgba(21,20,15,.94)),url('/img/neuro-bloom.jpg');background-size:cover;background-position:center;}
.neuro .sec-head .eyebrow{color:var(--blue);}
.neuro__grid{display:grid;gap:clamp(20px,3vw,42px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.neuro__item{border-top:2px solid var(--cherry);padding-top:20px;}
.neuro__item h3{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.12;margin-bottom:10px;color:var(--paper);display:flex;align-items:baseline;gap:10px;}
.neuro__item h3 .ic{color:var(--cherry);flex:none;}
.neuro__item p{color:rgba(247,245,239,.74);font-size:.98rem;}
.neuro__note{margin-top:clamp(28px,4vw,44px);font-size:.82rem;color:rgba(247,245,239,.5);max-width:64ch;}

/* 5 · SERVICES — lean cards: number + name + tag only */
.svc-grid--lean .svc--lean{min-height:0;gap:10px;padding:clamp(26px,2.6vw,38px);}
.svc--lean .svc__tag{margin-top:0;opacity:.75;}
.svc-more{margin-top:clamp(26px,3vw,40px);}
.svc-more a{color:var(--cherry);font-weight:600;}
.svc-more a:hover{text-decoration:underline;}

/* 6 · WHY US — quiet blue panel, one line each */
.why--lean .why-grid{gap:clamp(20px,2.4vw,40px);}
.why--lean .why-item{padding-top:20px;}
.why--lean .why-item h3{margin-bottom:0;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.18;}

/* 9 · TRUST BAND — single line, no border-top, centred chips */
.trust .trust-band--solo{border-top:none;padding-top:0;justify-content:center;}
@media(max-width:560px){.trust .trust-band--solo{justify-content:flex-start;}}

/* ---- HOMEPAGE MOTION (transform/opacity only, reduced-motion gated) ---- */
@media (prefers-reduced-motion:no-preference){
  /* cherry-roll on the process steps — each number rolls in on reveal */
  .steps--roll .step .step__n{display:inline-block;transform:rotate(-90deg) translateX(8px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease);transform-origin:center;}
  .steps--roll .step[data-reveal].in .step__n{transform:rotate(0) translateX(0);opacity:1;}
  .steps--roll .step[data-reveal][data-d="2"].in .step__n{transition-delay:.12s;}
  .steps--roll .step[data-reveal][data-d="3"].in .step__n{transition-delay:.18s;}
  .steps--roll .step[data-reveal][data-d="4"].in .step__n{transition-delay:.24s;}
}

/* ---- homepage responsive tightening ---- */
@media (max-width:640px){
  .hero--split{padding:96px 0 56px;}
  .hero--split h1{font-size:clamp(2.4rem,11vw,3.3rem);}
  .split__sub{max-width:100%;}
  .split__line{max-width:100%;}
}