/* Alexander Ramírez · portfolio prototype · v3 Corporate
   Tokens live here, in one place. Light ground, navy weight, one blue accent. */
:root{
  --paper:#F6F7F9; --white:#FFFFFF; --tint:#E7EBF3; --line:#DDE2EC;
  --ink:#10203C; --muted:#4B5870; --navy:#0B1B3A; --navy-2:#142A52;
  --on-navy:#C9D3E8; --on-navy-line:rgba(255,255,255,.18);
  --accent:#2F55E8; --accent-hover:#2447CC; --accent-press:#1D3BAE;
  --danger:#B42318; --danger-on-navy:#FFB4A9;
  --font:"Figtree",ui-sans-serif,sans-serif;
  --r-sm:8px; --r-md:10px; --r-lg:12px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:5rem;
  --navh:72px;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* motion (v3 spec: fast, crisp) */
  --enter:250ms; --exit:150ms; --stagger:60ms; --rise:16px; --lift:12px;
}

/* base */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scrollbar-color:#B9C4DA var(--paper);-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--accent)}
main{overflow-x:clip}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
::selection{background:#C9D5FB;color:var(--navy)}
.on-navy ::selection{background:#fff;color:var(--navy)}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.on-navy :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-999px;top:1rem;z-index:99;background:#fff;padding:.75rem 1rem;border-radius:var(--r-sm);font-weight:600}
.skip:focus{left:1rem}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
p{max-width:62ch;text-wrap:pretty}
.lede{color:var(--muted);font-size:1.1875rem;max-width:34rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.5rem;border-radius:var(--r-md);font:600 1rem var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn-primary:active{transform:translateY(0);box-shadow:none;background:var(--accent-press)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#E4EAFB}
.btn-light:active{background:#D3DCF8}
.spinner{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
[aria-busy=true] .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.link-btn{background:none;border:0;padding:0;min-height:44px;font:600 1rem var(--font);color:#fff;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.link-btn:hover{text-decoration-thickness:2px}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--navh);gap:1rem}
.brand{font-weight:700;font-size:1.125rem;text-decoration:none;display:flex;align-items:center;gap:.65rem;min-height:44px;white-space:nowrap}
.brand b{width:28px;height:28px;border-radius:var(--r-sm);background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.8rem}
.nav ul{display:flex;gap:.25rem;list-style:none;padding:0}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;text-decoration:none;font-weight:500;color:var(--muted);border-radius:var(--r-sm);transition:color .15s,background-color .15s}
.nav ul a:hover{color:var(--ink);background:var(--tint)}
.nav ul a[aria-current=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-cta .btn{min-height:44px;padding:.5rem 1.2rem}
.menu-btn{display:none;min-width:44px;min-height:44px;border:1.5px solid var(--line);background:var(--white);border-radius:var(--r-md);cursor:pointer;color:var(--ink);place-items:center}
.menu-btn:hover{border-color:var(--ink)}
.menu-btn[aria-expanded=true]{border-color:var(--ink);background:var(--tint)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:none}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .25s var(--ease-out)}

/* section dots (wide screens) */
.dots{position:fixed;right:max(.75rem,calc((100vw - var(--wrap)) / 2 - 3.5rem));top:50%;transform:translateY(-50%);z-index:15;display:none;flex-direction:column}
.dots a{position:relative;width:44px;height:32px;display:grid;place-items:center;text-decoration:none}
.dots a::before{content:"";width:8px;height:8px;border-radius:50%;background:#7D8AA6;transition:transform .2s var(--ease),background-color .2s}
.dots a:hover::before{background:var(--ink);transform:scale(1.25)}
.dots a[aria-current=true]::before{background:var(--accent);transform:scale(1.5)}
.dots span{position:absolute;right:100%;white-space:nowrap;background:var(--navy);color:#fff;font-size:.8125rem;font-weight:600;padding:.25rem .6rem;border-radius:6px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .15s,transform .15s var(--ease)}
.dots a:hover span,.dots a:focus-visible span{opacity:1;transform:none}

/* screens: one section = one full screen */
.screen{min-height:100vh;min-height:100dvh;padding:calc(var(--navh) + var(--s4)) 0 var(--s4);display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2) var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-head h2{max-width:20ch}
.sec-head p{color:var(--muted);max-width:30rem}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:center}
.hero h1{margin-bottom:var(--s3)}
.hero .lede{margin-bottom:var(--s4)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero-note{margin-top:var(--s4);display:flex;align-items:baseline;gap:.7rem;color:var(--muted);font-size:.975rem;max-width:34rem}
.hero-note .dot{transform:translateY(-1px)}
/* the portrait: a cut-out whose head breaks the top of the tint panel */
.portrait{position:relative;margin:0;aspect-ratio:4/5;height:min(600px,calc(100svh - 15rem));width:auto;justify-self:end}
.portrait::before{content:"";position:absolute;inset:15% 0 0;background:var(--tint);border-radius:var(--r-lg)}
.portrait picture{display:contents}
.portrait img{position:relative;width:100%;height:100%;object-fit:contain;object-position:50% 100%;clip-path:inset(0 round 0 0 var(--r-lg) var(--r-lg))}

/* case cards: problem -> what I built -> one fact */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.case{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);display:flex;flex-direction:column;gap:.75rem;transition:border-color .2s}
.case:hover{border-color:#B9C4DA}
.case h3{font-size:1.375rem}
.case .meta{font-size:.9rem;font-weight:500;color:var(--muted);margin-top:-.4rem}
.case dl{display:grid;gap:.6rem;padding-top:.75rem;border-top:1px solid var(--line)}
.case dt{font-size:.8125rem;font-weight:700;color:var(--ink)}
.case dd{color:var(--muted);font-size:.975rem;line-height:1.5;margin-top:-.4rem}
.case .fact{margin-top:auto;display:flex;gap:.55rem;font-size:.95rem;font-weight:600;line-height:1.45;color:var(--ink);padding-top:.75rem;border-top:1px solid var(--line)}
.fact svg,.trust svg{width:16px;height:16px;flex:none;margin-top:.2em;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.case-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-bottom:-.6rem;font-size:.95rem;font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em}
.case-link:hover{color:var(--accent-hover);text-decoration-thickness:2px}
.case-link[aria-disabled=true]{color:var(--muted);text-decoration-style:dotted;cursor:default}
.case.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.case.navy .meta,.case.navy dd{color:var(--on-navy)}
.case.navy dt,.case.navy .fact{color:#fff}
.case.navy dl,.case.navy .fact{border-color:var(--on-navy-line)}
.case.navy .fact svg{stroke:#fff}
.case.navy .case-link{color:#fff}
.case.navy .case-link[aria-disabled=true]{color:var(--on-navy)}

/* more work: own product + smaller builds */
.more-grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--s2)}
.smaller{background:var(--tint);border-radius:var(--r-lg);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.smaller ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
.smaller li{border-top:1px solid #CBD3E2;padding-top:.75rem}
.smaller b{font-weight:700;margin-right:.5rem}
.smaller .kind{font-size:.8125rem;font-weight:600;color:var(--muted)}
.smaller li p{color:var(--muted);font-size:.95rem;line-height:1.5;margin-top:.2rem}
.smaller .earlier{margin-top:auto;font-size:.9rem;color:var(--muted)}
.work-ask{margin-top:var(--s3);color:var(--muted)}
.work-ask a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em}
.work-ask a:hover{color:var(--accent-hover)}

/* what I do */
.services{background:var(--white)}
.services .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6)}
.services .lede{margin-top:var(--s2)}
.svc{list-style:none;padding:0}
.svc li{padding:var(--s3) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:20px 1fr;gap:0 var(--s2)}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc li .dot{margin-top:.55rem;background:var(--line);transition:background-color .2s}
.svc li:hover .dot{background:var(--accent)}
.svc h3{margin-bottom:.3rem}
.svc p{color:var(--muted);font-size:1rem}
.see{display:inline-flex;align-items:center;min-height:44px;margin-bottom:-.75rem;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1.5px;text-underline-offset:.25em;transition:text-decoration-color .2s}
.see:hover{text-decoration-color:var(--accent)}

/* how: the drawn sequence is the signature moment; a photo of the work in the room beside the heading */
.how .wrap{display:grid;grid-template-columns:1fr minmax(0,440px);gap:var(--s4) var(--s5);align-items:center}
.how .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:0}
.how .steps{grid-column:1/-1}
.how-photo{margin:0}
.how-photo img{width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100svh - 28rem);object-fit:cover;object-position:70% 30%;border-radius:var(--r-lg);background:var(--tint)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);counter-reset:s}
.steps li{position:relative;padding-top:var(--s4)}
.steps li::before{content:"";position:absolute;top:7px;left:0;right:calc(-1 * var(--s3));height:2px;background:var(--line);transform-origin:left}
.steps li:last-child::before{right:0}
.steps li::after{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.steps .n{font-size:.9rem;font-weight:600;color:var(--muted);display:block;margin-bottom:.25rem}
.steps h3{margin-bottom:.5rem}
.steps p{color:var(--muted);font-size:1rem}

/* about */
.about .wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:center}
.about-copy{display:grid;grid-template-columns:minmax(0,280px) 1fr;column-gap:var(--s5);align-items:start}
.about-copy>*{grid-column:2}
.about-photo{grid-column:1;grid-row:1/span 3;margin:0}
.about-photo img{width:100%;height:auto;aspect-ratio:4/5;max-height:calc(100svh - 14rem);object-fit:cover;object-position:50% 20%;border-radius:var(--r-lg);background:var(--tint)}
.about h2{margin-bottom:var(--s3)}
.about-copy p+p{margin-top:var(--s2);color:var(--muted)}
.facts{background:var(--tint);border-radius:var(--r-lg);padding:var(--s4)}
.facts h3{margin-bottom:var(--s3)}
.facts dl{display:grid;gap:var(--s2)}
.facts dt{font-weight:600;font-size:.95rem}
.facts dd{color:var(--muted);font-size:.975rem;line-height:1.5}

/* book a call */
.book .wrap{margin-block:auto}
.book-card{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.book-card h2{margin-bottom:var(--s2);max-width:16ch}
.book-copy>p{color:var(--on-navy);max-width:40ch}
.trust{list-style:none;padding:0;margin-top:var(--s4);display:grid;gap:.6rem}
.trust li{display:flex;gap:.6rem;font-weight:500;color:#fff}
.trust svg{stroke:#fff}
.form{display:grid;gap:var(--s2)}
.field{display:grid;gap:.35rem}
.field label{font-size:.95rem;font-weight:600}
.field label span{font-weight:400;color:var(--on-navy)}
.field input,.field textarea{width:100%;min-height:48px;padding:.7rem .9rem;border-radius:var(--r-md);border:1.5px solid #7286B0;background:var(--navy-2);color:#fff;font:400 1rem/1.4 var(--font);transition:border-color .15s,background-color .15s}
.field textarea{resize:vertical;min-height:96px}
.field input:hover,.field textarea:hover{border-color:#9AAACB}
.field input:focus,.field textarea:focus{outline:none;border-color:#fff;background:#1A3263}
.field input:disabled,.field textarea:disabled{opacity:.6;cursor:not-allowed}
.field [aria-invalid=true]{border-color:var(--danger-on-navy)}
.err,.form-alert{color:var(--danger-on-navy);font-size:.9rem;font-weight:500}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin-top:.25rem}
.fallback{color:var(--on-navy);font-size:.95rem}
.fallback a{color:#fff;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.done{display:grid;gap:var(--s2);align-content:start;outline:none}
.done h3{font-size:1.5rem}
.done p{color:var(--on-navy)}
.foot{color:var(--muted);font-size:.925rem;padding-top:var(--s3)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}

/* short desktop windows (1366x768, 1280x720) */
@media (max-height:820px) and (min-width:768px){
  .screen{padding:calc(var(--navh) + var(--s3)) 0 var(--s3)}
  .sec-head{margin-bottom:var(--s3)}
  .svc li{padding:var(--s2) 0}
  .case{padding:var(--s2) var(--s3);gap:.6rem}
  .smaller{padding:var(--s2) var(--s3)}
  .book-card{padding:var(--s4) clamp(2rem,4vw,3.5rem)}
  .field textarea{min-height:72px}
  .form{gap:.75rem}
  .facts{padding:var(--s3)}
}
@media (max-height:740px) and (min-width:768px){
  h2{font-size:clamp(1.75rem,3vw,2.3rem)}
  .case dd,.smaller li p{font-size:.925rem}
  .work-ask{margin-top:var(--s1)}
  .field-opt{display:none}
}

/* ---------- motion (transform and opacity only) ----------
   .js-motion is set by site.js. The hero ships with .in so it is visible at load.
   site.js sets data-dir="down|up" on a screen before it enters and data-leave on exit. */
.js-motion .screen .rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--exit) ease-in,transform var(--exit) ease-in}
.js-motion .screen[data-dir=up] .rv{transform:translateY(calc(-1 * var(--rise)))}
.js-motion .screen.in .rv{opacity:1;transform:none;transition:opacity var(--enter) var(--ease-out),transform var(--enter) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.js-motion .screen[data-leave=down]:not(.in) .rv{transform:translateY(calc(-1 * var(--lift)))}
.js-motion .screen[data-leave=up]:not(.in) .rv{transform:translateY(var(--lift))}
.js-motion .screen.prep .rv{transition:none!important}
/* how I work: steps slide in sideways and the line draws left to right */
.js-motion #how .steps .rv{transform:translateX(-12px)}
.js-motion #how.in .steps .rv{transform:none;transition-delay:calc(var(--i,0) * 70ms)}
.js-motion #how .steps li::before{transform:scaleX(0);transition:transform var(--exit) ease-in}
.js-motion #how.in .steps li::before{transform:scaleX(1);transition:transform 320ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + 80ms)}
.js-motion #contact[data-leave] .rv{transform:translateY(8px)}

/* ---------- wide screens: dots ---------- */
@media (min-width:1100px){ .dots{display:flex} }

/* ---------- tablet and narrow desktop ---------- */
@media (max-width:1099px){ .progress{display:block} }
@media (max-width:1040px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:var(--s4)}
  .steps li:nth-child(2)::before{right:0}
  .nav ul{display:none}
  .menu-btn{display:inline-grid}
  .nav ul.open{display:flex;flex-direction:column;position:absolute;top:var(--navh);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s1) 1.5rem var(--s2)}
  .smaller ul{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hero .wrap,.services .wrap,.about .wrap,.book-card{grid-template-columns:1fr;gap:var(--s4)}
  .portrait{height:clamp(220px,30svh,380px);width:100%;aspect-ratio:auto;justify-self:stretch}
  .portrait::before{top:20%}
  .portrait img{object-fit:cover;object-position:60% 0}
  .more-grid{grid-template-columns:1fr 1.3fr}
  .book-card h2{max-width:none}
}

/* ---------- phones (<=767px): portrait-first edit, 6 screens ---------- */
@media (max-width:767px){
  :root{--navh:64px;--rise:12px}
  .wrap{width:min(var(--wrap),100% - 2.5rem)}
  .screen{padding:calc(var(--navh) + var(--s2)) 0 var(--s2)}
  h1{font-size:clamp(2rem,9vw,2.4rem)}
  h2{font-size:1.7rem}
  .nav-cta .btn{padding:.5rem .9rem;font-size:.95rem;white-space:nowrap}
  .brand{font-size:1rem}
  .nav ul.open{padding-inline:1.25rem}
  /* hero: small portrait on top, thumb CTA */
  .hero .wrap{gap:var(--s2);align-content:center}
  .hero-copy{order:2}
  .portrait{order:1;height:clamp(120px,20svh,200px)}
  .portrait::before{top:22%}
  .portrait img{object-position:62% 0}
  .hero h1{margin-bottom:var(--s2)}
  .hero .lede{font-size:1rem;margin-bottom:var(--s3)}
  .cta-row .btn{width:100%}
  .hero .cta-row .btn-ghost,.hero-note{display:none}
  /* work: every case in one swipe strip */
  .sec-head{margin-bottom:var(--s2)}
  #work .sec-head p{display:none}
  #work>.wrap{width:100%}
  #work .sec-head,#work .work-ask{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
  .cases{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 1.25rem .75rem;scroll-padding-inline:1.25rem;scrollbar-width:thin}
  .cases>*{flex:0 0 84%;scroll-snap-align:start}
  .case,.smaller{padding:var(--s2) 1.15rem;gap:.55rem}
  .case h3{font-size:1.25rem}
  .case .meta{font-size:.85rem}
  .case dd,.smaller li p{font-size:.925rem;line-height:1.45}
  .case .fact{font-size:.9rem}
  .smaller{gap:.75rem}
  .smaller ul{gap:.6rem}
  .smaller li{padding-top:.5rem}
  .smaller .earlier{font-size:.85rem}
  .work-ask{margin-top:var(--s1);font-size:.95rem}
  /* what I do */
  .services .lede{display:none}
  .services .wrap{gap:var(--s2)}
  .svc li{padding:.85rem 0}
  .svc h3{font-size:1.125rem}
  .svc p{font-size:.95rem;line-height:1.5}
  .see{font-size:.875rem;margin-bottom:-.85rem}
  /* how */
  #how .sec-head p{font-size:.95rem}
  .steps{grid-template-columns:1fr;gap:var(--s2)}
  .steps li::before{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto;transform-origin:top}
  .js-motion #how .steps li::before{transform:scaleY(0)}
  .js-motion #how.in .steps li::before{transform:scaleY(1)}
  .steps li:last-child::before{display:none}
  .steps li{padding:0 0 0 var(--s4)}
  .steps li::after{top:.2rem}
  .steps .n{display:inline;margin-right:.4rem}
  .steps h3{display:inline;font-size:1.125rem}
  .steps p{font-size:.95rem;line-height:1.5;margin-top:.2rem}
  /* about */
  .about .wrap{gap:var(--s2)}
  .about h2{margin-bottom:var(--s2)}
  .about-copy p{font-size:.975rem;line-height:1.5}
  .about-copy p+p{margin-top:.75rem}
  .facts{padding:var(--s2) 1.15rem}
  .facts h3{font-size:1.05rem;margin-bottom:.75rem}
  .facts dl{gap:.5rem}
  .facts div{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem}
  .facts dt,.facts dd{font-size:.875rem;line-height:1.4}
  /* book: the card goes edge to edge; this last screen may run past the fold on small phones */
  .book .wrap{width:100%}
  .book-card{border-radius:0;padding:var(--s3) 1.25rem;gap:var(--s3)}
  .book-copy>p{display:none}
  .book-card h2{margin-bottom:0}
  .trust{margin-top:var(--s2);font-size:.95rem}
  .form{gap:.75rem}
  .field-opt{display:none}
  .field textarea{min-height:80px}
  .form-foot .btn{width:100%}
  .foot{padding-top:var(--s1)}
}
@media (max-width:767px) and (max-height:700px){
  .hero .lede{font-size:.975rem}
  .about-copy p+p{display:none}
  .trust li+li{display:none}
}

/* phone landscape and very short windows: free scroll (screens cannot fit) */
@media (max-height:500px) and (orientation:landscape){
  :root{--navh:56px}
  html{scroll-snap-type:none}
  .screen{min-height:0;scroll-snap-stop:normal;padding-block:calc(var(--navh) + var(--s3)) var(--s4)}
  .portrait{height:220px}
  .dots{display:none}
}

/* reduced motion: 120ms opacity fade only, no movement */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--enter:120ms;--exit:120ms;--stagger:0ms;--rise:0px;--lift:0px}
  .js-motion .screen .rv,.js-motion #how .steps .rv,.js-motion #contact[data-leave] .rv{transform:none!important}
  .js-motion #how .steps li::before{transform:none!important}
  .btn:hover,.btn-primary:hover,.btn-ghost:hover{transform:none}
  .progress i,.dots a::before,.dots span{transition:none}
  .spinner{animation-duration:2.4s}
}

/* wide screens where the dots would touch the content */
@media (min-width:1100px) and (max-width:1379px){ .wrap{width:min(var(--wrap),100% - 8rem)} }
/* very narrow phones: short brand so the menu button fits */
@media (max-width:400px){ .brand .last{display:none} }

/* phones: tighter case cards (labels run in) and a denser services list */
@media (max-width:767px){
  .cases{align-items:flex-start}
  .case dl{display:block}
  .case dt{display:inline;margin-right:.3rem}
  .case dd{display:inline;margin:0}
  .case dd::after{content:"";display:block;height:.45rem}
  .case dd:last-child::after{display:none}
  .svc li{grid-template-columns:1fr}
  .svc li .dot{display:none}
}
@media (max-width:767px) and (max-height:700px){
  h2{font-size:1.5rem}
  .case .meta{display:none}
  .case-link{min-height:40px}
  .svc li{padding:.6rem 0}
  .svc p{line-height:1.4}
  .see{min-height:40px;margin-bottom:-.6rem}
}
@media (max-width:767px){ .case dl{line-height:1.45;font-size:.925rem} }
@media (max-width:767px){
  .smaller{padding:var(--s2) 1.15rem}
  .smaller h3{font-size:1.125rem}
  .smaller li p{font-size:.875rem;line-height:1.4}
}
@media (max-width:767px){
  .smaller{gap:.6rem}
  .smaller li{line-height:1.35;padding-top:.45rem}
  .smaller b{font-size:.975rem}
  .smaller ul{gap:.5rem}
  .smaller .earlier{line-height:1.4}
}
@media (max-width:767px) and (max-height:700px){
  #work .sec-head{margin-bottom:.75rem}
  .work-ask{margin-top:0}
}

/* Spam trap: hidden from people and screen readers; bots fill it in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- portraits: About thumb and How photo by size ---------- */
@media (max-width:1040px){
  .about-copy{display:block;position:relative}
  .about-photo{position:absolute;top:0;left:0;width:96px}
  .about-photo img{aspect-ratio:1;max-height:none;object-position:50% 30%}
  .about h2{padding-left:120px;min-height:96px}
}
@media (max-width:860px){ .how .wrap{grid-template-columns:1fr minmax(0,300px)} }
@media (max-width:767px){
  .about-photo{width:60px}
  .about-photo img{border-radius:var(--r-md)}
  .about h2{padding-left:76px;min-height:60px}
  .how .wrap{display:block}
  .how .sec-head{margin-bottom:var(--s2)}
  .how-photo{display:none}
}
@media (max-height:740px) and (min-width:768px){ .how-photo img{max-height:180px} }

/* ---------- booking: pick a day and time, then details, then booked ---------- */
@media (min-width:861px){ .book-card{grid-template-columns:5fr 7fr} }
.booking{display:grid;gap:var(--s2);align-content:start;min-width:0}
.booking [tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bk-pick{display:grid;gap:var(--s2);min-width:0}
.bk-head h3{font-size:1.25rem}
.bk-tz{color:var(--on-navy);font-size:.925rem;line-height:1.45;margin-top:.3rem}
.bk-week{display:flex;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);flex-wrap:wrap}
.bk-range{font-weight:600}
.bk-pager{display:flex;gap:.5rem}
.bk-nav{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .8rem;border-radius:var(--r-md);border:1.5px solid var(--on-navy-line);background:transparent;color:#fff;font:600 .925rem var(--font);cursor:pointer;transition:border-color .15s,background-color .15s}
.bk-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-nav:hover:not(:disabled){border-color:#fff;background:var(--navy-2)}
.bk-nav:disabled{opacity:.4;cursor:not-allowed}
.bk-days{display:flex;gap:.5rem}
.bk-day,.bk-skel-day{flex:1 1 0;min-width:58px}
.bk-day{display:grid;place-content:center;gap:1px;min-height:58px;padding:.35rem .25rem;border-radius:var(--r-md);border:1.5px solid #7286B0;background:var(--navy-2);color:#fff;font:400 .95rem/1.25 var(--font);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.bk-day b{font-size:.8125rem;font-weight:600;color:var(--on-navy)}
.bk-day span{font-weight:700;white-space:nowrap}
.bk-day:hover{border-color:#fff}
.bk-day[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--navy)}
.bk-day[aria-pressed=true] b{color:var(--muted)}
.bk-label{font-size:.9rem;font-weight:600;color:var(--on-navy);margin-bottom:.5rem}
.bk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.bk-slot{display:grid;place-content:center;gap:1px;min-height:48px;padding:.35rem .25rem;border-radius:var(--r-sm);border:1.5px solid var(--on-navy-line);background:transparent;color:#fff;font:600 .975rem/1.2 var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.bk-slot small{font-size:.8125rem;font-weight:500;color:var(--on-navy)}
.bk-slot i{font-style:normal;font-size:.8125rem;font-weight:600;color:var(--on-navy)}
.bk-slot:hover{border-color:#fff;background:var(--navy-2)}
.bk-slot:active{background:#fff;color:var(--navy)}
.bk-slot:active small,.bk-slot:active i{color:var(--muted)}
.bk-skel{display:block;min-height:48px;border-radius:var(--r-sm);background:var(--navy-2);animation:bk-pulse 1.2s ease-in-out infinite alternate}
.bk-skel-day{min-height:58px;border-radius:var(--r-md)}
@keyframes bk-pulse{from{opacity:.55}to{opacity:1}}
.bk-state{display:grid;justify-items:start;gap:var(--s2);padding:var(--s3);border:1px solid var(--on-navy-line);border-radius:var(--r-md);background:var(--navy-2)}
.bk-state p{color:#fff;font-weight:500}
.bk-alert{color:#fff;font-weight:500;font-size:.95rem;padding:.65rem .85rem;border:1px solid var(--danger-on-navy);border-radius:var(--r-sm);background:rgba(255,180,169,.1)}
.bk-chosen{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);padding:.85rem 1rem;border-radius:var(--r-md);background:var(--navy-2);border:1px solid var(--on-navy-line)}
.bk-chosen h3{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--on-navy);margin-bottom:.15rem}
.bk-chosen .link-btn{flex:none;font-size:.95rem}
.bk-when{font-weight:600;color:#fff;line-height:1.4}
.bk-sub{color:var(--on-navy);font-size:.925rem;line-height:1.45}
.bk-booked .bk-when{font-size:1.0625rem}
.bk-booked .bk-sub{margin-top:-.75rem}
.bk-booked p b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.bk-meet a{color:#fff;font-weight:600;display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.bk-message{display:grid;gap:var(--s2)}
.bk-message h3{font-size:1.25rem}
.booking[data-view=booked] .bk-switch{display:none}
.bk-details{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s2)}
.bk-details>.bk-chosen,.bk-details>.field:has(textarea),.bk-details>.form-foot,.bk-details>.form-alert{grid-column:1/-1}
.bk-details textarea{min-height:72px}
.bk-switch{border-top:1px solid var(--on-navy-line);padding-top:.25rem}
.bk-switch .link-btn{font-size:.95rem}
.link-btn:focus-visible{outline-color:#fff}

@media (max-height:820px) and (min-width:768px){
  .bk-pick,.booking{gap:.75rem}
  .bk-day,.bk-skel-day{min-height:52px}
  .bk-slot,.bk-skel{min-height:44px}
  .bk-details .field textarea{min-height:56px}
}
@media (max-width:767px){
  .book-card .trust{display:none}
  .bk-head h3{font-size:1.125rem}
  .bk-tz{font-size:.875rem}
  .bk-days{overflow-x:auto;scrollbar-width:none;margin-inline:-1.25rem;padding-inline:1.25rem}
  .bk-day{min-width:64px}
  .bk-slot{font-size:.9rem;min-height:44px;padding:.3rem .2rem;line-height:1.15}
  .bk-grid{gap:.4rem}
  .bk-pick,.booking{gap:.75rem}
  .bk-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bk-nav{padding:0;min-width:44px;justify-content:center}
  .bk-details{grid-template-columns:1fr}
  .bk-city{display:none}
}
@media (prefers-reduced-motion:reduce){ .bk-skel{animation:none} }
@media (max-width:860px) and (min-width:768px){ .book-copy>p{display:none} .book-card h2{margin-bottom:0} }
@media (max-height:740px) and (min-width:768px){
  .book-card{padding-block:var(--s3)}
  .book .foot{padding-top:0}
  .bk-pick,.booking{gap:.6rem}
  .bk-label{margin-bottom:.35rem}
  .bk-day,.bk-skel-day{min-height:48px}
}
@media (max-width:767px){ .book .foot .wrap{width:min(var(--wrap),100% - 2.5rem)} }
@media (min-width:768px){
  #contact-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s2)}
  #contact-form>.field-opt,#contact-form>.field:has(textarea),#contact-form>.form-foot,#contact-form>.form-alert{grid-column:1/-1}
}