/* ===== self-hosted brand typography (OFL): Schibsted Grotesk / Fraunces / IBM Plex Mono ===== */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/schibsted-400-normal-latin-ext.65233324c912.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/schibsted-400-normal-latin.ba4038fc5cb5.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/schibsted-500-normal-latin-ext.65233324c912.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/schibsted-500-normal-latin.ba4038fc5cb5.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/schibsted-700-normal-latin-ext.65233324c912.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/schibsted-700-normal-latin.ba4038fc5cb5.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/schibsted-800-normal-latin-ext.65233324c912.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/schibsted-800-normal-latin.ba4038fc5cb5.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/fraunces-400-700-italic-latin-ext.53f8865644cd.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/fraunces-400-700-italic-latin.fa7ce081be5e.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plexmono-400-normal-latin-ext.8450d5944de2.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plexmono-400-normal-latin.79936b18df9f.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plexmono-500-normal-latin-ext.fa8d8838b94a.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plexmono-500-normal-latin.b1c8a895f5fd.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plexmono-600-normal-latin-ext.f2fe87d55f72.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plexmono-600-normal-latin.5a2ce7798732.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
    --bg:#060D0C; --bg-2:#091110; --elev:#0C1615;
    --line:rgba(210,240,233,.08); --line-2:rgba(210,240,233,.16);
    --ink:#EAF3F0; --ink-2:#93A39E; --muted:#7C8A84;
    --teal:#2CD4C8; --teal-2:#57ECDE; --teal-ink:#2CD4C8; --teal-dim:rgba(44,212,200,.12);
    --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
    --serif:"Fraunces",Georgia,"Times New Roman",ui-serif,serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-std:cubic-bezier(.4,0,.2,1);
    --wrap:1300px; --h:74px; --zoom:1;
  }
  /* Large / dense screens: the base type + 1240px column read small on 1080p+
     laptops (esp. DPR 1) and get lost on big monitors. A graduated root zoom
     scales the whole layout uniformly — like a browser zoom, but automatic —
     so type + measure stay proportional and comfortable. Media queries are
     evaluated on the true viewport (verified stable, no feedback loop). */
  @media (min-width:1500px){ :root{ zoom:1.09; --zoom:1.09 } }
  @media (min-width:1800px){ :root{ zoom:1.13; --zoom:1.13 } }
  @media (min-width:2400px){ :root{ zoom:1.20; --zoom:1.20 } }
  .invert{
    --bg:#EDF2F0; --bg-2:#F4F8F6; --elev:#FCFEFD;
    --line:rgba(7,20,17,.12); --line-2:rgba(7,20,17,.22);
    --ink:#0A1512; --ink-2:#42504B; --muted:#5B6A64; --teal-ink:#2CD4C8; --teal-dim:rgba(44,212,200,.12);
    background:var(--bg);color:var(--ink);
  }
  /* LIGHT THEME (whole page) */
  html[data-theme="light"]{
    --bg:#EDF2F0; --bg-2:#F4F8F6; --elev:#FCFEFD;
    --line:rgba(7,20,17,.12); --line-2:rgba(7,20,17,.22);
    --ink:#0A1512; --ink-2:#42504B; --muted:#5B6A64; --teal-ink:#2CD4C8; --teal-dim:rgba(44,212,200,.12);
  }
  /* in light theme, the .invert section flips to dark for contrast */
  html[data-theme="light"] .invert{
    --bg:#060D0C; --bg-2:#091110; --elev:#0C1615;
    --line:rgba(210,240,233,.08); --line-2:rgba(210,240,233,.16);
    --ink:#EAF3F0; --ink-2:#93A39E; --muted:#7C8A84; --teal-ink:#2CD4C8; --teal-dim:rgba(44,212,200,.12);
  }
  /* smooth cross-fade only while toggling */
  html.theming, html.theming *{transition:background-color .45s ease,border-color .45s ease,color .4s ease,fill .4s ease !important}
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","kern"}
  body.lock{overflow:hidden}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  ::selection{background:var(--teal);color:#04120F}
  :focus-visible{outline:1px solid var(--teal-ink);outline-offset:3px}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
  h1,h2,h3{letter-spacing:-.04em;line-height:.98;text-wrap:balance;font-weight:700}
  .teal{color:var(--teal-ink)}
  .mono{font-family:var(--mono)}
  /* serif-italic accent voice — used only for the ~word~ in line-reveal headings */
  .rl .teal{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.02em;padding-right:.06em}
  /* page-frame hairlines — drafted-on-a-grid detail */
  .frame{position:fixed;top:0;bottom:0;width:1px;background:var(--line);z-index:1;pointer-events:none}
  /* offset lands on the content edge; 100vw ignores :root zoom, so divide it back */
  .frame.l{left:calc((100vw / var(--zoom) - var(--wrap))/2)}
  .frame.r{right:calc((100vw / var(--zoom) - var(--wrap))/2)}
  @media (max-width:1000px){.frame{display:none}}

  /* scroll "spine" — an animated thread that trails down from the top-right (the X) as you scroll */
  .spine{position:fixed;top:88px;bottom:26px;right:calc((100vw / var(--zoom) - var(--wrap))/2);width:1px;z-index:40;pointer-events:none}
  /* on narrower screens the right frame line is off-screen — tuck the spine to a safe edge */
  @media (max-width:1300px){ .spine{right:clamp(14px,4vw,22px)} }
  .spine .rail{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--teal) 6%,transparent),var(--teal-ink));
    transform:scaleY(0);transform-origin:top;will-change:transform;transition:transform .14s ease-out}
  .spine .rail .pulse{position:absolute;left:-1px;width:4px;height:52px;top:-52px;
    background:linear-gradient(to bottom,transparent,var(--teal-2),transparent)}
  .spine .node{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4px 0 0 -4.5px;border-radius:50%;
    background:var(--teal);box-shadow:0 0 10px 1px color-mix(in srgb,var(--teal) 60%,transparent);
    opacity:0;transform:translateY(0);will-change:transform;transition:transform .14s ease-out,opacity .3s}
  .spine.active .node{opacity:1}

  /* ===== LOADER ===== */
  .loader{display:none;position:fixed;inset:0;z-index:300}
  .loader.show{display:block}
  .lpanel{position:absolute;left:0;right:0;height:50%;background:var(--bg);transition:transform .8s cubic-bezier(.76,0,.24,1)}
  .lpanel.top{top:0}.lpanel.bot{bottom:0}
  .loader.split .lpanel.top{transform:translateY(-100%)}
  .loader.split .lpanel.bot{transform:translateY(100%)}
  .lcore{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .5s,transform .7s cubic-bezier(.76,0,.24,1)}
  .loader.split .lcore{opacity:0;transform:scale(1.35)}
  .lmark{width:clamp(72px,12vw,104px);filter:drop-shadow(0 0 14px rgba(44,212,200,.25))}
  .lmark .lblade{opacity:0;animation:conv .7s cubic-bezier(.2,.7,.2,1) forwards}
  .lb1{animation-delay:.05s}.lb2{animation-delay:.17s}.lb3{animation-delay:.29s}.lb4{animation-delay:.41s}
  .lname{font-size:19px;font-weight:600;letter-spacing:.34em;text-transform:lowercase;color:var(--ink);opacity:0;animation:fadein .6s ease .5s forwards;padding-left:.34em}
  .lname span{color:var(--teal)}
  .lbar{position:absolute;bottom:0;left:0;height:2px;background:var(--teal);width:100%;transform:scaleX(0);transform-origin:left;animation:bar 1.1s ease forwards}
  @keyframes conv{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadein{to{opacity:1}}
  @keyframes bar{to{transform:scaleX(1)}}

  .label{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-ink)}
  .label::before{content:"";width:26px;height:1px;background:var(--line-2)}
  .btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;white-space:nowrap;will-change:transform;transition:transform .3s var(--ease-out),background .2s var(--ease-std),border-color .2s var(--ease-std),color .2s var(--ease-std)}
  .btn .ar{transition:transform .3s var(--ease-out)}.btn:hover .ar{transform:translateX(5px)}
  .btn-pri{background:var(--teal);color:#04120F}.btn-pri:hover{background:var(--teal-2)}
  .btn-ghost{color:var(--ink);border-color:var(--line-2)}.btn-ghost:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
  .lnk{display:inline-flex;align-items:center;gap:9px;color:var(--teal-ink);font-weight:600;font-size:15px}
  .lnk .ar{transition:transform .3s var(--ease-out)}.lnk:hover .ar{transform:translateX(5px)}

  .logo{display:inline-flex;align-items:center;gap:11px}
  .logo .mk{width:30px;height:30px;flex:0 0 auto}
  .logo .mk .spinner{transform-origin:50% 50%;transform-box:fill-box;transition:transform .7s var(--ease-out)}
  .logo:hover .mk .spinner{transform:rotate(90deg)}
  .logo .wm{font-size:20px;font-weight:600;letter-spacing:.18em;color:var(--ink);text-transform:lowercase}
  .logo .wm .o{color:var(--teal)}

  /* language switcher — borderless mechanical odometer */
  /* LANGUAGE — the code rolls vertically EN <-> PL; a teal tick marks the active code and
     sweeps wider on hover, echoing the nav-link underline. No box: mono glyph, hairline accent. */
  /* language dropdown (desktop — opens downward) */
  .langsw{position:relative;flex:0 0 auto}
  .langsw-trig{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);transition:color .3s var(--ease-out)}
  .langsw-trig:hover,.langsw.open .langsw-trig{color:var(--ink)}
  .langsw-chev{opacity:.6;transition:transform .3s var(--ease-out),opacity .3s}
  .langsw.open .langsw-chev{transform:rotate(180deg);opacity:1}
  .langsw-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:62px;margin:0;padding:5px;list-style:none;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),visibility .24s;z-index:60}
  .langsw.open .langsw-menu{opacity:1;visibility:visible;transform:none}
  .langsw-opt{display:block;width:100%;text-align:left;padding:7px 13px;border:0;background:none;cursor:pointer;text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);transition:color .2s,background .2s}
  .langsw-opt:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
  /* the active language is the trigger; the menu lists only the inactive ones */
  .langsw[data-active="en"] .langsw-opt[data-lang="en"],.langsw[data-active="pl"] .langsw-opt[data-lang="pl"],.langsw[data-active="de"] .langsw-opt[data-lang="de"]{display:none}
  /* language expander (mobile hamburger — opens sideways) */
  .m-lang{position:relative;display:inline-flex;align-items:center}
  .m-lang-opts{display:flex;align-items:center;gap:2px;max-width:0;opacity:0;overflow:hidden;transition:max-width .38s var(--ease-out),opacity .3s,margin-left .38s var(--ease-out)}
  .m-lang.open .m-lang-opts{max-width:180px;opacity:1;margin-left:8px}
  .m-lang-opt{border:0;background:none;cursor:pointer;text-decoration:none;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--muted);padding:6px 9px;white-space:nowrap;transition:color .2s}
  .m-lang-opt:hover{color:var(--ink)}
  /* active language stays on the trigger; expander lists only the inactive ones */
  .m-lang[data-active="en"] .m-lang-opt[data-lang="en"],.m-lang[data-active="pl"] .m-lang-opt[data-lang="pl"],.m-lang[data-active="de"] .m-lang-opt[data-lang="de"]{display:none}

  /* hairline divider — a drafting detail separating the instrument controls from the CTA */
  .hsep{width:1px;height:20px;background:var(--line);flex:0 0 auto;margin:0 3px}

  .grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  .progress{position:fixed;top:0;left:0;height:2px;background:var(--teal);z-index:210;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}

  /* ===== HEADER ===== */
  header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--h);display:flex;align-items:center;transition:background .35s,box-shadow .35s,border-color .35s}
  header::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
  header.scrolled::after{opacity:1}
  .hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
  .hnav{display:flex;align-items:center;gap:2px}
  .hnav a{position:relative;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:8px 13px;transition:color .35s var(--ease-out)}
  .hnav a b{font-size:.8em;color:var(--muted);font-weight:400;margin-right:7px;transition:color .35s var(--ease-out)}
  .hnav a::after{content:"";position:absolute;left:13px;right:13px;bottom:-6px;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
  .hnav a:hover{color:var(--ink)}.hnav a:hover::after{transform:scaleX(1)}
  .hnav a:hover b{color:var(--teal-ink)}
  .hnav a.on{color:var(--ink)}.hnav a.on b{color:var(--teal-ink)}.hnav a.on::after{transform:scaleX(1)}
  .hactions{display:flex;align-items:center;gap:10px}
  .burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:2px;background:transparent;cursor:pointer;position:relative;flex:0 0 auto}
  .burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);top:50%;transform-origin:center;transition:transform .4s var(--ease-out),opacity .25s var(--ease-out)}
  .burger span:nth-child(1){transform:translateY(-6px)}.burger span:nth-child(3){transform:translateY(6px)}
  body.menu-open .burger span:nth-child(1){transform:translateY(0) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(0) rotate(-45deg)}
  .mobile{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:calc(var(--h) + 18px) clamp(20px,7vw,48px) 32px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .32s,transform .32s,visibility .32s}
  body.menu-open .mobile{opacity:1;visibility:visible;transform:none}
  .mobile a.m-link{font-size:clamp(34px,9.5vw,52px);font-weight:700;letter-spacing:-.035em;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;opacity:0;transform:translateY(16px)}
  body.menu-open .mobile a.m-link{animation:mrise .5s cubic-bezier(.2,.7,.2,1) forwards}
  .mobile a:nth-child(2){animation-delay:.06s}.mobile a:nth-child(3){animation-delay:.12s}.mobile a:nth-child(4){animation-delay:.18s}
  .mobile a.m-link>span:last-child{color:var(--muted);font-family:var(--mono);font-size:13px;font-weight:500}
  .mobile a.m-link.on{color:var(--ink)}
  .mobile a.m-link.on>span:first-child{color:var(--teal-ink)}
  .mobile a.m-link.on>span:last-child{color:var(--teal-ink)}
  .mobile .m-cta{margin-top:auto;padding-top:26px}.mobile .m-meta{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.14em}
  /* mobile controls row */
  .m-ctl-row{display:flex;gap:16px;align-items:center;margin-top:28px;flex-wrap:wrap;opacity:0;transform:translateY(16px)}
  body.menu-open .m-ctl-row{animation:mrise .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.2s}
  /* borderless icon controls — same language as the top-menu icons (no frames, no labels) */
  .m-ctl{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:0;padding:0;background:none;cursor:pointer;color:var(--ink-2);transition:color .3s var(--ease-out);-webkit-tap-highlight-color:transparent}
  .m-ctl:hover,.m-ctl:active,.m-ctl:focus-visible{color:var(--teal-ink);outline:none}
  .m-ctl svg{width:21px;height:21px;flex:0 0 auto}
  .m-ctl .tf-ic{width:21px;height:21px}
  .m-ctl .m-ctl-code{font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--teal-ink)}
  /* mobile footer: socials + mail */
  .m-foot{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px;flex-wrap:wrap;opacity:0;transform:translateY(16px)}
  body.menu-open .m-foot{animation:mrise .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.28s}
  .m-foot .m-socials{display:inline-flex;gap:14px;align-items:center}
  .m-foot .m-socials a{color:var(--ink-2);transition:color .3s}
  .m-foot .m-socials a:hover{color:var(--teal-ink)}
  .m-foot .m-mail{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);transition:color .3s}
  .m-foot .m-mail:hover{color:var(--teal-ink)}
  body.menu-open .sub-root{opacity:0;pointer-events:none;transition:opacity .25s}
  @keyframes mrise{to{opacity:1;transform:none}}
  @media (max-width:940px){.hnav,.hactions .btn,.hsep{display:none}.burger{display:block}}
  @media (max-width:640px){.hactions #langsw,.hactions #themesw{display:none}}
  @media (max-width:380px){.logo .wm{font-size:17px}.hbar{gap:12px}}
  @media (min-width:941px){.mobile{display:none}}

  /* ===== HERO ===== */
  main{padding-top:var(--h)}
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:0}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.18))}
  html[data-theme="light"] .hero::after{display:none}
  /* first screen closes with the ticker: header + hero + ticker = 100svh */
  .hero .wrap{position:relative;z-index:2;min-height:calc(100svh / var(--zoom) - var(--h) - 51px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(30px,5vw,60px);padding-bottom:clamp(50px,7vw,90px)}
  .hero-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;margin-bottom:auto;padding-top:12px}
  .hero-top .r{text-align:right;line-height:1.9}
  /* cap at 140 so the second line ("Many possibilities." / "Wiele możliwości.")
     stays on ONE line inside the 1300px column — at 176 it wrapped to a third
     line on 1440-class screens and pushed the ticker past 100svh (the ≥1500 zoom
     tiers cap lower still, below). */
  .hero h1{font-size:clamp(56px,11.5vw,140px);letter-spacing:-.055em;line-height:.94;margin:8px 0 0;font-weight:700;font-kerning:normal}
  .hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:clamp(28px,4vw,44px)}
  .hero .sub{max-width:42ch;color:var(--ink-2);font-size:clamp(16px,1.8vw,19px);line-height:1.65}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap}
  .wmx{position:absolute;top:50%;right:-8%;width:min(62vw,720px);aspect-ratio:1;transform:translateY(-50%);z-index:1;opacity:.9;pointer-events:none}
  .wmx .blade{opacity:0}
  .wmx .ghost{fill:none;stroke:var(--line-2);stroke-width:.6}
  .wmx .constr{fill:none;stroke:var(--line);stroke-width:.35;stroke-dasharray:1 3}
  .hero-coords{position:absolute;top:0;bottom:0;right:clamp(20px,5vw,48px);z-index:2;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
  .hero-coords span{position:absolute;right:0;text-align:right;line-height:1.8}
  .hero-coords .c-tr{top:34%}
  .hero-coords .c-br{top:60%}
  @media (max-width:1180px){.hero-coords{display:none}}
  @media (max-width:940px){.wmx{width:80vw;right:-24%;opacity:.6}.hero h1{font-size:clamp(48px,15vw,90px)}}
  /* First-screen fit under the root zoom (1500/1800/2400 tiers): the whole
     composition lays out ×zoom, so at 176px the h1 wrapped to 3 lines and pushed
     the CTAs + ticker below the fold. Cap the display type so the headline stays
     two lines (EN + PL both clear the 1300px column) and tighten the vertical
     rhythm — header + hero + ticker now close at 100svh again, with the wrap's
     min-height:calc(100svh/var(--zoom)…) collapsing so the ticker sits flush. */
  @media (min-width:1500px){
    .hero h1{font-size:clamp(56px,8.4vw,132px)}
    .hero .wrap{padding-top:clamp(30px,4vw,48px);padding-bottom:clamp(40px,5vw,64px)}
    .hero-foot{margin-top:clamp(24px,3vw,36px)}
    .hero-top{padding-top:8px}
  }

  /* .14em bottom allowance keeps Fraunces-italic descenders (y, ą/ę ogonki)
     inside the clip window; the negative margin cancels it so line rhythm is
     unchanged. The reveal offset grows 110%→120% so the extra window never
     shows the line's own text peeking before its reveal. */
  .rl .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
  .rl .ln>i{display:block;font-style:normal;transform:translateY(120%);transition:transform .8s cubic-bezier(.18,.7,.15,1)}
  .rl.in .ln>i{transform:translateY(0)}
  .rl .ln:nth-child(2)>i{transition-delay:.09s}.rl .ln:nth-child(3)>i{transition-delay:.18s}
  .fade{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .fade.in{opacity:1;transform:none}

  .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:14px 0}
  .track{display:flex;width:max-content;animation:scroll 52s linear infinite}
  .track span{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
  .track span::after{content:"◆";color:var(--teal);font-size:7px;opacity:.7}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* anchor landing: place the sec-top hairline (02 / MODEL) just below the fixed header,
     i.e. swallow the section's own top padding when jumping (negative margin is intentional) */
  section{position:relative;padding:clamp(96px,13vw,180px) 0;scroll-margin-top:calc(var(--h) + clamp(18px,2.5vw,30px) - clamp(96px,13vw,180px))}
  .hero{scroll-margin-top:var(--h)}
  /* section-top boundary: a scroll-drawn hairline the index label sits on */
  .sec-top{position:relative;height:1px;margin-bottom:clamp(52px,7vw,84px)}
  .sec-top::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
  .sec-top.in::before{transform:scaleX(1)}
  .idx{position:absolute;top:0;right:0;transform:translateY(-50%);background:var(--bg);padding:0 0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--muted);z-index:2}
  .sec-head{display:grid;grid-template-columns:minmax(180px,1fr) 3fr;gap:32px;align-items:start;margin-bottom:clamp(52px,7vw,84px)}
  .sec-head .head-meta{display:flex;flex-direction:column;gap:14px}
  .sec-head .descr{font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1.7;color:var(--muted);text-transform:uppercase;max-width:26ch}
  .sec-head h2{font-size:clamp(36px,5.5vw,76px);letter-spacing:-.045em;line-height:.98;max-width:16ch}
  @media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:20px}}

  .mlist{border-top:1px solid var(--line-2)}
  .mrow{display:grid;grid-template-columns:88px 1fr 1.1fr auto;gap:28px;align-items:center;padding:30px 8px;border-bottom:1px solid var(--line);transition:background-color .45s var(--ease-out);position:relative;overflow:hidden}
  .mrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
  .mrow:hover,.mrow:focus-within{background:var(--elev)}
  .mrow:hover::before,.mrow:focus-within::before{transform:scaleY(1)}
  /* ghost numeral removed — it overlapped the row text on hover (the index is already shown by .num) */
  .mrow:hover h3,.mrow:focus-within h3{color:var(--ink)}
  .mrow:hover p,.mrow:focus-within p{color:var(--ink-2)}
  .mrow .num{font-family:var(--mono);font-size:14px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em}
  .mrow h3,.mrow p{transition:transform .55s var(--ease-out),color .45s var(--ease-out)}
  .mrow:hover h3,.mrow:hover p,.mrow:focus-within h3,.mrow:focus-within p{transform:translateX(12px)}
  .mrow h3{font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.025em;position:relative;z-index:1}
  .mrow p{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:38ch;position:relative;z-index:1}
  .mrow .ic{width:48px;height:48px;border-radius:2px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);transition:background .45s var(--ease-out),color .45s var(--ease-out),border-color .45s var(--ease-out);position:relative;z-index:1}
  .mrow:hover .ic,.mrow:focus-within .ic{background:var(--teal);color:#04120F;border-color:var(--teal)}
  .mrow .ic svg{width:22px;height:22px}
  @media (max-width:820px){.mrow{grid-template-columns:44px 1fr;gap:6px 16px;padding:26px 4px}.mrow p{grid-column:2}.mrow .ic{display:none}.mrow::after{display:none}.mrow:hover h3,.mrow:hover p,.mrow:focus-within h3,.mrow:focus-within p{transform:none}}

  .strip{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
  .vitem{position:relative;display:flex;align-items:center;gap:14px;padding:28px;border-left:1px solid var(--line)}
  .vitem:first-child{border-left:0;padding-left:0}
  .vitem::before{content:attr(data-n);position:absolute;top:10px;left:28px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--muted)}
  .vitem:first-child::before{left:0}
  .vitem svg{width:22px;height:22px;color:var(--ink-2);flex:0 0 auto}
  .vitem p{font-size:14px;line-height:1.3;color:var(--ink)}.vitem .mut{color:var(--muted)}
  @media (max-width:720px){.strip .wrap{grid-template-columns:1fr 1fr}.vitem:nth-child(odd){border-left:0;padding-left:0}.vitem:nth-child(odd)::before{left:0}}

  .prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,80px) clamp(48px,8vw,120px);max-width:920px;margin-left:auto}
  .principle{position:relative;padding-top:30px;border-top:1px solid var(--line-2)}
  .principle:nth-child(2),.principle:nth-child(4){transform:translateY(clamp(24px,4vw,56px))}
  .principle .k{font-family:var(--mono);font-size:34px;font-weight:300;color:transparent;-webkit-text-stroke:1px var(--line-2);letter-spacing:-.02em;line-height:1;transition:color .3s var(--ease-std),-webkit-text-stroke-color .3s var(--ease-std)}
  .principle:hover .k{color:var(--teal-ink);-webkit-text-stroke-color:transparent}
  .principle h3{font-size:20px;font-weight:600;letter-spacing:-.025em;margin:22px 0 10px}
  .principle p{color:var(--ink-2);font-size:14px;line-height:1.6}
  @media (max-width:820px){.prow{gap:0;max-width:none;margin-left:0}.principle{padding-top:26px}.principle:nth-child(2),.principle:nth-child(4){transform:none}.principle:nth-child(3),.principle:nth-child(4){border-top:1px solid var(--line);margin-top:26px;padding-top:26px}}
  @media (max-width:480px){.prow{grid-template-columns:1fr}.principle:nth-child(2){border-top:1px solid var(--line);margin-top:26px;padding-top:26px}}

  .cta-wrap{position:relative;border-top:1px solid var(--line-2);padding-top:clamp(44px,6vw,72px)}
  .cta-wrap h2{font-size:clamp(36px,5.5vw,76px);letter-spacing:-.045em;line-height:.98;max-width:14ch}
  .cta-wrap .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:36px}
  .cta-wrap p{color:var(--ink-2);max-width:38ch;line-height:1.65}
  .cta-wrap .acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .mailbig{display:inline-flex;align-items:baseline;gap:.35em;font-size:clamp(28px,5vw,64px);font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-top:clamp(28px,4vw,48px);line-height:1;
    background-image:linear-gradient(var(--teal-ink),var(--teal-ink));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;padding-bottom:.08em;transition:background-size .35s var(--ease-out),color .3s var(--ease-std)}
  .mailbig .ar{font-size:.5em;transition:transform .35s var(--ease-out)}
  .mailbig:hover{background-size:100% 3px}
  .mailbig:hover .ar{transform:translateX(8px)}

  footer{border-top:1px solid var(--line);background:var(--bg-2);padding-top:clamp(56px,7vw,84px);overflow:hidden}
  .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:36px}
  .fbrand p{color:var(--muted);font-size:14px;margin:18px 0 22px;max-width:30ch}
  .socials{display:flex;gap:10px}
  .socials a{width:38px;height:38px;border-radius:2px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:.2s}
  .socials a:hover{border-color:var(--teal-ink);color:var(--teal-ink);transform:translateY(-2px)}
  .fcol h3{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .fcol ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .fcol a,.fcol li{color:var(--ink-2);font-size:14px}.fcol a:hover{color:var(--teal-ink)}
  .fcol .addr{color:var(--muted);line-height:1.7}
  .bigword{font-size:clamp(70px,20vw,300px);font-weight:700;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:.6px var(--line);margin:clamp(40px,6vw,70px) 0 -.12em;user-select:none;white-space:nowrap}
  .fbar{max-width:var(--wrap);margin:0 auto;padding:22px clamp(20px,5vw,48px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.14em}
  @media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
  @media (max-width:480px){.fgrid{grid-template-columns:1fr}}

  @media (prefers-reduced-motion:reduce){
    .fade,.rl .ln>i{opacity:1!important;transform:none!important;transition:none}
    .wmx .blade{opacity:.85}.track{animation:none}.lmark .lblade{opacity:.9;animation:none}
    .sec-top::before{transform:scaleX(1)!important;transition:none}
    .mrow::before,.mrow::after,.mrow h3,.mrow p,.mrow .ic,.mailbig,.logo .mk .spinner,.principle .k{transition:none}
    .langsw .roll,.tf-ic,.tf-glow{transition:none}
    *{animation-duration:.001ms!important}
  }
  @media (prefers-reduced-motion:no-preference){
    .wmx .blade{animation:blade 1s cubic-bezier(.2,.7,.2,1) forwards}
    .wmx .b1{animation-delay:.2s}.wmx .b2{animation-delay:.35s}.wmx .b3{animation-delay:.5s}.wmx .b4{animation-delay:.65s}
    /* continuous life on the hero X */
    .wmx .constr-rot{transform-box:view-box;transform-origin:50px 50px;animation:xrot 80s linear infinite}
    .wmx .orbit{transform-box:view-box;transform-origin:50px 50px;animation:xorbit 11s linear infinite}
    .spine .pulse{animation:railpulse 1.9s linear infinite}
    .spine .node{animation:nodepulse 1.9s ease-in-out infinite}
  }
  @keyframes blade{from{opacity:0;transform:translateY(-26px)}to{opacity:.85;transform:translateY(0)}}
  @keyframes xrot{to{transform:rotate(360deg)}}
  @keyframes xorbit{to{transform:rotate(360deg)}}
  @keyframes railpulse{0%{top:-52px}100%{top:100%}}
  @keyframes nodepulse{0%,100%{box-shadow:0 0 8px 1px color-mix(in srgb,var(--teal) 55%,transparent)}50%{box-shadow:0 0 16px 3px color-mix(in srgb,var(--teal) 80%,transparent)}}

  /* ============================================================
     PRINT — treat the one-pager as a clean brochure / business card
     ============================================================ */
  /* ===== ACRONYM → LOGO (sticky scroll story) ===== */
  .acr{position:relative;height:calc(270vh / var(--zoom));background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .acr-sticky{position:sticky;top:0;height:calc(100vh / var(--zoom));height:calc(100dvh / var(--zoom));display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:0 clamp(20px,5vw,48px)}
  .acr-eyebrow{position:absolute;top:calc(var(--h) + clamp(14px,3vh,28px));left:50%;transform:translateX(-50%);z-index:4}
  .acr-stage{position:relative;display:grid;place-items:center;width:100%}
  .acr-letters{display:flex;gap:clamp(4px,2vw,26px);align-items:center;line-height:1;transform-origin:center;will-change:transform,opacity}
  /* --- letters: ghost outline → boot charge → solid --- */
  .acr-letter{position:relative;font-size:clamp(52px,15vw,180px);font-weight:800;letter-spacing:-.04em;color:var(--line-2);transition:color .4s var(--ease-out),transform .4s var(--ease-out),-webkit-text-stroke-color .5s var(--ease-out)}
  @supports (-webkit-text-stroke:1px red){
    .acr-letter{color:transparent;-webkit-text-stroke:1px var(--line-2)}
  }
  .acr-letter.on{transform:translateY(-.06em);-webkit-text-stroke-color:var(--teal);
    background:linear-gradient(0deg,var(--teal-ink) 50%,transparent 50%);background-size:100% 220%;background-position:0% 0%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .acr-letter.boot{animation:acrCharge .5s var(--ease-out) both}
  @keyframes acrCharge{from{background-position:0% 100%}to{background-position:0% 0%}}
  .acr-letter.done{color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke-color:transparent;background:none}
  /* fx overlay: corner brackets (::before) + scanline / done-tick (::after) */
  .acr-letter .fx{position:absolute;inset:0;pointer-events:none;opacity:0}
  .acr-letter.boot .fx,.acr-letter.done .fx{opacity:1}
  .acr-letter .fx::before{content:"";position:absolute;inset:-8% -12%;opacity:0;
    background:
      linear-gradient(var(--teal),var(--teal)) 0 0/16px 2px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 0 0/2px 16px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 100% 0/16px 2px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 100% 0/2px 16px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 0 100%/16px 2px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 0 100%/2px 16px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 100% 100%/16px 2px no-repeat,
      linear-gradient(var(--teal),var(--teal)) 100% 100%/2px 16px no-repeat}
  .acr-letter.boot .fx::before{animation:acrBrackets .5s var(--ease-out) both}
  @keyframes acrBrackets{0%{opacity:0;transform:scale(.8)}28%{opacity:1}82%{opacity:1}100%{opacity:0;transform:scale(1)}}
  .acr-letter .fx::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
    background:linear-gradient(90deg,transparent,var(--teal-2),transparent)}
  .acr-letter.boot .fx::after{animation:acrScan .5s var(--ease-std) both}
  @keyframes acrScan{0%{opacity:0;transform:translateY(-.1em)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(1em)}}
  /* completed letter gets a short teal tick (reuses the fx ::after) */
  .acr-letter.done .fx::after{top:auto;left:50%;right:auto;bottom:-.05em;width:16px;height:2px;
    background:var(--teal);opacity:1;transform:translateX(-50%) scaleX(0);transform-origin:center;
    animation:acrTick .4s var(--ease-out) .06s both}
  @keyframes acrTick{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}}
  /* glitch copies on the letter's own pseudos (data-text) */
  .acr-letter::before,.acr-letter::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
    -webkit-text-fill-color:var(--ink);color:var(--ink);-webkit-text-stroke:0;opacity:0;pointer-events:none}
  .acr-letter.glitch::before{text-shadow:2px 0 var(--teal-2),-2px 0 rgba(255,255,255,.75);animation:acrGlitchA .18s steps(1) both}
  .acr-letter.glitch::after{text-shadow:-2px 0 var(--teal-ink),2px 0 rgba(255,255,255,.5);animation:acrGlitchB .18s steps(1) both}
  @keyframes acrGlitchA{0%{opacity:1;clip-path:inset(0 0 64% 0);transform:translateX(5px)}33%{opacity:1;clip-path:inset(42% 0 30% 0);transform:translateX(-5px)}66%{opacity:1;clip-path:inset(76% 0 0 0);transform:translateX(3px)}100%{opacity:0;transform:translateX(0)}}
  @keyframes acrGlitchB{0%{opacity:1;clip-path:inset(30% 0 40% 0);transform:translateX(-5px)}33%{opacity:1;clip-path:inset(66% 0 6% 0);transform:translateX(5px)}66%{opacity:1;clip-path:inset(6% 0 80% 0);transform:translateX(-3px)}100%{opacity:0;transform:translateX(0)}}
  /* background X (dim, spinning) + orbiting balls; lights up & settles at the end */
  .acr-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .acr-letters{position:relative;z-index:2}
  .acr-x{position:absolute;top:50%;left:50%;width:clamp(200px,36vw,420px);transform:translate(-50%,-50%);will-change:transform}
  .acr-x .gx polygon{fill:none;stroke:var(--line-2);stroke-width:.6}
  .acr-x .tx{opacity:0;filter:drop-shadow(0 0 22px rgba(44,212,200,.5))}
  .acr-x .tx polygon{fill:var(--teal)}
  /* faint radar sweep disc behind the X */
  .acr-radar{position:absolute;top:50%;left:50%;width:46vw;height:46vw;transform:translate(-50%,-50%);border-radius:50%;
    background:conic-gradient(from 0deg,rgba(44,212,200,.07),transparent 28%);
    -webkit-mask:radial-gradient(circle,#000 66%,transparent 70%);mask:radial-gradient(circle,#000 66%,transparent 70%);
    will-change:transform;pointer-events:none;z-index:0;animation:acrRadar 24s linear infinite}
  @keyframes acrRadar{to{transform:translate(-50%,-50%) rotate(360deg)}}
  /* 3D gyroscope: rings tilt on X, sweep on Z at different speeds → elliptical ball paths */
  .acr-orbits{position:absolute;inset:0;will-change:opacity;perspective:900px;transform-style:preserve-3d;z-index:1}
  .orb{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(44,212,200,.1);transform-style:preserve-3d;animation:gyro linear infinite}
  .orb i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px 1px color-mix(in srgb,var(--teal) 65%,transparent)}
  .orb i.d2{top:auto;bottom:-4px}
  .orb.o1{width:clamp(240px,42vw,520px);height:clamp(240px,42vw,520px);animation-duration:15s}
  .orb.o2{width:clamp(340px,56vw,680px);height:clamp(340px,56vw,680px);animation-duration:24s;animation-name:gyro2}
  .orb.o3{width:clamp(180px,30vw,380px);height:clamp(180px,30vw,380px);animation-duration:9s}
  @keyframes gyro{from{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(360deg)}}
  @keyframes gyro2{from{transform:translate(-50%,-50%) rotateX(-58deg) rotateY(16deg) rotateZ(360deg)}to{transform:translate(-50%,-50%) rotateX(-58deg) rotateY(16deg) rotateZ(0)}}
  .acr-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;pointer-events:none;will-change:opacity,transform}
  .acr-logo .mk{width:clamp(52px,9vw,88px);filter:drop-shadow(0 0 26px rgba(44,212,200,.35))}
  .acr-wm{font-size:clamp(30px,6.5vw,66px);font-weight:600;letter-spacing:.16em;text-transform:lowercase;color:var(--ink)}
  .acr-wm .o{color:var(--teal)}
  .acr-tag{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .acr-cap{position:absolute;left:50%;bottom:clamp(48px,13vh,110px);transform:translateX(-50%);width:min(92%,44ch);max-width:44ch}
  .acr-word{display:block;font-size:clamp(22px,3.4vw,38px);font-weight:700;letter-spacing:-.025em;color:var(--ink);min-height:1.1em}
  .acr-desc{display:block;margin-top:12px;color:var(--ink-2);font-size:clamp(15px,1.9vw,19px);line-height:1.5;transition:opacity .5s var(--ease-out)}
  /* type-in cursor (word caption + finale tagline) */
  .acr-word.typing::after,.acr-tagline.typing::after{content:"▍";margin-left:1px;color:var(--teal);animation:acrCaret 1s steps(1) infinite}
  @keyframes acrCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
  /* finale tagline under the logo */
  .acr-tagline{display:block;margin-top:14px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-ink);min-height:1.2em}
  /* logo glow burst on finale */
  .acr-logo.burst .acr-wm{animation:acrGlow .9s var(--ease-out)}
  @keyframes acrGlow{0%{filter:drop-shadow(0 0 0 transparent)}30%{filter:drop-shadow(0 0 30px rgba(44,212,200,.85))}100%{filter:drop-shadow(0 0 8px rgba(44,212,200,.18))}}
  /* shockwave rings */
  .acr-shock{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:3}
  .acr-shock::before,.acr-shock::after{content:"";position:absolute;top:0;left:0;width:120px;height:120px;border-radius:50%;
    border:1.5px solid var(--teal-ink);opacity:0;transform:translate(-50%,-50%) scale(.2)}
  .acr-shock.go::before{animation:acrShock .9s var(--ease-out) forwards}
  .acr-shock.go::after{border-color:var(--teal-2);animation:acrShock .9s var(--ease-out) .12s forwards}
  @keyframes acrShock{0%{opacity:.75;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
  /* brief acceleration of background during finale */
  .acr-stage.rush .acr-radar{animation-duration:6s}
  .acr-stage.rush .orb{animation-duration:4s}
  @media (max-width:640px){.acr{height:240vh}.acr-cap{bottom:clamp(32px,9vh,64px)}.acr-eyebrow{top:calc(var(--h) + 12px)}.acr-radar{width:70vw;height:70vw}}
  /* reduced motion: letters fade straight to their state; no boot/scan/glitch/typing/shockwave */
  @media (prefers-reduced-motion:reduce){
    .acr-letter,.acr-letter.on,.acr-letter.done{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;background:none;animation:none!important}
    .acr-letter{color:var(--line-2)}
    .acr-letter.on{color:var(--teal-ink)}
    .acr-letter.done{color:var(--ink)}
    .acr-letter .fx,.acr-letter::before,.acr-letter::after{display:none}
    .acr-radar,.acr-shock,.orb{animation:none!important}
    .acr-shock{display:none}
    .acr-word.typing::after,.acr-tagline.typing::after{content:none}
    .acr-desc{transition:none}
  }

  .print-only{display:none}
  @media print{
    /* ink-friendly light palette regardless of on-screen theme */
    :root, .invert, html[data-theme="light"], html[data-theme="light"] .invert{
      --bg:#fff !important; --bg-2:#fff !important; --elev:#fff !important;
      --ink:#0B1512 !important; --ink-2:#33403b !important; --muted:#6b756f !important;
      --line:#e4e4e4 !important; --line-2:#c2c2c2 !important;
      --teal:#0B8F80 !important; --teal-2:#0B8F80 !important; --teal-ink:#0B8F80 !important; --teal-dim:rgba(11,143,128,.08) !important;
    }
    @page{ size:A4; margin:16mm 15mm; }
    html,body{ background:#fff !important; color:#0B1512 !important; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none !important; text-shadow:none !important; filter:none !important; animation:none !important; }

    /* hide interactive / decorative / screen-only chrome */
    .loader,.grain,.progress,.spine,.frame,.ticker,.acr,.wmx,.wmx-glow,.scrollcue,.bigword,
    .mobile,.burger,.hnav,.hactions,.theme-root,.langsw,
    .cta,.acts,.socials,.strip{ display:none !important; }

    /* reveal content hidden behind scroll/reveal animations */
    .fade{ opacity:1 !important; transform:none !important; }
    .rl .ln{ overflow:visible !important; }
    .rl .ln>i{ transform:none !important; opacity:1 !important; }
    .print-only{ display:block !important; }

    /* static brand lockup at the top */
    header{ position:static !important; height:auto !important; border-bottom:1px solid var(--line) !important; padding:0 0 10pt; margin-bottom:8pt; }
    header::after{ display:none !important; }
    main{ padding-top:0 !important; }
    .logo .mk{ width:26px;height:26px; }

    /* compact the on-screen giant scale down to paper */
    section{ padding:14pt 0 !important; break-inside:auto; }
    .hero{ border-bottom:1px solid var(--line) !important; }
    .hero::after{ display:none !important; } /* kill dark-theme vignette on paper */
    .hero .wrap{ min-height:auto !important; padding:8pt 0 14pt !important; display:block !important; }
    .hero-top{ margin-bottom:12pt !important; color:var(--muted) !important; }
    .hero h1{ font-size:34pt !important; line-height:1 !important; margin:6pt 0 0 !important; }
    .hero-foot{ margin-top:14pt !important; display:block !important; }
    .hero .sub{ max-width:70ch !important; font-size:11pt !important; }

    /* section heads: collapse the animated divider + grid into simple stacked labels */
    .sec-top{ height:auto !important; margin-bottom:10pt !important; break-after:avoid !important; page-break-after:avoid !important; }
    .sec-top::before{ display:none !important; }
    .sec-head{ break-before:avoid !important; page-break-before:avoid !important; }
    .idx{ position:static !important; display:inline-block !important; transform:none !important; margin:0 !important; }
    .sec-head{ display:block !important; margin-bottom:14pt !important; }
    .sec-head .descr{ margin:6pt 0 8pt !important; }
    .sec-head h2{ font-size:20pt !important; max-width:none !important; }

    /* keep related blocks whole — no ugly mid-block page breaks */
    .hero, .sec-head, .mrow, .principle, .vitem, .cta-wrap, .fbrand, .fcol{
      break-inside:avoid !important; page-break-inside:avoid !important; }

    /* model list → tidy print rows */
    .invert{ background:#fff !important; }
    .mrow{ grid-template-columns:24pt 1fr !important; gap:2pt 12pt !important; padding:9pt 0 !important; border-bottom:1px solid var(--line) !important; }
    .mrow:hover{ background:none !important; }
    .mrow h3{ font-size:13pt !important; }
    .mrow p{ grid-column:2 !important; max-width:none !important; font-size:10.5pt !important; }
    .mrow .ic{ display:none !important; }
    .mrow::before,.mrow::after{ display:none !important; }

    /* principles → clean 2-up, no offset */
    .prow{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12pt 24pt !important; max-width:none !important; margin:0 !important; border:0 !important; }
    .principle{ transform:none !important; padding:4pt 0 !important; border:0 !important; }
    .principle .k{ color:var(--teal-ink) !important; font-size:15pt !important; }
    .principle h3{ font-size:12pt !important; margin:4pt 0 3pt; }
    .principle p{ font-size:10pt !important; }

    /* contact: keep the big email as the card's contact hero */
    #kontakt{ padding:10pt 0 !important; }
    .cta-wrap{ border:1px solid var(--line-2) !important; background:#fff !important; padding:14pt !important; }
    .cta-wrap h2{ font-size:19pt !important; }
    .cta-wrap .row{ display:block !important; margin-top:6pt !important; }
    .cta-wrap p{ font-size:10.5pt !important; max-width:none !important; }
    .mailbig{ font-size:18pt !important; margin:8pt 0 2pt !important; color:var(--teal-ink) !important; background:none !important; }
    .mailbig .ar{ display:none !important; }

    /* footer → contact card; drop dead nav/legal link columns; keep it all together */
    footer{ padding-top:12pt !important; border-top:1px solid var(--line) !important; break-inside:avoid !important; page-break-inside:avoid !important; }
    .fgrid{ grid-template-columns:1.4fr 1fr !important; gap:14pt !important; }
    .fbrand p{ margin:10pt 0 0 !important; }
    .fcol:nth-child(2),.fcol:nth-child(3){ display:none !important; }
    .fbar{ border-top:1px solid var(--line) !important; padding-top:10pt !important; break-before:avoid !important; page-break-before:avoid !important; }
    a{ color:inherit !important; }
    .print-only a,.fcol a[href^="mailto"]{ color:var(--teal-ink) !important; }
  }


/* ===================== BLOG ===================== */
.blog-wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,52px) clamp(20px,5vw,48px) clamp(64px,10vw,120px);position:relative;z-index:2}
.blog-head{max-width:40ch;margin-bottom:clamp(40px,6vw,72px)}
.blog-head h1{font-size:clamp(40px,7vw,84px);letter-spacing:-.045em;line-height:1;font-weight:800;margin-top:20px}
.blog-head p{color:var(--ink-2);margin-top:20px;font-size:clamp(16px,2vw,20px)}
/* borderless editorial cards */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,4vw,56px);row-gap:clamp(56px,7vw,72px)}
.post-card{position:relative;display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:22px}
.post-card::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.post-card:hover::after{transform:scaleX(1)}
.pc-idx{font-size:12px;letter-spacing:.16em;color:var(--muted);transition:color .35s var(--ease-out)}
.post-card:hover .pc-idx{color:var(--teal-ink)}
.post-card .thumb{border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-top:16px}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) brightness(.72);transition:filter .45s var(--ease-out),transform .6s var(--ease-out)}
.post-card:hover .thumb img{filter:none;transform:scale(1.04)}
.post-card .pc-body{padding:20px 0 0}
.pc-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.post-card .date{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .35s var(--ease-out)}
.post-card:hover .date{color:var(--teal-ink)}
.post-card h2{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.025em;margin:0 0 12px;font-weight:800;line-height:1.12;transition:color .35s var(--ease-out)}
.post-card:hover h2{color:var(--teal-ink)}
.post-card .ex{color:var(--ink-2);font-size:15px;line-height:1.55}
.post-card .more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--teal-ink)}
.post-card .more .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.post-card:hover .more .ar{transform:translateX(5px)}
/* featured (first card, blog index only) */
.post-card.featured{grid-column:1/-1;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto auto;gap:0 clamp(24px,3.5vw,48px);align-items:center}
.post-card.featured .pc-idx{grid-column:1/-1;grid-row:1}
.post-card.featured .thumb{grid-column:1;grid-row:2;margin-top:16px}
.post-card.featured .pc-body{grid-column:2;grid-row:2}
.post-card.featured h2{font-size:clamp(30px,4vw,44px)}
@media (max-width:860px){.post-card.featured{display:flex;flex-direction:column;align-items:stretch}.post-card.featured .thumb{margin-top:16px}}
@media (max-width:720px){.post-grid{grid-template-columns:1fr}}

