/* ==========================================================================
   home.css - the homepage's own rules.

   Lifted out of three inline <style> blocks in the design-tool export on
   2026-09-02. Tokens live in tokens.css and the footer lives in footer.css;
   nothing here redefines either.
   ========================================================================== */

/* The homepage footer runs full bleed. The notes index caps its footer at
   --shell and centres it. See the note at the top of footer.css: this
   difference is real and unsettled, and it deletes once it is settled. */
.foot-bar{margin:0 clamp(12px,1.6vw,24px);padding:22px 0 30px}

*{box-sizing:border-box;}
  html,body{margin:0;padding:0;overscroll-behavior:none;background:var(--bg-a);}
  body{font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
  ::selection{background:var(--ink);color:var(--bg-a);}
  a{color:inherit;text-decoration:none;}
  a:hover{color:inherit;}
  [data-carousel]{scrollbar-width:none;}
  [data-carousel]::-webkit-scrollbar{display:none;}
  @keyframes sweepX{0%{background-position:130% 0;}30%{background-position:-30% 0;}100%{background-position:-30% 0;}}
  @keyframes sweepYUp{0%{background-position:0 -30%;}30%{background-position:0 130%;}100%{background-position:0 130%;}}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}}
  @keyframes deviceIn{from{opacity:0;transform:translateY(26px) scale(.965);}}
  @keyframes deviceInSm{from{opacity:0;transform:translateY(20px) scale(.94);}}
  @keyframes fadeIn{from{opacity:0;}}
  @keyframes drawX{from{transform:scaleX(0);}}
  @keyframes drawY{from{transform:scaleY(0);}}
  [data-revealed] [data-draw]{animation-play-state:running !important;}
  [data-noanim] [data-draw]{animation:none !important;}
  /* SEO & GEO card: light travelling from the work we do to what the client gets */
  @keyframes sgFlow{
    0%{stroke-dashoffset:100;opacity:0;}
    5%{opacity:1;}
    21%{opacity:1;}
    28%{stroke-dashoffset:0;opacity:0;}
    100%{stroke-dashoffset:0;opacity:0;}
  }
  @keyframes sgDot{0%,100%{opacity:.55;}50%{opacity:1;}}
  .sg-wires svg{display:block;width:100%;height:auto;overflow:visible;}
  .sg-wires .sg-narrow{display:none;}
  .p-head{stroke-dasharray:8 92;animation:sgFlow 6.4s linear infinite;animation-delay:var(--d);animation-play-state:paused;}
  .p-mid{display:none;}
  .p-tail{stroke-dasharray:8 92;animation:sgFlow 6.4s linear infinite;animation-delay:var(--d);animation-play-state:paused;}
  .hub-dot{animation:sgDot 4.8s ease-in-out infinite;animation-play-state:paused;}
  @media (max-width:720px){
    .sg-wires .sg-wide{display:none;}
    .sg-wires .sg-narrow{display:block;}
  }
  @media (prefers-reduced-motion: reduce){
    .p-head,.p-mid,.p-tail,.hub-dot{animation:none !important;}
    .p-head,.p-mid,.p-tail{stroke-dasharray:8 92;animation:sgFlow 6.4s linear infinite;animation-delay:var(--d);animation-play-state:paused;}
  }



    /* Verum-bar layer: rolling nav, exclusion cursor, spotlight fallbacks */
    /* rolling nav labels moved to assets/nav.css */
    #vx-cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;z-index:998;pointer-events:none;
      translate:-50% -50%;transition:width .3s cubic-bezier(.19,1,.22,1),height .3s cubic-bezier(.19,1,.22,1);
      mix-blend-mode:exclusion;background:var(--ink-hi)}
    #vx-cursor.grow{width:64px;height:64px}
    @media(pointer:coarse){#vx-cursor{display:none}}

    /* The mark: a bone blob punched over the wordmark, with a material take of
       the same mark showing through a slightly smaller blob inside it. The two
       boxes hang far past the wordmark so the blob is never clipped flat when
       the cursor sits near an edge. */
    [data-mark66]{position:relative;width:100%;user-select:none;cursor:crosshair;
      --mk-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath fill='black' d='M100 5c25-11 56 3 69 24 13 21 9 41 20 60 11 20 2 49-18 60-19 11-41 4-61 15-21 11-50 7-64-10-14-18-10-40-19-61-9-21 0-46 18-58 18-13 34-17 55-30z'/%3E%3C/svg%3E");
      --mk-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath fill='black' d='M100 15c21-9 51 5 63 25 12 20 7 40 17 58 10 19-2 45-21 55-18 10-40 2-60 11-21 9-45 0-58-17-12-17-6-37-14-57-8-20 3-43 21-55 17-11 36-12 52-20z'/%3E%3C/svg%3E")}
    [data-mark66] .mk-flat{width:100%;height:auto;display:block}
    [data-mark66] .mk-blot,[data-mark66] .mk-mat{position:absolute;top:-130%;bottom:-130%;left:-12%;right:-12%;
      opacity:0;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
    [data-mark66] .mk-blot{background:var(--ink);
      -webkit-mask-image:var(--mk-a);mask-image:var(--mk-a);
      -webkit-mask-size:calc(var(--mks,440px)*1.34);mask-size:calc(var(--mks,440px)*1.34);
      -webkit-mask-position:calc(var(--mkx,-9999px) - var(--mks,440px)*.17) calc(var(--mky,-9999px) - var(--mks,440px)*.17);
      mask-position:calc(var(--mkx,-9999px) - var(--mks,440px)*.17) calc(var(--mky,-9999px) - var(--mks,440px)*.17)}
    [data-mark66] .mk-mat{background-position:center;background-repeat:no-repeat;
      background-size:calc(100% * 100 / 124) auto;
      -webkit-mask-image:var(--mk-b);mask-image:var(--mk-b);
      -webkit-mask-size:var(--mks,440px);mask-size:var(--mks,440px);
      -webkit-mask-position:var(--mtx,-9999px) var(--mty,-9999px);
      mask-position:var(--mtx,-9999px) var(--mty,-9999px)}
    [data-mark66] .mk-on{opacity:1}
    [data-mark66-now]{transition:opacity .25s cubic-bezier(.19,1,.22,1)}
    @media(prefers-reduced-motion:reduce){[data-mark66-now]{transition:none}}
    /* the mark's own band. It clips, and the blob is held inside it, so nothing
       below ever gets covered. */
    .mark-band{position:relative;overflow:hidden;padding:clamp(140px,19vh,215px) clamp(12px,1.6vw,24px)}
    @media(max-width:700px){
      .mark-band{padding:clamp(90px,13vh,140px) clamp(12px,1.6vw,24px)}
    }
    @media(max-width:860px){
      [data-spot]{height:auto !important}
      [data-spot] [data-spot-pin]{position:relative !important;height:auto !important;padding:80px 0 !important;overflow:visible !important}
      [data-spot] [data-spot-grid]{grid-template-columns:1fr !important;gap:30px !important;height:auto !important;align-items:start !important}
      [data-spot] [data-spot-slot]{display:none !important}
      [data-spot] [data-spot-media]{position:relative !important;transform:none !important;width:100% !important;height:auto !important;aspect-ratio:16/10;object-fit:cover;display:block}
      [data-spot] [data-spot-text]{opacity:1 !important;transform:none !important}
    }
    @media(max-width:860px){
      /* no camera move on a phone: the film just plays in place */
      [data-room]{height:auto !important}
      [data-room] [data-room-pin]{position:relative !important;height:auto !important;overflow:visible !important;padding:80px var(--gutter) !important}
      [data-room] [data-room-stage]{position:relative !important;inset:auto !important;transform:none !important}
      [data-room] [data-room-shell]{display:none !important}
      [data-room] [data-room-screen]{position:relative !important;left:auto !important;top:auto !important;width:100% !important;transform:none !important}
      [data-room] [data-room-bezel]{opacity:1 !important}
      [data-room] [data-room-ui]{display:none !important}
    }
    @media(prefers-reduced-motion:reduce){
      [data-room]{height:auto !important}
      [data-room] [data-room-pin]{position:relative !important;height:auto !important;overflow:visible !important;padding:80px var(--gutter) !important}
      [data-room] [data-room-stage]{position:relative !important;inset:auto !important;transform:none !important}
      [data-room] [data-room-shell]{display:none !important}
      [data-room] [data-room-screen]{position:relative !important;left:auto !important;top:auto !important;width:100% !important;transform:none !important}
      [data-room] [data-room-bezel]{opacity:1 !important}
      [data-room] [data-room-ui]{display:none !important}
      [data-spot]{height:auto !important}
      [data-spot] [data-spot-pin]{position:relative !important;height:auto !important;padding:80px 0 !important;overflow:visible !important}
      [data-spot] [data-spot-grid]{height:auto !important;align-items:start !important}
      [data-spot] [data-spot-slot]{display:none !important}
      [data-spot] [data-spot-media]{position:relative !important;transform:none !important;width:100% !important;height:auto !important;aspect-ratio:16/10;object-fit:cover;display:block}
      [data-spot] [data-spot-text]{opacity:1 !important;transform:none !important}
      #vx-cursor{display:none}
    }
    /* nav mobile rules moved to assets/nav.css */
  

    [data-final]{position:relative;z-index:2;background:var(--bg-a);border-top:1px solid var(--line);overflow:hidden;}
    [data-final] .wrap{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);}
    [data-final] .serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.012em;color:var(--ink);}
    [data-final] .meta{font-family:'Geist Mono',monospace;font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);}

    /* the line-up, at a much smaller surface */
    .castx{padding:var(--bay) 0;}
    .castx .grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start;margin-top:var(--stack);}
    .castx .divide{background:var(--line);align-self:stretch;}
    /* every quote sits in the SAME grid cell, so the block is always as tall as the longest one */
    .castx .say{display:grid;position:relative;}
    .castx .say .q{grid-area:1/1;margin:0;opacity:0;transform:translateY(7px);pointer-events:none;
      transition:opacity .2s ease-out,transform 0s linear .2s;}
    .castx .say .q.on{opacity:1;transform:none;pointer-events:auto;
      transition:opacity .46s cubic-bezier(.4,0,.2,1) .15s,transform .72s cubic-bezier(.19,1,.22,1) .1s;}
    .castx .say p{margin:0;font-size:var(--t-5);line-height:1.46;}
    .castx .say .by{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px;}
    .castx .say .dash{width:26px;height:1px;background:var(--line);margin:2px 0;}
    .castx .say::before{content:"\201C";position:absolute;left:-.62em;top:-.42em;font-family:'Instrument Serif',Georgia,serif;
      font-size:clamp(62px,5.8vw,94px);line-height:1;color:var(--ink);opacity:.09;pointer-events:none;}
    .castx .line{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,1.8vw,28px);}
    .castx button{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;}
    .castx button img{display:block;width:clamp(66px,6.2vw,88px);opacity:.42;
      transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .68s cubic-bezier(.19,1,.22,1);}
    .castx button .nm{font-family:'Geist Mono',monospace;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin-top:9px;transition:color .45s ease;}
    .castx button:hover img{opacity:.5;}
    .castx button.on img{opacity:1;transform:translateY(-8px);}
    .castx button.on .nm{color:var(--ink);}
    @media(prefers-reduced-motion:reduce){.castx .say .q,.castx button img{transition-duration:.01ms;}}

    @media(max-width:900px){
      .castx .grid{grid-template-columns:1fr !important;gap:34px !important;}
      .castx .divide{display:none;}
      .castx .say{max-width:none;}
      .castx .line{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
        padding:12px 0 4px;margin:-12px 0 -4px;}
    }