/* ══ Rutujeet · shared system ════════════════════════════════════
   Type: Bricolage Grotesque (variable: opsz / wdth / wght) for every
   display and heading role. Geist for everything else, reading and labels.
   Emphasis is a solid block (.hl), never a lighter weight.
   The eight ransom faces are loaded only for the hero name + logo.
   Shape rule: cards and slots are sharp (0). Chips, nav, buttons are pill.
═══════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F2EFE6; --bone:#E8DCC8; --ink:#0A0A0A;
  --blue:#002FA7; --blue70:#4969BA; --blue40:#91A2CD; --blue15:#CED2DD;
  --muted:#6B655A; --rule:#D8D2C4; --bw:3px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Geist',system-ui,sans-serif;
  --label:'Geist',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-optical-sizing:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}
/* Lenis smooth scrolling (lab.js smooth()); rules from lenis.css */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
a{color:inherit}
/* the custom cursor is only for a real mouse; phones that claim hover never get it */
@media (hover:hover) and (pointer:fine){ body,a,button{cursor:none} }

.mono{font-family:var(--label);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.08;mix-blend-mode:multiply;z-index:9998}

/* display roles: one family, three weights */
.h-xl{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.88}
.h-lg{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.92}
.h-md{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1}
/* emphasis: set bold and condensed on a solid block, knocked a little off square */
.hl{display:inline-block;font-weight:800;font-stretch:75%;letter-spacing:0;line-height:.9;background:var(--blue);
  color:var(--paper);padding:.04em .2em .1em;transform:rotate(-1.5deg);text-transform:uppercase}
.cond{font-stretch:75%;font-weight:800;letter-spacing:.005em}          /* condensed, for marquee + stamps */

/* ── ARROWS · one heavy stroke icon, sized by the font-size around it ── */
.ic{width:1em;height:1em;display:block;flex:none;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:square;stroke-linejoin:miter;overflow:visible}

/* ── CURSOR · a sticker dot that grows a label ── */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;opacity:0;will-change:transform;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor .dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--blue);border:2.5px solid var(--ink);
  transform:translate(-50%,-50%)}
.cursor .tag{display:block;position:absolute;left:14px;top:12px;background:var(--bone);border:2.5px solid var(--ink);
  border-radius:100px;padding:9px 15px;font-family:var(--label);font-size:11px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transform:rotate(-4deg) scale(.6);
  opacity:0;transform-origin:left top}