/* article */
.article{max-width:72ch;margin:0 auto}
.back{display:inline-flex;gap:8px;color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.08em;margin-bottom:30px;text-transform:uppercase}
.back:hover{color:var(--teal-ink)}
.article > .date{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.article h1{font-size:clamp(34px,6vw,62px);letter-spacing:-.04em;line-height:1.02;margin:16px 0 0;font-weight:800;text-wrap:balance}
.article .lead{color:var(--ink-2);font-size:clamp(17px,2.2vw,21px);margin-top:22px;line-height:1.5;max-width:60ch}
.article-body{margin-top:clamp(38px,5vw,60px);font-size:17px;line-height:1.75}
.article-body h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;margin:1.7em 0 .5em;font-weight:800}
.article-body h3{font-size:20px;margin:1.5em 0 .4em;font-weight:700}
.article-body p{margin:0 0 1.15em;color:var(--ink-2)}
.article-body a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.article-body ol{color:var(--ink-2);margin:0 0 1.15em 1.2em;line-height:1.7}
.article-body ol::marker,.article-body ol li::marker{color:var(--teal-ink);font-family:var(--mono)}
.article-body ul{list-style:none;margin-left:0;padding-left:0;color:var(--ink-2);line-height:1.7;margin-bottom:1.15em}
.article-body ul li{position:relative;padding-left:26px;margin-bottom:.5em}
.article-body ul li::before{content:"—";position:absolute;left:0;color:var(--teal-ink);font-family:var(--mono)}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:1.5em 0}
.article-body blockquote{position:relative;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.45;color:var(--ink);font-weight:400;padding-left:clamp(24px,4vw,40px);margin:2em 0}
.article-body blockquote::before{content:"\201C";position:absolute;left:0;top:-.15em;color:var(--teal-ink);font-family:var(--serif);font-size:2.6em;line-height:1}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* blog bilingual body toggle (mirrors data-en/data-pl mechanism) */
.lang-pl{display:none}
html[lang="pl"] .lang-pl{display:block}
html[lang="pl"] .lang-en{display:none}


