/* MW Reach: Apple-style fluid layer (from the apple-design skill).
   CSS only. Loads last, so it refines motion.css and premium.css without editing them.
   Principles: instant press feedback, smooth non-bouncy settle, symmetric enter/exit,
   translucent materials, size-aware tracking, graceful reduced-motion/transparency/contrast. */

:root{
  --ease-settle:cubic-bezier(.32,.72,0,1);   /* critically damped feel, no overshoot */
  --ease-press:cubic-bezier(.2,0,0,1);
}

/* ---------- 1. Response: feedback on press, instantly ---------- */
.btn,.nav-toggle,.svc-group,.chip,.book-tabs .tab{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{transition:transform .5s var(--ease-settle),box-shadow .35s var(--ease-settle),background .2s}
.btn:active{transform:scale(.97);transition-duration:.1s,.1s,.2s;transition-timing-function:var(--ease-press)}
.btn-primary:active{box-shadow:0 4px 16px -8px rgba(227,6,19,.6)}
.svc-group:active{transform:scale(.985);transition:transform .1s var(--ease-press)}

/* ---------- 2. Spring-like settle on hover and release ---------- */
.svc-group{transition:border-color .25s,transform .55s var(--ease-settle),box-shadow .45s var(--ease-settle)}

/* ---------- 3. Materials: translucent nav with a soft scroll edge, not a hard divider ---------- */
.nav{
  background:rgba(247,245,243,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(30,10,15,.06);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(247,245,243,.35),transparent);
  opacity:0;transition:opacity .4s var(--ease-settle);
}
.nav.scrolled{background:rgba(247,245,243,.8)}
.nav.scrolled::after{opacity:1}

/* ---------- 4. Mobile menu: enter and exit along the same path, settle smoothly ---------- */
@media (max-width:860px){
  .nav-links{
    background:rgba(247,245,243,.86);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    transition:opacity .35s var(--ease-settle),transform .45s var(--ease-settle);
  }
}

/* ---------- 5. Typography: tracking and leading follow size ---------- */
h1{letter-spacing:-.035em;line-height:1.04;font-optical-sizing:auto}
h2{letter-spacing:-.028em;line-height:1.08}
h3{letter-spacing:-.018em;line-height:1.2}
.label,.hero-eyebrow{font-optical-sizing:auto}

/* ---------- 6. Accessibility: reduced motion, transparency, contrast ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:active,.svc-group,.svc-group:active{transition:opacity .2s,background .2s,box-shadow .2s}
  .btn:active,.svc-group:active,.btn:hover{transform:none}
  .nav-links{transition:opacity .2s}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.nav-links{background:#f7f5f3;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav::after{display:none}
}
@media (prefers-contrast:more){
  .nav,.nav-links{background:#f7f5f3;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--ink)}
}

/* ======================================================================
   Services bento (homepage "What I do")
   Calm by design: one material, one lift, instant press, no tilt or spotlight.
   Desktop: bento grid. Phone: native swipe row (real momentum and edge bounce).
   ====================================================================== */
.bento-title{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.04em;line-height:1.03;max-width:16ch}
.bento-title-soft{color:rgba(var(--fg),.42)}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3rem}
.bento-cell{display:flex;min-width:0}
.bento-cell--wide{grid-column:span 2}

.bento-card{
  position:relative;flex:1;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid rgba(var(--fg),.06);border-radius:28px;
  padding:1.6rem 1.7rem 1.7rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(var(--fg),.04),0 20px 44px -34px rgba(60,20,25,.3);
  transition:transform .6s var(--ease-settle),box-shadow .6s var(--ease-settle);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.bento-card.is-pressed,.bento-card:active{transform:scale(.98);transition-duration:.12s;transition-timing-function:var(--ease-press)}
@media (hover:hover){
  .bento-card:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(var(--fg),.04),0 34px 60px -36px rgba(120,10,20,.38)}
  .bento-card:hover:active{transform:translateY(-4px) scale(.98)}
}

.bento-kicker{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--red-text);margin:1.4rem 0 .45rem}
.bento-card h3{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em;line-height:1.18;color:var(--hd);margin:0 0 1.2rem;max-width:24ch}

.bento-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;margin-bottom:1.1rem;position:relative;z-index:2}
.bento-tags a{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--text);background:var(--surface2);border-radius:999px;padding:.42rem .85rem;transition:background .25s var(--ease-settle),transform .1s var(--ease-press)}
.bento-tags a:hover{background:var(--red-tint)}
.bento-tags a:active{transform:scale(.95)}