/* ── NAV · inset, raised, its own ground ── */
.navwrap{position:fixed;left:0;right:0;top:22px;z-index:500;display:flex;justify-content:center;padding:0 24px;
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
.navwrap.hid{transform:translateY(-160%)}
@media (prefers-reduced-motion:reduce){.navwrap{transition:none}}
.nav{width:100%;max-width:1120px;display:flex;align-items:center;gap:4px;height:66px;padding:9px 9px 9px 22px;
  background:var(--bone);border:var(--bw) solid var(--ink);border-radius:100px;box-shadow:0 5px 0 var(--ink)}
.nav .grow{flex:1}
.nav a.lnk{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none;padding:12px 18px;border-radius:100px;position:relative}
.nav a.lnk::after{content:'';position:absolute;left:18px;right:18px;bottom:6px;height:2.5px;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}
.nav a.lnk:hover::after,.nav a.lnk.on::after{transform:scaleX(1)}
.nav a.lnk.cta::after{content:none}
.nav a.lnk.cta{background:var(--blue);color:var(--paper);padding:14px 22px;border:2.5px solid var(--ink);font-weight:700;
  display:inline-flex;align-items:center;gap:9px}
.nav a.lnk.cta .ic{width:15px;height:15px}
.nav a.lnk.cta:hover{background:var(--ink)}
.nav a.lnk{transition:transform .12s ease}
.nav a.lnk:active{transform:translateY(2px) scale(.96);transition-duration:.05s}
.logo{transition:transform .12s ease}
.logo:active{transform:translateY(2px) scale(.96)}

/* ── LOGO · RT/JT hand-set like the name, no box ── */
.logo{display:flex;align-items:flex-end;text-decoration:none;gap:0;line-height:1;padding:4px 2px}
.logo span{display:block;font-size:24px;line-height:.8}
.logo .l1{font-family:'Playfair Display',serif;font-style:italic;font-weight:900;color:var(--blue);transform:rotate(-8deg);font-size:30px}
.logo .l2{font-family:'Bebas Neue',sans-serif;transform:rotate(4deg) translateY(1px);font-size:32px;margin-left:-2px}
.logo .l3{font-family:'Courier Prime',monospace;font-weight:700;color:var(--blue);transform:rotate(-12deg);margin:0 -1px 0 1px;font-size:29px}
.logo .l4{font-family:'Abril Fatface',serif;transform:rotate(6deg) translateY(2px);font-size:29px}
.logo .l5{font-family:'JetBrains Mono',monospace;font-weight:700;transform:rotate(-5deg);font-size:23px;margin-left:1px;
  background:var(--blue);color:var(--paper);padding:2px 4px 3px}
.logo:hover span{transform:none}

/* ── MARQUEE · home only, twice, by request ── */
.marquee{overflow:hidden;border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  background:var(--blue);color:var(--paper);display:flex;white-space:nowrap}
.marquee.ink{background:var(--ink)}
.marquee > div{display:flex;animation:slide 34s linear infinite;flex:none}
.marquee.rev > div{animation-direction:reverse}
.marquee span.w{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:clamp(28px,4.4vw,56px);
  letter-spacing:0;padding:10px 0;text-transform:uppercase;display:block}
.marquee i{font-style:normal;padding:0 26px;display:flex;align-items:center}
.marquee i::before{content:'';width:10px;height:10px;background:currentColor;transform:rotate(45deg)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee > div{animation:none}}

/* ── SECTION FURNITURE ── */
.sec{padding:96px 40px}
.sechead{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin-bottom:52px}
.sechead h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.4vw,68px);letter-spacing:-.045em;line-height:.88}
.sechead .count{font-family:var(--label);font-size:13px;letter-spacing:.07em;color:var(--muted);font-weight:500}

/* ── CARD · flat at rest, lifts on hover ── */
.card{background:var(--paper);border:var(--bw) solid var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--ink)}
/* pressed: the lifted card drops flat onto the page while it is held */
.card:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);transition-duration:.06s}

/* media slot */
.slot{background-color:var(--bone);border:2.5px solid var(--ink);display:grid;place-items:center;
  background-image:radial-gradient(var(--blue40) 1.7px,transparent 1.8px);background-size:10px 10px;
  font-family:var(--label);font-size:11px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase;
  overflow:hidden;position:relative}
.slot video,.slot img{width:100%;height:100%;object-fit:cover;display:block}
/* Once a slot holds media its ground goes dark. The bone default is the empty state, and at
   fractional widths (the hobby rail translates by subpixels) a hairline of it was flickering
   along the edges of the clips as they slid past. Black behind black letterboxing hides it. */
.slot.filled{background-color:var(--ink)}

/* ── A CLIP THE BROWSER REFUSED TO AUTOPLAY ──────────────────────────────
   Sits over the still frame so it never looks like a broken box: the same round button
   language as the scroll cue, and a line naming the cause. Built by autoplay() in lab.js
   and only ever added to a clip whose play() was actually rejected. */
.noauto{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:16px;border:0;cursor:pointer;color:var(--paper);
  background:rgba(10,10,10,.55);-webkit-tap-highlight-color:transparent}
.noauto .nb{width:56px;height:56px;border-radius:50%;background:var(--paper);color:var(--ink);
  border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;
  transition:transform .12s ease,box-shadow .12s ease}