/* ---- BLOG tag pill ---- */
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);border:1px solid color-mix(in srgb,var(--teal) 35%,transparent);border-radius:100px;padding:4px 10px;background:var(--teal-dim)}

/* article cover + meta */
.art-meta{display:flex;align-items:center;gap:14px;margin-top:8px}
.art-meta .rt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.article .cover{margin:clamp(28px,4vw,44px) 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.article .cover img{width:100%;height:auto;display:block}


/* ---- HOME journal snippet ---- */
#journal .jr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,52px)}
#journal .jr-title{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.035em;margin-top:18px;font-weight:800;line-height:1.02}
.post-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.post-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.post-grid.three{grid-template-columns:1fr}}


/* ===== ARTICLE (wide layout) ===== */
.article{max-width:none;margin:0}
.article .back{margin-bottom:28px}
.art-head{max-width:100%}
.art-head h1{max-width:20ch}
.art-head .lead{max-width:64ch}
.article-body{max-width:54rem}

/* full-width cover, banner-style, with reveal + sweep animation above */
.cover-block{margin:clamp(30px,4vw,50px) 0 clamp(10px,2vw,22px)}
.cover-block.fade{transform:none}
.cover-anim{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cover-anim .ca-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cover-anim .ca-line{position:relative;flex:1;height:1px;background:var(--line-2);overflow:hidden}
.cover-anim .ca-line i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--teal-ink),transparent);will-change:transform}
.article .cover{width:100%;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.article .cover img{width:100%;height:auto;display:block;clip-path:inset(0 101% 0 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1) .12s}
.cover-block.in .cover img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:no-preference){.cover-anim .ca-line i{animation:caSweep 2.4s linear infinite}}
@media (prefers-reduced-motion:reduce){.article .cover img{clip-path:none}}
@keyframes caSweep{to{transform:translateX(350%)}}


/* ===== contact page ===== */
.contact-page{position:relative}
.cp-inner{max-width:780px;position:relative;z-index:1}
.cp-title{font-size:clamp(38px,7vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:16px 0 0}
.cp-title .ln{display:block}
.cp-title .ln.teal{color:var(--teal-ink)}
.cp-intro{color:var(--ink-2);font-size:clamp(15px,1.5vw,18px);line-height:1.6;max-width:52ch;margin:26px 0 0}
.contact-page .mailbig{display:inline-flex;margin:30px 0 0}
.cp-actions{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin:22px 0 0}
/* ===== contact: full-width work area (form + details rail) ===== */
.cp-work{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:clamp(36px,6vw,96px);margin-top:clamp(56px,8vw,88px);align-items:start;position:relative;z-index:1}
.cp-work .cp-form-wrap{margin-top:0;max-width:none}
.cp-rail{position:sticky;top:calc(var(--h) + 24px);align-self:start}
.cp-rrow{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-block:17px}
.cp-rail .cp-rrow:first-of-type{margin-top:18px}
.cp-rk{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cp-rv{color:var(--ink-2);font-size:15px;line-height:1.5}
a.cp-rv{color:var(--ink);text-decoration:none;transition:color .3s}
a.cp-rv:hover{color:var(--teal-ink)}
.cp-socials{display:flex;gap:12px;margin-top:26px}
.cp-soc{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:color .3s,border-color .3s}
.cp-soc:hover{color:var(--teal-ink);border-color:var(--teal-ink)}
@media (max-width:860px){
  .cp-work{grid-template-columns:1fr;gap:clamp(40px,9vw,56px)}
  .cp-rail{position:static;top:auto}
  .cp-rail .cp-rrow:first-of-type{margin-top:16px}
}

/* ===== contact — quiet send-line ===== */
.env-wrap{position:absolute;top:clamp(20px,4vw,70px);right:clamp(-20px,0vw,30px);width:min(42vw,480px);aspect-ratio:1;z-index:0;pointer-events:none}
@media (max-width:980px){.env-wrap{display:none}}
.sendline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sl-arc{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.sl-ripple{stroke:var(--teal-ink);stroke-width:1;opacity:0}
.sl-plane{opacity:0}
.sl-plane path{stroke:var(--teal-ink);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(44,212,200,.35))}
.sl-sent{position:absolute;right:4%;top:6%;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sl-plane{offset-path:path("M40 340 C 150 330, 290 240, 368 60");offset-rotate:auto 35deg;animation:slFly 9s cubic-bezier(.45,.05,.35,1) infinite}
  .sl-ripple.r1{animation:slRipple 9s ease-out infinite}
  .sl-ripple.r2{animation:slRipple 9s ease-out .35s infinite}
  .sl-sent{animation:slSent 9s ease infinite}
}
@keyframes slFly{
  0%,8%{offset-distance:0%;opacity:0;transform:scale(1)}
  14%{opacity:.55}
  55%{opacity:.55}
  72%{offset-distance:100%;opacity:0;transform:scale(.55)}
  100%{offset-distance:100%;opacity:0}
}
@keyframes slRipple{
  0%,9%{r:3;opacity:0}
  12%{opacity:.3}
  30%{r:26;opacity:0}
  100%{r:26;opacity:0}
}
@keyframes slSent{
  0%,68%{opacity:0;transform:translateY(3px)}
  76%{opacity:.5;transform:translateY(0)}
  88%{opacity:.5}
  96%,100%{opacity:0}
}

/* ── Blog tag filter — segmented "index line" bar ────── */
.tagline-bar{position:relative;margin-bottom:clamp(32px,5vw,52px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl-track{display:flex;align-items:stretch}
.tl-item{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:15px 14px;font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-2);text-align:center;
  transition:color .35s var(--ease-out),background-color .35s var(--ease-out)}
.tl-item + .tl-item{border-left:1px solid var(--line)}
.tl-item:hover{color:var(--ink);background:var(--bg-2)}
.tl-item::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out)}
.tl-item:hover::after,.tl-item.on::after{transform:scaleX(1)}
.tl-item.on{color:var(--teal-ink)}
.tl-n{align-self:flex-start;margin-left:1px;font-size:10px;line-height:1.3;color:var(--teal-ink);letter-spacing:0}
.tl-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 8px 1px rgba(44,212,200,.55)}
.tl-item.on .tl-dot{display:inline-block}
@media (prefers-reduced-motion:no-preference){.tl-item.on .tl-dot{animation:stPulse 4s var(--ease-std) infinite}}
@media (max-width:720px){
  /* Clean single-axis horizontal scroller: pan-x + contained overscroll stop
     the bar drifting vertically while you swipe it sideways. */
  .tl-track{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
    touch-action:pan-x;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .tl-track::-webkit-scrollbar{display:none}
  .tl-item{flex:0 0 auto;padding:14px 22px}
  /* Left/right fade masks hint that the bar scrolls. The RIGHT fade is the
     scroll affordance; JS clears it (.tl-at-end) once you reach the end, and
     the LEFT fade only shows once you've scrolled away from the start
     (.tl-scrolled). Pure-CSS default keeps the right fade for no-JS. */
  .tagline-bar::before,.tagline-bar::after{content:"";position:absolute;top:0;bottom:0;width:38px;z-index:2;pointer-events:none;
    transition:opacity .3s var(--ease-out)}
  .tagline-bar::before{left:0;background:linear-gradient(to right,var(--bg),transparent);opacity:0}
  .tagline-bar::after{right:0;background:linear-gradient(to left,var(--bg),transparent);opacity:1}
  .tagline-bar.tl-scrolled::before{opacity:1}
  .tagline-bar.tl-at-end::after{opacity:0}
  /* One-time discovery nudge: the track eases a few px sideways and back so it
     visibly reads as scrollable. Runs once via .tl-nudge (added by JS). */
  @media (prefers-reduced-motion:no-preference){
    .tl-track.tl-nudge{animation:tlNudge 1.15s var(--ease-out) .45s 1}
  }
}
@keyframes tlNudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-22px)}60%{transform:translateX(-6px)}}

