:root{
    --bg:#ffffff;
    --ink:#111111;
    --ink-soft:#3a3a3a;
    --card-light:#ececea;
    --card-dark:#161616;
    --rule:#dcdcdc;
    --grad-a:#2f5bff;            /* text sweeps */
    --grad-b:#8a3cff;
    --fill-a:#2f5bff;            /* filled surfaces: chip, buttons */
    --fill-b:#8a3cff;
    --on-fill:#ffffff;
    --tip-bg:#111111;
    --tip-fg:#ffffff;
  }
  html.dark{
    --bg:#0e0e0e;
    --ink:#ffffff;
    --ink-soft:#c9c9c9;
    --rule:#2c2c2c;
    --grad-a:#a5b8ff;            /* text sweeps stay light so they read on black */
    --grad-b:#dcb6ff;
    --fill-a:#3d68ff;            /* filled surfaces keep their punch */
    --fill-b:#9b4dff;
    --on-fill:#ffffff;
    --tip-bg:#ffffff;
    --tip-fg:#111111;
  }
  @property --u{syntax:'<length>';inherits:true;initial-value:1px}
  :root{
    --pad:clamp(20px, 3vw, 52px);
    --u-home:min(1.22px, 0.096vh);   /* card scale on the home view */
    --u-work:min(2.1px, 0.138vh);    /* card scale on the Selected work view */
    --u:var(--u-home);
    --strip-start:var(--pad);
    --hfs:clamp(30px,4.2vw,60px);        /* one size for all page headings */
    --head-gap:clamp(12px,2.4vh,28px);
    --head-h:calc(var(--hfs) * 1.05 + var(--head-gap));
    --hdr:54px;                  /* fixed header height on small screens */
    --ease:cubic-bezier(.7,0,.25,1);
    --dur:.95s;
    transition:--u var(--dur) var(--ease);
  }
  body.away{--u:var(--u-work)}
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  html{background:var(--bg);color-scheme:light}
  html.dark{color-scheme:dark}
  body{
    background:var(--bg)!important;
    color:var(--ink);
    transition:background-color .35s ease,color .35s ease;
    font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

  body{overflow:hidden}
  .page{
    position:relative;
    background:var(--bg);
    height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    padding:clamp(24px,4vh,48px) 0 clamp(20px,3vh,36px);
  }

  /* top bar */
  .top{
    display:flex;justify-content:flex-end;align-items:center;gap:32px;
    padding:0 var(--pad);
  }
  .loc{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:14px;letter-spacing:.04em;color:var(--ink-soft)}
  .dot{width:24px;height:24px;border-radius:50%;background:var(--ink);background-clip:content-box;border:0;cursor:pointer;padding:3px;transition:background-color .35s ease,transform .2s ease}
  .dot:hover{transform:scale(1.15)}

  /* hero */
  .hero{
    padding:clamp(12px,2vh,28px) var(--pad) 0;
    max-height:var(--hero-h,60vh);
    transition:max-height var(--dur) var(--ease),opacity .45s ease,padding var(--dur) var(--ease);
  }
  body.away .hero{max-height:0;opacity:0;padding-top:0;pointer-events:none}
  .title{
    position:absolute;left:var(--pad);top:var(--title-top,0px);
    font-weight:800;
    font-size:clamp(52px,min(7.6vw,13vh),128px);
    line-height:.92;
    letter-spacing:-.045em;
    text-transform:uppercase;
    white-space:nowrap;
    z-index:4;
    transition:top var(--dur) var(--ease),font-size var(--dur) var(--ease),letter-spacing var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  body.away .title{
    top:var(--title-top-work,0px);
    transform:translateY(-50%);
    font-size:18px;
    letter-spacing:-.02em;
  }
  .hero-head{width:fit-content;max-width:100%}
  .title-ghost{visibility:hidden;font-weight:800;font-size:clamp(52px,min(7.6vw,13vh),128px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
  .meta{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-top:10px}
  .role{font-size:clamp(15px,1.2vw,19px);color:var(--ink-soft)}
  .lead{
    margin-top:clamp(16px,3vh,40px);
    font-size:clamp(16px,1.35vw,21px);
    line-height:1.45;
    max-width:32ch;
  }
  .lead .line{display:inline-block}
  /* tooltip on NDAs */
  .tip{
    position:relative;cursor:help;background:none;border:0;padding:0;min-height:24px;
    font:inherit;color:var(--ink);-webkit-text-fill-color:var(--ink);letter-spacing:inherit;
    text-decoration:underline dotted;text-underline-offset:4px;text-decoration-thickness:1.5px;
  }
  .tip::after{
    content:attr(data-tip);
    position:absolute;left:0;bottom:calc(100% + 10px);
    width:max-content;max-width:280px;
    background:var(--tip-bg);color:var(--tip-fg);-webkit-text-fill-color:var(--tip-fg);
    font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0;text-align:left;
    padding:8px 11px;border-radius:4px;
    opacity:0;transform:translateY(4px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    z-index:5;
  }
  .tip::before{
    content:"";position:absolute;left:12px;bottom:calc(100% + 5px);
    border:5px solid transparent;border-top-color:var(--tip-bg);border-bottom:0;
    opacity:0;transition:opacity .18s ease;
  }
  .tip:hover::after,.tip:focus-visible::after{opacity:1;transform:none}
  .tip:hover::before,.tip:focus-visible::before{opacity:1}

  /* case study modal */
  .case-modal{
    position:fixed;inset:0;z-index:70;
    display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.4vh,28px) clamp(56px,5vw,96px);
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .case-modal.on{opacity:1;pointer-events:auto}
  .case-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);border:0;padding:0;cursor:pointer}
  html.dark .case-bg{background:rgba(0,0,0,.7)}
  .case-box{
    position:relative;z-index:1;display:flex;flex-direction:column;
    width:min(1360px,100%);max-height:100%;
    background:var(--bg);border:1px solid var(--ink);border-radius:4px;
    transform:translateY(12px) scale(.985);transition:transform .3s var(--ease);
    overflow:hidden;
  }
  .case-modal.on .case-box{transform:none}
  .case-head{flex:none;padding:20px clamp(20px,3vw,30px) 14px;border-bottom:1px solid var(--rule)}
  .case-head h3{
    font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;padding-right:40px;
    width:fit-content;max-width:100%;
    background-image:linear-gradient(90deg,
      var(--ink) 0%, var(--ink) 34%,
      var(--grad-a) 44%, var(--grad-b) 56%,
      var(--ink) 66%, var(--ink) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .case-head h3.auto{animation:sweep 1.1s ease-out .35s forwards}
  .case-head h3:hover{animation:sweep .9s ease-out forwards;cursor:default}
  .case-kind{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:6px;
  }
  .case-sum{margin:0;padding:16px clamp(20px,3vw,30px) 20px;
    font-size:clamp(13px,1.05vw,15px);line-height:1.5;color:var(--ink-soft);max-width:80ch}
  .case-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--bg)}
  .case-scroll img{display:block;width:100%;height:auto}
  .case-foot{
    flex:none;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    padding:12px clamp(20px,3vw,30px) 14px;border-top:1px solid var(--rule);
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);
  }
  .case-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:44px;height:44px;border-radius:50%;
    background:var(--bg);border:1px solid var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s ease,opacity .2s ease;
  }
  .case-nav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
  .case-nav.prev{left:max(8px,calc(50% - 680px - 58px))}
  .case-nav.next{right:max(8px,calc(50% - 680px - 58px))}
  .case-nav:hover{transform:translateY(-50%) scale(1.08)}
  .case-nav[hidden]{display:none}
  @media (max-width:1023px){
    .case-nav{width:38px;height:38px}
    .case-nav.prev{left:6px}
    .case-nav.next{right:6px}
  }

  .case-x{
    position:absolute;top:14px;right:14px;width:32px;height:32px;z-index:2;border-radius:3px;
    background:var(--bg);border:0;cursor:pointer;padding:0;
  }
  .case-x::before,.case-x::after{
    content:"";position:absolute;left:7px;right:7px;top:14px;height:1.5px;background:var(--ink);
  }
  .case-x::before{transform:rotate(45deg)}
  .case-x::after{transform:rotate(-45deg)}

  /* small explainer modal */
  .modal{
    position:fixed;inset:0;z-index:60;
    display:flex;align-items:center;justify-content:center;padding:var(--pad);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  .modal.on{opacity:1;pointer-events:auto}
  .modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);border:0;padding:0;cursor:pointer}
  html.dark .modal-bg{background:rgba(0,0,0,.6)}
  .modal-box{
    position:relative;z-index:1;
    width:min(340px,100%);
    background:var(--bg);color:var(--ink);
    border:1px solid var(--ink);border-radius:4px;
    padding:20px 20px 22px;
    transform:translateY(10px) scale(.98);
    transition:transform .3s var(--ease);
    box-shadow:0 18px 50px rgba(0,0,0,.14);
  }
  .modal.on .modal-box{transform:none}
  .modal-box h4{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:10px;padding-right:24px;
  }
  .modal-box p{font-size:14px;line-height:1.5}
  .modal-x{
    position:absolute;top:12px;right:12px;width:26px;height:26px;
    background:none;border:0;cursor:pointer;padding:0;
  }
  .modal-x::before,.modal-x::after{
    content:"";position:absolute;left:6px;right:6px;top:12px;height:1.5px;background:var(--ink);
  }
  .modal-x::before{transform:rotate(45deg)}
  .modal-x::after{transform:rotate(-45deg)}

  /* gradient sweeps across text once on hover — used by CTA and menu */
  .sweep{
    display:inline-block;
    color:var(--ink);
    background-image:linear-gradient(90deg,
      var(--ink) 0%, var(--ink) 34%,
      var(--grad-a) 44%, var(--grad-b) 56%,
      var(--ink) 66%, var(--ink) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .sweep:hover,.sweep:focus-visible{animation:sweep .9s ease-out forwards}
  .title .sweep.auto{animation:sweep 1.2s ease-out forwards}
  /* extra underline on hover for links */
  .ul{border-bottom:1.5px solid transparent;transition:border-color .2s ease}
  .ul:hover,.ul:focus-visible{border-bottom-color:var(--ink)}
  .cta{
    display:inline-flex;padding-bottom:3px;align-items:center;gap:8px;
    margin-top:0;
    font-size:clamp(14px,1.05vw,16px);
    font-weight:600;
  }
  .cta svg{width:14px;height:14px;stroke:var(--ink);flex:none}
  @keyframes sweep{
    from{background-position:100% 0}
    to{background-position:0% 0}
  }

  /* work strip — horizontal scroll */
  .strip-wrap{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;margin-top:0;transition:margin-top var(--dur) var(--ease)}
  body.away .strip-wrap{margin-top:0;padding-top:var(--head-h)}
  /* page headings — all three views pin to the same spot */
  .work-head,.services-head,.vision-head,.about-head{
    position:absolute;top:0;left:0;right:0;z-index:3;
    padding:0 var(--pad);
  }
  .work-head,.services-head h2,.vision-head h2,.about-head h2{
    font-weight:800;font-size:var(--hfs);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;
  }
  .work-head{
    opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .45s ease,transform var(--dur) var(--ease);
  }
  body.view-work .work-head{opacity:1;transform:none;pointer-events:auto;transition-delay:.3s}
  /* quiet links next to page headings: all work, blog */
  .work-head,.about-head{display:flex;flex-direction:column;align-items:flex-start;row-gap:6px}
  .work-head h2{font:inherit;letter-spacing:inherit;text-transform:inherit;margin:0}
  .head-link{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.3;text-transform:none;
    color:color-mix(in srgb,var(--ink-soft) 85%,transparent);-webkit-text-fill-color:currentColor;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
  .head-link svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .25s ease}
  .head-link:hover,.head-link:focus-visible{color:var(--ink)}
  .head-link:hover svg{transform:translateX(3px)}

  .slot{flex:none;display:flex;flex-direction:column;justify-content:flex-end}
  .cap{flex:none}
  .cap{
    display:flex;flex-direction:column;gap:2px;
    max-height:0;opacity:0;overflow:hidden;
    padding:0 2px;
    transform:translateY(8px);
    transition:max-height var(--dur) var(--ease),opacity .5s ease,transform var(--dur) var(--ease),margin var(--dur) var(--ease);
    white-space:nowrap;
    font-size:clamp(12px,.95vw,14px);
    line-height:1.3;
  }
  .cap b{font-weight:500}
  .cap span{color:var(--ink-soft)}
  body.away .cap{max-height:48px;opacity:1;transform:none;margin-bottom:12px;transition-delay:.35s}
  .strip{
    display:flex;align-items:flex-end;gap:clamp(18px,2vw,32px);
    padding:0 var(--pad) calc(2*var(--u)) var(--strip-start);
    min-width:0;width:100%;flex:none;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
    cursor:grab;
  }
  .strip::-webkit-scrollbar{display:none}
  .strip.dragging{cursor:grabbing}
  .card{
    position:relative;flex:none;
    overflow:hidden;
    color:#fff;
    height:var(--h);width:var(--w);
    -webkit-user-select:none;user-select:none;
    border-radius:3px;
  }
  .card{transition:transform .25s ease,width var(--dur) var(--ease),height var(--dur) var(--ease)}
  .card:hover{transform:scale(1.012);transform-origin:bottom center}
  .card.light{color:#111;background:var(--card-light)}
  html.dark .card.dark{box-shadow:0 0 0 1px #2a2a2a} /* keeps dark cards readable on the dark page */
  .card.dark{background:var(--card-dark)}
  .card .brand{position:absolute;top:18px;left:18px;font-size:11px;font-weight:500;letter-spacing:.02em}
  .card .num{position:absolute;bottom:18px;left:18px;font-size:11px}
  .card .go{position:absolute;bottom:14px;right:18px;font-size:16px}
  .card .nav{position:absolute;top:18px;right:18px;display:flex;gap:12px;font-size:8px;opacity:.85;white-space:nowrap}
  .card .nav .pill{border:1px solid currentColor;border-radius:99px;padding:1px 6px}
  .card .tag{
    position:absolute;left:18px;
    font-size:max(19px,calc(30*var(--u)));line-height:1.05;letter-spacing:-.02em;
  }
  .card .tag.small{font-size:11px;line-height:1.3}
  /* pictures never start the browser's own drag, so the carousel gets the gesture */
  img{-webkit-user-drag:none;user-select:none}
  .strip.dragging{user-select:none}
  /* image placeholders — replace each .img with <img> or a background-image */
  .img{position:absolute;inset:0;background:#2a2a2a}

  /* placeholders for work that isn't there yet */
  .c-soon{--w:calc(300*var(--u));--h:calc(392*var(--u))}
  .card.soon{
    background:
      radial-gradient(120% 80% at 18% 0%, color-mix(in srgb, var(--fill-a) 11%, transparent), transparent 62%),
      radial-gradient(110% 85% at 88% 100%, color-mix(in srgb, var(--fill-b) 12%, transparent), transparent 64%),
      linear-gradient(160deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent 55%);
    border:0;color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s ease,width var(--dur) var(--ease),height var(--dur) var(--ease),background-position .6s var(--ease);
  }
  /* dashed frame drawn as its own layer, so hover never eats the top edge */
  .card.soon::before{
    content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
    border:1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
    transition:border-color .25s ease;
  }
  .card.soon::after{
    content:"";position:absolute;inset:-1px;border-radius:4px;pointer-events:none;
    background:linear-gradient(130deg,var(--fill-a),var(--fill-b));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    padding:1px;opacity:0;transition:opacity .3s ease;
  }
  .card.soon:hover::before{border-color:transparent}
  .card.soon:hover::after{opacity:.75}
  html.dark .card.soon{
    background:
      radial-gradient(120% 80% at 18% 0%, color-mix(in srgb, var(--fill-a) 20%, transparent), transparent 62%),
      radial-gradient(110% 85% at 88% 100%, color-mix(in srgb, var(--fill-b) 20%, transparent), transparent 64%),
      linear-gradient(160deg, color-mix(in srgb, #ffffff 5%, transparent), transparent 55%);
  }
  .card.soon .num{color:var(--ink-soft);z-index:1}
  .soon-label{
    position:relative;z-index:1;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-soft);transition:color .25s ease;
  }
  .card.soon:hover .soon-label{color:var(--ink)}
  .card.soon .bar{
    position:absolute;left:18px;right:18px;bottom:44px;height:2px;border-radius:2px;z-index:1;
    background:color-mix(in srgb, var(--ink) 12%, transparent);overflow:hidden;
  }
  .card.soon .bar i{
    position:absolute;inset:0 auto 0 0;width:var(--p,40%);border-radius:2px;
    background:linear-gradient(90deg,var(--fill-a),var(--fill-b));
  }
  .card.soon .bar i::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
    transform:translateX(-100%);
    animation:barshine 2.8s ease-in-out infinite;
  }
  @keyframes barshine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}
  .soon-pct{
    position:absolute;right:18px;bottom:22px;z-index:1;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-soft);
  }

  /* 01 LUMI — a real screenshot */
  .c-lumi{--w:calc(392*var(--u));--h:calc(392*var(--u))}
  .c-flux{--w:calc(392*var(--u));--h:calc(392*var(--u))}
  .c-trvl{--w:calc(392*var(--u));--h:calc(392*var(--u))}
  .card.shot{background:#fff;border:0;color:#111}
  .card.shot .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .card.shot .num{z-index:2;color:#111;background:rgba(255,255,255,.9);padding:3px 8px;border-radius:2px}
  .card.shot .open{
    position:absolute;right:16px;bottom:14px;z-index:2;background:rgba(255,255,255,.9);padding:3px 8px;border-radius:2px;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:#111;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;
  }
  .card.shot:hover .open,.card.shot:focus-visible .open{opacity:1;transform:none}
  .card.shot{cursor:pointer}

  /* 01 NOMA */
  .c-noma{--w:calc(392*var(--u));--h:calc(380*var(--u))}
  .c-noma .img{background:
    linear-gradient(90deg,#0d0d0d 0 24%,rgba(13,13,13,0) 60%),
    radial-gradient(120% 90% at 78% 40%,#8c8c88 0,#4a4a48 40%,#1c1c1b 100%);}
  .c-noma .img::after{content:"";position:absolute;right:10%;bottom:0;width:26%;height:38%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#2e2e2d,#141414)}
  .c-noma .tag{top:44%}

  /* STILL — phone */
  .c-still{--w:calc(132*var(--u));--h:calc(316*var(--u));border-radius:26px;border:3px solid #111;background:#333}
  .c-still .img{background:radial-gradient(70% 50% at 50% 42%,#d9d9d5 0,#9a9a96 45%,#3a3a38 100%)}
  .c-still .brand{top:16px;left:16px;font-size:8px}
  .c-still .tag{bottom:calc(66*var(--u));font-size:max(15px,calc(18*var(--u)));left:16px}
  .c-still .btn{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#fff}
  .c-still .btn::after{content:"";position:absolute;left:8px;top:11px;width:8px;height:2px;background:#111}

  /* 02 ARC */
  .c-arc{--w:calc(340*var(--u));--h:calc(388*var(--u))}
  .c-arc .brand{font-size:16px;font-weight:400}
  .c-arc .img{inset:auto 0 auto 0;top:calc(90*var(--u));height:calc(170*var(--u));margin:0 0 0 40%;border-radius:2px;
    background:
      linear-gradient(112deg,transparent 0 48%,#5f5f5c 48% 100%),
      linear-gradient(180deg,#d4d4d0 0 55%,#8f8f8b 55% 100%);}
  .c-arc .tag{top:calc(272*var(--u))}

  /* 03 LUNE */
  .c-lune{--w:calc(368*var(--u));--h:calc(346*var(--u))}
  .c-lune .img{background:
    repeating-radial-gradient(circle at 100% 100%,#2a2a2a 0 6px,#161616 6px 14px),
    #121212}
  .c-lune .img::after{content:"";position:absolute;inset:0;background:linear-gradient(225deg,rgba(18,18,18,0) 0,#121212 62%)}
  .c-lune .tag{top:35%}

  /* 04 HENRIK */
  .c-henrik{--w:calc(176*var(--u));--h:calc(356*var(--u))}
  .c-henrik .brand{font-size:16px;font-weight:400}
  .c-henrik .img{inset:16px 6px auto 6px;height:calc(240*var(--u));border-radius:6px;
    background:linear-gradient(180deg,#f3f3f0 0 68%,#cfcfca 68% 100%)}
  .c-henrik .img::after{content:"";position:absolute;left:22%;bottom:20%;width:56%;height:34%;
    background:linear-gradient(180deg,#bdbdb8 0 10%,transparent 10% 100%),linear-gradient(90deg,transparent 0 44%,#bdbdb8 44% 56%,transparent 56%)}
  .c-henrik .tag{top:calc(258*var(--u))}

  /* 05 NOIR */
  .c-noir{--w:calc(346*var(--u));--h:calc(320*var(--u))}
  .c-noir .img{background:radial-gradient(60% 40% at 50% 62%,#4d4d4b 0,#1a1a19 50%,#0a0a0a 100%)}
  .c-noir .img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(10,10,10,0),#0a0a0a)}

  /* 06 VELD */
  .c-veld{--w:calc(300*var(--u));--h:calc(300*var(--u))}
  .c-veld .brand{font-size:16px;font-weight:400}
  .c-veld .img{inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,#d9d9d4,#b9b9b3)}
  .c-veld .img::after{content:"";position:absolute;left:12%;right:12%;top:30%;height:1px;background:#8d8d88;box-shadow:0 14px 0 #9d9d98,0 28px 0 #adada8}
  .c-veld .tag{top:22%}
  .c-veld .tag.small{font-size:11px;line-height:1.3}

  /* strip slides out when leaving Selected work forwards; services placeholder slides in */
  .strip,.hint-row,.work-head{transition:opacity .45s ease,transform var(--dur) var(--ease),max-height var(--dur) var(--ease),margin var(--dur) var(--ease)}
  body.view-services .strip,body.view-vision .strip,body.view-about .strip,body.view-blog .strip,body.view-contact .strip{opacity:0;transform:translateX(-22vw) scale(.94);pointer-events:none}
  body.view-services .hint-row,body.view-vision .hint-row,body.view-about .hint-row,body.view-blog .hint-row,body.view-contact .hint-row{opacity:0;transform:translateX(-60px);pointer-events:none}
  body.view-services .work-head,body.view-vision .work-head,body.view-about .work-head,body.view-blog .work-head,body.view-contact .work-head{transform:translateX(-14vw)}
  .services{
    position:absolute;inset:0;padding:calc(var(--head-h) + var(--sale-h) + clamp(4px,1vh,14px)) 0 0;
    --sale-h:38px;
    display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
    padding-bottom:clamp(24px,4vh,44px);
    opacity:0;transform:translateX(18vw);pointer-events:none;
    transition:opacity .5s ease,transform var(--dur) var(--ease);
  }
  body.view-services .services{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}

  .services h2{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease) .3s}
  body.view-services .services h2{clip-path:inset(0 0 0 0)}

  /* sale label */
  .sale{
    display:inline-flex;align-items:baseline;gap:8px;margin-top:10px;
    padding:6px 12px 7px;border-radius:3px;
    background:linear-gradient(100deg,var(--fill-a),var(--fill-b));
    color:var(--on-fill);-webkit-text-fill-color:var(--on-fill);
    font-size:clamp(11px,.95vw,13px);font-weight:500;letter-spacing:.02em;line-height:1;
    opacity:0;transform:translateY(8px) scale(.96);
    transition:opacity .45s ease .75s,transform .5s var(--ease) .75s;
  }
  .sale b{font-weight:800;font-size:1.25em}
  .sale span{font-family:"IBM Plex Mono",monospace;font-size:.85em;opacity:.85}
  body.view-services .sale{opacity:1;transform:none}

  /* horizontal strip of service cards */
  .svc-strip{
    flex:none;display:flex;align-items:stretch;gap:clamp(14px,1.6vw,24px);
    padding:2px var(--pad) 10px;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;cursor:grab;
    height:min(46vh,430px);
  }
  .svc-strip::-webkit-scrollbar{display:none}
  .svc-strip.dragging{cursor:grabbing}

  .svc{
    position:relative;flex:none;height:100%;
    width:clamp(238px,20.5vw,300px);
    display:flex;flex-direction:column;
    border:1px solid var(--rule);border-radius:3px;
    padding:16px 16px 14px;
    overflow:hidden;
    background:var(--bg);
    opacity:0;transform:translateY(20px);
    transition:opacity .5s ease,transform .6s var(--ease),border-color .25s ease;
    -webkit-user-select:none;user-select:none;
  }
  .svc:hover{border-color:var(--ink)}
  .svc:first-child{width:clamp(300px,25vw,360px)}
  .svc:nth-child(2){width:clamp(320px,27vw,392px)}
  .svc-rows li{white-space:nowrap}
  body.view-services .svc{opacity:1;transform:none}
  body.view-services .svc:nth-child(1){transition-delay:.45s}
  body.view-services .svc:nth-child(2){transition-delay:.52s}
  body.view-services .svc:nth-child(3){transition-delay:.59s}
  body.view-services .svc:nth-child(4){transition-delay:.66s}
  body.view-services .svc:nth-child(5){transition-delay:.73s}
  body.view-services .svc:nth-child(6){transition-delay:.8s}
  body.view-services .svc:nth-child(7){transition-delay:.87s}
  body.view-services .svc:nth-child(8){transition-delay:.94s}

  .svc-num{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
  .svc-title{font-size:clamp(15px,1.25vw,19px);font-weight:500;margin:6px 0 14px;letter-spacing:-.01em}
  .svc-wide{width:clamp(280px,25vw,380px)}
  .svc-scroll{
    flex:1 1 auto;min-height:0;overflow:hidden;
    margin:0 -4px;padding:0 4px;
  }
  .svc-scroll-inner{transition:transform .9s linear}
  .svc-fade{
    position:absolute;left:1px;right:1px;bottom:34px;height:52px;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--bg));
    opacity:1;transition:opacity .3s ease;
  }
  .svc-wide:hover .svc-fade{opacity:0}
  .svc-group{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin:16px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  }
  .svc-group:first-of-type{margin-top:0}
  .svc-group .per{text-transform:none;letter-spacing:0;font-size:9.5px;opacity:.8}
  .svc-rows{list-style:none;display:flex;flex-direction:column;gap:10px}
  .svc-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:clamp(12px,.98vw,14px);line-height:1.3}
  .svc-rows .nm{display:flex;align-items:baseline;gap:6px;min-width:0}
  .svc-rows .nm .chip{align-self:center}
  .svc-rows .price{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
  .svc-rows .was{color:var(--ink-soft);text-decoration:line-through;margin-right:5px;font-size:.9em}
  .svc-rows .now{font-weight:500}
  .chip{
    position:relative;flex:none;
    font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    padding:3px 7px;line-height:1.2;border-radius:2px;
    background-image:linear-gradient(100deg,var(--grad-a),var(--grad-b));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .chip::before{
    content:"";position:absolute;inset:0;border-radius:2px;padding:1.5px;
    background:linear-gradient(100deg,var(--grad-a),var(--grad-b));
    opacity:.9;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;
  }

  /* hint that there is more, fades out on hover */
  .svc-more{
    margin-top:auto;padding-top:12px;pointer-events:none;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);
    transition:opacity .25s ease;
  }
  .svc:hover .svc-more{opacity:0}

  /* the detail sheet slides up over the card on hover */
  .svc-detail{
    position:absolute;inset:auto 0 0 0;
    background:var(--bg);
    border-top:1px solid var(--ink);
    padding:14px 16px 16px;
    transform:translateY(101%);
    transition:transform .45s var(--ease);
    max-height:100%;overflow:auto;scrollbar-width:none;
  }
  .svc-detail::-webkit-scrollbar{display:none}
  .svc:hover .svc-detail,.svc:focus-within .svc-detail{transform:none}
  .svc-detail p{font-size:clamp(11.5px,.92vw,13px);line-height:1.45}
  .svc-detail .lead-line{font-weight:500;margin-bottom:8px}
  .svc-detail .inc{color:var(--ink-soft)}
  .svc-detail .task{margin-top:8px}
  .svc-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:clamp(11px,.9vw,12.5px);line-height:1.35}
  .svc-list li{padding-left:12px;position:relative}
  .svc-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1px;background:var(--ink-soft)}

  /* included-as-standard card, at the end of the strip */
  .svc-base{width:clamp(250px,22vw,320px)}
  .svc-base .svc-num{text-transform:uppercase}
  .svc-base .svc-sub{font-size:clamp(12px,.95vw,13.5px);line-height:1.4;color:var(--ink-soft)}

  /* info dot that carries a tooltip */
  .i{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:12px;height:12px;border-radius:50%;border:1px solid var(--ink-soft);
    font-size:8px;line-height:1;color:var(--ink-soft);cursor:help;
    position:relative;top:-1px;
  }
  /* the card clips its content, so tips are drawn in a floating layer instead */
  .tipbox{
    position:fixed;top:0;left:0;z-index:90;max-width:300px;
    background:var(--tip-bg);color:var(--tip-fg);
    font-family:"Inter",sans-serif;font-size:12px;line-height:1.45;letter-spacing:0;
    padding:9px 11px;border-radius:4px;
    opacity:0;transform:translateY(4px);pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  .tipbox.on{opacity:1;transform:none}

  /* ===== My vision ===== */
  body.view-services .services,body.view-vision .services{opacity:1;pointer-events:auto}
  body.view-vision .services,body.view-blog .services{opacity:0;transform:translateX(-18vw);pointer-events:none;transition-delay:0s}

  .vision{
    position:absolute;inset:0;padding:calc(var(--head-h) + var(--tabs-h)) 0 0;
    display:flex;flex-direction:column;justify-content:center;
    opacity:0;transform:translateX(18vw);pointer-events:none;
    transition:opacity .5s ease,transform var(--dur) var(--ease);
  }
  body.view-vision .vision{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}

  /* page heading, same treatment as SERVICES */

  .vision-body{
    flex:none;display:flex;align-items:center;justify-content:flex-start;gap:clamp(16px,2.4vw,48px);
    padding:0 var(--pad);
  }
  .vision-left{
    flex:0 1 auto;min-width:0;width:min(760px,52vw);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease,transform .6s var(--ease);
  }
  body.view-vision .vision-left{opacity:1;transform:none;transition-delay:.5s}

  .vision-claim{
    font-size:clamp(15px,1.45vw,23px);line-height:1.25;letter-spacing:-.02em;font-weight:500;
    white-space:nowrap;
  }
  .vision-sub{
    font-size:clamp(12px,1vw,15px);line-height:1.5;color:var(--ink-soft);
    max-width:52ch;margin-top:10px;
  }
  .vision-lead{font-size:clamp(11.5px,.92vw,13.5px);line-height:1.5;color:var(--ink-soft);margin-top:clamp(24px,4.6vh,52px)}
  .vision-lead b{font-weight:600;color:var(--ink)}

  .presets{display:flex;flex-wrap:nowrap;gap:8px;margin-top:10px}
  .preset{
    flex:none;white-space:nowrap;
    font-size:clamp(12.5px,1.05vw,15px);
    padding:9px 15px;border:1px solid var(--rule);border-radius:3px;
    background:none;color:var(--ink);cursor:pointer;
    transition:border-color .2s ease,background-color .2s ease,color .2s ease;
  }
  .preset:hover{border-color:var(--ink)}
  .preset[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}

  .vision-note{
    font-size:clamp(12px,.95vw,14px);line-height:1.5;margin-top:12px;
    max-width:60ch;min-height:4.5em;
    transition:opacity .28s ease,transform .32s var(--ease);
  }
  .vision-note.swap{opacity:0;transform:translateY(6px)}

  .axes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;margin-top:clamp(26px,5vh,56px)}
  .axes li{border-top:1px solid var(--rule);padding-top:9px;font-size:clamp(11px,.85vw,12.5px);line-height:1.4}
  .axes b{display:block;font-weight:500;margin-bottom:2px}
  .axes span{color:var(--ink-soft)}

  /* hexagon sits centred in whatever space is left on the right */
  .hex-wrap{
    flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;
    width:min(42vw,60vh);min-width:250px;margin-left:0;margin-right:0;   /* sits next to the text, not pushed to the far edge */
    opacity:0;transform:scale(.94);
    transition:opacity .6s ease,transform .7s var(--ease);
  }
  body.view-vision .hex-wrap{opacity:1;transform:none;transition-delay:.65s}
  /* desktop: the space from the text to the right edge is one box, and the hexagon sits in its centre */
  @media (min-width:1024px){
    .hex-wrap{flex:1 1 0;min-width:0;width:auto;justify-content:center}
    .hex-wrap .hex{width:min(42vw,60vh);max-width:100%}
  }
  @media (min-width:1024px) and (max-width:1279px){ .hex-wrap .hex{width:min(36vw,60vh)} }
  .hex{display:block;width:100%;height:auto;overflow:visible}
  .hex .grid{fill:none;stroke:var(--rule);stroke-width:1}
  .hex .spoke{stroke:var(--rule);stroke-width:1}
  .hex .dot{fill:var(--ink)}
  .hex text{fill:var(--ink);font-family:"Inter",sans-serif;font-size:13px;font-weight:500}
  .hex text.role{fill:var(--ink-soft);font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}

  .svc-hint-row,.vision-hint-row{
    position:absolute;right:var(--pad);bottom:100%;transform:translateY(50%);z-index:4;
    display:flex;justify-content:flex-end;
    opacity:0;pointer-events:none;transition:opacity .5s ease;
  }
  body.view-services .svc-hint-row,
  body.view-vision .vision-hint-row:not(#contactHintRow),
  body.view-about .vision-hint-row:not(#contactHintRow),
  body.view-blog .vision-hint-row:not(#contactHintRow),
  body.view-contact #contactHintRow{pointer-events:auto}
  body.view-services .svc-hint-row{opacity:1;transition-delay:.95s}
  body.view-vision .vision-hint-row,body.view-about .vision-hint-row:not(#contactHintRow),body.view-blog .vision-hint-row:not(#contactHintRow){opacity:1;transition-delay:.95s}
  body.view-blog #contactHintRow{opacity:0}
  body.view-about #contactHintRow{opacity:0}
  #contactHintRow{opacity:0}
  body.view-vision #contactHintRow{opacity:0}
  body.view-contact #contactHintRow{opacity:1;transition-delay:.95s}
  body.view-contact .vision-hint-row:not(#contactHintRow){opacity:0}
  /* ===== About ===== */
  .about{
    position:absolute;inset:0;
    padding:calc(var(--head-h) + var(--tabs-h) + clamp(10px,3vh,40px)) var(--pad) clamp(18px,3vh,34px);
    display:flex;flex-direction:column;justify-content:flex-start;
    opacity:0;transform:translateX(18vw);pointer-events:none;
    transition:opacity .5s ease,transform var(--dur) var(--ease);
  }
  body.view-about .about{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
  /* About, My vision and Blog are tabs of one page: the heading and tabs stay put while the panels slide */
  .about-group{display:contents}
  :root{--tabs-h:38px}
  /* slides in and out like every other page heading (it just stays put while you switch tabs) */
  .about-head{opacity:0;transform:translateX(18vw);pointer-events:none;transition:opacity .5s ease,transform var(--dur) var(--ease)}
  body.grp-about .about-head{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
  body.view-contact .about-head{opacity:0;transform:translateX(-18vw);transition-delay:0s}
  .about-head h2{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease) .3s}
  body.grp-about .about-head h2{clip-path:inset(0 0 0 0)}
  .ab-tabs{display:flex;gap:clamp(16px,1.6vw,26px);margin-top:4px}
  .ab-tabs a{position:relative;font-size:clamp(13px,1vw,15px);font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;
    color:var(--ink-soft);padding:4px 0 6px;min-height:24px;transition:color .2s ease}
  .ab-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  /* the same gradient sweep as the menu and headings */
  .ab-tabs a{--tc:var(--ink-soft);
    background-image:linear-gradient(90deg,var(--tc) 0%,var(--tc) 34%,var(--grad-a) 44%,var(--grad-b) 56%,var(--tc) 66%,var(--tc) 100%);
    background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .ab-tabs a[aria-current]{--tc:var(--ink)}
  .ab-tabs a:hover,.ab-tabs a:focus-visible{animation:sweep .9s ease-out forwards}
  .ab-tabs a:hover::after{transform:none}
  .ab-tabs a[aria-current]{color:var(--ink)}
  .ab-tabs a[aria-current]::after{transform:none}
  body.view-vision .about,body.view-blog .about,body.view-blog .vision{opacity:0;transform:translateX(-18vw);pointer-events:none;transition-delay:0s}

  /* ===== Blog tab ===== */
  .blog{
    position:absolute;inset:0;
    padding:calc(var(--head-h) + var(--tabs-h) + clamp(14px,4vh,48px)) var(--pad) clamp(18px,3vh,34px);
    display:flex;flex-direction:column;justify-content:flex-start;
    opacity:0;transform:translateX(18vw);pointer-events:none;
    transition:opacity .5s ease,transform var(--dur) var(--ease);
  }
  body.view-blog .blog{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
  .blog-body{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s var(--ease)}
  body.view-blog .blog-body{opacity:1;transform:none;transition-delay:.45s}
  .blog-lead{font-size:clamp(15px,1.4vw,22px);line-height:1.35;letter-spacing:-.015em;font-weight:500;max-width:62ch}
  .blog-list{list-style:none;margin-top:clamp(20px,4vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3.4vh,40px) clamp(18px,2vw,32px)}
  .blog-list li{border-top:1px solid var(--rule);min-width:0}
  .blog-list a{display:block;padding-top:clamp(10px,1.6vh,14px);text-decoration:none;color:inherit}
  .blog-list .bl-meta{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
  .blog-list h3{font-size:clamp(14px,1.15vw,17px);font-weight:500;line-height:1.3;margin:6px 0 6px;letter-spacing:-.01em}
  .blog-list p{font-size:clamp(11.5px,.9vw,13px);line-height:1.5;color:var(--ink-soft);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .blog-list a:hover h3,.blog-list a:focus-visible h3{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
  .blog-all{margin-top:clamp(18px,3.4vh,36px)}
  @media (min-width:1024px) and (max-height:780px){
    .blog{padding-top:calc(var(--head-h) + var(--tabs-h) + 14px)}
    .blog-list{margin-top:18px;row-gap:16px}
    .blog-list p{-webkit-line-clamp:2}
  }

  .about-body{
    flex:0 1 auto;min-height:0;max-height:720px;
    display:grid;grid-template-columns:minmax(170px,.85fr) minmax(0,3.4fr);gap:clamp(20px,2.6vw,44px);
    opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s var(--ease);
  }
  body.view-about .about-body{opacity:1;transform:none;transition-delay:.5s}

  /* until there's a photo: a monogram tile in the same language as the placeholder cases */
  .about-photo{
    position:relative;min-height:0;border-radius:4px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(120% 80% at 18% 0%, color-mix(in srgb, var(--fill-a) 14%, transparent), transparent 62%),
      radial-gradient(110% 85% at 88% 100%, color-mix(in srgb, var(--fill-b) 16%, transparent), transparent 64%),
      color-mix(in srgb, var(--ink) 4%, transparent);
  }
  html.dark .about-photo{
    background:
      radial-gradient(120% 80% at 18% 0%, color-mix(in srgb, var(--fill-a) 24%, transparent), transparent 62%),
      radial-gradient(110% 85% at 88% 100%, color-mix(in srgb, var(--fill-b) 24%, transparent), transparent 64%),
      color-mix(in srgb, #ffffff 4%, transparent);
  }
  .about-photo span{
    font-size:clamp(64px,8vw,140px);font-weight:800;letter-spacing:-.04em;line-height:1;
    background:linear-gradient(130deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 38%}

  .about-main{min-width:0;min-height:0;display:flex;flex-direction:column}
  .about-intro{font-size:clamp(15px,1.4vw,22px);line-height:1.35;letter-spacing:-.015em;font-weight:500;max-width:62ch}
  .about-meta{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:clamp(12px,2vh,20px);
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;color:var(--ink-soft);
  }
  .about-meta span:not(:last-of-type)::after{content:"·";margin-left:18px;opacity:.6}
  .about-meta .foot-cta{font-family:"Inter",sans-serif;font-size:clamp(12.5px,1vw,14px);letter-spacing:0;color:var(--ink);margin-left:auto}

  .about-grid{
    list-style:none;margin-top:clamp(20px,4vh,52px);
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vh,40px) clamp(16px,1.8vw,28px);
  }
  .ab-item{border-top:1px solid var(--rule);padding-top:clamp(10px,1.6vh,14px);min-width:0}
  .ab-num{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-soft)}
  .ab-item h3{font-size:clamp(13.5px,1.1vw,16px);font-weight:500;line-height:1.25;margin:6px 0 6px}
  .ab-item p{font-size:clamp(11.5px,.9vw,13px);line-height:1.5;color:var(--ink-soft)}
  .ab-item:hover h3{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}

  @media (min-width:1024px) and (max-height:780px){
    .about{padding-top:calc(var(--head-h) + var(--tabs-h) + 8px);padding-bottom:14px}
    .about-intro{font-size:clamp(14px,1.2vw,18px)}
    .about-grid{margin-top:16px;row-gap:14px}
    .ab-item h3{margin:4px 0}
    .ab-item p{font-size:11.5px;line-height:1.45}
  }
  @media (min-width:1024px) and (max-height:660px){
    .about{padding-top:calc(var(--head-h) + var(--tabs-h) + 4px);padding-bottom:10px}
    .about-intro{font-size:13.5px;line-height:1.33}
    .about-meta{margin-top:6px}
    .about-grid{margin-top:10px;row-gap:6px}
    .ab-item{padding-top:6px}
    .ab-item h3{margin:3px 0}
    .ab-item p{font-size:10.5px;line-height:1.38}
  }

  /* About fits itself to the screen: a small script adds .fit-1…3 until the cards end above the scroll hint and the menu */
  @media (min-width:1024px){
    .about.fit-1{padding-top:calc(var(--head-h) + var(--tabs-h) + 8px);padding-bottom:14px}
    .about.fit-1 .about-intro{font-size:clamp(14px,1.2vw,18px)}
    .about.fit-1 .about-grid{margin-top:16px;row-gap:14px}
    .about.fit-1 .ab-item h3{margin:4px 0}
    .about.fit-1 .ab-item p{font-size:11.5px;line-height:1.45}
    .about.fit-2{padding-top:calc(var(--head-h) + var(--tabs-h) + 4px);padding-bottom:10px}
    .about.fit-2 .about-intro{font-size:13.5px;line-height:1.33}
    .about.fit-2 .about-meta{margin-top:6px}
    .about.fit-2 .about-grid{margin-top:10px;row-gap:6px}
    .about.fit-2 .ab-item{padding-top:6px}
    .about.fit-2 .ab-item h3{margin:3px 0}
    .about.fit-2 .ab-item p{font-size:10.5px;line-height:1.38}
    .about.fit-3 .about-intro{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .about.fit-3 .about-grid{margin-top:8px;row-gap:4px}
    .about.fit-3 .ab-item p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  }

  /* ===== Contact ===== */
  body.view-about .services,
  body.view-contact .services,body.view-contact .vision,body.view-contact .about,body.view-contact .blog{opacity:0;transform:translateX(-18vw);pointer-events:none;transition-delay:0s}
  .contact{
    position:absolute;inset:0;padding:calc(var(--head-h) + clamp(10px,2vh,22px)) calc(var(--pad) + clamp(0px,3vw,64px)) clamp(12px,2vh,24px);
    perspective:1800px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;gap:80px;
    opacity:0;transform:translateX(18vw);pointer-events:none;
    transition:opacity .5s ease,transform var(--dur) var(--ease);
  }
  body.view-contact .contact{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
  .contact-head{position:absolute;top:0;left:0;right:0;z-index:3;padding:0 var(--pad)}
  .contact-head h2{
    font-weight:800;font-size:var(--hfs);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;
    clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease) .3s;
  }
  body.view-contact .contact-head h2{clip-path:inset(0 0 0 0)}

  .contact-col{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s var(--ease)}
  body.view-contact .contact-col:not(.turning):not(.back){opacity:1;transform:none}
  body.view-contact .contact-col.turning,body.view-contact .contact-col.back{opacity:1}
  body.view-contact .contact-form{transition-delay:.45s}
  .contact-form .field:last-of-type{margin-bottom:clamp(8px,1.4vh,14px)}
  body.view-contact .contact-side{transition-delay:.58s}

  .contact-form{
    position:relative;z-index:1;max-height:100%;overflow-y:auto;scrollbar-width:none;       /* the neon edge is drawn on this card, not the page */
    transform-style:preserve-3d;transition:transform .42s cubic-bezier(.45,.05,.55,.95),border-color .25s ease;
    order:1;flex:0 1 620px;min-width:0;
    border:1px solid var(--rule);border-radius:3px;
    padding:clamp(18px,2.6vh,26px) clamp(20px,2vw,28px) clamp(20px,2.8vh,28px);
    background:var(--bg);
    transition:opacity .5s ease,transform .6s var(--ease),border-color .25s ease;
  }
  .contact-form:hover,.contact-form:focus-within{border-color:var(--ink)}
  body.view-contact .contact-form{transition:transform .42s cubic-bezier(.45,.05,.55,.95),border-color .25s ease}
  body.view-contact .contact-form.turning{transform:rotateY(-90deg)}
  body.view-contact .contact-form.back{transform:rotateY(90deg);transition:none}
  .contact-side{order:2;flex:0 1 470px;min-width:0;max-height:100%;overflow-y:auto;scrollbar-width:none}

  .field{margin-bottom:clamp(12px,2.2vh,20px)}
  .field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
  .field label .field-opt{text-transform:none;letter-spacing:0;font-family:"Inter",sans-serif;font-size:11px;color:var(--ink-soft)}
  .field input,.field select,.field textarea{
    width:100%;background:none;color:var(--ink);
    font-family:"Inter",sans-serif;font-size:clamp(13px,1.05vw,15px);
    border:0;border-bottom:1px solid var(--rule);
    padding:6px 0 7px;border-radius:0;
    transition:border-color .2s ease;
  }
  .field select{-webkit-appearance:none;appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
    background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .field select option{background:var(--bg);color:var(--ink)}
  .field select.fsel-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
  .field{position:relative}
  .fsel{
    display:block;width:100%;text-align:left;cursor:pointer;background:none;color:var(--ink);
    font-family:"Inter",sans-serif;font-size:clamp(13px,1.05vw,15px);
    border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:6px 22px 7px 0;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
    background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    transition:border-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .fsel:hover,.fsel:focus-visible,.fsel[aria-expanded="true"]{outline:none;border-bottom-color:var(--ink)}
  .fsel-panel{z-index:70}
  .dd-panel.fsel-panel{position:fixed;margin-top:0;border-color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.14)}
  .field textarea{resize:none;line-height:1.45;min-height:calc(3.4em + 14px)}
  /* the message box fills whatever height the card has spare */
  @media (min-width:1024px){
    .contact-form form .field:has(textarea){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
    .contact-form form .field:has(textarea) textarea{flex:1 1 auto;height:auto;min-height:calc(3.4em + 14px)}
  }
  @media (max-width:1023px){ #cf-msg{min-height:calc(7em + 14px)} }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
  .field-row{display:flex;gap:clamp(12px,2vw,24px)}
  .field-row .field{flex:1 1 0;min-width:0}

  /* two doors: clients, and people who want to work with me */
  .form-tabs{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:clamp(14px,2.4vh,22px)}
  .form-tab{
    background:none;border:0;padding:0 0 6px;cursor:pointer;
    font-family:"Inter",sans-serif;font-size:clamp(13px,1.05vw,15px);font-weight:500;
    color:var(--ink-soft);border-bottom:1.5px solid transparent;
    transition:color .2s ease,border-color .2s ease;
  }
  /* the open form's name sits on the left; the switch to the other one is always on the right */
  .form-tab[aria-selected="true"]{order:0;color:var(--ink);border-bottom-color:var(--ink);cursor:default}
  .form-tab[aria-selected="false"]{order:1;font-weight:400;font-size:clamp(12px,.95vw,13.5px);color:color-mix(in srgb, var(--ink) 66%, transparent)}
  .form-tab[aria-selected="false"]:hover,.form-tab[aria-selected="false"]:focus-visible{color:color-mix(in srgb, var(--ink) 85%, transparent);outline:none}

  /* the card itself flips when you switch */
  /* both panes share one cell, so the card keeps a single height */
  .flip{display:grid}
  .flip-face{grid-area:1 / 1;display:flex}
  .flip-face > form{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
  .flip-face.is-off{visibility:hidden;pointer-events:none}

  /* collaborate mode: gradient specks, neon edge, a sheen every few seconds */
  .contact-form.collab{border-color:transparent;background:var(--bg)}

  /* the glow lives on the page behind everything */
  .contact::before{
    content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .6s ease;
    background:
      radial-gradient(38% 42% at 22% 26%, color-mix(in srgb, var(--fill-a) 42%, transparent), transparent 72%),
      radial-gradient(42% 46% at 76% 74%, color-mix(in srgb, var(--fill-b) 38%, transparent), transparent 72%),
      radial-gradient(30% 34% at 62% 14%, color-mix(in srgb, var(--fill-b) 26%, transparent), transparent 70%);
    filter:blur(30px);
  }
  /* email typo hint under the field */
  .email-hint{margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
  .email-hint[hidden]{display:none}
  .email-hint b{color:var(--ink);font-weight:500}
  .email-hint button{font:inherit;font-size:12.5px;color:var(--ink);background:none;border:0;padding:0;margin-left:4px;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px}
  .email-hint button:hover{color:var(--fill-b)}
  .small-print a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
  .small-print a:hover{color:var(--ink)}
  /* "what happens next" follows the form that's open; it swaps while the card is edge-on */
  .steps.steps-collab{display:none}
  body.collab-mode .steps.steps-client{display:none}
  body.collab-mode .steps.steps-collab{display:flex}
  .reply.steps-collab{display:none}
  body.collab-mode .reply.steps-client{display:none}
  body.collab-mode .reply.steps-collab{display:block}
  .steps-client,.steps-collab{animation:stepsIn .45s var(--ease) both}
  @keyframes stepsIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .steps-client,.steps-collab{animation:none} }
  body.collab-mode .contact::before{opacity:.75}
  html.dark body.collab-mode .contact::before{opacity:.9}
  .contact-side{position:relative;z-index:1}
  .contact-form.collab::before{
    content:"";position:absolute;inset:0;border-radius:3px;padding:1.5px;pointer-events:none;
    background:linear-gradient(115deg,
      var(--fill-a) 0%, var(--fill-b) 28%,
      #ffffff 46%, var(--fill-b) 60%, var(--fill-a) 100%);
    background-size:260% 100%;
    background-position:100% 0;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .contact-form.collab.glint::before{animation:sweep 1.4s ease-out forwards}
  html.dark .contact-form.collab{box-shadow:0 0 50px -22px var(--fill-b)}

  .collab-pitch{
    font-size:clamp(12.5px,1vw,14px);line-height:1.5;color:var(--ink-soft);
    margin-bottom:clamp(12px,2vh,18px);min-height:3em;
  }
  .collab-pitch b{color:var(--ink);font-weight:500}
  .file-field input[type=file]{
    font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);
    padding:8px 0;border:0;border-bottom:1px dashed var(--rule);
  }
  .file-field input[type=file]::file-selector-button{
    font-family:"Inter",sans-serif;font-size:12px;
    margin-right:10px;padding:6px 12px;border-radius:3px;
    border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;
  }
  .small-print{
    flex:none;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.05em;
    color:var(--ink-soft);line-height:1.6;
  }

  .send-row{display:flex;justify-content:flex-end;margin-top:auto;padding-top:clamp(10px,2vh,18px)}
  .send{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:190px;
    font-family:"Inter",sans-serif;font-size:clamp(13px,1.05vw,15px);font-weight:600;
    padding:11px 26px;border-radius:3px;border:0;cursor:pointer;
    background:linear-gradient(100deg,var(--fill-a),var(--fill-b));color:var(--on-fill);
    transition:opacity .2s ease,transform .2s ease;
  }
  .send:hover{opacity:.9}
  .send svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.6;transition:transform .3s ease}
  .send:hover svg{transform:translateX(4px)}
  .form-note{
    flex:none;margin-top:10px;text-align:right;font-size:12px;line-height:1.5;color:var(--ink-soft);
    max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s ease,margin .4s ease;
  }
  .form-note.on{max-height:80px;opacity:1}

  .side-block{margin-bottom:clamp(20px,3.6vh,36px)}
  .side-block h3{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--rule);
  }
  .side-links{display:flex;flex-direction:column;gap:4px;font-size:clamp(13px,1.05vw,15px)}
  .side-links a{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-weight:500;min-height:24px}
  /* email and Instagram: icon + text; then TikTok, YouTube, Behance, Dribbble as icons (Contact, mobile menu, footer) */
  .ic-links{--ic:18px}
  .menu-contacts.ic-links{--ic:20px}
  .site-foot .ic-links{--ic:15px}
  .ic-links .ic-row{display:inline-flex;align-items:center;gap:10px;width:fit-content}
  .ic-links .ic-row svg{width:var(--ic);height:var(--ic);flex:none;fill:currentColor}
  .ic-links .ic-list{display:inline-flex;align-items:center;gap:calc(var(--ic) * .6);margin-left:calc((var(--ic) - 28px) / 2)}
  .ic-links .ic-list a{display:inline-grid;place-items:center;min-width:28px;min-height:28px;padding:0;border:0;text-decoration:none;color:inherit;transition:transform .2s ease}
  .ic-links .ic-list a:hover,.ic-links .ic-list a:focus-visible{transform:translateY(-2px)}
  .ic-links .ic-list svg{width:var(--ic);height:var(--ic);fill:currentColor}
  .side-links.ic-links{gap:6px}
  .side-links.ic-links .ic-list{margin-top:2px}
  .side-links .ic-row:hover span,.side-links .ic-row:focus-visible span{text-decoration:underline;text-underline-offset:3px}
  .steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:8px}
  .steps li{
    counter-increment:st;position:relative;padding-left:24px;
    font-size:clamp(12px,.98vw,14px);line-height:1.45;
  }
  .steps li::before{
    content:counter(st,decimal-leading-zero);position:absolute;left:0;top:1px;
    font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-soft);
  }
  .reply{font-size:clamp(12px,.98vw,14px);line-height:1.5}
  .reply b{font-weight:600}

  .services-foot{
    flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
    padding:8px var(--pad) 0;
    font-size:clamp(12px,.98vw,14px);
    opacity:0;transition:opacity .5s ease;
  }
  body.view-services .services-foot{opacity:1;transition-delay:1s}
  .services-foot .was{text-decoration:line-through;opacity:.78}
  .services-foot .terms{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--ink-soft)}
  .foot-cta{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px;margin-left:2px}
  .foot-cta svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:1.6;flex:none;transition:transform .3s ease}
  .foot-cta:hover svg,.foot-cta:focus-visible svg{transform:translateX(4px)}

  /* ===== price calculator ===== */
  .calc-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
  .calc-terms a:hover{color:var(--ink)}
  .calc-terms{
    flex:none;padding:clamp(18px,3vh,30px) var(--pad) 10px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);
  }
  .calc{
    flex:1 1 auto;min-height:0;max-height:640px;display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);
    gap:clamp(14px,1.8vw,28px);align-items:stretch;
    padding:0 var(--pad);
  }
  @media (max-height:780px){
    .calc-start-price{margin-top:8px}
    .calc-rest{font-size:11px;gap:5px 16px}
  }
  .calc-body::-webkit-scrollbar{display:none}
  .calc-kicker{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:10px;
  }

  /* left: the usual starting point */
  .calc-start{min-height:0;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent);padding:clamp(16px,2.4vh,26px) clamp(16px,1.5vw,22px);border-radius:4px;
    display:flex;flex-direction:column;align-items:flex-start}
  .calc-start .calc-kicker{margin-bottom:9px}
  .calc-start .calc-jump{flex:none}
  .calc-start h3{font-size:clamp(15px,1.3vw,20px);font-weight:500;line-height:1.25}
  .calc-start ul{list-style:none;display:flex;flex-direction:column;gap:clamp(3px,.7vh,8px);margin-top:clamp(10px,1.8vh,20px);font-size:clamp(11.5px,.92vw,13px);color:var(--ink-soft)}
  .calc-start li{padding-left:12px;position:relative}
  .calc-start li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:1px;background:var(--ink-soft)}
  .calc-start-price{margin-top:clamp(12px,2vh,22px);font-size:clamp(14px,1.2vw,18px)}
  .calc-start-price .was{color:var(--ink-soft);text-decoration:line-through;font-size:.8em;margin-right:4px}
  .calc-start-price .plus{color:var(--ink-soft);font-size:.72em}
  .calc-start-note{margin-top:4px;font-size:11.5px;color:var(--ink-soft)}
  /* how it goes, big version: right of the calculator on wide screens, under it on phones */
  .calc-steps{display:none;min-height:0;flex-direction:column;padding-top:clamp(18px,3vh,30px)}
  .calc-steps .calc-kicker{margin-bottom:clamp(18px,3vh,30px)}
  .steps-flow{list-style:none;flex:1 1 auto;display:flex;flex-direction:column;max-height:520px}
  .steps-flow li{position:relative;padding-left:24px;flex:1 1 0;min-height:0;padding-bottom:18px}
  .steps-flow li:last-child{flex:none;padding-bottom:0}
  .steps-flow li::before{
    content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;
    background:linear-gradient(120deg,var(--fill-a),var(--fill-b));
  }
  .steps-flow li:not(:last-child)::after{
    content:"";position:absolute;left:4px;top:calc(.45em + 13px);bottom:calc(-.45em + 4px);width:1px;background:var(--rule);
  }
  .steps-flow div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .steps-flow b{font-size:clamp(14px,1.05vw,17px);font-weight:500}
  .steps-flow em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap}
  .steps-flow span{display:block;margin-top:5px;font-size:clamp(11.5px,.9vw,13px);line-height:1.45;color:var(--ink-soft)}
  .steps-total{margin-top:clamp(18px,3vh,30px);padding-top:14px;border-top:1px solid var(--rule);
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;color:var(--ink-soft)}
  .steps-flow em,.steps-total{transition:color .3s ease}
  .steps-flow em.changed,.steps-total.changed{color:var(--ink)}
  @media (min-width:1600px){
    .calc{grid-template-columns:minmax(200px,260px) minmax(0,1040px) minmax(220px,300px)}
    .calc-steps{display:flex}
    .calc-start .calc-flow-card{display:none}
    .calc-start ul{display:flex!important}
  }

  /* how it goes: a small vertical timeline */
  .calc-flow{
    list-style:none;width:100%;margin:clamp(12px,2vh,22px) 0 12px;
    display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);
    border-top:1px solid var(--rule);padding-top:clamp(10px,1.6vh,16px);
  }
  .calc-flow li{
    position:relative;display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:1px;
    padding-left:18px;font-size:clamp(11.5px,.92vw,13px);line-height:1.35;
  }
  .calc-flow li::before{
    content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;
    background:linear-gradient(120deg,var(--fill-a),var(--fill-b));
  }
  .calc-flow li:not(:last-child)::after{
    content:"";position:absolute;left:3px;top:calc(.42em + 10px);bottom:calc(-1 * clamp(6px,1.1vh,12px) + 2px);
    width:1px;background:var(--rule);
  }
  .calc-flow b{font-weight:500;color:var(--ink)}
  .calc-flow em{font-style:normal;grid-row:1;grid-column:2;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-soft);align-self:center}
  .calc-flow span{grid-column:1 / -1;color:var(--ink-soft);font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calc-start.fit-1 .calc-flow span{display:none}
  .calc-start.fit-2 .calc-flow-card{display:none}
  .calc-start.fit-3 .calc-start-note{display:none}
  .calc-start.fit-3 ul{gap:2px;margin-top:8px}
  /* the card: what's included matters most; the small timeline gives way first */
  @media (min-width:1024px) and (max-height:1100px){ .calc-flow span{display:none} }
  @media (min-width:1024px) and (max-height:740px){ .calc-start .calc-flow-card{display:none} }
  @media (min-width:1024px) and (max-height:700px){
    .calc-start ul{gap:3px;margin-top:10px;font-size:11.5px}
    .calc-start-note{display:none}
  }
  .calc-jump{
    margin-top:auto;background:none;border:0;padding:0 0 3px;cursor:pointer;
    font-family:"Inter",sans-serif;font-size:clamp(12.5px,1vw,14px);font-weight:500;color:var(--ink);
    border-bottom:1.5px solid var(--ink);
  }

  /* middle: the picker and the running total, in one gradient frame */
  .calc-body{
    position:relative;min-height:0;max-height:100%;overflow-y:auto;scrollbar-width:none;border-radius:4px;
    max-width:1040px;
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);grid-template-rows:auto 1fr;
    column-gap:clamp(16px,2vw,30px);row-gap:clamp(14px,2.4vh,26px);
    padding:clamp(18px,3vh,30px) clamp(18px,1.8vw,28px);
    background:var(--bg);
  }
  .calc-body::before{
    content:"";position:absolute;inset:0;border-radius:4px;padding:1.5px;pointer-events:none;
    background:linear-gradient(120deg,var(--fill-a),var(--fill-b));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:.55;
  }
  .calc-title{grid-column:1 / -1;font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
  .calc-title span{font-weight:400;color:var(--ink-soft);margin-right:4px}
  .calc-step{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-soft);margin:clamp(16px,3.4vh,36px) 0 10px;
  }
  .calc-col{min-width:0}
  .calc-col > .calc-step:first-child{margin-top:0}
  .calc-hint{font-size:11px;color:var(--ink-soft);margin-top:-2px;height:0;opacity:0;transition:opacity .2s ease}
  .calc-hint.on{height:auto;opacity:1;margin-top:6px}

  /* native selects, styled like the rest of the picker */
  .sel{
    width:100%;background:none;color:var(--ink);cursor:pointer;
    font-family:"Inter",sans-serif;font-size:clamp(12px,.98vw,13.5px);
    padding:clamp(9px,1.4vh,12px) 30px clamp(9px,1.4vh,12px) 12px;border:1px solid var(--rule);border-radius:3px;
    -webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    transition:border-color .18s ease;
    text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  }
  .sel:hover,.sel:focus{outline:none;border-color:var(--ink)}
  .sel.empty{color:var(--ink-soft)}
  .sel option{background-color:var(--bg);color:var(--ink);font-style:normal;font-weight:400}
  .sel optgroup{background-color:var(--bg);color:var(--ink-soft);font-style:normal;font-weight:600}
  .sel option[value=""]{color:var(--ink-soft)}

  /* the add-ons dropdown: a button that opens a checklist */
  .dd{position:relative}
  .dd-btn{text-align:left;padding-right:30px}
  .dd-btn[aria-expanded="true"]{border-color:var(--ink)}
  .dd-panel{
    position:fixed;z-index:60;box-sizing:border-box;
    background:var(--bg);border:1px solid var(--ink);border-radius:3px;
    padding:5px;overflow-y:auto;scrollbar-width:thin;
    box-shadow:0 12px 40px rgba(0,0,0,.14);
  }
  .dd-panel[hidden]{display:none}
  .dd-panel .row{padding-top:7px;padding-bottom:7px}
  .dd-panel .rows-group{
    font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);background:none;margin:10px 0 3px 11px;
  }
  .dd-panel .row{color:var(--ink);background-color:transparent}
  .dd-panel .row em{color:var(--ink-soft)}
  .dd-panel .row[aria-pressed="true"]{background-color:color-mix(in srgb, var(--fill-a) 12%, var(--bg))}
  .dd-panel .row[aria-pressed="true"] em{color:var(--ink)}
  .dd-panel .rows-group:first-child{margin-top:4px}
  .dd-done{
    display:block;width:100%;margin-top:6px;padding:9px;border:0;border-top:1px solid var(--rule);
    background:none;color:var(--ink);font-family:"Inter",sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;text-align:center;
  }

  .pick{display:flex;gap:8px}
  .pick.wrap{flex-wrap:wrap}
  .opt{
    font-family:"Inter",sans-serif;font-size:clamp(12px,.98vw,13.5px);
    padding:clamp(9px,1.4vh,12px) 14px;border:1px solid var(--rule);border-radius:3px;
    background:none;color:var(--ink);cursor:pointer;white-space:nowrap;
    transition:border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease;
  }
  .opt:hover{border-color:var(--ink)}
  .opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .opt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
  .opt[aria-disabled="true"]:hover{border-color:var(--rule)}

  .rows{display:flex;flex-direction:column;gap:2px}
  .row{
    display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
    font-family:"Inter",sans-serif;font-size:clamp(11.5px,.95vw,13px);text-align:left;
    padding:9px 11px 9px 32px;border:1px solid transparent;border-radius:3px;
    background:none;color:var(--ink);cursor:pointer;position:relative;
    transition:background-color .18s ease,border-color .18s ease;
  }
  .row::before,.row::after{
    content:"";position:absolute;left:10px;top:50%;width:13px;height:13px;margin-top:-6.5px;box-sizing:border-box;
  }
  .row::before{border:1px solid var(--ink-soft);border-radius:3px;opacity:.55;transition:opacity .18s ease,border-color .18s ease,background-color .18s ease}
  .row::after{
    background:var(--bg);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3.2 6.7l2.2 2.2 4.4-4.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3.2 6.7l2.2 2.2 4.4-4.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
    opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease;
  }
  .row:hover::before{opacity:1}
  .row em{font-style:normal;color:var(--ink-soft);flex:none}
  .row em s{opacity:.5;margin-right:3px}
  .row:hover{border-color:var(--rule)}
  .row[aria-pressed="true"]{
    background:color-mix(in srgb, var(--fill-a) 10%, transparent);
    border-color:color-mix(in srgb, var(--fill-a) 45%, transparent);
  }
  .row[aria-pressed="true"]::before{background:var(--ink);border-color:var(--ink);opacity:1}
  .row[aria-pressed="true"]::after{opacity:1;transform:none}
  .row[aria-pressed="true"] em{color:var(--ink)}
  .row.unsure{margin-top:4px;border-top:1px solid var(--rule);border-radius:0 0 3px 3px}

  /* right: the running total */
  .calc-sum{border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,30px);min-height:0;overflow-y:auto;scrollbar-width:none;
    display:flex;flex-direction:column}
  .calc-sum .calc-kicker{margin-bottom:12px}
  .sum-range{font-size:clamp(20px,2.1vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
  .sum-range.empty{color:var(--ink-soft);opacity:.85}
  .sum-range .arr-u{display:none}
  .sum-care:empty,.sum-lines:empty,.sum-time:empty{display:none}
  @media (max-width:1023px){ .sum-range .arr-l{display:none} .sum-range .arr-u{display:inline} }
  .sum-care{font-size:12px;color:var(--ink-soft);margin-top:4px}
  .sum-lines{list-style:none;margin-top:clamp(18px,3.4vh,34px);display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-soft)}
  .sum-lines li{display:flex;justify-content:space-between;gap:10px}
  .sum-lines li s{opacity:.5;margin-right:4px}
  .sum-lines li.discount{color:var(--ink);border-top:1px solid var(--rule);padding-top:6px;margin-top:3px}
  .sum-lines li.discount b{font-weight:500;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
  .sum-time{margin-top:clamp(16px,3vh,30px);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;color:var(--ink-soft)}
  .calc-send{width:100%;margin-top:clamp(20px,4vh,40px);justify-content:center;flex:none}
  .calc-send[disabled]{opacity:.45;cursor:not-allowed}
  .sum-note{margin-top:10px;font-size:11px;line-height:1.45;color:var(--ink-soft)}
  .sum-ask{margin-top:auto;padding-top:clamp(16px,3vh,28px);font-size:clamp(12px,.98vw,14px)}
  .sum-ask a{font-weight:600}

  /* bottom: everything the calculator doesn't cover */
  .calc-rest{
    flex:none;line-height:1.5;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(14px,2vw,26px);
    padding:0 var(--pad);margin-top:clamp(14px,2.2vh,22px);
    font-size:clamp(11.5px,.92vw,13px);color:var(--ink-soft);
  }
  .calc-rest .rest-title{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  }
  .calc-rest b{color:var(--ink);font-weight:500}
  .calc-rest .was{text-decoration:line-through;opacity:.78}

  /* 02 list: single choice, tick on the right */
  .row.pick1{padding-left:11px}
  .row.pick1::before{display:none}
  .row.pick1::after{left:auto;right:10px;background:var(--ink)}
  .row.pick1[aria-selected="true"]{background:color-mix(in srgb, var(--fill-a) 12%, var(--bg));border-color:color-mix(in srgb, var(--fill-a) 45%, transparent)}
  .row.pick1[aria-selected="true"]::after{opacity:1;transform:none}
  .row.active{border-color:var(--rule)}

  .step-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .defs-link{
    background:none;border:0;padding:0 0 1px;cursor:pointer;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;text-transform:none;
    color:var(--ink-soft);border-bottom:1px dotted currentColor;white-space:nowrap;
    transition:color .2s ease;
  }
  .defs-link:hover,.defs-link:focus-visible{color:var(--ink);outline:none}

  /* explainer card beside an open list (mouse only) */
  .dd-tip{
    position:fixed;z-index:61;width:260px;box-sizing:border-box;font-family:"Inter",sans-serif;
    background:var(--bg);color:var(--ink);border:1px solid var(--rule);border-radius:4px;
    padding:14px 16px 15px;box-shadow:0 12px 40px rgba(0,0,0,.14);
    pointer-events:none;opacity:0;transform:translateX(-4px);
    transition:opacity .15s ease,transform .15s ease,top .15s ease;
  }
  .dd-tip::before{
    content:"";position:absolute;inset:-1px;border-radius:4px;padding:1px;pointer-events:none;
    background:linear-gradient(130deg,var(--fill-a),var(--fill-b));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;
  }
  .dd-tip.on{opacity:1;transform:none}
  .dd-tip[hidden]{display:none}
  .dd-tip-kicker{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
  .dd-tip h5{font-size:14px;font-weight:600;margin-bottom:6px;line-height:1.25}
  .dd-tip p{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
  .dd-tip .dd-tip-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);color:var(--ink);font-size:12px}
  .dd-tip .dd-tip-note:empty{display:none}

  /* glossary modal */
  .defs-box{font-family:"Inter",sans-serif;width:min(640px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;padding:22px 24px 8px}
  .defs-body{overflow-y:auto;scrollbar-width:thin;margin:0 -6px;padding:0 6px 16px}
  .defs-body h5{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin:18px 0 6px;font-weight:400;
  }
  .defs-body h5:first-child{margin-top:4px}
  .defs-body dl{display:grid;grid-template-columns:minmax(120px,170px) 1fr;column-gap:0}
  .defs-body dd{padding-left:18px}
  .defs-body dt,.defs-body dd{padding:10px 0;border-top:1px solid var(--rule)}
  .defs-body dt{font-size:13.5px;font-weight:500;line-height:1.35}
  .defs-body dd{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0}
  .defs-body .defs-intro{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-bottom:4px}
  @media (max-width:1023px){
    .defs-modal{align-items:flex-end;padding:0}
    .defs-box{width:100%;max-height:86vh;border-radius:10px 10px 0 0;border-left:0;border-right:0;border-bottom:0;padding:20px 18px 6px}
    .defs-body dl{grid-template-columns:1fr}
    .defs-body dt{padding-bottom:2px}
    .defs-body dd{border-top:0;padding-top:0;padding-left:0}
    .dd-tip{display:none!important}
  }

  /* laptops: no room for the timeline column, so card and calculator share the full width */
  @media (min-width:1024px) and (max-width:1599px){
    .calc{grid-template-columns:minmax(220px,1fr) minmax(0,3.3fr)}
    .calc-body{max-width:none}
  }

  /* shorter screens: tighten everything so nothing hides below the frame */
  @media (min-width:1024px) and (max-height:820px){
    .services{padding-bottom:16px}
    .calc-terms{padding-top:12px;padding-bottom:8px}
    .calc-rest{margin-top:12px}
    .calc-body{padding:16px 20px;row-gap:12px}
    .calc-title{font-size:20px;grid-column:1;grid-row:1}
    .calc-sum{grid-column:2;grid-row:1 / -1}
    .calc-col{grid-row:2}
    .calc-step{margin:clamp(14px,3.3vh,27px) 0 8px}
    .sel,.opt{padding-top:8px;padding-bottom:8px}
    .calc-hint.on{margin-top:4px}
    .calc-sum .calc-kicker{margin-bottom:8px}
    .sum-range{font-size:24px}
    .sum-lines{margin-top:14px;gap:4px}
    .sum-lines li.discount{padding-top:5px}
    .sum-time{margin-top:12px}
    .calc-send{margin-top:16px;padding-top:10px;padding-bottom:10px}
    .sum-note{margin-top:6px}
    .sum-ask{padding-top:12px}
    .calc-start{padding:16px 18px}
    .calc-start-price{margin-top:12px}
    .calc-flow{margin:12px 0 10px;padding-top:10px;gap:6px}
    .calc-steps{padding-top:16px}
    .calc-steps .calc-kicker{margin-bottom:14px}
    .steps-total{margin-top:12px;padding-top:10px}
  }
  @media (min-width:1024px) and (max-height:700px){
    .calc-terms{padding-top:8px;padding-bottom:6px}
    .calc-body{padding:14px 20px;row-gap:8px}
    .calc-title{font-size:18px}
    .calc-step{margin:clamp(14px,3vh,20px) 0 7px}
    .calc-col > .calc-step:first-child{margin-top:4px}
    .sum-range{font-size:22px}
    .sum-lines{margin-top:14px}
    .calc-send{margin-top:16px}
    .calc-start{padding:16px 18px}
    .calc-start h3{font-size:16px}
    .calc-start-price{margin-top:12px}
    .calc-flow{margin:14px 0 12px;padding-top:12px;gap:8px}
    .calc-rest{margin-top:10px}
  }
  @media (min-width:1024px) and (max-height:620px){
    .calc-terms{padding-top:4px;padding-bottom:4px}
    .calc-body{padding:10px 16px;row-gap:6px}
    .calc-title{font-size:16px}
    .calc-step{margin:9px 0 5px}
    .sel,.opt{padding-top:6px;padding-bottom:6px;font-size:12px}
    .sum-range{font-size:19px}
    .sum-care{font-size:11px;margin-top:2px}
    .sum-lines{margin-top:8px;font-size:11px;gap:2px}
    .sum-time{margin-top:6px}
    .calc-send{margin-top:8px;padding-top:7px;padding-bottom:7px}
    .sum-note,.calc-hint{display:none}
    .sum-ask{padding-top:6px;font-size:12px}
    .calc-start{padding:12px 16px}
    .calc-start-price{margin-top:8px}
    .calc-flow{margin:8px 0 8px;padding-top:8px;gap:4px}
    .calc-rest{margin-top:6px}
  }

  /* contact on shorter screens: the taller "Work with me" side sets the card height, so tighten both */
  @media (min-width:1024px) and (max-height:800px){
    .contact-form{padding:14px 22px 14px}
    .form-tabs{margin-bottom:10px}
    .contact-form .field{margin-bottom:9px}
    .contact-form .field label{margin-bottom:3px}
    .contact-form .field input,.contact-form .fsel{padding-top:4px;padding-bottom:5px}
    .contact-form .field textarea{min-height:calc(2.4em + 10px);padding-top:4px}
    .collab-pitch{font-size:12.5px;line-height:1.45;margin-bottom:8px;min-height:0}
    .contact-form .send-row{padding-top:8px}
    .contact-form .send{padding-top:9px;padding-bottom:9px}
    .small-print{margin-top:6px}
  }
  @media (min-width:1024px) and (max-height:660px){
    .contact-form{padding:10px 20px 10px}
    .contact{padding-top:calc(var(--head-h) + 6px);padding-bottom:8px}
    .form-tabs{margin-bottom:6px}
    .contact-form .field{margin-bottom:6px}
    .contact-form .field textarea{min-height:calc(1.6em + 8px)}
    .collab-pitch{font-size:12px;margin-bottom:6px}
    .contact-form .send{padding-top:7px;padding-bottom:7px}
  }

  /* scroll hint — bottom right of the strip */
  .hint-row{position:absolute;right:var(--pad);bottom:100%;transform:translateY(50%);display:flex;justify-content:flex-end;pointer-events:none}
  body:not(.view-services):not(.view-vision):not(.view-about):not(.view-blog):not(.view-contact) .hint-row{pointer-events:auto}
  .hint{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
    font-weight:400;
    background-color:transparent;border:0;border-bottom:1.5px solid transparent;
    cursor:pointer;padding:4px 0 3px;
  }
  .hint svg{width:34px;height:12px;stroke:var(--ink);fill:none;stroke-width:1.4;flex:none}
  .hint svg,.cta svg{transition:transform .3s ease}
  .hint:hover svg,.hint:focus-visible svg,.cta:hover svg,.cta:focus-visible svg{transform:translateX(4px)}

  /* endless loop: Contact → Home */
  .loop-ic{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .hint svg.loop-ic{width:16px;height:16px;stroke-width:1.6}
  .hint:hover svg.loop-ic,.hint:focus-visible svg.loop-ic{transform:rotate(90deg)}
  #contactHintRow.armed .hint{border-bottom-color:var(--ink)}
  #contactHintRow.armed svg.loop-ic{animation:loopspin 1s ease-in-out infinite}
  @keyframes loopspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){#contactHintRow.armed svg.loop-ic{animation:none}}
  .loop-top{display:none}

  /* bottom nav */
  .nav-main{
    position:relative;
    margin-top:0;
    transition:margin-top var(--dur) var(--ease);
    width:100%;
    padding:clamp(22px,3.6vh,44px) var(--pad) 0;
    display:flex;justify-content:center;align-items:center;
    column-gap:clamp(22px,4vw,54px);
    font-size:clamp(14px,1.1vw,17px);
  }
  .nav-main::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(1000px,calc(100% - 2*var(--pad)));height:1px;background:var(--rule);
  }
  .nav-main a{padding-bottom:6px}
  .nav-main > .m-only{display:none}   /* My vision and Blog: only in the phone menu; on desktop they are tabs inside About */
  @media (max-width:1023px){ .nav-main > a.m-only{display:revert} }
  .nav-main a[aria-current]{border-bottom-color:var(--ink)}
  
  body.away .nav-main{margin-top:0}
  .nav-main .sep{width:4px;height:4px;border-radius:50%;background:var(--ink)}
  /* tiny grey notes tucked under the menu line, so they never collide with it */
  .foot-note{
    position:absolute;top:calc(100% + 4px);
    font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;line-height:1;
    color:color-mix(in srgb, var(--ink-soft) 80%, transparent);white-space:nowrap;
  }
  .foot-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
  .foot-note a:hover{color:var(--ink)}
  .foot-note.left{left:var(--pad)}
  .foot-note.right{right:var(--pad)}
  .menu-contacts{display:none}
  .site-foot{display:none}

  body.preload *,body.preload{transition:none!important}
  /* burger — desktop hides it */
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;background:none;border:0;padding:0;cursor:pointer}
  .burger span{display:block;height:1.5px;width:100%;background:var(--ink);transition:transform .3s var(--ease),opacity .2s ease}
  body.menu-open .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
  body.menu-open .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  /* "more info" panel — mobile only, replaces the hover tooltips */
  .svc-toggle{display:none}
  .svc-extra{display:none}

  /* ============ TABLET & MOBILE: one vertical page ============ */
  /* Home ⇄ Selected work without layout shift (CLS): the layout stays the same in both views,
     only transforms move. The work area always spans hero + strip rows; on Home the reel is
     slid down below the hero, and the site name shrinks with a scale instead of a new font size. */
  @media (min-width:1024px){
    .hero{grid-row:2;grid-column:1}
    .strip-wrap{grid-row:2 / 4;grid-column:1;padding-top:var(--head-h);pointer-events:none;justify-content:flex-start}
    .strip-wrap > .strip{margin-top:var(--strip-mt,0px)}
    body.away .strip-wrap{padding-top:var(--head-h)}
    .strip-wrap > .strip{pointer-events:auto}
    .strip{transform:translateY(var(--home-dy,0px))}
    body.view-work .strip{transform:none}
    .cap{max-height:48px;margin-bottom:12px}
    /* the number stays at the card's bottom edge through a transform, so it doesn't count as a shift */
    .card .num{top:0;bottom:auto;transform:translateY(calc(var(--h) - 100% - 18px))}
    .title{transform-origin:0 0;transition:transform var(--dur) var(--ease)}
    body.away .title{
      top:var(--title-top,0px);
      font-size:clamp(52px,min(7.6vw,13vh),128px);letter-spacing:-.045em;
      transform:translateY(var(--title-dy,0px)) scale(var(--title-k,.15));
    }
  }

  @media (max-width:1023px){
    html,body{height:auto;max-width:100%;overflow-x:hidden}
    html{scroll-padding-top:calc(var(--hdr) + 12px)}
    body{overflow-y:auto}
    .page{height:auto;display:block;padding:var(--hdr) 0 clamp(40px,8vh,80px)}

    /* header */
    .top{
      position:fixed;top:0;left:0;right:0;z-index:40;
      display:flex;justify-content:space-between;align-items:center;gap:16px;
      padding:14px var(--pad);background:var(--bg);
      border-bottom:1px solid transparent;
      transition:border-color .2s ease,background-color .35s ease;
    }
    body.scrolled .top{border-bottom-color:var(--rule)}
    .page{padding-top:var(--hdr)}
    .top .loc{margin-right:auto}
    .burger{display:flex}

    /* the site name goes back into the flow, above everything */
    .title{
      position:static;transform:none!important;white-space:normal;
      font-size:clamp(34px,9vw,64px);line-height:.98;
      padding:clamp(14px,3vh,26px) var(--pad) 0;
      transition:none;
    }
    body.away .title{font-size:clamp(34px,9vw,64px)}
    .title-ghost{display:none}

    /* every section is simply stacked */
    .hero{max-height:none!important;opacity:1!important;display:flex;flex-direction:column;padding:clamp(10px,2vh,20px) var(--pad) clamp(44px,9vh,80px)}
    .hero-head,.meta{display:contents}
    .role{order:1;margin-top:4px}
    .lead{order:2;margin-top:20px;font-size:16px;max-width:none}
    .cta{order:3;margin-top:22px;font-size:16px;align-self:flex-start}

    .strip-wrap{position:static;display:block;margin:0;padding:0}
    .work-head,.services-head,.vision-head,.about-head,.contact-head{
      position:static;opacity:1!important;transform:none!important;pointer-events:auto;
      max-height:none;font-size:clamp(26px,7vw,44px);line-height:1.05;
      margin:0 0 16px;padding:0 var(--pad);
    }
    .work-head h2,.services h2,.vision-head h2,.about-head h2,.contact-head h2{font-size:inherit;clip-path:none!important}
    .services,.vision,.about,.contact,.blog{
      position:static;opacity:1!important;transform:none!important;pointer-events:auto;
      display:block;padding:clamp(46px,9vh,84px) 0 0;
    }
    /* About tabs on a phone: one panel at a time, right under the tabs */
    .about-group{display:block;padding-top:clamp(46px,9vh,84px)}
    .about-group .about-head{opacity:1!important;pointer-events:auto}
    .about-group .about,.about-group .vision,.about-group .blog{padding-top:6px!important}
    .about-group:not([data-tab="about"]) .about,
    .about-group:not([data-tab="vision"]) .vision,
    .about-group:not([data-tab="blog"]) .blog{display:none!important}
    .ab-tabs{gap:22px;margin-top:10px}
    .ab-tabs a{font-size:16px}
    .blog-body{opacity:1!important;transform:none!important;padding:0 var(--pad)}
    .blog-lead{font-size:18px}
    .blog-list{grid-template-columns:1fr;gap:18px;margin-top:22px}
    .blog-list h3{font-size:17px}
    .blog-list p{font-size:14px}
    .sale{opacity:1!important;transform:none!important;margin:0 0 18px}

    /* horizontal reels stay horizontal — natural on a phone */
    .strip{
      padding:0 var(--pad) 4px;height:auto;flex:none;
      align-items:flex-end;gap:14px;
      scroll-snap-type:x proximity;scroll-padding-left:var(--pad);-webkit-overflow-scrolling:touch;
    }
    .slot{scroll-snap-align:start}
    .card{transform:none!important;--u:1px}
    .c-lumi{--w:82vw;--h:82vw}
    .c-flux{--w:82vw;--h:82vw}
    .c-trvl{--w:82vw;--h:82vw}
    .c-soon{--w:62vw;--h:74vw}
    .c-noma{--w:78vw;--h:74vw}
    .c-still{--w:38vw;--h:82vw}
    .c-arc{--w:78vw;--h:88vw}
    .c-lune{--w:78vw;--h:72vw}
    .c-henrik{--w:44vw;--h:86vw}
    .c-noir{--w:72vw;--h:66vw}
    .c-veld{--w:70vw;--h:70vw}
    .card .tag{font-size:clamp(17px,4.4vw,24px)}
    .cap{max-height:none!important;opacity:1!important;transform:none!important;margin-bottom:8px}

    /* services: everything visible, no hover needed */
    .calc{grid-template-columns:1fr;gap:20px;min-height:auto;max-height:none}
    .calc-body{grid-template-columns:1fr;grid-template-rows:auto;row-gap:18px;max-width:none}
    .services{display:block;overflow:visible}
    .calc-body,.calc-sum,.calc-start{max-height:none;overflow:visible}
    .calc-sum{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:16px}
    .calc-jump{margin-top:18px}
    .calc-steps{display:flex;padding-top:4px}
    .steps-flow{max-height:none}
    .steps-flow li{flex:none;padding-bottom:22px}
    .calc-start .calc-flow-card{display:none}
    .sum-ask{margin-top:0}
    .calc-terms{padding-bottom:14px;line-height:1.6}
    .dd-panel{position:static;width:auto;max-height:none;margin-top:6px;box-shadow:none;border-color:var(--rule)}
    .pick{flex-wrap:wrap}
    .calc-rest{flex-direction:column;gap:6px;margin-top:32px}
    .svc-strip{height:auto;padding:0 var(--pad) 4px;gap:14px;scroll-snap-type:x proximity;scroll-padding-left:var(--pad)}
    .svc,.svc:first-child{
      width:82vw;height:auto;opacity:1!important;transform:none!important;
      scroll-snap-align:start;padding:16px;
    }
    .svc-more{display:none}
    .svc-scroll{overflow:visible}
    .svc-fade{display:none}
    .i{display:none}
    .tip{
      cursor:pointer;
      color:var(--ink);-webkit-text-fill-color:var(--ink);
      text-decoration:underline;text-underline-offset:3px;
      text-decoration-thickness:1.5px;text-decoration-color:var(--ink);
    }
    .tip::after,.tip::before{display:none}
    .svc-toggle{
      display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
      margin-top:14px;padding:11px 0 0;border:0;border-top:1px solid var(--rule);
      background:none;color:var(--ink);cursor:pointer;text-align:left;
      font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    }
    .svc-toggle .sign{
      flex:none;width:15px;height:15px;position:relative;
    }
    .svc-toggle .sign::before,.svc-toggle .sign::after{
      content:"";position:absolute;left:2px;right:2px;top:7px;height:1.5px;background:var(--ink);
      transition:transform .3s var(--ease);
    }
    .svc-toggle .sign::after{transform:rotate(90deg)}
    .svc.open .svc-toggle .sign::after{transform:rotate(0deg)}
    .svc-extra{display:block;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
    .svc-extra dl{margin-top:12px}
    .svc-extra dt{font-size:12.5px;font-weight:500;margin-top:10px}
    .svc-extra dt:first-child{margin-top:0}
    .svc-extra dd{font-size:12px;line-height:1.45;color:var(--ink-soft);margin-top:2px}
    .svc-detail{
      position:static;transform:none!important;max-height:none;overflow:visible;
      margin-top:14px;padding:12px 0 0;border-top:1px solid var(--rule);
    }
    .services-foot{flex-direction:column;align-items:flex-start;gap:10px;padding:18px var(--pad) 0;opacity:1!important}
    .svc-rows li{white-space:normal}

    /* vision: text → hexagon → axis notes */
    .vision-body{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 var(--pad)}
    .vision-left{width:auto;max-width:none;opacity:1!important;transform:none!important;display:contents}
    .vision-claim{order:1;white-space:normal;font-size:clamp(18px,5vw,26px)}
    .vision-sub{order:2;max-width:none;margin-top:10px}
    .vision-lead{order:3;margin-top:22px}
    .presets{order:4;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;margin:14px 0 0;padding:1px}
    .preset{width:100%;text-align:center;padding:11px 8px;white-space:normal}
    .presets::-webkit-scrollbar{display:none}
    .vision-note{order:5;max-width:none;min-height:5.5em;margin-top:12px}
    .hex-wrap{order:6;width:100%;max-width:520px;margin:18px auto 0;opacity:1!important;transform:none!important}
    .about-body{display:block;max-height:none;opacity:1!important;transform:none!important;padding:0 var(--pad)}
    .about-photo{height:clamp(300px,100vw,460px);margin-bottom:20px}
    .about-photo img{object-position:50% 30%}
    .about-intro{font-size:18px}
    .about-meta{flex-direction:column;align-items:flex-start;gap:4px}
    .about-meta span::after{display:none}
    .about-meta .foot-cta{margin-left:0;margin-top:10px}
    .about-grid{grid-template-columns:1fr;gap:18px;margin-top:26px}
    .about{padding:clamp(46px,9vh,84px) 0 0!important}
    .axes{order:7;grid-template-columns:1fr;gap:12px;margin-top:26px}

    /* contact */
    .contact{display:block;padding-top:clamp(34px,7vh,60px);overflow:visible}
    .contact-form,.contact-side{max-height:none;overflow:visible}
    .contact-col{opacity:1!important;transform:none!important}
    .contact-form,.contact-side{width:auto;max-width:none;flex:none;margin:0 var(--pad)}
    .contact-side{margin-top:26px}
    .field-row{flex-direction:column;gap:0}
    .send-row{justify-content:stretch}
    .send{width:100%;min-width:0}
    .form-note{text-align:left}

    /* scroll hints belong to the desktop story */
    .hint-row,.svc-hint-row,.vision-hint-row{display:none}

    /* menu as a full-screen sheet */
    .nav-main{
      position:fixed;inset:0;z-index:30;margin:0;padding:0;
      flex-direction:column;justify-content:center;align-items:flex-start;
      gap:clamp(14px,3.4vh,26px);
      background:var(--bg);
      opacity:0;pointer-events:none;transform:translateY(-8px);
      transition:opacity .28s ease,transform .35s var(--ease);
    }
    .nav-main::before{display:none}
    .nav-main .sep{display:none}
    .foot-note{display:none}
    .nav-main a{font-size:clamp(26px,8vw,44px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;padding:0 var(--pad)}
    .nav-main a[aria-current]{border-bottom:0;text-decoration:underline;text-underline-offset:6px}

    /* contact details at the bottom of the menu sheet */
    .menu-contacts{
      order:9;                       /* under the menu items, not above them */
      display:flex;flex-direction:column;gap:8px;
      margin-top:clamp(22px,4.5vh,40px);padding:0 var(--pad);
    }
    .nav-main .menu-contacts a{min-height:24px;display:inline-flex;align-items:center;
      font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
      padding:0;border:0;color:var(--ink-soft);
      text-decoration:underline;text-underline-offset:3px;
    }

    /* footer after Contact */
    .site-foot{
      display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
      margin-top:clamp(40px,8vh,72px);padding:18px var(--pad) 0;
      border-top:1px solid var(--rule);
      font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
      color:var(--ink-soft);
    }
    .site-foot .brand{color:var(--ink)}
    .site-foot .links{display:flex;flex-wrap:wrap;gap:6px 14px}
    .site-foot .links a{text-decoration:underline;text-underline-offset:3px}
    .site-foot .links{flex-direction:column;align-items:flex-start;gap:8px;flex-basis:100%}
    .site-foot .ic-list a{text-decoration:none}
    .site-foot .foot-legal{display:flex;gap:14px}
    .site-foot .rights{flex-basis:100%;margin-top:4px;font-size:9px;color:color-mix(in srgb, var(--ink-soft) 80%, transparent)}

    /* endless loop: pull past the footer → back to the top */
    .loop-top{display:flex;justify-content:center;align-items:flex-start;min-height:34vh;padding:56px var(--pad) 40px}
    .loop-top button{
      display:inline-flex;align-items:center;gap:8px;
      background:none;border:0;padding:6px 0;cursor:pointer;color:var(--ink-soft);
      font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
    }
    .loop-top .loop-ic{stroke:var(--ink-soft);transition:transform .6s ease}
    .loop-top.go button{color:var(--ink)}
    .loop-top.go .loop-ic{stroke:var(--ink);transform:rotate(-360deg)}

    /* no hover on touch — show the CTA underlined by default */
    .cta{border-bottom:1.5px solid var(--ink)}
    body.menu-open .nav-main{opacity:1;pointer-events:auto;transform:none}
    .top{z-index:40}
    body.menu-open .loc,body.menu-open .dot{opacity:0;pointer-events:none;transition:opacity .2s ease}
    body.menu-open{overflow:hidden}
  }

  /* ============ TABLET only ============ */
  @media (min-width:768px) and (max-width:1023px){
    .c-lumi{--w:50vw;--h:50vw}
    .c-flux{--w:50vw;--h:50vw}
    .c-trvl{--w:50vw;--h:50vw}
    .c-soon{--w:34vw;--h:42vw}
    .c-noma{--w:52vw;--h:48vw}
    .c-still{--w:24vw;--h:52vw}
    .c-arc{--w:52vw;--h:58vw}
    .c-lune{--w:50vw;--h:46vw}
    .c-henrik{--w:28vw;--h:56vw}
    .c-noir{--w:48vw;--h:44vw}
    .c-veld{--w:46vw;--h:46vw}
    .svc,.svc:first-child{width:46vw}
    .axes{grid-template-columns:1fr 1fr;gap:12px 28px}
    .contact{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 40px;padding-left:var(--pad);padding-right:var(--pad)}
    .contact-head{flex:0 0 100%;padding:0;margin:0 0 16px}
    .contact-form{min-width:0}
    .contact-form{flex:1 1 60%;margin:0}
    .contact-side{flex:1 1 40%;margin:28px 0 0}
    .contact-head{width:100%}
    .vision-body{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
    .presets{display:flex;flex-wrap:wrap;gap:8px}
    .preset{width:auto;flex:0 0 auto;padding:10px 16px}
    .hex-wrap{order:6;width:60%;margin:22px auto 0}
    .field-row{flex-direction:row;gap:24px}
    .send{width:auto;min-width:190px}
    .send-row{justify-content:flex-end}
  }

  @media (prefers-reduced-motion:reduce){
    .sweep:hover{animation:none}
    .hint svg,.cta svg,.card,.card.soon .bar i::after,.card.soon,.card.soon::after,.tipbox,.title,.hero,.cap,.strip-wrap,.nav-main,.strip,.hint-row,.services,.services h2,.svc,.sale,.services-foot,.modal,.modal-box,.case-modal,.case-box,.case-head h3,.case-nav,.title .sweep,.flip-face,.contact-form,.contact-form.collab::before,.contact::before,.card.shot .open,.svc-hint-row,.vision-hint-row,.contact,.contact-head h2,.contact-col,.form-note,.vision,.vision-head h2,.vision-left,.about,.about-head h2,.about-body,.vision-note,.hex-wrap,.work-head,:root{transition:none;clip-path:none}
    .strip{scroll-behavior:auto}
  }