.noauto .nb svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
.noauto .nt{font-family:var(--label);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-align:center;line-height:1.55;text-wrap:balance}
.noauto:hover .nb{background:var(--blue);color:var(--paper)}
.noauto:active .nb{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
/* a small slot (the hobby rail on a phone) only has room for the button */
@media (max-width:900px){.noauto{gap:10px}.noauto .nb{width:48px;height:48px}.noauto .nt{font-size:10px}}

/* chip · bordered pill, hard shadow */
.chip{border:2.5px solid var(--ink);border-radius:100px;padding:9px 16px;font-size:11px;font-weight:700;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.07em;display:inline-block;
  background:var(--paper);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.chip.fill{background:var(--blue);color:var(--paper)}

/* round arrow button */
.rbtn{width:48px;height:48px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);
  display:grid;place-items:center;font-family:var(--label);font-size:18px;flex:none;
  transition:background .15s,color .15s}
.card:hover .rbtn{background:var(--blue);color:var(--paper)}
button.rbtn{transition:background .15s,color .15s,transform .12s ease}
button.rbtn:active{transform:scale(.9);transition-duration:.05s}

/* pill button */
.btn{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;padding:17px 28px;border:var(--bw) solid var(--ink);border-radius:100px;display:inline-block;
  background:var(--paper);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);transition-duration:.06s}
.btn.fill{background:var(--blue);color:var(--paper)}

/* ── FOOTER ── */
.foot{background:var(--ink);color:var(--paper);padding:92px 40px 30px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:start}
.foot h2{grid-column:1;font-family:var(--display);font-weight:800;font-size:clamp(34px,5.6vw,72px);letter-spacing:-.045em;line-height:.88}
/* the address is the contact point, so it is set large and copies on click */
.mailbtn{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:18px;margin-top:38px;background:none;border:0;padding:0;
  color:var(--paper);font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(21px,3.2vw,44px);text-align:left}
.mailbtn .addr{position:relative;padding-bottom:10px;transition:color .18s,transform .12s ease}
.mailbtn .addr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);
  transform:scaleX(var(--u,1));transform-origin:left center;transition:background .18s}
.mailbtn:hover .addr{color:var(--blue40)}
.mailbtn:hover .addr::after{background:var(--blue40)}
.mailbtn:active .addr{transform:scale(.98);transition-duration:.05s}
.mailbtn .stamp{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--blue);color:var(--paper);border:2.5px solid var(--paper);border-radius:100px;padding:7px 14px;
  transform:rotate(-4deg) scale(.7);opacity:0;white-space:nowrap;
  transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .18s}
.mailbtn.copied .stamp{transform:rotate(-4deg) scale(1);opacity:1}
/* on desktop the cursor label already says Copied, so the stamp is only for touch and narrow screens */
.mailbtn .stamp{display:none}
@media (max-width:900px),(hover:none){.mailbtn .stamp{display:inline-block}}
@media (prefers-reduced-motion:reduce){.mailbtn .stamp{transition:opacity .18s}}
.foot-links{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;min-width:270px}
.foot-links a{display:flex;align-items:center;justify-content:space-between;gap:28px;text-decoration:none;
  padding:14px 2px;font-family:var(--display);font-weight:800;font-stretch:80%;
  font-size:clamp(20px,2.1vw,30px);letter-spacing:-.02em;text-transform:uppercase;
  transition:color .18s ease,padding-left .18s ease}
.foot-links a:hover{color:var(--blue40);padding-left:12px}
.foot-links a:active{color:var(--paper);transition-duration:.05s}
.foot-links .ic{width:.78em;height:.78em;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.foot-links a:hover .ic{transform:translate(3px,-3px)}
.foot-base{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:78px;padding-top:22px;position:relative;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue40)}
.foot-base::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue40);
  transform:scaleX(var(--b,1));transform-origin:left center}
.totop{background:none;border:0;padding:0;color:var(--blue40);font:inherit;text-transform:uppercase;
  letter-spacing:.07em;transition:color .18s;display:inline-flex;align-items:center;gap:8px}