.taglink{transition:background .3s,color .3s}
.taglink:hover{background:var(--teal);color:#04120F}

.art-moretag{margin-top:clamp(32px,5vw,48px)}
.art-moretag a{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.art-moretag a b{color:var(--teal-ink);font-weight:600}
.art-moretag a .ar{transition:transform .35s var(--ease-out)}
.art-moretag a:hover{color:var(--ink)}
.art-moretag a:hover .ar{transform:translateX(5px)}

/* ===== SITE SEARCH ===== */
/* borderless glyph — a teal underline sweeps in on hover, matching the nav-link underline */
.searchsw{position:relative;width:30px;height:30px;flex:0 0 auto;border:0;border-radius:0;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .3s var(--ease-out)}
.searchsw:hover,.searchsw:focus-visible{color:var(--ink)}
.searchsw svg{display:block;transition:transform .35s var(--ease-out)}
.searchsw:hover svg{transform:scale(1.08)}
.searchsw::after{content:"";position:absolute;left:6px;right:6px;bottom:2px;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.searchsw:hover::after,.searchsw:focus-visible::after{transform:scaleX(1)}

/* search results page */
.search-page .blog-head{max-width:none}
.s-form{display:flex;gap:0;border-bottom:2px solid var(--line-2);max-width:560px;margin-top:26px;transition:border-color .3s}
.s-form:focus-within{border-color:var(--teal-ink)}
.s-input{flex:1;background:none;border:0;outline:0;color:var(--ink);font-family:var(--sans);font-size:clamp(18px,2vw,24px);padding:12px 0}
.s-input::placeholder{color:var(--muted)}
.s-go{background:none;border:0;color:var(--teal-ink);font-size:24px;cursor:pointer;padding:0 6px;transition:transform .3s var(--ease-out)}
.s-go:hover{transform:translateX(4px)}
.s-results{margin-top:clamp(28px,5vw,52px);display:flex;flex-direction:column}
.s-res{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:baseline;border-top:1px solid var(--line);padding:26px 8px;text-decoration:none;color:inherit;transition:background-color .45s var(--ease-out)}
.s-res::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.s-res:hover::after{transform:scaleX(1)}
.s-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted);transition:color .35s var(--ease-out)}
.s-res:hover .s-num{color:var(--teal-ink)}
.s-type{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:12px}
.s-title{display:block;font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.14;transition:color .35s var(--ease-out)}
.s-res:hover .s-title{color:var(--teal-ink)}
.s-ex{display:block;color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:11px;max-width:72ch}
.s-ar{font-family:var(--mono);font-size:20px;color:var(--teal-ink);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.s-res:hover .s-ar{opacity:1;transform:none}
.s-empty{border-top:1px solid var(--line);padding-top:32px;font-size:clamp(21px,3vw,34px);font-weight:700;letter-spacing:-.02em;color:var(--ink-2)}
.s-empty .q{color:var(--teal-ink)}
@media (max-width:640px){.s-res{grid-template-columns:44px 1fr;gap:14px}.s-ar{display:none}}

/* fullscreen search overlay */
.s-overlay{position:fixed;inset:0;z-index:250;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}
.s-overlay.open{opacity:1;pointer-events:auto}
.s-box{width:min(680px,86vw);transform:translateY(14px);transition:transform .45s var(--ease-out)}
.s-overlay.open .s-box{transform:none}
.s-box form{display:flex;border-bottom:2px solid var(--line-2);margin-top:18px}
.s-box form:focus-within{border-color:var(--teal-ink)}
.s-input.big{font-size:clamp(24px,4vw,40px);font-weight:600;letter-spacing:-.02em}
.s-close{position:absolute;top:26px;right:clamp(20px,5vw,48px);background:none;border:0;color:var(--muted);font-size:34px;cursor:pointer;line-height:1;transition:color .3s,transform .4s var(--ease-out)}
.s-close:hover{color:var(--teal-ink);transform:rotate(90deg)}
.s-hint{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============ Signal tab — newsletter subscription ============ */
.sub-root{position:fixed;left:0;right:auto;top:50%;z-index:120;transform:translateY(-50%)}

/* vertical tab docked to the left edge (reads top-to-bottom) */
.sub-tab{position:relative;display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);
  border:1px solid var(--line-2);border-left:0;border-radius:0 8px 8px 0;
  padding:14px 8px;cursor:pointer;
  transition:transform .35s var(--ease-out),color .3s var(--ease-std),border-color .3s var(--ease-std),opacity .35s var(--ease-out)}
.sub-tab:hover{transform:translateX(4px);color:var(--ink);border-color:var(--teal-ink)}
.st-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 10px 2px rgba(44,212,200,.6)}

/* open state: tab slides out to the left, panel drawer opens rightward */
.sub-root.open .sub-tab{transform:translateX(-100%);opacity:0;pointer-events:none}

.sub-panel{position:absolute;left:0;right:auto;top:50%;
  transform:translateY(-50%) translateX(-16px);
  width:min(400px,92vw);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-left:0;border-radius:0 14px 14px 0;
  padding:30px 32px;opacity:0;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--ease-out),opacity .4s var(--ease-std),transform .55s var(--ease-out)}
.sub-root.open .sub-panel{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0);
  transform:translateY(-50%) translateX(0)}

.sub-close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer;padding:0;
  transition:color .3s,transform .4s var(--ease-out)}
.sub-close:hover{color:var(--teal-ink);transform:rotate(90deg)}

.sub-h{font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin:14px 0 8px;color:var(--ink)}
.sub-p{color:var(--ink-2);font-size:14.5px;line-height:1.55}

.sub-form{display:flex;border-bottom:2px solid var(--line-2);margin-top:18px;
  transition:border-color .3s var(--ease-std)}
.sub-form:focus-within{border-color:var(--teal-ink)}
.sub-input{flex:1;background:none;border:0;outline:0;color:var(--ink);
  font-family:var(--sans);font-size:16px;padding:10px 0}
.sub-input::placeholder{color:var(--muted)}
.sub-go{background:none;border:0;color:var(--teal-ink);font-size:22px;cursor:pointer;
  padding:0 4px;transition:transform .3s var(--ease-out)}
.sub-go:hover{transform:translateX(4px)}

.sub-fine{margin-top:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sub-err{margin-top:12px;font-size:11px;color:var(--ink);
  border-left:2px solid var(--teal-ink);padding-left:8px}

.sub-done-state{padding:20px 0;text-align:center}
.sub-done-state .sub-h{margin-top:18px}
.sd-node{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 14px 3px rgba(44,212,200,.7)}
.sd-node::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  border-radius:50%;border:1px solid var(--teal-ink);transform:translate(-50%,-50%) scale(1);opacity:0}
.sub-done-state.reveal .sd-node::after{animation:sdRipple .9s var(--ease-out) 1}

@keyframes sdRipple{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes stPulse{0%,100%{transform:scale(1);box-shadow:0 0 10px 2px rgba(44,212,200,.6)}
  50%{transform:scale(1.35);box-shadow:0 0 15px 4px rgba(44,212,200,.85)}}

@media (prefers-reduced-motion:no-preference){
  .st-dot{animation:stPulse 4s var(--ease-std) infinite}
}
@media (prefers-reduced-motion:reduce){
  .sub-tab,.sub-panel,.sub-go,.sub-close{transition:none}
  .sub-done-state.reveal .sd-node::after{animation:none}
}

@media (max-width:640px){
  .sub-root{display:none}
  .sub-tab{padding:8px 5px;font-size:9px;letter-spacing:.2em}
  .sub-root.open .sub-tab{transform:translateX(-100%)}
  .sub-tab:hover{transform:translateX(4px)}
  .sub-panel{left:0;right:auto;top:auto;bottom:0;transform:translateY(0) translateX(-16px);
    width:94vw;border-radius:0 14px 14px 0}
  .sub-root.open .sub-panel{transform:translateY(0) translateX(0)}
  /* clear the left-docked tab so it never overlaps content text */
  .wrap,.blog-wrap{padding-left:calc(clamp(20px,5vw,48px) + 28px)}
}

/* ============ Theme tab — light/dark, docked to the RIGHT edge ============ */
/* Same construction as the Subscribe tab (left edge), mirrored: a vertical mono tab
   with a teal "thread" accent on its docked edge that echoes the scroll spine. It is a
   direct toggle (no drawer) — clicking flips data-theme via the existing theme logic. */
/* THEME toggle — a small borderless glowing sun/moon icon in the header actions.
   Sun in light, moon in dark; cross-swap + a soft teal glow so the frameless icon
   still reads as clickable. Reuses id="themesw" so the existing theme logic drives it. */
.theme-fab{position:relative;display:grid;place-items:center;
  width:34px;height:30px;flex:0 0 auto;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--teal);
  -webkit-tap-highlight-color:transparent}
.theme-fab:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:50%}

.tf-glow{position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 55%,transparent) 0%,transparent 68%);
  filter:blur(1.5px);opacity:.42}
.theme-fab:hover .tf-glow,.theme-fab:focus-visible .tf-glow{opacity:.9}

/* sun + moon share the same spot and cross-fade/rotate between themes */
.tf-ic{position:absolute;width:18px;height:18px;color:var(--teal);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--teal) 65%,transparent));
  transition:opacity .4s var(--ease-std),transform .5s cubic-bezier(.5,1.4,.4,1)}
.tf-sun{opacity:0;transform:rotate(-50deg) scale(.5)}
.tf-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .tf-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="light"] .tf-moon{opacity:0;transform:rotate(50deg) scale(.5)}

@media (prefers-reduced-motion:no-preference){ .tf-glow{animation:tfPulse 3.8s var(--ease-std) infinite} }
@keyframes tfPulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){ .tf-ic,.tf-glow{transition:none;animation:none} }

.m-ctl .m-ctl-theme{width:15px;height:15px}

/* secondary trigger links (blog index / journal) */
.sub-trigger{margin-top:clamp(24px,4vw,40px)}
.sub-trigger a{display:inline-flex;gap:8px;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .3s}
.sub-trigger a::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--teal);flex:0 0 auto;box-shadow:0 0 8px 1px rgba(44,212,200,.55)}
.sub-trigger a .ar{transition:transform .35s var(--ease-out)}
.sub-trigger a:hover{color:var(--ink)}
.sub-trigger a:hover .ar{transform:translateX(5px)}
.jr-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.jr-actions .sub-trigger{margin-top:0}

/* ===== contact — newsletter band ===== */
.cp-news{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-top:clamp(36px,5vw,56px);position:relative}
.cpn-head{display:flex;align-items:center;gap:12px}
.cpn-head .st-dot{position:static}
.cpn-h{font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:16px 0 0}
.cpn-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--teal-ink);padding-right:.06em}
.cpn-p{color:var(--ink-2);font-size:clamp(14.5px,1.4vw,17px);line-height:1.6;max-width:52ch;margin:14px 0 0}
.cpn-live{margin-top:26px;max-width:460px}
.cpn-form{width:100%}
.cp-news .sub-fine{margin-top:12px}
.cpn-done{display:flex;align-items:center;gap:14px;margin-top:30px}
.cpn-done[hidden]{display:none}
.cpn-done-t{font-weight:700;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.01em;color:var(--ink)}

/* ================= HOME journal — cover deck (.deck/.dk-*) ================= */
.deck{display:flex;height:clamp(500px,54vw,680px);margin-top:clamp(30px,4vw,46px)}
.dk-card{position:relative;flex:1 1 0;min-width:64px;border-radius:16px;overflow:hidden;margin-left:-26px;background:var(--elev);
  box-shadow:0 22px 48px rgba(0,0,0,.38);
  transition:flex-grow .65s var(--ease-out);
  will-change:flex-grow;outline-offset:-2px}
.dk-card:first-child{margin-left:0}
html[data-theme="light"] .dk-card{box-shadow:0 22px 44px rgba(7,20,17,.22)}

/* expansion logic — first card expanded by default, hover moves the active slot */
.dk-card.act{flex-grow:3.2}
.deck:hover .dk-card.act:not(:hover){flex-grow:1}
.dk-card:hover,.dk-card:focus-visible{flex-grow:3.2;z-index:4}

/* cover image */
.dk-img{position:absolute;inset:0}
.dk-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.45) brightness(.5) saturate(.9);
  transition:filter .45s var(--ease-out)}
.dk-card.act .dk-img img,.dk-card:hover .dk-img img,.dk-card:focus-visible .dk-img img{
  filter:grayscale(0) brightness(.82)}

/* legibility scrim (neutral black, both themes) */
.dk-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 40%,rgba(0,0,0,.78) 100%)}

/* teal underline */
.dk-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(44,212,200,.6);
  transition:transform .5s var(--ease-out)}
.dk-card.act .dk-line,.dk-card:hover .dk-line,.dk-card:focus-visible .dk-line{transform:scaleX(1)}

/* index */
.dk-idx{position:absolute;top:18px;left:20px;font-size:12px;letter-spacing:.16em;
  color:rgba(255,255,255,.72);transition:color .4s var(--ease-out);z-index:2}
.dk-card.act .dk-idx,.dk-card:hover .dk-idx,.dk-card:focus-visible .dk-idx{color:var(--teal)}

/* collapsed-state vertical title */
.dk-tvert{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;font-weight:700;font-size:clamp(15px,1.3vw,19px);letter-spacing:.01em;
  color:rgba(255,255,255,.92);white-space:nowrap;max-height:70%;overflow:hidden;text-overflow:ellipsis;
  opacity:1;transition:opacity .35s var(--ease-out);z-index:2;pointer-events:none}
.dk-card.act .dk-tvert,.dk-card:hover .dk-tvert,.dk-card:focus-visible .dk-tvert{opacity:0}

/* expanded-state body */
.dk-body{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;color:#fff;z-index:2;pointer-events:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease-out) .1s,transform .45s var(--ease-out) .1s}
.dk-card.act .dk-body,.dk-card:hover .dk-body,.dk-card:focus-visible .dk-body{opacity:1;transform:translateY(0)}
.dk-body .dk-meta{display:flex;align-items:center;gap:12px}
.dk-body .date{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.dk-body .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.25);border-radius:999px;padding:3px 9px}
.dk-body h3{font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.12;margin:10px 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dk-ex{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dk-more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-2)}
.dk-more .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.dk-card.act .dk-more .ar,.dk-card:hover .dk-more .ar,.dk-card:focus-visible .dk-more .ar{transform:translateX(5px)}

/* staggered entrance (container reveal via .fade.in) — stagger applies only to the
   entrance (opacity/transform); flex-grow always animates with zero delay so hover stays snappy */
.deck.fade .dk-card{--d:0s;opacity:0;transform:translateY(24px);
  transition:opacity .7s ease var(--d),transform .8s var(--ease-out) var(--d),flex-grow .65s var(--ease-out)}
.deck.fade.in .dk-card{opacity:1;transform:none}
.deck.fade .dk-card:nth-child(1){--d:.05s}
.deck.fade .dk-card:nth-child(2){--d:.15s}
.deck.fade .dk-card:nth-child(3){--d:.25s}
.deck.fade .dk-card:nth-child(4){--d:.35s}

/* mobile — swipe snap carousel, everything readable without hover */
@media (max-width:760px){
  .deck{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 4px 18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .deck::-webkit-scrollbar{display:none}
  .dk-card{flex:0 0 76vw;max-width:340px;height:min(118vw,480px);margin-left:0;scroll-snap-align:center}
  .dk-img img{filter:grayscale(0) brightness(.72);transform:none}
  .dk-card.act .dk-img img{filter:grayscale(0) brightness(.85);transform:none}
  .dk-card:not(.act) .dk-img img{filter:grayscale(.2) brightness(.6)}
  .dk-tvert{display:none}
  .dk-body{opacity:1;transform:none}
  .dk-line{transform:scaleX(0)}
  .dk-card.act .dk-line{transform:scaleX(1)}
  .dk-idx{color:rgba(255,255,255,.72)}
  .dk-card.act .dk-idx{color:var(--teal)}
  .deck.fade .dk-card{transition:opacity .7s ease,transform .8s var(--ease-out)}
}

/* reduced motion — jump to states, no expansion/scale/entrance animation */
@media (prefers-reduced-motion: reduce){
  .dk-card,.dk-img img,.dk-line,.dk-body,.dk-tvert,.dk-idx,.dk-more .ar,.deck.fade .dk-card{transition:none!important}
  .deck.fade .dk-card{opacity:1!important;transform:none!important}
  .dk-card:hover,.dk-card:focus-visible,.deck.fade.in .dk-card:hover,.deck.fade.in .dk-card:focus-visible{transform:none!important}
}

/* desktop: when hovering the deck, the default .act card reverts to collapsed visuals */
@media (min-width:761px){
  .deck:hover .dk-card.act:not(:hover) .dk-body{opacity:0;transform:translateY(18px)}
  .deck:hover .dk-card.act:not(:hover) .dk-tvert{opacity:1}
  .deck:hover .dk-card.act:not(:hover) .dk-line{transform:scaleX(0)}
  .deck:hover .dk-card.act:not(:hover) .dk-idx{color:rgba(255,255,255,.72)}
  .deck:hover .dk-card.act:not(:hover) .dk-img img{filter:grayscale(.45) brightness(.5) saturate(.9);transform:scale(1.02)}
}

/* ===== HOME — gentle full-page section snapping (proximity, no scroll hijack) =====
   Snap points on: hero, model, approach, journal, contact.
   The acronym section (#meaning, scroll-driven animation) and the footer stay free.
   snap-type is enabled via JS only on the home page (html.snap-home). */
html.snap-home{scroll-snap-type:y proximity}
html.snap-home .hero{scroll-snap-align:start;scroll-snap-stop:normal}
html.snap-home #model,
html.snap-home #podejscie,
html.snap-home #journal{scroll-snap-align:start}
html.snap-home #kontakt{scroll-snap-align:start}
/* contact becomes a centered full-page finale:
   section boundary line (04 / CONTACT) pinned at top, content centered in the rest */
#kontakt{min-height:calc(100svh / var(--zoom) - var(--h));display:flex;padding-block:clamp(28px,4vh,48px) clamp(40px,6vh,72px);scroll-margin-top:var(--h)}
#kontakt>.wrap{width:100%;display:flex;flex-direction:column}
#kontakt .sec-top{margin-bottom:0}
#kontakt .cta-wrap{border-top:0;padding-top:0;margin:auto 0}
/* the deck section can be tall on short screens — never trap it */
@media (max-height:760px){
  html.snap-home #journal{scroll-snap-align:none}
}

/* ---- article social share (blog_page) ---- */
.art-share{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,4vw,40px);flex-wrap:wrap}
.ash-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ash-btns{display:flex;gap:10px}
.ash-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);background:transparent;cursor:pointer;transition:border-color .3s var(--ease-out),color .3s,transform .3s var(--ease-out)}
.ash-btn:hover{border-color:var(--teal-ink);color:var(--teal-ink);transform:translateY(-2px)}
.ash-copied{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}

/* ---- contact form (contact_page) ---- */
.cp-form-wrap{margin-top:clamp(48px,7vw,72px);max-width:640px}
.cp-form{margin-top:22px}
.cp-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.cpf-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:560px){.cpf-row{grid-template-columns:1fr}}
.cpf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.cpf-field label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cpf-input{background:none;border:0;border-bottom:2px solid var(--line-2);outline:0;color:var(--ink);font-family:var(--sans);font-size:16px;padding:8px 0;transition:border-color .3s;border-radius:0}
.cpf-input:focus{border-color:var(--teal-ink)}
.cpf-input::placeholder{color:var(--muted)}
.cpf-ta{resize:vertical;min-height:96px;line-height:1.55}
.cp-form .sub-err{margin-bottom:14px}
.cp-form .btn{margin-top:4px}
.cpf-done{display:flex;gap:16px;align-items:flex-start;margin-top:26px}
.cpf-done[hidden]{display:none}
.cpf-done-t{font-size:clamp(19px,2vw,24px);font-weight:800;letter-spacing:-.02em}
.cpf-done-p{color:var(--ink-2);font-size:14.5px;margin-top:4px}