/* whole card is the tap target; tags sit above it */
.bento-go{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--red-text);display:inline-flex;align-items:center;gap:.35rem}
.bento-go::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.bento-go span{display:inline-block;transition:transform .5s var(--ease-settle)}
@media (hover:hover){.bento-card:hover .bento-go span{transform:translateX(4px)}}
.bento-go:focus-visible{outline:none}
.bento-go:focus-visible::after{outline:2px solid var(--red);outline-offset:3px}

/* ---- Illustrations: small, decorative, each hints at its service ---- */
.bento-art{height:150px;border-radius:20px;background:linear-gradient(160deg,var(--surface2),#f8f5f3);position:relative;overflow:hidden}
.bento-art *{transition:transform .7s var(--ease-settle),opacity .5s var(--ease-settle)}

/* Websites: three real site designs stacked like browser windows, front one on top */
.bento-art--sites{background:radial-gradient(120% 90% at 85% 0%,rgba(227,6,19,.16),transparent 60%),linear-gradient(160deg,#ece6e2,#f7f3f0)}
.bento-cell:has(.bento-art--sites) .bento-art{height:270px}
.site-win{position:absolute;left:7%;right:7%;margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 46px -26px rgba(30,10,15,.5),0 0 0 1px rgba(var(--fg),.06);transform-origin:50% 0;transition:transform .85s var(--ease-settle),opacity .6s var(--ease-settle)}
.sw-bar{display:flex;align-items:center;gap:4px;height:18px;padding:0 8px;background:#f3efec;border-bottom:1px solid rgba(var(--fg),.06)}
.sw-bar i{width:6px;height:6px;border-radius:50%;background:rgba(var(--fg),.16)}
.sw-bar i:first-child{background:#ff5f57}.sw-bar i:nth-child(2){background:#febc2e}.sw-bar i:nth-child(3){background:#28c840}
.sw-bar span{flex:0 1 46%;height:8px;margin:0 auto;border-radius:4px;background:rgba(var(--fg),.08)}
.site-win img{display:block;width:100%;height:auto;aspect-ratio:680/426;object-fit:cover;object-position:top}
.site-win--1{z-index:3;top:74px}
.site-win--2{z-index:2;top:44px;transform:scale(.93)}
.site-win--3{z-index:1;top:16px;transform:scale(.86)}
/* entrance: the windows rise out of one stack */
.js-art .bento-art--sites .site-win{opacity:0;transform:translateY(36px) scale(.96)}
.js-art .bento-art--sites.is-in .site-win--1{opacity:1;transform:none}
.js-art .bento-art--sites.is-in .site-win--2{opacity:1;transform:scale(.93);transition-delay:.1s}
.js-art .bento-art--sites.is-in .site-win--3{opacity:1;transform:scale(.86);transition-delay:.2s}
@media (hover:hover){
  .bento-card:hover .bento-art--sites.is-in .site-win--1{transform:translateY(10px)}
  .bento-card:hover .bento-art--sites.is-in .site-win--2{transform:translateY(-4px) scale(.93)}
  .bento-card:hover .bento-art--sites.is-in .site-win--3{transform:translateY(-14px) scale(.86)}
}
@media (max-width:760px){.bento-cell:has(.bento-art--sites) .bento-art{height:230px}.site-win--1{top:66px}.site-win--2{top:38px}.site-win--3{top:12px}}

/* Getting found: the real Google results, in a dark results window. The query types itself,
   then the listing rises in, then the Yell result slides up in front of it */
.bento-art--serp{background:radial-gradient(110% 90% at 15% 0%,rgba(66,133,244,.16),transparent 60%),linear-gradient(160deg,#ece6e2,#f7f3f0)}
.bento-cell:has(.bento-art--serp) .bento-art{height:270px}
.serp{position:absolute;left:6%;right:6%;top:16px;bottom:-24px;background:#202124;border-radius:16px;padding:10px 10px 0;box-shadow:0 26px 50px -28px rgba(10,10,20,.6)}
.serp-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:#303134;color:#e8eaed;font:500 .68rem/1 var(--body);white-space:nowrap;overflow:hidden}
.serp-bar svg{width:13px;height:13px;flex-shrink:0;color:#9aa0a6}
.serp-caret{display:inline-block;width:1.5px;height:13px;margin-left:-5px;background:#8ab4f8;opacity:0}
.serp-main{display:block;width:100%;height:auto;margin-top:10px;border-radius:8px;transition:transform .8s var(--ease-settle),opacity .6s var(--ease-settle)}
.serp-yell{position:absolute;left:8%;right:auto;bottom:14px;width:86%;height:auto;border-radius:10px;box-shadow:0 20px 40px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-2deg);transition:transform .85s var(--ease-settle),opacity .6s var(--ease-settle)}
/* entrance (only when the script runs): type, then results */
.js-art .bento-art--serp .serp-main{opacity:0;transform:translateY(22px)}
.js-art .bento-art--serp .serp-yell{opacity:0;transform:translateY(30px) rotate(0)}
.js-art .bento-art--serp.is-typing .serp-caret{opacity:1}
.js-art .bento-art--serp.is-done .serp-main{opacity:1;transform:none}
.js-art .bento-art--serp.is-done .serp-yell{opacity:1;transform:rotate(-2deg);transition-delay:.25s}
@media (hover:hover){
  .bento-card:hover .bento-art--serp.is-done .serp-main{transform:translateY(-4px)}
  .bento-card:hover .bento-art--serp.is-done .serp-yell{transform:translateY(8px) rotate(0)}
}
@media (max-width:760px){.bento-cell:has(.bento-art--serp) .bento-art{height:230px}.serp{top:12px}}

/* Wide cards get a taller stage; each card is a size container so the art adapts to its own width */
.bento-card{container-type:inline-size}
.bento-cell--wide .bento-art{height:270px}

/* Social and content: real post examples, one open on a phone, two either side */
.bento-art--feed{background:linear-gradient(160deg,#ece6e2,#f7f3f0)}
.sf-av{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--av,#333);color:#fff;font:700 .55rem/1 var(--display);flex-shrink:0;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #e1306c}
.sf-phone{position:absolute;left:50%;top:18px;width:196px;margin-left:-98px;height:350px;border-radius:30px;background:#141012;padding:7px;box-shadow:0 30px 60px -30px rgba(30,10,15,.55);z-index:2;transition:transform .8s var(--ease-settle)}
.sf-screen{height:100%;border-radius:24px;background:#fff;overflow:hidden;padding-top:18px}
.sf-profile{display:flex;align-items:center;gap:7px;padding:4px 10px 7px}
.sf-profile b{font:700 .62rem/1 var(--display);color:var(--hd)}
.sf-main{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.sf-actions{display:flex;gap:9px;padding:7px 10px 3px}
.sf-actions svg{width:14px;height:14px;fill:none;stroke:var(--hd);stroke-width:1.8;stroke-linejoin:round}
.sf-actions .sf-save{margin-left:auto}
.sf-cap{font-size:.55rem;line-height:1.35;color:var(--text);padding:0 10px;margin:0}
.sf-cap b{font-family:var(--display)}
.sf-post{position:absolute;top:46px;width:168px;margin:0;border-radius:14px;background:#fff;box-shadow:0 22px 44px -26px rgba(30,10,15,.45);overflow:hidden;z-index:1;transition:transform .8s var(--ease-settle),opacity .6s var(--ease-settle)}
.sf-post--left{left:calc(50% - 282px);transform:rotate(-5deg)}
.sf-post--right{right:calc(50% - 282px);transform:rotate(5deg)}
.sf-head{display:flex;align-items:center;gap:6px;padding:7px 8px}
.sf-head b{font:700 .58rem/1 var(--display);color:var(--hd)}
.sf-post img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* entrance: the phone rises, the posts slide out from behind it */
.js-art .bento-art--feed .sf-phone{transform:translateY(40px)}
.js-art .bento-art--feed .sf-post{opacity:0}
.js-art .bento-art--feed .sf-post--left{transform:translateX(80px)}
.js-art .bento-art--feed .sf-post--right{transform:translateX(-80px)}
.js-art .bento-art--feed.is-in .sf-phone{transform:none}
.js-art .bento-art--feed.is-in .sf-post{opacity:1;transition-delay:.2s}
.js-art .bento-art--feed.is-in .sf-post--left{transform:rotate(-5deg)}
.js-art .bento-art--feed.is-in .sf-post--right{transform:rotate(5deg)}
@media (hover:hover){
  .bento-card:hover .bento-art--feed.is-in .sf-phone{transform:translateY(-8px)}
  .bento-card:hover .bento-art--feed.is-in .sf-post--left{transform:translateX(-12px) rotate(-8deg)}
  .bento-card:hover .bento-art--feed.is-in .sf-post--right{transform:translateX(12px) rotate(8deg)}
}
@container (max-width:470px){
  .sf-phone{left:14px;margin-left:0;width:158px;height:300px;top:16px;border-radius:26px}
  .sf-screen{border-radius:20px;padding-top:14px}
  .sf-post--left{display:none}
  .sf-post--right{right:10px;left:auto;width:112px;top:70px}
  .sf-post .sf-head{padding:5px 6px}
}

/* Brand and strategy: three real brand kits fanned like printed sheets */
.bento-art--kits{background:linear-gradient(160deg,#ece6e2,#f7f3f0)}
.kit-card{position:absolute;left:50%;top:50%;width:320px;max-width:none;height:auto;aspect-ratio:820/615;border-radius:10px;box-shadow:0 26px 50px -28px rgba(30,10,15,.55),0 0 0 1px rgba(var(--fg),.05);transition:transform .9s var(--ease-settle),opacity .6s var(--ease-settle)}
.kit-card--front{z-index:3;transform:translate(-50%,-50%)}
.kit-card--l{z-index:1;transform:translate(calc(-50% - 150px),-50%) rotate(-7deg) scale(.86)}
.kit-card--r{z-index:2;transform:translate(calc(-50% + 150px),-50%) rotate(7deg) scale(.86)}
/* entrance: the sheets start as one stack and fan out */
.js-art .bento-art--kits .kit-card--l,.js-art .bento-art--kits .kit-card--r{transform:translate(-50%,-50%) scale(.9);opacity:0}
.js-art .bento-art--kits .kit-card--front{transform:translate(-50%,-44%) scale(.96);opacity:0}
.js-art .bento-art--kits.is-in .kit-card--front{transform:translate(-50%,-50%);opacity:1}
.js-art .bento-art--kits.is-in .kit-card--l{transform:translate(calc(-50% - 150px),-50%) rotate(-7deg) scale(.86);opacity:1;transition-delay:.15s}
.js-art .bento-art--kits.is-in .kit-card--r{transform:translate(calc(-50% + 150px),-50%) rotate(7deg) scale(.86);opacity:1;transition-delay:.22s}
@media (hover:hover){
  .bento-card:hover .bento-art--kits.is-in .kit-card--front{transform:translate(-50%,-53%) scale(1.03)}
  .bento-card:hover .bento-art--kits.is-in .kit-card--l{transform:translate(calc(-50% - 178px),-50%) rotate(-10deg) scale(.86)}
  .bento-card:hover .bento-art--kits.is-in .kit-card--r{transform:translate(calc(-50% + 178px),-50%) rotate(10deg) scale(.86)}
}
@container (max-width:470px){
  .kit-card{width:220px}
  .kit-card--l,.js-art .bento-art--kits.is-in .kit-card--l{transform:translate(calc(-50% - 62px),-50%) rotate(-7deg) scale(.82)}
  .kit-card--r,.js-art .bento-art--kits.is-in .kit-card--r{transform:translate(calc(-50% + 62px),-50%) rotate(7deg) scale(.82)}
}

.bento-dots{display:none}

/* ---- Tablet: two columns ---- */
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-cell--wide{grid-column:span 2}
}

/* ---- Phone: swipe row with snap, the browser supplies momentum and rubber banding ---- */
@media (max-width:760px){
  .bento{
    display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:2.2rem -4vw 0;padding:.4rem 4vw 1.6rem;scroll-padding:0 4vw;
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .bento::-webkit-scrollbar{display:none}
  .bento-cell,.bento-cell--wide{flex:0 0 84%;scroll-snap-align:start}
  .bento-card{padding:1.3rem 1.3rem 1.4rem}
  .bento-cell .bento-art{height:230px}
  .bento-cell.reveal-up{opacity:1;transform:none;transition:none}
  .bento-dots{display:flex;justify-content:center;gap:7px;margin-top:.2rem}
  .bento-dots i{width:7px;height:7px;border-radius:999px;background:rgba(var(--fg),.18);transition:width .5s var(--ease-settle),background .3s}
  .bento-dots i.on{width:20px;background:var(--red)}
}

@media (prefers-reduced-motion:reduce){
  .bento-card,.bento-go span,.bento-dots i{transition:opacity .2s,background .2s,box-shadow .2s}
  .kit-card,.sf-post,.sf-phone,.site-win,.serp-main,.serp-yell{transition:none}
  .bento-card:hover,.bento-card:active,.bento-card.is-pressed{transform:none}
  .bento-card:hover .bento-art--serp *{transform:none}
  .bento{scroll-snap-type:x proximity}
  .js-art .bento-art--feed *,.js-art .bento-art--kits *,.js-art .bento-art--sites *{opacity:1 !important;transition:none !important}
}

/* ======================================================================
   Site-wide premium pass
   Removes the template tells (animated grid and beams, glow orbs, gradient text,
   tracked uppercase labels, red icon tiles, boxed lists) and replaces them with
   one calm system: flat warm paper, solid colour, hairlines, real type hierarchy.
   ====================================================================== */

/* ---- Colour: solid, never gradient text ---- */
.grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--red-text);-webkit-text-fill-color:currentColor}
.on-dark .grad-text,.manifesto .grad-text{color:var(--red2)}

/* ---- Eyebrow labels: quiet sentence case, no dash ---- */
.label{font-size:.95rem;font-weight:600;letter-spacing:-.005em;text-transform:none;margin-bottom:.7rem}
.label::before{display:none}

/* ---- Headlines: big, tight, confident ---- */
.hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;max-width:17ch}
h2.sec{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.038em;line-height:1.05;max-width:22ch}
.lead{letter-spacing:-.005em}
.crumbs{font-size:.88rem}

/* ---- Buttons: solid, no glow ---- */
.btn-primary{background:var(--red);box-shadow:none}
.btn-primary:hover{background:#cc0511;box-shadow:none}
.btn-primary:active{box-shadow:none}
.btn:hover{transform:none}
.btn-ghost{background:rgba(var(--fg),.06);border-color:transparent}
.btn-ghost:hover{background:rgba(var(--fg),.1)}

/* ---- Feature cards: bento tiles to match the homepage services ---- */
.cards{background:none !important;border:0;border-radius:0;overflow:visible;gap:1.1rem}
.card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid rgba(var(--fg),.06);border-radius:28px;padding:1.3rem 1.3rem 1.8rem;overflow:hidden;box-shadow:0 1px 2px rgba(var(--fg),.04),0 20px 44px -34px rgba(60,20,25,.3);transition:transform .6s var(--ease-settle),box-shadow .6s var(--ease-settle);-webkit-tap-highlight-color:transparent}
.card::after{display:none}
.card:hover{background:var(--surface)}
.card:active{transform:scale(.985);transition-duration:.12s;transition-timing-function:var(--ease-press)}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(var(--fg),.04),0 34px 60px -36px rgba(120,10,20,.38)}}

/* the icon becomes a small stage: warm panel, faint red glow, frosted tile */
.card .ic,.card:hover .ic{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:124px;margin:0 0 1.4rem;border:0;border-radius:20px;color:var(--red-text);overflow:hidden;
  background:radial-gradient(90% 130% at 88% -10%,rgba(227,6,19,.16),transparent 60%),linear-gradient(160deg,var(--surface2),#f8f5f3)}
.card .ic::before{content:"";position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 30px -16px rgba(200,5,15,.45);transition:transform .7s var(--ease-settle),box-shadow .7s var(--ease-settle)}
.card .ic svg{position:relative;width:32px;height:32px;stroke-width:1.5;transition:transform .7s var(--ease-settle)}
@media (hover:hover){
  .card:hover .ic::before{transform:translateY(-3px) rotate(-6deg);box-shadow:0 20px 36px -16px rgba(200,5,15,.5)}
  .card:hover .ic svg{transform:translateY(-3px) scale(1.08)}
}
.card b{font-size:1.15rem;letter-spacing:-.018em;margin:0 .35rem .45rem}
.card span{font-size:.95rem;margin:0 .35rem}
@media (max-width:760px){.cards{gap:.8rem}.card{padding:1.1rem 1.1rem 1.5rem}.card .ic,.card:hover .ic{height:104px}}
@media (prefers-reduced-motion:reduce){.card,.card .ic::before,.card .ic svg{transition:none}.card:hover,.card:active,.card:hover .ic::before,.card:hover .ic svg{transform:none}}

/* ---- Process steps: hairline list with quiet numerals ---- */
.steps{gap:0;border-top:1px solid var(--line)}
.steps li,.steps li:hover{background:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1.7rem 0;gap:1.8rem}
.steps li::before{content:counter(step,decimal-leading-zero);width:auto;min-width:2.8rem;height:auto;background:none;border-radius:0;color:rgba(var(--fg),.3);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;display:block}
.steps b{font-size:1.14rem;letter-spacing:-.015em;margin-bottom:.3rem}
.steps span{font-size:.97rem;line-height:1.65}
@media (max-width:560px){.steps li,.steps li:hover{gap:1.1rem;padding:1.4rem 0}.steps li::before{font-size:1.2rem;min-width:2rem}}

/* ---- FAQ: hairline accordion that opens smoothly where the browser allows ---- */
.faq{gap:0;border-top:1px solid var(--line)}
.faq details,.faq details[open]{background:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1.35rem .1rem}
.faq summary{font-size:1.08rem;letter-spacing:-.012em;padding-right:.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{color:var(--hd);font-weight:300;font-size:1.6rem;line-height:1;transition:transform .5s var(--ease-settle)}
.faq details p{font-size:1rem;max-width:62ch}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .5s var(--ease-settle),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* ---- Related links, blog cards, callouts: same tile language as feature cards ---- */
.rel,.post-card{border:0;border-radius:24px;box-shadow:0 1px 2px rgba(var(--fg),.04),0 18px 40px -32px rgba(60,20,25,.28);transition:transform .6s var(--ease-settle),box-shadow .6s var(--ease-settle),background .2s}
.rel:hover,.post-card:hover{background:var(--surface);border-color:transparent}
@media (hover:hover){.rel:hover,.post-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(var(--fg),.04),0 30px 54px -34px rgba(60,20,25,.36)}}
.rel:active,.post-card:active{transform:scale(.98);transition-duration:.12s;transition-timing-function:var(--ease-press)}
.rel b{font-size:1.1rem;letter-spacing:-.015em}
.callout{border-radius:20px}

/* ---- Closing call to action: original red panel, with buttons that stay readable on hover ---- */
.cta-band-inner .btn-primary:hover,.cta-section .cta-inner .btn-primary:hover,div.cta-band .btn-primary:hover,section.on-dark.cta-band .btn-primary:hover{background:#fff}
.cta-band-inner .btn-ghost:hover,.cta-section .cta-inner .btn-ghost:hover,section.on-dark.cta-band .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---- Reading: comfortable measure for articles and prose ---- */
.article-body{font-size:1.08rem;line-height:1.75}
.article-body h2{letter-spacing:-.03em;line-height:1.15}
.article-body h3{letter-spacing:-.02em}

/* Blog category tags: sentence case, no tracking */
.tag,.post-card-tag{text-transform:none;letter-spacing:-.005em;font-size:.84rem}

/* Background lines stay for everyone; they just hold still when the visitor asks for less motion */
@media (prefers-reduced-motion:reduce){.site-bg .bg-beam{animation:none}}

/* ======================================================================
   More from the apple-design skill, site-wide
   ====================================================================== */

/* Hero hands over to the page: as you scroll away it eases back and dims,
   driven directly by scroll position so it can be reversed at any moment.
   Browsers without scroll-driven animations simply show a static hero. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero:has(> .orb) > .wrap{animation:mwHeroOut linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes mwHeroOut{to{opacity:.2;transform:translateY(-48px) scale(.97)}}
  }
}

/* Related services become a swipe row on phones: native momentum, snap, a peek of the next card */
@media (max-width:760px){
  .related{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-4vw;margin-right:-4vw;padding:.4rem 4vw 1.4rem;scroll-padding:0 4vw;overscroll-behavior-x:contain;scrollbar-width:none}
  .related::-webkit-scrollbar{display:none}
  .related > .rel{flex:0 0 80%;scroll-snap-align:start}
  .related > .rel.reveal-up{opacity:1;transform:none;transition:transform .12s var(--ease-press)}
}

/* Tap feedback on plain links, the way iOS dims a row the instant you touch it */
.nav-links a:active,.nav-dd-menu a:active,.footer-links a:active,.crumbs a:active{opacity:.55;transition:none}

/* "Why it matters", FAQ and similar bands: instead of a flat white strip that cuts the background
   lines off, each becomes a frosted glass panel the lines show softly through */
.why-section,.promise,.contact-section{background-color:transparent !important;border:0 !important}
.why-section > .wrap,.promise > .wrap,.contact-section > .wrap{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);border-radius:32px;
  padding:clamp(2rem,5vw,4rem) clamp(1.4rem,5vw,4rem);
  box-shadow:0 1px 2px rgba(var(--fg),.04),0 40px 80px -56px rgba(60,20,25,.35);
}
@media (max-width:760px){.why-section > .wrap,.promise > .wrap,.contact-section > .wrap{border-radius:26px}}
@media (prefers-reduced-transparency:reduce){.why-section > .wrap,.promise > .wrap,.contact-section > .wrap{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.promise{padding-top:clamp(2.2rem,5vw,3.5rem)}