.totop .ic{width:1.15em;height:1.15em;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.totop:hover{color:var(--paper)}
.totop:hover .ic{transform:translateY(-3px)}
.totop:active .ic{transform:translateY(-6px);transition-duration:.08s}
.foot h2 .fch{display:inline-block}

@media (max-width:900px){
  .sec{padding:60px 22px}
  .nav{padding-left:16px}
  .nav a.lnk:not(.cta){display:none}
  .foot{padding:60px 22px 26px;grid-template-columns:minmax(0,1fr)}
  .foot-links{grid-column:1;grid-row:auto;margin-top:46px;min-width:0}
  .foot-base{margin-top:46px}
}

/* ══ MOBILE MENU · replaces the nav bar at phone widths (built by lab.js menu()) ══
   A round burger button; opening it floods the screen from the button: an ink circle first,
   then the blue panel, then the links rise in one by one. The bars fold into an X. */
.burger,.mmenu{display:none}
@media (max-width:900px){
  .navwrap{display:none}
  .burger{display:grid;place-items:center;position:fixed;top:16px;right:16px;z-index:620;width:58px;height:58px;
    border-radius:50%;background:var(--bone);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
    padding:0;color:var(--ink);-webkit-tap-highlight-color:transparent;
    transition:background .3s ease,transform .12s ease,box-shadow .12s ease,border-color .3s ease}
  .burger:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
  .burger.hid{transform:translateY(-110px)}
  .burger{transition:background .3s ease,transform .32s cubic-bezier(.4,0,.2,1),box-shadow .12s ease,border-color .3s ease}
  .burger .bars{position:relative;width:24px;height:18px;display:block}
  .burger .bars i{position:absolute;left:0;width:24px;height:3px;border-radius:2px;background:currentColor;
    transition:transform .45s cubic-bezier(.7,-.4,.3,1.4),opacity .2s ease,top .45s cubic-bezier(.7,-.4,.3,1.4)}
  .burger .bars i:nth-child(1){top:0}
  .burger .bars i:nth-child(2){top:7.5px}
  .burger .bars i:nth-child(3){top:15px}
  .menu-open .burger{background:var(--paper);border-color:var(--ink)}
  .menu-open .burger .bars i:nth-child(1){top:7.5px;transform:rotate(45deg)}
  .menu-open .burger .bars i:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-open .burger .bars i:nth-child(3){top:7.5px;transform:rotate(-45deg)}

  .mmenu{display:block;position:fixed;inset:0;z-index:610;visibility:hidden;pointer-events:none}
  .mmenu.open{visibility:visible;pointer-events:auto}
  .mmenu .mm-ink,.mmenu .mm-panel{position:absolute;inset:0}
  .mmenu .mm-ink{background:var(--ink)}
  .mmenu .mm-panel{background:var(--blue);color:var(--paper);display:flex;flex-direction:column;padding:16px 22px 28px;overflow:hidden}
  .mm-panel::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
    background-image:radial-gradient(var(--blue40) 1.6px,transparent 1.7px);background-size:14px 14px}
  .mm-top{position:relative;height:58px;display:flex;align-items:center}
  .mm-top .logo span{color:var(--paper)}
  .mm-top .logo .l1,.mm-top .logo .l3{color:var(--bone)}
  .mm-top .logo .l5{background:var(--paper);color:var(--blue)}
  .mm-links{position:relative;list-style:none;margin:auto 0;display:flex;flex-direction:column;gap:4px}
  .mm-links li{overflow:hidden;padding:4px 0}
  .mm-links a{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--paper);
    font-family:var(--display);font-weight:800;font-size:clamp(46px,14vw,68px);letter-spacing:-.045em;line-height:.95;text-transform:uppercase}
  .mm-links a small{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--blue40);transform:translateY(-4px)}
  .mm-links a.cta{display:inline-flex;align-self:flex-start;margin-top:14px;background:var(--paper);color:var(--blue);
    border:var(--bw) solid var(--ink);border-radius:100px;box-shadow:0 5px 0 var(--ink);padding:14px 24px;
    font-size:18px;letter-spacing:.02em;gap:10px;align-items:center}
  .mm-links li:has(.cta){overflow:visible;padding-bottom:10px}
  .mm-links a.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
  .mm-links a:not(.cta):active{color:var(--bone)}
  .mm-foot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
    border-top:2px solid var(--blue40);padding-top:18px;font-family:var(--label);font-size:12px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase}
  .mm-foot a{color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .mm-foot .ic{width:14px;height:14px}
  .mm-foot .mm-mail{color:var(--blue15);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
}