/* contact page: contain decorative sonar beacon so nothing bleeds past the right edge and creates a horizontal scrollbar at narrow widths (broke burger/header alignment) */
.contact-page{overflow-x:clip}

/* hidden attr must win over display:grid (native share button on unsupported browsers) */
.ash-btn[hidden]{display:none}

/* ===== article: "the thread finishes the page" (.art-thread) — spine continuation into the footer, one-shot ===== */
.art-thread{position:absolute;right:0;bottom:-44px;width:132px;height:clamp(90px,12vw,150px);pointer-events:none;z-index:0}
@media (max-width:1240px){.art-thread{right:clamp(14px,4vw,22px)}}
/* vertical continuation of the spine line */
.at-line{position:absolute;right:0;top:0;bottom:1px;width:1px;background:linear-gradient(to bottom,color-mix(in srgb,var(--teal) 10%,transparent),var(--teal-ink));transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease-out)}
/* horizontal sign-off flourish, drawn leftward */
.at-turn{position:absolute;right:0;bottom:0;width:120px;height:1px;background:linear-gradient(to left,var(--teal-ink),color-mix(in srgb,var(--teal) 15%,transparent));transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out) .85s}
/* node at the corner joint */
.at-node{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:0}
.art-thread.on .at-line{transform:scaleY(1)}
.art-thread.on .at-turn{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .art-thread.on .at-node{animation:atNodeIn 1.1s var(--ease-out) 1.45s both,atNodeBreath 6s ease-in-out 2.6s infinite}
}
@keyframes atNodeIn{0%{opacity:0;transform:scale(0);box-shadow:0 0 0 0 transparent}45%{opacity:1;transform:scale(1.4);box-shadow:0 0 16px 4px color-mix(in srgb,var(--teal) 65%,transparent)}100%{opacity:1;transform:scale(1);box-shadow:0 0 8px 1px color-mix(in srgb,var(--teal) 55%,transparent)}}
@keyframes atNodeBreath{0%,100%{box-shadow:0 0 5px 1px color-mix(in srgb,var(--teal) 35%,transparent)}50%{box-shadow:0 0 11px 2px color-mix(in srgb,var(--teal) 55%,transparent)}}
@media (prefers-reduced-motion:reduce){
  .at-line{transform:scaleY(1)}
  .at-turn{transform:scaleX(1)}
  .at-node{opacity:1;box-shadow:0 0 7px 1px color-mix(in srgb,var(--teal) 45%,transparent);animation:none}
}

/* ===== contact: "messages in transit" (.cp-inbox) — the big address receives a message ===== */
.mailbig-wrap{position:relative;display:inline-block;margin-top:30px}
.contact-page .mailbig-wrap .mailbig{margin:0}
/* glint sweep overlay across the address */
.cpi-glint{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:3px}
.cpi-glint i{position:absolute;top:0;bottom:0;left:-25%;width:60px;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal) 20%,transparent),color-mix(in srgb,var(--ink) 12%,transparent),transparent);opacity:0}
/* the message dot that glides along the underline into the address */
.cpi-dot{position:absolute;left:0;bottom:-2px;width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:0;transform:translateX(0);pointer-events:none}
/* ghost draft line under the underline */
.cp-inbox{position:absolute;left:0;top:calc(100% + 7px);display:inline-flex;align-items:center;font-size:12px;line-height:1;color:var(--muted);white-space:nowrap;letter-spacing:.01em;pointer-events:none;opacity:0}
.cpi-text{display:inline-block;transform-origin:right center}
.cpi-caret{display:inline-block;width:2px;height:13px;margin-left:2px;background:var(--teal);vertical-align:middle;animation:cpiBlink 1.05s steps(1,end) infinite}
@keyframes cpiBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes cpiGlint{0%{left:-25%;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:115%;opacity:0}}
@keyframes cpiArrow{0%,100%{transform:translateX(0)}45%{transform:translateX(6px)}}
.mailbig-wrap.cpi-glinting .cpi-glint i{animation:cpiGlint .7s var(--ease-out)}
.mailbig-wrap.cpi-glinting .mailbig .ar{animation:cpiArrow .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.cp-inbox,.cpi-dot,.cpi-glint{display:none}}

/* ===== article prev/next — "gateway portals" (.art-nav / .gw) ===== */
.art-nav{display:flex;position:relative;z-index:1;margin-top:clamp(48px,7vw,84px);height:clamp(190px,22vw,270px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-sizing:border-box}
.gw{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;text-decoration:none;transition:flex-grow .6s var(--ease-out)}
.gw-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.gw-bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;filter:grayscale(.5) brightness(.55);transform:scale(1.08);transition:opacity .6s var(--ease-out),filter .6s var(--ease-out),transform 2.5s var(--ease-out)}
.gw:hover .gw-bg img,.gw:focus-visible .gw-bg img{opacity:.3;filter:grayscale(0) brightness(.62);transform:scale(1)}
.gw-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.gw.prev .gw-scrim{background:linear-gradient(to right,var(--bg) 42%,color-mix(in srgb,var(--bg) 22%,transparent) 78%,transparent)}
.gw.next .gw-scrim{background:linear-gradient(to left,var(--bg) 42%,color-mix(in srgb,var(--bg) 22%,transparent) 78%,transparent)}
.gw-ghost{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:clamp(96px,12vw,150px);pointer-events:none;opacity:.55;transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.gw-ghost svg{width:100%;height:auto;display:block;overflow:visible}
.gw-ghost svg path{stroke:var(--line-2);stroke-width:1.6;transition:stroke .5s var(--ease-out)}
.gw-ghost svg .ga-tail{fill:var(--line-2);transition:fill .5s var(--ease-out)}
/* shaft stretches slightly toward the head on hover — origin at head side */
.gw-ghost svg .ga-shaft{transition:stroke .5s var(--ease-out),transform .6s var(--ease-out)}
.gw.prev .ga-shaft{transform-origin:10px 20px}
.gw.next .ga-shaft{transform-origin:140px 20px}
.gw:hover .ga-shaft,.gw:focus-visible .ga-shaft{transform:scaleX(1.1)}
.gw:hover .gw-ghost svg path,.gw:focus-visible .gw-ghost svg path{stroke:var(--teal-ink)}
.gw:hover .gw-ghost svg .ga-tail,.gw:focus-visible .gw-ghost svg .ga-tail{fill:var(--teal)}
.gw.prev .gw-ghost{left:.08em}
.gw.next .gw-ghost{right:.08em}
.gw.prev:hover .gw-ghost,.gw.prev:focus-visible .gw-ghost{transform:translateY(-50%) translateX(-14px);opacity:.9}
.gw.next:hover .gw-ghost,.gw.next:focus-visible .gw-ghost{transform:translateY(-50%) translateX(14px);opacity:.9}
.gw-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;height:100%;padding:clamp(22px,3vw,40px);min-width:0}
/* reserve the ghost-arrow zone so text never touches the arrow (idle or hover) */
.gw.prev .gw-body{padding-left:clamp(120px,15vw,200px)}
.gw.next .gw-body{padding-right:clamp(120px,15vw,200px)}
@media (max-width:640px){.gw.prev .gw-body{padding-left:clamp(96px,26vw,120px)}.gw.next .gw-body{padding-right:clamp(96px,26vw,120px)}}
.gw.next .gw-body{align-items:flex-end;text-align:right}
.gw-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease-out),letter-spacing .4s var(--ease-out)}
.gw:hover .gw-k,.gw:focus-visible .gw-k{color:var(--teal-ink);letter-spacing:.22em}
.gw-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15;margin-top:9px;transition:color .35s var(--ease-out);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gw:hover .gw-t,.gw:focus-visible .gw-t{color:var(--teal-ink)}
.gw-ex{color:var(--ink-2);font-size:13.5px;line-height:1.5;max-width:44ch;max-height:0;opacity:0;overflow:hidden;margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:max-height .5s var(--ease-out),opacity .4s,margin-top .5s}
.gw:hover .gw-ex,.gw:focus-visible .gw-ex{max-height:3.4em;opacity:1;margin-top:10px}
/* liquid squeeze */
.art-nav:hover .gw:not(:hover),.art-nav:focus-within .gw:not(:focus-visible){flex-grow:1}
.gw:hover,.gw:focus-visible{flex-grow:1.45}
/* divider + node */
.gw-div{flex:0 0 1px;align-self:stretch;position:relative;background:var(--line)}
.gw-node{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px 1px color-mix(in srgb,var(--teal) 55%,transparent);transition:transform .5s var(--ease-out)}
.art-nav:has(.gw.prev:hover) .gw-node,.art-nav:has(.gw.prev:focus-visible) .gw-node{transform:translateX(-6px)}
.art-nav:has(.gw.next:hover) .gw-node,.art-nav:has(.gw.next:focus-visible) .gw-node{transform:translateX(6px)}
/* light theme: cover a touch fainter + no darkening */
:root[data-theme="light"] .gw:hover .gw-bg img,:root[data-theme="light"] .gw:focus-visible .gw-bg img{opacity:.22;filter:grayscale(0) brightness(1)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .gw:hover .gw-bg img,:root:not([data-theme="dark"]) .gw:focus-visible .gw-bg img{opacity:.22;filter:grayscale(0) brightness(1)}}
/* mobile: stacked portals */
@media (max-width:640px){
  .art-nav{flex-direction:column;height:auto}
  .gw{height:clamp(150px,40vw,200px);flex:0 0 auto}
  .gw:hover,.gw:focus-visible,.art-nav:hover .gw:not(:hover){flex-grow:0}
  .gw-bg img{opacity:.18;filter:grayscale(.2) brightness(.55);transform:none}
  .gw-ex{display:none}
  .gw-div{flex:0 0 1px;height:1px;width:100%}
  .gw-node{display:none}
}
@media (max-width:640px) and (prefers-color-scheme:light){:root:not([data-theme="dark"]) .gw-bg img{opacity:.14}}
@media (max-width:640px){:root[data-theme="light"] .gw-bg img{opacity:.14}}
/* reduced motion: no drift/expansion */
@media (prefers-reduced-motion:reduce){
  .gw,.gw-bg img,.gw-ghost,.gw-node,.gw-t,.gw-k,.gw-ex{transition:none}
  .gw-bg img{transform:none}
  .gw:hover,.gw:focus-visible{flex-grow:1}
}

/* ===== article end-matter: one framed action band (more-in / subscribe / share) ===== */
.art-end{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px);padding-top:clamp(20px,3vw,30px);display:flex;justify-content:space-between;align-items:center;gap:18px 36px;flex-wrap:wrap}
.ae-left{display:flex;align-items:center;gap:14px 32px;flex-wrap:wrap}
.art-end .art-moretag,.art-end .art-share{margin-top:0}
.art-nav{margin-top:clamp(30px,4vw,48px)}
@media (max-width:640px){.art-end{flex-direction:column;align-items:flex-start;gap:16px}}

/* ===== article: "signal line" subscribe strip (.art-signup) ===== */
.art-signup{position:relative;z-index:1;max-width:680px;margin:clamp(28px,4vw,44px) auto 0;text-align:center}
.asg-trigger,.asg-done{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%}
.asg-trigger{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.asg-form{display:none;align-items:center;width:100%}
.asg-done{display:none}
.art-signup[data-state="open"] .asg-trigger{display:none}
.art-signup[data-state="open"] .asg-form{display:flex}
.art-signup[data-state="done"] .asg-trigger{display:none}
.art-signup[data-state="done"] .asg-done{display:flex}

.asg-line{display:flex;align-items:center;width:100%}
.asg-rail{flex:1 1 0;height:1px}
.asg-rail-l{background:linear-gradient(to right,transparent,var(--line-2))}
.asg-rail-r{background:linear-gradient(to left,transparent,var(--line-2))}
.asg-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--teal);
  margin:0 14px;box-shadow:0 0 10px 2px rgba(44,212,200,.6)}
@media (prefers-reduced-motion:no-preference){.asg-dot{animation:stPulse 4s var(--ease-std) infinite}}

.asg-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease-out)}
.asg-trigger:hover .asg-label,.asg-trigger:focus-visible .asg-label{color:var(--teal-ink)}
.asg-label-done{color:var(--teal-ink)}

/* open: email input unfolds from the centre between the split rails */
.asg-field{flex:0 0 auto;display:flex;align-items:center;width:min(360px,62%);margin:0 14px;
  border-bottom:2px solid var(--line-2);
  transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease-out)}
.art-signup[data-state="open"] .asg-field{transform:scaleX(1)}
.asg-field:focus-within{border-color:var(--teal-ink)}
.asg-input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font-family:var(--sans);font-size:16px;padding:10px 0;text-align:left}
.asg-input::placeholder{color:var(--muted)}
.asg-go{background:none;border:0;color:var(--teal-ink);font-size:22px;cursor:pointer;
  padding:0 4px;transition:transform .3s var(--ease-out)}
.asg-go:hover{transform:translateX(4px)}

/* success: one-shot ripple ring off the centre dot */
.asg-dot-done{position:relative}
.asg-dot-done::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--teal-ink);transform:translate(-50%,-50%) scale(1);opacity:0}
.art-signup[data-state="done"] .asg-dot-done::after{animation:sdRipple .9s var(--ease-out) 1}

.asg-err{display:inline-block;text-align:left;margin-top:16px}
.asg-err[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .asg-field{transition:none}
  .asg-dot{animation:none}
  .art-signup[data-state="done"] .asg-dot-done::after{animation:none}
}



/* ===================== BLOG INDEX — hero + cover mosaic ===================== */

/* cross-page smooth crossfades (progressive enhancement) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

/* FILTER BANNER */
.bx-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--line);padding-block:12px;margin-bottom:clamp(28px,4vw,44px)}
.bx-filterbar .bx-fb-tag,.bx-filterbar .bx-fb-count{color:var(--teal-ink)}
.bx-fb-sep{color:var(--line-2)}
.bx-fb-clear{color:var(--muted);transition:color .3s var(--ease-out)}
.bx-fb-clear:hover{color:var(--teal-ink)}

/* TIER 1 — HERO STORY */
.bx-hero{position:relative;display:block;height:clamp(380px,42vw,520px);border-radius:16px;overflow:hidden;margin-bottom:clamp(40px,5vw,64px);view-transition-name:bx-hero}
.bx-hero-cover{position:absolute;inset:0;overflow:hidden}
.bx-hero-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25) brightness(.75);transform:scale(1.02);transition:filter .6s var(--ease-out)}
.bx-hero:hover .bx-hero-cover img,.bx-hero:focus-visible .bx-hero-cover img{filter:grayscale(0) brightness(.85)}
@media (prefers-reduced-motion:no-preference){
  @keyframes bxKen{from{transform:scale(1)}to{transform:scale(1.06)}}
  .bx-hero-cover img{animation:bxKen 18s ease-in-out infinite alternate}
}
.bx-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),transparent 55%);z-index:1}
.bx-hero-top{position:absolute;top:clamp(20px,3vw,32px);left:clamp(24px,4vw,48px);display:flex;align-items:center;gap:12px;z-index:2}
.bx-hero-idx{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.7)}
.bx-hero-latest{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-2);border:1px solid color-mix(in srgb,var(--teal-2) 45%,transparent);background:rgba(0,0,0,.32);border-radius:999px;padding:4px 10px}
.bx-hero-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,4vw,48px);z-index:2}
.bx-hero-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bx-hero-meta .date{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.bx-hero-meta .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.25);border-radius:999px;padding:3px 9px}
.bx-hero-title{font-size:clamp(30px,4.6vw,58px);color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;max-width:20ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx-hero-ex{color:rgba(255,255,255,.85);font-size:clamp(15px,1.6vw,17px);line-height:1.5;max-width:56ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx-hero-more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-2)}
.bx-hero-more .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.bx-hero:hover .bx-hero-more .ar,.bx-hero:focus-visible .bx-hero-more .ar{transform:translateX(6px)}

/* COVER MOSAIC — every post is a thumbnail tile */
.bx-mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(8px,2vw,22px)}
.bx-tile{position:relative;display:block;overflow:hidden;border-radius:14px;grid-column:span 2;aspect-ratio:4/3;background:var(--elev)}
.bx-tile:nth-child(5n+1),.bx-tile:nth-child(5n+2){grid-column:span 3;aspect-ratio:16/10}
.bx-tile-cover{position:absolute;inset:0;overflow:hidden}
.bx-tile-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.6);transform:scale(1.05);transition:filter 1.8s var(--ease-out),transform 1.8s var(--ease-out)}
.bx-tile:hover .bx-tile-cover img,.bx-tile:focus-visible .bx-tile-cover img{filter:grayscale(0) brightness(.85);transform:scale(1)}
.bx-tile-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%);transition:background .45s var(--ease-out)}
.bx-tile:hover .bx-tile-scrim,.bx-tile:focus-visible .bx-tile-scrim{background:linear-gradient(to top,rgba(0,0,0,.9),transparent 52%)}
.bx-tile-idx{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.6);transition:color .3s var(--ease-out)}
.bx-tile:hover .bx-tile-idx,.bx-tile:focus-visible .bx-tile-idx{color:var(--teal-2)}
.bx-tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.8vw,26px);transition:transform .45s var(--ease-out)}
.bx-tile:hover .bx-tile-body,.bx-tile:focus-visible .bx-tile-body{transform:translateY(-4px)}
.bx-tile-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bx-tile-meta .date{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.72)}
.bx-tile-meta .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.25);border-radius:999px;padding:3px 9px}
.bx-tile-title{font-size:clamp(18px,1.9vw,26px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.12;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx-tile-ex{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:max-height .45s var(--ease-out) .08s,opacity .45s var(--ease-out) .08s,margin .45s var(--ease-out) .08s}
.bx-tile:hover .bx-tile-ex,.bx-tile:focus-visible .bx-tile-ex{max-height:4em;opacity:1;margin-top:8px}
.bx-tile-more{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal-2)}
.bx-tile-more .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.bx-tile:hover .bx-tile-more .ar,.bx-tile:focus-visible .bx-tile-more .ar{transform:translateX(6px)}
.bx-tile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:3;background:var(--teal-2);box-shadow:0 0 12px var(--teal-2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.bx-tile:hover::after,.bx-tile:focus-visible::after{transform:scaleX(1)}
/* entrance punch: clip-path reveal (stagger delay applied inline by site.js observer) */
.bx-tile.fade{opacity:0;transform:translateY(26px);clip-path:inset(0 0 12% 0);transition:opacity .8s ease,transform .8s var(--ease-out),clip-path .8s var(--ease-out)}
.bx-tile.fade.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (max-width:1020px){
  .bx-mosaic{grid-template-columns:repeat(2,1fr)}
  .bx-tile,.bx-tile:nth-child(5n+1),.bx-tile:nth-child(5n+2){grid-column:span 1;aspect-ratio:16/10}
}
@media (max-width:640px){
  .bx-mosaic{grid-template-columns:1fr}
  .bx-tile,.bx-tile:nth-child(5n+1),.bx-tile:nth-child(5n+2){grid-column:span 1;aspect-ratio:16/9}
}

/* PAGINATION */
.bx-pager{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,40px);margin-top:clamp(44px,6vw,72px);font-size:11px;text-transform:uppercase;letter-spacing:.14em}
.bx-pg-link{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.bx-pg-link:hover{color:var(--teal-ink);border-color:var(--teal-ink)}
.bx-pg-link.is-off{color:var(--muted);opacity:.4;pointer-events:none;border-color:transparent}
.bx-pg-mid{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .bx-hero-cover img,.bx-hero-more .ar,.bx-tile-cover img,.bx-tile-body,.bx-tile-ex,.bx-tile::after,.bx-tile-scrim{transition:none!important}
  .bx-tile.fade{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}


/* ============================================================= */
/* CONSULTATIONS PAGE — Odoo Appointments booking embed          */
/* ============================================================= */
.consult-page{padding-bottom:clamp(60px,10vh,120px)}
.consult-embed{max-width:var(--wrap);margin:clamp(28px,5vw,48px) auto 0;padding:0 clamp(20px,5vw,40px)}
.ce-frame{position:relative;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  background:var(--bg-2);box-shadow:0 30px 80px -40px rgba(0,0,0,.55)}
.ce-frame::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--line);z-index:2}
.ce-iframe{display:block;width:100%;min-height:640px;height:auto;border:0;background:transparent;overflow:hidden}
.ce-cap{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ce-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 10px 1px var(--teal-dim)}
@media (max-width:720px){
  .consult-embed{padding:0 14px}
  .ce-frame{border-radius:14px}
  .ce-iframe{min-height:560px}
}

/* Left-edge subscribe panel: apply the .invert token-flip so the unfolded    */
/* panel renders in the opposite palette to the page (clear contrast in both   */
/* themes). Keep the translucent blur but make the inverted card slightly more */
/* opaque so text stays crisp over busy page content.                         */
.sub-panel.invert{background:color-mix(in srgb,var(--bg) 97%,transparent)}
/* ============================================================ */
/* ZOXRON SIGNAL CHAT — custom brand-native livechat widget      */
/* Same visual language as .sub-panel / .st-dot; the panel uses  */
/* .invert for contrast (flips with the theme, like Subscribe).  */
/* ============================================================ */
.zchat{position:fixed;right:calc(clamp(16px,3vw,28px) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(16px,3vw,26px) + env(safe-area-inset-bottom,0px));z-index:140}
/* our state panels set display:flex, which would otherwise beat the [hidden]
   UA rule — force hidden to win so only one state shows at a time */
.zchat [hidden]{display:none !important}
/* hide while the mobile menu is open, mirroring .sub-root */
body.menu-open .zchat{opacity:0;pointer-events:none;transition:opacity .25s}

/* --- launcher bubble: the brand X mark ---
   The X itself signals operator availability. Offline = quiet muted mark,
   no glow. Online = teal mark with a soft breathing teal halo. */
.zchat-bubble{position:relative;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:var(--bg);
  border:1px solid var(--line-2);
  box-shadow:0 6px 24px -8px rgba(0,0,0,.5);
  transition:transform .35s var(--ease-out),border-color .3s var(--ease-std),box-shadow .4s var(--ease-std)}
.zchat-bubble:hover{transform:translateY(-3px)}

/* the X mark */
.zc-x{position:relative;z-index:1;width:26px;height:26px;
  fill:var(--ink-2);opacity:.55;
  transition:fill .4s var(--ease-std),opacity .4s var(--ease-std),filter .4s var(--ease-std)}

/* soft teal halo ring behind the button (drives the breathing glow) */
.zc-halo{position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  opacity:0;transform:scale(.85);
  box-shadow:0 0 18px 3px color-mix(in srgb,var(--teal) 55%,transparent),
             0 0 6px 1px color-mix(in srgb,var(--teal-2) 45%,transparent);
  transition:opacity .5s var(--ease-std),transform .5s var(--ease-std)}

/* ONLINE: light up the X in brand teal + glow, start the breathing halo */
.zchat[data-online="1"] .zc-x{fill:var(--teal);opacity:1;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--teal) 60%,transparent))}
.zchat[data-online="1"] .zchat-bubble{border-color:color-mix(in srgb,var(--teal) 45%,transparent);
  box-shadow:0 6px 24px -8px rgba(0,0,0,.5),0 0 20px -2px color-mix(in srgb,var(--teal) 40%,transparent)}
.zchat[data-online="1"] .zc-halo{opacity:.85;transform:scale(1);
  animation:zcBreathe 3.4s var(--ease-std) infinite}

/* hover micro-interaction: intensify when online */
.zchat[data-online="1"] .zchat-bubble:hover{border-color:color-mix(in srgb,var(--teal) 70%,transparent);
  box-shadow:0 8px 26px -8px rgba(0,0,0,.55),0 0 28px 0 color-mix(in srgb,var(--teal) 50%,transparent)}
.zchat[data-online="1"] .zchat-bubble:hover .zc-halo{opacity:1;transform:scale(1.08)}

@keyframes zcBreathe{
  0%,100%{opacity:.5;transform:scale(.9)}
  50%{opacity:.95;transform:scale(1.06)}
}

.zchat.open .zchat-bubble{opacity:0;pointer-events:none;transform:scale(.6)}

/* --- panel --- */
.zchat-panel{position:absolute;right:0;bottom:calc(100% + 12px);
  display:flex;flex-direction:column;
  width:min(380px,92vw);height:min(560px,72vh);height:min(560px,72dvh);
  background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .35s var(--ease-std),transform .45s var(--ease-out)}
.zchat.open .zchat-panel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}

/* header */
.zc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line-2);flex:0 0 auto}
.zc-status{width:8px;height:8px}
.zchat[data-online="0"] .zc-status{background:var(--muted);box-shadow:none;animation:none}
.zc-title{font-size:11px;letter-spacing:.24em;color:var(--ink);text-transform:uppercase;margin-right:auto}
.zc-close{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;
  cursor:pointer;padding:0;transition:color .3s,transform .4s var(--ease-out)}
.zc-close:hover{color:var(--teal-ink);transform:rotate(90deg)}

/* messages area */
.zc-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:16px;
  display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.zc-msgs{display:flex;flex-direction:column;gap:10px}
.zc-msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.zc-msg .zc-time{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--muted)}
.zc-msg.visitor{align-self:flex-end;background:var(--bg-2);border:1px solid var(--line-2);
  border-bottom-right-radius:3px;color:var(--ink)}
.zc-msg.operator{align-self:flex-start;background:var(--teal-dim);
  border:1px solid var(--teal-ink);border-bottom-left-radius:3px;color:var(--ink)}
.zc-msg .zc-name{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-ink);margin-bottom:3px}
@media (prefers-reduced-motion:no-preference){
  .zc-msg{animation:zcRise .4s var(--ease-out) both}
}
@keyframes zcRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* intro / status note (offline copy, empty state) */
.zc-note{color:var(--ink-2);font-size:13.5px;line-height:1.55}

/* typing indicator (three teal dots) */
.zc-typing{display:flex;gap:5px;align-self:flex-start;padding:8px 12px}
.zc-typing span{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .zc-typing span{animation:zcType 1.2s var(--ease-std) infinite}
  .zc-typing span:nth-child(2){animation-delay:.18s}
  .zc-typing span:nth-child(3){animation-delay:.36s}
}
@keyframes zcType{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* input row (online) */
.zc-input{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:0 0 auto;
  border-top:1px solid var(--line-2)}
/* 16px input font is REQUIRED: iOS Safari auto-zooms the viewport when a
   focused input has font-size < 16px, pushing the panel past the right edge */
.zc-input .zc-field{flex:1;min-width:0;background:none;border:0;border-bottom:2px solid var(--line-2);
  outline:0;color:var(--ink);font-family:var(--sans);font-size:16px;padding:8px 0;
  transition:border-color .3s var(--ease-std)}
.zc-input .zc-field:focus{border-color:var(--teal-ink)}
.zc-input .zc-field::placeholder{color:var(--muted)}
.zc-send{background:none;border:0;color:var(--teal-ink);font-size:22px;cursor:pointer;
  padding:0 4px;transition:transform .3s var(--ease-out)}
.zc-send:hover{transform:translateX(4px)}
.zc-send:disabled{color:var(--muted);cursor:default;transform:none}

/* offline leave-a-message form */
.zc-offline{display:flex;flex-direction:column;gap:10px;padding:16px;flex:0 0 auto;
  border-top:1px solid var(--line-2)}
.zc-off-note{color:var(--ink-2);font-size:13px;line-height:1.5;margin-bottom:2px}
.zc-off-in{background:none;border:0;border-bottom:2px solid var(--line-2);outline:0;
  color:var(--ink);font-family:var(--sans);font-size:16px;padding:8px 0;
  transition:border-color .3s var(--ease-std);resize:none}
.zc-off-in:focus{border-color:var(--teal-ink)}
.zc-off-in::placeholder{color:var(--muted)}
.zc-off-btn{margin-top:4px;align-self:flex-start;background:var(--teal);color:#04120F;
  border:0;border-radius:2px;font-weight:600;font-size:13px;padding:10px 18px;cursor:pointer;
  transition:background .2s var(--ease-std)}
.zc-off-btn:hover{background:var(--teal-2)}
.zc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* done confirmation */
.zc-done{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding:28px 20px;margin:auto}
.zc-done-h{color:var(--ink);font-size:15px;line-height:1.5;max-width:26ch}

/* error line */
.zc-err{margin:0 16px 12px;font-size:11px;color:var(--ink);
  border-left:2px solid var(--teal-ink);padding-left:8px}

/* delicate inline icon buttons (End in the header, Skip in the rating card):
   muted by default, brand teal on hover/focus, ~17px glyph with a generous hit
   area (padding + negative margin), aria-label + title carry both languages */
.zc-ic{display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink-2);cursor:pointer;
  padding:6px;margin:-6px 0;border-radius:6px;
  transition:color .3s var(--ease-std)}
.zc-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.zc-ic:hover,.zc-ic:focus-visible{color:var(--teal-ink)}

/* end-of-conversation rating card */
.zc-rate{display:flex;flex-direction:column;gap:14px;padding:20px 16px 16px;flex:0 0 auto;
  margin:auto 0;position:relative}
/* Skip is now a delicate icon (see .zc-ic); this only anchors it in the corner */
.zc-rate-skip{position:absolute;top:8px;right:10px;margin:0}
.zc-rate-q{color:var(--ink);font-size:15px;line-height:1.5;text-align:center;
  max-width:26ch;margin:2px auto 0}
.zc-rate-choices{display:flex;justify-content:center;gap:10px}
.zc-face{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:1px solid var(--line-2);border-radius:12px;
  padding:12px 10px 9px;cursor:pointer;color:var(--ink-2);min-width:78px;
  transition:border-color .25s var(--ease-std),color .25s var(--ease-std),background .25s var(--ease-std)}
.zc-face svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.zc-face svg .zc-eye{fill:currentColor;stroke:none}
.zc-face-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.zc-face:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
.zc-face[aria-checked="true"]{border-color:var(--teal);color:var(--teal-ink);
  background:var(--teal-dim)}
.zc-rate-reason{background:none;border:0;border-bottom:2px solid var(--line-2);outline:0;
  color:var(--ink);font-family:var(--sans);font-size:16px;padding:8px 0;
  transition:border-color .3s var(--ease-std)}
.zc-rate-reason:focus{border-color:var(--teal-ink)}
.zc-rate-reason::placeholder{color:var(--muted)}
.zc-rate-mail{display:flex;flex-direction:column;gap:6px}
.zc-rate-mlabel{color:var(--ink-2);font-size:12.5px;line-height:1.4}
.zc-rate-email{background:none;border:0;border-bottom:2px solid var(--line-2);outline:0;
  color:var(--ink);font-family:var(--sans);font-size:16px;padding:8px 0;
  transition:border-color .3s var(--ease-std)}
.zc-rate-email:focus{border-color:var(--teal-ink)}
.zc-rate-email::placeholder{color:var(--muted)}
.zc-rate-email.zc-invalid{border-color:var(--teal-2)}
.zc-rate-err{margin:-6px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--ink);
  border-left:2px solid var(--teal-ink);padding-left:8px}
.zc-rate-send{align-self:stretch;background:var(--teal);color:#04120F;border:0;border-radius:2px;
  font-weight:600;font-size:13px;padding:11px 18px;cursor:pointer;
  transition:background .2s var(--ease-std)}
.zc-rate-send:hover{background:var(--teal-2)}
.zc-rate-send:disabled{opacity:.6;cursor:default}

/* thank-you done state (mirrors zc-done) */
.zc-thanks{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding:28px 20px;margin:auto}

/* conversation-ended state + delicate "New conversation" affordance (icon-led,
   muted default, teal on hover/focus — shown ONLY in the ended state) */
.zc-ended{display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;padding:28px 20px;margin:auto}
.zc-new-btn{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:1px solid var(--line-2);border-radius:12px;
  padding:14px 20px;color:var(--ink-2);cursor:pointer;
  transition:border-color .25s var(--ease-std),color .25s var(--ease-std),background .25s var(--ease-std)}
.zc-new-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.zc-new-btn .zc-new-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.zc-new-btn:hover,.zc-new-btn:focus-visible{border-color:var(--teal-ink);color:var(--teal-ink);
  background:var(--teal-dim)}

@media (prefers-reduced-motion:reduce){
  .zchat-bubble,.zchat-panel,.zc-close,.zc-send,.zc-x,.zc-halo{transition:none}
  /* keep the static online glow, drop the breathing loop */
  .zchat[data-online="1"] .zc-halo{animation:none;opacity:.8;transform:scale(1)}
}

/* operator-went-offline inline note (mid-conversation availability flip) */
.zc-offnote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  border-left:2px solid var(--line-2);padding-left:8px}

/* mobile: full-width bottom sheet.
   NOTE width uses left/right anchors (not 100vw — 100vw overflows when a
   scrollbar is present); dvh tracks the iOS keyboard/URL-bar visual viewport
   so the input row stays visible; safe-area padding clears the home indicator */
@media (max-width:640px){
  .zchat{right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .zchat-panel{position:fixed;right:0;left:0;bottom:0;top:auto;
    width:auto;max-width:100%;height:86vh;height:86dvh;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .zchat.open .zchat-panel{transform:translateY(0)}
}

/* short viewports (landscape phones): right-anchored compact card filling the
   height with internal scroll — a full-width sheet looks wrong at 932x430 */
@media (max-height:500px) and (min-width:641px){
  .zchat{right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .zchat-panel{position:fixed;left:auto;right:calc(12px + env(safe-area-inset-right,0px));
    top:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    width:min(380px,55vw);height:auto;max-height:none}
}

/* ===================== COMPANY DROPDOWN (desktop) =====================
   A quiet, precise dropdown — NOT a mega panel. The Company item is a pure
   category: a non-navigating trigger that reveals a short vertical list of
   plain links (Events / Jobs) with hairline separators and the same teal
   underline-on-hover as .hnav a::after. No numbers, no descriptions, no card
   as decoration. Built to let a future "About Us" slot in as one more row. */
.hnav-mega{position:relative;display:inline-flex}
/* The trigger is a <button> styled to match .hnav a exactly. */
.hnav .mega-trig{position:relative;display:inline-flex;align-items:baseline;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);padding:8px 13px;
  background:none;border:0;cursor:pointer;transition:color .35s var(--ease-out)}
.hnav .mega-trig b{font-size:.8em;color:var(--muted);font-weight:400;margin-right:7px;transition:color .35s var(--ease-out)}
.hnav .mega-trig::after{content:"";position:absolute;left:13px;right:13px;bottom:-6px;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.hnav .mega-trig:hover,.hnav-mega.open .mega-trig,.hnav .mega-trig.on{color:var(--ink)}
.hnav .mega-trig:hover b,.hnav-mega.open .mega-trig b,.hnav .mega-trig.on b{color:var(--teal-ink)}
.hnav .mega-trig:hover::after,.hnav-mega.open .mega-trig::after,.hnav .mega-trig.on::after{transform:scaleX(1)}
.mega-panel{position:absolute;top:100%;left:0;padding-top:14px;width:212px;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s;z-index:120}
.hnav-mega.open .mega-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.drop-list{padding:5px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 20px 46px -30px rgba(0,0,0,.55);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
/* Tiny mono labels (echoing the nav), one plain link per row, hairline
   separators, teal underline-on-hover under the word — exactly like
   .hnav a::after. Higher specificity than .hnav a; the inherited nav
   underline is neutralised so there is only one, precise, teal line. */
.hnav .drop-link{position:relative;display:block;padding:12px 20px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);transition:color .3s var(--ease-out)}
.hnav .drop-link::after{content:none}
.drop-link + .drop-link{border-top:1px solid var(--line)}
.drop-w{position:relative}
.drop-w::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.hnav .drop-link:hover,.hnav .drop-link:focus-visible{color:var(--ink);outline:none}
.hnav .drop-link:hover b{color:inherit}
.drop-link:hover .drop-w::after,.drop-link:focus-visible .drop-w::after{transform:scaleX(1)}
.hnav .drop-link.on{color:var(--ink)}
.hnav .drop-link.on .drop-w::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .mega-panel,.drop-link,.drop-w::after,.hnav .mega-trig,.hnav .mega-trig::after{transition:none}
}

/* ===================== COMPANY DROPDOWN (mobile) ===================== */
.m-group{display:flex;flex-direction:column}
.mobile .m-mega-btn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font-size:clamp(34px,9.5vw,52px);font-weight:700;letter-spacing:-.035em;color:var(--ink);
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);opacity:0;transform:translateY(16px)}
body.menu-open .mobile .m-mega-btn{animation:mrise .5s cubic-bezier(.2,.7,.2,1) forwards}
.m-mega-chev{position:relative;width:20px;height:20px;flex:0 0 auto;margin-right:2px}
.m-mega-chev::before,.m-mega-chev::after{content:"";position:absolute;top:50%;left:50%;background:var(--muted);border-radius:2px;transition:transform .3s var(--ease-out),background .3s}
.m-mega-chev::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.m-mega-chev::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.m-group.open .m-mega-chev::after{transform:translate(-50%,-50%) scaleY(0)}
.m-group.open .m-mega-chev::before{background:var(--teal)}
.m-mega{display:flex;flex-direction:column;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.m-mega[hidden]{display:none}
.m-mega .m-mega-l{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2);padding:12px 2px;display:flex;align-items:baseline;gap:16px}
.m-mega .m-mega-l:active,.m-mega .m-mega-l:hover{color:var(--ink)}
.m-mega .m-mega-l.on{color:var(--ink)}
.m-mega .m-mega-l.on::before{content:"";width:16px;height:1.5px;background:var(--teal);align-self:center}

/* ===================== EVENTS PAGE ===================== */
/* Editorial numbered list — mirrors the homepage "Model" (.mlist / .mrow):
   big mono index, title, one terse line, a quiet mono meta line, and a
   restrained hairline "Register" affordance (no cards, pills, chips or solid
   buttons). Registration itself is a native (skinned) Odoo iframe in a modal. */
.events-page{padding-bottom:clamp(28px,4vh,52px)}
.ev-list{margin:clamp(28px,5vw,52px) 0 24px;border-top:1px solid var(--line-2)}
.ev-row{display:grid;grid-template-columns:84px 1fr auto;gap:26px;align-items:start;
  padding:34px 8px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  transition:background-color .45s var(--ease-out)}
.ev-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.ev-row:hover,.ev-row:focus-within{background:var(--elev)}
.ev-row:hover::before,.ev-row:focus-within::before{transform:scaleY(1)}
.ev-num{font-family:var(--mono);font-size:14px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em;padding-top:7px}
.ev-body{min-width:0}
.ev-title{font-size:clamp(21px,2.7vw,29px);font-weight:600;letter-spacing:-.025em;line-height:1.08;color:var(--ink);
  transition:transform .55s var(--ease-out),color .45s var(--ease-out)}
.ev-lead{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:54ch;
  transition:transform .55s var(--ease-out),color .45s var(--ease-out)}
.ev-row:hover .ev-title,.ev-row:hover .ev-lead,.ev-row:focus-within .ev-title,.ev-row:focus-within .ev-lead{transform:translateX(10px)}
.ev-meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:transform .55s var(--ease-out)}
.ev-row:hover .ev-meta,.ev-row:focus-within .ev-meta{transform:translateX(10px)}
.ev-meta .ev-dot{color:var(--line-2)}
.ev-meta .ev-kind{color:var(--ink-2)}
/* Register affordance — text + underline-on-hover (like .hnav a::after), never a solid button. */
.ev-reg{align-self:center;position:relative;display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:color .35s var(--ease-out)}
.ev-reg-t{position:relative}
.ev-reg-t::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.ev-reg:hover,.ev-reg:focus-visible{color:var(--ink);outline:none}
.ev-reg:hover .ev-reg-t::after,.ev-reg:focus-visible .ev-reg-t::after{transform:scaleX(1)}
.ev-reg-ar{color:var(--teal-ink);transition:transform .35s var(--ease-out)}
.ev-reg:hover .ev-reg-ar,.ev-reg:focus-visible .ev-reg-ar{transform:translateX(4px)}
.ev-note{margin:16px 0 10px;font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-align:center}
@media (max-width:820px){
  .ev-row{grid-template-columns:40px 1fr;gap:6px 16px;padding:26px 4px}
  .ev-num{padding-top:5px}
  .ev-reg{grid-column:2;align-self:start;margin-top:16px}
  .ev-row:hover .ev-title,.ev-row:hover .ev-lead,.ev-row:hover .ev-meta,
  .ev-row:focus-within .ev-title,.ev-row:focus-within .ev-lead,.ev-row:focus-within .ev-meta{transform:none}
}

/* ===== Careers — department-grouped roster (deliberately DISTINCT from the
   Events numbered-row list: mono department headings + hairline rule, role
   rows with a right-aligned location · type meta and an "Apply →" underline;
   no 01/02 numbering, no left teal bar) ===== */
.careers-page{padding-bottom:clamp(28px,4vh,52px)}
.cr-board{margin:clamp(30px,5vw,56px) 0 26px}
.cr-dept{padding:0}
.cr-dept + .cr-dept{margin-top:clamp(38px,5.5vw,64px)}
.cr-dept-head{position:relative;display:flex;align-items:baseline;gap:16px}
.cr-dept-name{font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cr-dept-count{font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--teal-ink)}
.cr-dept-rule{flex:1 1 auto;height:1px;background:var(--line);align-self:center}
.cr-roles{list-style:none;margin:8px 0 0;padding:0}
.cr-role + .cr-role{border-top:1px solid var(--line)}
.cr-role-btn{position:relative;width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:22px 8px;border-radius:6px;transition:background .3s var(--ease-out),padding .3s var(--ease-out)}
.cr-role-btn:hover,.cr-role-btn:focus-visible{background:var(--elev);outline:none;padding-left:16px;padding-right:16px}
.cr-role-main{min-width:0;display:flex;flex-direction:column;gap:7px}
.cr-role-title{font-size:clamp(20px,2.5vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink);transition:color .3s var(--ease-out)}
.cr-role-btn:hover .cr-role-title,.cr-role-btn:focus-visible .cr-role-title{color:var(--teal-ink)}
.cr-role-lead{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:60ch}
.cr-role-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:11px;text-align:right}
.cr-role-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;
  font-size:12px;font-weight:300;letter-spacing:.05em;color:var(--muted)}
.cr-role-loc{color:var(--ink-2)}
.cr-role-dot{color:var(--line-2)}
.cr-role-apply{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:14px;transition:color .3s var(--ease-out)}
.cr-role-apply-t{position:relative}
.cr-role-apply-t::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease-out)}
.cr-role-btn:hover .cr-role-apply,.cr-role-btn:focus-visible .cr-role-apply{color:var(--ink)}
.cr-role-btn:hover .cr-role-apply-t::after,.cr-role-btn:focus-visible .cr-role-apply-t::after{transform:scaleX(1)}
.cr-role-apply-ar{color:var(--teal-ink);transition:transform .35s var(--ease-out)}
.cr-role-btn:hover .cr-role-apply-ar,.cr-role-btn:focus-visible .cr-role-apply-ar{transform:translateX(4px)}
.cr-note{margin:clamp(30px,5vw,52px) 0 6px;font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-align:center}
.cr-empty{margin:clamp(30px,6vw,60px) 0;text-align:center}
.cr-empty-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cr-empty-s{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6;max-width:46ch;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){
  .cr-role-btn,.cr-role-title,.cr-role-apply,.cr-role-apply-t::after,.cr-role-apply-ar{transition:none}
}
@media (max-width:720px){
  .cr-role-btn{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 6px}
  .cr-role-btn:hover,.cr-role-btn:focus-visible{padding-left:6px;padding-right:6px}
  .cr-role-side{align-items:flex-start;text-align:left;flex-direction:row;justify-content:space-between;width:100%;gap:18px}
  .cr-role-meta{justify-content:flex-start}
}

/* ---- Registration modal: native (skinned) Odoo event iframe ---- */
.ev-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(14px,5vh,60px) 16px;overflow-y:auto;overscroll-behavior:contain}
.ev-modal[hidden]{display:none}
.ev-modal-scrim{position:fixed;inset:0;background:rgba(2,10,8,.62);
  -webkit-backdrop-filter:blur(6px) saturate(118%);backdrop-filter:blur(6px) saturate(118%);
  opacity:0;transition:opacity .3s var(--ease-out)}
.ev-modal.open .ev-modal-scrim{opacity:1}
.ev-modal-card{position:relative;margin:auto;width:min(1280px,95vw);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 44px 120px -40px rgba(0,0,0,.72);
  opacity:0;transform:translateY(14px) scale(.986);
  transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.ev-modal.open .ev-modal-card{opacity:1;transform:none}
.ev-modal-head{display:flex;align-items:flex-start;gap:16px;padding:19px 20px 16px;border-bottom:1px solid var(--line)}
.ev-modal-heading{flex:1 1 auto;min-width:0}
.ev-modal-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.24em;color:var(--muted)}
.ev-modal-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px 1px var(--teal-dim);flex:0 0 auto}
.ev-modal-title{margin-top:8px;font-size:clamp(17px,2.4vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.ev-modal-x{flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);
  background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out),background .25s var(--ease-out)}
.ev-modal-x:hover,.ev-modal-x:focus-visible{color:var(--ink);border-color:var(--teal-ink);outline:none}
.ev-modal-body{background:#fff}
.ev-iframe{display:block;width:100%;min-height:640px;height:auto;border:0;background:#fff;overflow:hidden}
.ev-modal-cap{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);background:var(--bg-2)}
.ev-modal-dot2{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto;box-shadow:0 0 10px 1px var(--teal-dim)}
body.ev-modal-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .ev-row,.ev-row::before,.ev-title,.ev-lead,.ev-meta,.ev-reg,.ev-reg-t::after,.ev-reg-ar,
  .ev-modal-scrim,.ev-modal-card{transition:none}
  .ev-row:hover .ev-title,.ev-row:hover .ev-lead,.ev-row:hover .ev-meta,
  .ev-row:focus-within .ev-title,.ev-row:focus-within .ev-lead,.ev-row:focus-within .ev-meta{transform:none}
}
@media (max-width:760px){
  /* Near-full-screen sheet: the Odoo registration content needs room, so the
     modal fills the viewport (no scrim padding, edge-to-edge, square corners). */
  .ev-modal{padding:0}
  .ev-modal-card{width:100%;max-width:none;min-height:100dvh;border-radius:0;border:0;margin:0}
  .ev-iframe{min-height:calc(100dvh - 150px)}
}

/* ============================================================
   PAGE SUBSCRIBE STRIP — bottom of Events & Careers.
   A hairline band (top rule only, never a boxed card): a mono
   "Newsletter" label, a short bilingual line, and an inline email
   field echoing the Signal panel. Teal only as thin accent.
   ============================================================ */
/* Premium newsletter strip (events / careers). A restrained teal-signalled
   BAND — not a boxed card: only a top hairline carrying a bright teal "signal"
   rule, a faint teal wash bleeding from the top-right, a pulsing teal node, and
   an email field whose teal underline + arrow light on focus. Brand teal only. */
.pgsub{position:relative;margin-top:clamp(44px,7.5vh,88px);
  padding:clamp(30px,4.5vh,48px) clamp(18px,3vw,34px) clamp(26px,4vh,40px);
  border-top:1px solid var(--line);
  background:radial-gradient(120% 150% at 100% 0%, var(--teal-dim), transparent 58%)}
/* teal signal rule sitting on the top hairline */
.pgsub::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:min(148px,44%);
  background:linear-gradient(90deg,var(--teal-ink),transparent);
  box-shadow:0 0 16px 1px rgba(44,212,200,.45)}
.pgsub-head{display:inline-flex;align-items:center;gap:11px}
.pgsub-head .st-dot{position:static}
.pgsub-head .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pgsub-body{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,5vw,64px);margin-top:20px}
.pgsub-line{flex:1 1 320px;max-width:38ch;font-size:clamp(21px,2.8vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.pgsub-line em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--teal-ink);padding-right:.06em}
.pgsub-live{flex:1 1 320px;max-width:460px;min-width:min(100%,280px)}
/* elevated field: thicker teal-lit underline + arrow glow on focus */
.pgsub-live .sub-form{margin-top:0;border-bottom-width:2px}
.pgsub-live .sub-form:focus-within{box-shadow:0 2px 0 -1px var(--teal-ink)}
.pgsub-live .sub-go{transition:transform .3s var(--ease-out),color .3s var(--ease-out),text-shadow .3s var(--ease-out)}
.pgsub-live .sub-form:focus-within .sub-go{color:var(--teal-2);text-shadow:0 0 14px rgba(44,212,200,.6)}
.pgsub-done{flex:1 1 320px;display:flex;align-items:center;gap:14px}
.pgsub-done[hidden]{display:none}
.pgsub-done-t{font-weight:700;font-size:clamp(16px,1.8vw,21px);letter-spacing:-.01em;color:var(--ink)}

/* ============================================================
   LEGAL PAGES — Privacy Policy / Legal Notice
   Editorial, engineering-drawing restraint. Numbered document,
   hairline dividers, mono indices, teal only as a thin accent.
   ============================================================ */
.legal-page{padding-bottom:clamp(72px,11vh,132px)}
.legal-hero{max-width:820px;position:relative;z-index:1}
.legal-title{font-size:clamp(38px,6.6vw,80px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:16px 0 0}
.legal-title .ln{display:block}
.legal-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-ink);letter-spacing:-.01em;font-size:1.02em;padding-right:.06em}
.legal-updated{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.legal-updated::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px 1px var(--teal-dim);flex:0 0 auto}
.legal-intro{color:var(--ink-2);font-size:clamp(15px,1.5vw,18px);line-height:1.65;max-width:56ch;margin:18px 0 0}

.legal-doc{max-width:960px;margin:clamp(40px,6vw,72px) 0 0}
.legal-sec{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:clamp(30px,4.4vw,52px) 0;border-top:1px solid var(--line)}
.legal-sec:first-child{border-top:1px solid var(--line-2)}
.legal-n{font-family:var(--mono);font-size:15px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em;padding-top:6px}
.legal-c{min-width:0}
.legal-h{font-size:clamp(20px,2.5vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.12;color:var(--ink);margin:0 0 16px}
.legal-p{color:var(--ink-2);font-size:clamp(15px,1.3vw,16.5px);line-height:1.72;max-width:65ch;margin:0 0 14px}
.legal-p:last-child{margin-bottom:0}
/* email — mono/teal link with underline-on-hover, echoing .hnav a::after */
.legal-mail{display:inline-flex;align-items:center;gap:9px;margin-top:6px;position:relative;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink);
  transition:color .35s var(--ease-out)}
.legal-mail::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;
  width:calc(100% - 20px);background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.legal-mail:hover,.legal-mail:focus-visible{color:var(--teal-ink);outline:none}
.legal-mail:hover::after,.legal-mail:focus-visible::after{transform:scaleX(1)}
.legal-mail .ar{color:var(--teal-ink);transition:transform .35s var(--ease-out)}
.legal-mail:hover .ar,.legal-mail:focus-visible .ar{transform:translateX(4px)}

/* summary table — airy, hairline rules, mono headers */
.legal-table-wrap{margin:22px 0 6px;overflow-x:auto;border-top:1px solid var(--line-2)}
.legal-table{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.legal-table th{text-align:left;padding:14px 20px 12px 0;vertical-align:top;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.legal-table td{padding:16px 20px 16px 0;vertical-align:top;border-bottom:1px solid var(--line);
  color:var(--ink-2);line-height:1.55}
.legal-table td:first-child{color:var(--ink);font-weight:500;width:34%}
.legal-table tbody tr:last-child td,.legal-table tr:last-child td{border-bottom:0}

/* the "no ad networks / no selling" pledge — thin teal left-rule */
.legal-note{margin:24px 0 0;padding:12px 0 12px 18px;position:relative;
  font-size:11.5px;letter-spacing:.08em;line-height:1.7;color:var(--ink-2)}
.legal-note::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--teal)}

/* closing stamp */
.legal-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(40px,6vw,64px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.legal-stamp-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px 1px var(--teal-dim);flex:0 0 auto}
.legal-stamp-sep{color:var(--line-2)}

@media (max-width:820px){
  .legal-sec{grid-template-columns:44px minmax(0,1fr);gap:8px 18px}
  .legal-n{padding-top:4px;font-size:13px}
}
@media (max-width:560px){
  .legal-table{min-width:440px}
  .legal-table td:first-child{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .legal-mail,.legal-mail::after,.legal-mail .ar{transition:none}
}

/* ============================ ABOUT PAGE ============================ */
.about-page{padding-bottom:clamp(72px,11vh,132px)}

/* --- hero: copy + the animated X mark — full-screen header ---
   Fills the first screen (zoom-aware, same paint model as the home hero):
   100svh minus the fixed header and the blog-wrap's own top padding, so it
   closes flush at the viewport edge and then scrolls into the sections. */
.about-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,72px);
  align-items:center;align-content:center;position:relative;z-index:1;
  min-height:calc(100svh / var(--zoom) - var(--h) - clamp(28px,4vw,52px));
  padding:0 0 clamp(52px,8vh,92px);border-bottom:1px solid var(--line)}
.about-hero-copy{min-width:0}
/* scroll cue — quiet mono wayfinding at the base of the header */
.about-scrollcue,.svc-scrollcue{position:absolute;left:0;bottom:clamp(18px,3vh,30px);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);opacity:0;
  animation:axFade .8s ease 1.1s both}
.about-scrollcue i,.svc-scrollcue i{width:1px;height:clamp(26px,4vh,40px);background:var(--line-2);position:relative;overflow:hidden}
.about-scrollcue i::after,.svc-scrollcue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;
  background:linear-gradient(var(--teal),transparent);animation:scrollcue 1.9s var(--ease-out) infinite}
@keyframes scrollcue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}
.about-title{font-size:clamp(40px,7vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:16px 0 0}
.about-title .ln{display:block}
.about-accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-ink);
  letter-spacing:-.01em;font-size:1.03em;padding-right:.04em}
.about-intro{color:var(--ink-2);font-size:clamp(16px,1.7vw,20px);line-height:1.62;max-width:48ch;margin:26px 0 0}

/* --- the X-mark assemble moment --- */
.about-x{position:relative;display:grid;place-items:center;min-height:clamp(220px,30vw,360px);isolation:isolate}
.about-x-ring{position:absolute;top:50%;left:50%;width:clamp(230px,34vw,400px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);opacity:0;z-index:0;
  transform:translate(-50%,-50%) scale(.72);animation:axRing 1s var(--ease-out) .15s both}
.about-x-ring::after{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed var(--line);opacity:.6}
.about-x-mark{position:relative;z-index:1;width:clamp(180px,26vw,304px);height:auto;
  filter:drop-shadow(0 0 0 transparent);animation:axGlow 1.15s ease 1s both}
.about-x-mark polygon{fill:var(--teal);transform-box:fill-box;transform-origin:50% 50%;
  opacity:0;animation:axAssemble .9s cubic-bezier(.2,.7,.2,1) both}
.about-x-mark .axb1 polygon{animation-delay:.16s}
.about-x-mark .axb2 polygon{animation-delay:.33s}
.about-x-mark .axb3 polygon{animation-delay:.5s}
.about-x-mark .axb4 polygon{animation-delay:.67s}
.about-x-coords{position:absolute;bottom:0;right:6%;z-index:2;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);opacity:0;animation:axFade .7s ease 1.5s both}
@keyframes axAssemble{0%{opacity:0;transform:translateY(-40px) rotate(-26deg) scale(.5)}
  55%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes axGlow{0%{filter:drop-shadow(0 0 0 transparent)}
  46%{filter:drop-shadow(0 0 34px rgba(44,212,200,.72))}
  100%{filter:drop-shadow(0 0 12px rgba(44,212,200,.28))}}
@keyframes axRing{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
@keyframes axFade{to{opacity:1}}

/* --- editorial sections (numbered, hairline-ruled) --- */
.about-sec{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line)}
.about-sec:first-of-type{border-top:1px solid var(--line-2)}
.about-k{font-family:var(--mono);font-size:15px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em;padding-top:6px}
.about-c{min-width:0}
.about-lbl{margin-bottom:20px}
.about-h{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.12;color:var(--ink);margin:0 0 20px}
.about-lead{color:var(--ink);font-size:clamp(17px,1.9vw,22px);line-height:1.58;letter-spacing:-.01em;max-width:60ch;margin:0}
.about-team-note{color:var(--ink-2);font-size:clamp(16px,1.7vw,19px)}

/* --- what we do: editorial rows --- */
.about-do{margin-top:2px;border-top:1px solid var(--line-2)}
.about-row{display:grid;grid-template-columns:48px 210px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(22px,3vw,32px) 6px;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;transition:background-color .45s var(--ease-out)}
.about-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.about-row:hover{background:var(--teal-dim)}
.about-row:hover::before{transform:scaleY(1)}
.about-row-n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.14em;padding-top:5px}
.about-row-t{font-size:clamp(19px,2vw,25px);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.about-row-b{min-width:0}
.about-row-lead{color:var(--ink);font-weight:500;font-size:clamp(15px,1.5vw,17px);margin:0 0 8px}
.about-row-p{color:var(--ink-2);font-size:15px;line-height:1.66;max-width:54ch;margin:0}

/* --- how we work: live-case callout (teal left rule) --- */
.about-case{margin-top:26px;padding:20px 0 20px 22px;position:relative}
.about-case::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--teal)}
.about-case-tag{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.about-case-p{color:var(--ink);font-size:clamp(15px,1.5vw,17px);line-height:1.7;max-width:62ch;margin:0}

/* --- principles: mono micro-labels + hairline --- */
.about-prin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:2px}
.about-p{border-top:1px solid var(--line-2);padding-top:20px}
.about-p-k{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:13px}
.about-p-d{color:var(--ink-2);font-size:14px;line-height:1.62;margin:0}

/* --- close --- */
.about-close{border-top:1px solid var(--line-2);margin-top:clamp(18px,3vw,30px);
  padding:clamp(48px,8vw,92px) 0 0;text-align:center}
.about-close-h{font-size:clamp(34px,6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:0}
.about-close-p{color:var(--ink-2);font-size:clamp(15px,1.6vw,18px);line-height:1.62;max-width:52ch;margin:22px auto 0}
.about-close-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,38px)}

/* --- closing stamp --- */
.about-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(40px,6vw,64px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.about-stamp-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px 1px var(--teal-dim);flex:0 0 auto}
.about-stamp-sep{color:var(--line-2)}

@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:clamp(20px,5vw,40px)}
  .about-x{order:-1;min-height:clamp(200px,50vw,300px)}
  .about-intro{max-width:56ch}
}
@media (max-width:820px){
  .about-sec{grid-template-columns:44px minmax(0,1fr);gap:8px 18px}
  .about-k{padding-top:4px;font-size:13px}
  .about-prin{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
  .about-p:nth-child(n+3){padding-top:22px}
}
@media (max-width:640px){
  .about-row{grid-template-columns:40px minmax(0,1fr);gap:6px 16px}
  .about-row-t{grid-column:2}
  .about-row-b{grid-column:1 / -1;margin-top:10px}
}
@media (max-width:460px){
  .about-prin{grid-template-columns:1fr}
  .about-p:nth-child(n+2){padding-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .about-x-mark{filter:drop-shadow(0 0 12px rgba(44,212,200,.26));animation:none}
  .about-x-mark polygon{opacity:1;transform:none;animation:none}
  .about-x-ring{opacity:.85;transform:translate(-50%,-50%);animation:none}
  .about-x-coords{opacity:1;animation:none}
  .about-row,.about-row::before{transition:none}
  .about-scrollcue,.svc-scrollcue{opacity:1;animation:none}
  .about-scrollcue i::after,.svc-scrollcue i::after{animation:none;transform:translateY(-100%)}
}

/* ============================================================
   CAREERS — public salary range (optional, from Odoo hr.job)
   ============================================================ */
.cr-role-salary{color:var(--teal-ink)}

/* ============================================================
   SERVICES PAGE — .svc-*
   Concrete capabilities page. Shares the editorial vocabulary of
   About (mono indices, hairline rules, one teal accent word) but a
   distinct structure: three numbered services, each split into
   What it is / What's included / The outcome. Teal as accent only.
   ============================================================ */
.services-page{padding-bottom:clamp(28px,4vh,52px)}

/* hero — copy + mono service index — full-screen header.
   Same zoom-aware full-viewport treatment as About; the on-load motion is
   deliberately different: a hairline "thread" draws down the service index,
   the three rows draw in from the left in sequence, and a single teal underline
   sweeps under the accent word — an editorial draw-in, not the assembling X. */
.svc-hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(24px,5vw,72px);
  align-items:center;align-content:center;position:relative;
  min-height:calc(100svh / var(--zoom) - var(--h) - clamp(28px,4vw,52px));
  padding:0 0 clamp(52px,8vh,92px);border-bottom:1px solid var(--line)}
.svc-hero-copy{min-width:0}
.svc-title{font-size:clamp(40px,7vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:16px 0 0}
.svc-title .ln{display:block}
.svc-accent{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-ink);letter-spacing:-.01em;font-size:1.02em;padding-right:.04em;
  background-image:linear-gradient(var(--teal-ink),var(--teal-ink));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;padding-bottom:.05em;
  animation:svcSweep .85s var(--ease-out) .95s both}
@keyframes svcSweep{to{background-size:100% 1px}}
.svc-intro{color:var(--ink-2);font-size:clamp(16px,1.7vw,20px);line-height:1.62;max-width:50ch;margin:26px 0 0}
.svc-index{list-style:none;margin:0;padding:0 0 0 20px;border-top:1px solid var(--line-2);position:relative}
/* the drawn thread down the index (spine-motif echo, teal, on load) */
.svc-index::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--teal);opacity:.55;
  transform:scaleY(0);transform-origin:top;animation:svcThread 1.05s var(--ease-out) .3s both}
.svc-index::after{content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 9px 1px var(--teal-dim);opacity:0;animation:axFade .5s ease 1.3s both}
@keyframes svcThread{to{transform:scaleY(1)}}
.svc-index li{border-bottom:1px solid var(--line);opacity:0;animation:svcRow .65s var(--ease-out) both}
.svc-index li:nth-child(1){animation-delay:.4s}
.svc-index li:nth-child(2){animation-delay:.54s}
.svc-index li:nth-child(3){animation-delay:.68s}
@keyframes svcRow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.svc-index a{display:flex;align-items:center;gap:16px;padding:14px 4px;color:var(--ink-2);transition:color .3s var(--ease-out),padding .3s var(--ease-out)}
.svc-index a:hover{color:var(--teal-ink);padding-left:12px}
.svc-index-n{font-size:12px;color:var(--teal-ink);letter-spacing:.14em;flex:0 0 auto}
.svc-index-l{font-size:clamp(15px,1.5vw,17px);font-weight:600;letter-spacing:-.01em}

/* service blocks */
.svc-list{border-top:1px solid var(--line-2)}
.svc-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--h) + clamp(14px,2vw,24px))}
.svc-item:first-child{border-top:0}
.svc-k{font-family:var(--mono);font-size:15px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em;padding-top:6px}
.svc-c{min-width:0}
.svc-lbl{margin-bottom:18px}
.svc-h{font-size:clamp(23px,2.9vw,36px);font-weight:700;letter-spacing:-.028em;line-height:1.08;color:var(--ink);margin:0 0 clamp(22px,3vw,34px);max-width:22ch}
.svc-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.svc-part{min-width:0;position:relative;padding-top:16px;border-top:1px solid var(--line)}
.svc-part-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:12px}
.svc-part-p{color:var(--ink-2);font-size:14.5px;line-height:1.66;margin:0;max-width:44ch}
.svc-incl{list-style:none;margin:0;padding:0}
.svc-incl li{position:relative;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.5;margin-bottom:11px}
.svc-incl li:last-child{margin-bottom:0}
.svc-incl li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 8px 1px var(--teal-dim)}

/* close */
.svc-close{border-top:1px solid var(--line-2);margin-top:clamp(18px,3vw,30px);
  padding:clamp(40px,6vw,72px) 0 0;text-align:center}
.svc-close-h{font-size:clamp(32px,5.6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:0}
.svc-close-p{color:var(--ink-2);font-size:clamp(15px,1.6vw,18px);line-height:1.62;max-width:54ch;margin:22px auto 0}
.svc-close-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,38px)}

/* stamp */
.svc-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(36px,5vw,56px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.svc-stamp-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px 1px var(--teal-dim);flex:0 0 auto}
.svc-stamp-sep{color:var(--line-2)}

@media (max-width:900px){
  .svc-parts{grid-template-columns:1fr;gap:0}
  .svc-part{padding:16px 0;border-top:1px solid var(--line)}
  .svc-part:first-child{border-top:0}
}
@media (max-width:760px){
  .svc-hero{grid-template-columns:1fr;gap:clamp(20px,5vw,36px);align-items:center}
  .svc-intro{max-width:56ch}
  .svc-item{grid-template-columns:44px minmax(0,1fr);gap:8px 18px}
  .svc-k{padding-top:4px;font-size:13px}
}
@media (max-width:520px){
  .svc-item{grid-template-columns:1fr;gap:14px}
  .svc-k{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .svc-accent{background-size:100% 1px;animation:none}
  .svc-index::before{transform:scaleY(1);animation:none}
  .svc-index::after{opacity:1;animation:none}
  .svc-index li{opacity:1;transform:none;animation:none}
}

/* ============================ BRAND & PRESS PAGE ============================ */
.press-page{padding-bottom:clamp(72px,11vh,132px)}

/* --- hero: copy + a static mark/wordmark lockup --- */
.press-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,72px);
  align-items:center;align-content:center;position:relative;z-index:1;
  min-height:calc(100svh / var(--zoom) - var(--h) - clamp(28px,4vw,52px));
  padding:0 0 clamp(52px,8vh,92px);border-bottom:1px solid var(--line)}
.press-hero-copy{min-width:0}
.press-title{font-size:clamp(40px,7vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:16px 0 0}
.press-title .ln{display:block}
.press-accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-ink);letter-spacing:-.01em;font-size:1.03em;padding-right:.04em}
.press-intro{color:var(--ink-2);font-size:clamp(16px,1.7vw,20px);line-height:1.62;max-width:50ch;margin:26px 0 0}
.press-hero-mark{position:relative;display:grid;place-items:center;gap:clamp(18px,2.4vw,28px);
  min-height:clamp(220px,30vw,360px);isolation:isolate}
/* the mark is a precision dial — X locked dead-centre in concentric rings + a graduated scale */
.press-hero-dial{position:relative;display:grid;place-items:center;width:clamp(230px,32vw,360px);aspect-ratio:1;
  animation:pressDialIn 1.1s var(--ease-out) both}
.phr{position:absolute;border-radius:50%;pointer-events:none}
.phr-out{inset:0;border:1px solid var(--line)}
.phr-in{inset:15%;border:1px dashed var(--line);opacity:.55}
.phr-ticks{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-conic-gradient(from 0deg,var(--line) 0 .5deg,transparent .5deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 0 45%,#000 45.5% 49.5%,transparent 50%);
  mask:radial-gradient(circle,transparent 0 45%,#000 45.5% 49.5%,transparent 50%)}
.phr-arc{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid transparent;border-top-color:var(--teal);border-right-color:var(--teal);opacity:.7;
  filter:drop-shadow(0 0 6px rgba(44,212,200,.5));animation:pressArc 12s linear infinite}
.press-hero-x{position:relative;z-index:1;width:clamp(128px,19vw,208px);height:auto;fill:var(--teal);
  filter:drop-shadow(0 0 22px rgba(44,212,200,.28));animation:pressGlow 6s var(--ease-std) infinite}
.press-hero-wm{position:relative;z-index:1}
.press-hero-wm .wm{font-size:clamp(20px,2.4vw,27px);font-weight:600;letter-spacing:.2em;color:var(--ink);text-transform:lowercase}
.press-hero-wm .wm .o{color:var(--teal)}
@keyframes pressGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(44,212,200,.22))}50%{filter:drop-shadow(0 0 30px rgba(44,212,200,.4))}}
@keyframes pressArc{to{transform:rotate(360deg)}}
@keyframes pressDialIn{from{opacity:0;transform:scale(.82) rotate(-14deg)}to{opacity:1;transform:none}}

/* --- numbered editorial sections (hairline-ruled, mirrors about/services) --- */
.press-list{border-top:1px solid var(--line-2)}
.press-sec{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(14px,3vw,40px);
  padding:clamp(38px,5.5vw,68px) 0;border-top:1px solid var(--line)}
.press-sec:first-child{border-top:0}
.press-k{font-family:var(--mono);font-size:15px;font-weight:300;color:var(--teal-ink);letter-spacing:.1em;padding-top:6px}
.press-c{min-width:0}
.press-lbl{margin-bottom:18px}
.press-h{font-size:clamp(23px,2.9vw,36px);font-weight:700;letter-spacing:-.028em;line-height:1.08;color:var(--ink);margin:0 0 clamp(18px,2.4vw,26px);max-width:22ch}
.press-lead{color:var(--ink);font-size:clamp(16px,1.75vw,20px);line-height:1.58;letter-spacing:-.01em;max-width:62ch;margin:0}
.press-note{color:var(--muted);font-size:12.5px;letter-spacing:.02em;line-height:1.6;margin:20px 0 0;max-width:62ch}

/* --- 01 logo: the three forms on dark + light --- */
.press-forms{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(26px,3.4vw,40px)}
.press-form{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(14px,2.4vw,32px);align-items:center;
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.press-form:first-child{border-top:0;padding-top:0}
.press-form-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.press-form-stages{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px);min-width:0}
.press-stage{display:grid;place-items:center;min-height:clamp(96px,12vw,132px);padding:20px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.press-stage--dark{background:#060D0C}
.press-stage--light{background:#EEF2F0}
.press-mk{width:clamp(44px,6vw,60px);height:auto;flex:0 0 auto}
.press-wm{font-family:var(--sans);font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:.18em;text-transform:lowercase;line-height:1}
.press-stage--dark .press-wm{color:#EAF3F0}
.press-stage--light .press-wm{color:#0A1512}
.press-wm .o{color:var(--teal)}
.press-lockup{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,16px)}
.press-lockup .press-mk{width:clamp(34px,4vw,44px)}
.press-lockup .press-wm{font-size:clamp(18px,2vw,24px)}

/* clear-space + minimum size guides */
.press-guides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:clamp(30px,3.6vw,44px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.press-guide-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:16px}
.press-clearspace{position:relative;width:clamp(120px,15vw,168px);aspect-ratio:1;display:grid;place-items:center}
.press-cs-frame{position:absolute;inset:0;border:1px dashed var(--line-2)}
.press-cs-mk{width:50%}
.press-cs-x{position:absolute;top:calc(25% - .6em);left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);letter-spacing:.1em}
.press-guide-note{color:var(--muted);font-size:12px;line-height:1.6;margin:16px 0 0;max-width:40ch}
.press-minsizes{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.press-ms{display:flex;align-items:center;gap:14px}
.press-ms-lock{gap:8px}.press-ms-lock .press-mk{width:20px}.press-ms-lock .press-wm{font-size:14px;letter-spacing:.14em}
.press-ms .press-wm{color:var(--ink)}
.press-ms-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* --- 02 usage: do / don't --- */
.press-rules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,36px)}
.press-rule{padding-top:16px;border-top:2px solid var(--line-2)}
.press-rule--do{border-top-color:var(--teal-ink)}
.press-rule-k{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.press-rule--do .press-rule-k{color:var(--teal-ink)}
.press-rule--dont .press-rule-k{color:var(--muted)}
.press-rule ul{list-style:none;margin:0;padding:0}
.press-rule li{position:relative;padding-left:22px;color:var(--ink-2);font-size:14.5px;line-height:1.5;margin-bottom:13px}
.press-rule li:last-child{margin-bottom:0}
.press-rule--do li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--teal);
  box-shadow:0 0 8px 1px var(--teal-dim)}
.press-rule--dont li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--line-2)}

/* --- 03 colour --- */
.press-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,36px)}
.press-swatch{display:flex;flex-direction:column;min-width:0}
.press-chip{display:block;width:100%;aspect-ratio:4/3;border-radius:2px;margin-bottom:14px}
.press-chip--bordered{box-shadow:inset 0 0 0 1px var(--line-2)}
.press-sw-name{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.press-sw-hex{font-size:12.5px;color:var(--teal-ink);letter-spacing:.04em}
.press-sw-rgb{font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-bottom:10px}
.press-sw-use{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.press-inks{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(18px,2.4vw,30px);margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(18px,2vw,22px);border-top:1px solid var(--line)}
.press-inks-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.press-ink{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.press-ink i{width:15px;height:15px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line-2);flex:0 0 auto}
.press-ink b{font-weight:400;color:var(--ink);letter-spacing:.02em}

/* --- 04 typography --- */
.press-faces{display:grid;gap:0;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.press-face{display:grid;grid-template-columns:clamp(96px,13vw,150px) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:center;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line)}
.press-face-spec{font-size:clamp(54px,8vw,96px);line-height:.9;color:var(--ink);letter-spacing:-.03em}
.press-spec-sans{font-family:var(--sans);font-weight:800}
.press-spec-serif{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-ink)}
.press-spec-mono{font-family:var(--mono);font-weight:500}
.press-face-spec.press-spec-mono{letter-spacing:0;font-size:clamp(44px,6vw,74px)}
.press-face-meta{min-width:0}
.press-face-name{display:block;font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
.press-face-role{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.press-face-samp{font-size:clamp(20px,2.4vw,30px);color:var(--ink);line-height:1.15;margin:0;letter-spacing:-.01em}
.press-face-samp .press-spec-serif{font-size:1.1em}
.press-face-samp.press-spec-mono{font-size:clamp(14px,1.6vw,18px);letter-spacing:.02em;color:var(--ink-2)}
.press-face-samp-note{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:8px}

/* --- 05/06 name + boilerplate --- */
.press-boiler{margin-top:clamp(22px,2.6vw,30px);padding:22px 0 22px 24px;position:relative}
.press-boiler::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--teal)}
.press-boiler-tag{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.press-boiler-p{color:var(--ink);font-size:clamp(15px,1.6vw,18px);line-height:1.7;max-width:64ch;margin:0}
.press-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3vw,36px);
  padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line)}
.press-fact{display:flex;flex-direction:column;gap:7px;min-width:0}
.press-fact-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.press-fact-v{font-size:14.5px;color:var(--ink);font-weight:500;letter-spacing:-.01em}

/* --- 07 contact + downloads --- */
.press-contact{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin-top:clamp(24px,3vw,34px);
  padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.press-contact-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.press-contact-mail{font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  transition:color .25s var(--ease-out)}
.press-contact:hover .press-contact-mail{color:var(--teal-ink)}
.press-contact .ar{margin-left:auto;color:var(--teal-ink);transition:transform .3s var(--ease-out)}
.press-contact:hover .ar{transform:translateX(5px)}
.press-downloads{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;border-top:1px solid var(--line)}
.press-downloads li{border-bottom:1px solid var(--line)}
.press-downloads a{display:flex;align-items:center;gap:16px;padding:15px 4px;color:var(--ink);
  transition:color .25s var(--ease-out),padding .25s var(--ease-out)}
.press-downloads a:hover{color:var(--teal-ink);padding-left:12px}
.press-dl-name{font-size:15px;font-weight:600;letter-spacing:-.01em;flex:0 0 auto;min-width:0}
.press-dl-file{font-size:12px;color:var(--muted);letter-spacing:.02em}
.press-downloads .ar{margin-left:auto;color:var(--teal-ink)}

/* --- responsive --- */
@media (max-width:900px){
  .press-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .press-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .press-hero{grid-template-columns:1fr;gap:clamp(24px,6vw,40px);align-items:center}
  .press-hero-mark{order:-1}
  .press-sec{grid-template-columns:44px minmax(0,1fr);gap:8px 18px}
  .press-k{padding-top:4px;font-size:13px}
  .press-form{grid-template-columns:1fr;gap:12px}
  .press-guides{grid-template-columns:1fr;gap:30px}
  .press-rules{grid-template-columns:1fr;gap:28px}
  .press-face{grid-template-columns:80px minmax(0,1fr);gap:18px}
}
@media (max-width:520px){
  .press-sec{grid-template-columns:1fr;gap:12px}
  .press-k{padding-top:0}
  .press-swatches{grid-template-columns:1fr 1fr}
  .press-facts{grid-template-columns:1fr 1fr}
  .press-contact-mail{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .press-hero-x,.press-hero-dial,.phr-arc{animation:none}
}

.cr-role-nojs,.ev-reg-nojs{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--teal-ink)}