/* brave rabbit — shared site styles
   Design tokens + components used across every page.
   Page-specific layout (hero, reel, work wall, etc.) lives inline
   on the pages that use it, per the project's no-build-tooling approach. */

:root{
  --ground:#1A1917; --surface:#232120; --surface-2:#2A2724; --line:#37332E; --line-2:rgba(55,51,46,.2);
  --hi:#EAE3DA; --lo:#BFB5AA; --lo-2:#B3A99F;
  --oat:#ECE5DB; --oat-ink:#211E1B; --oat-lo:#6E655C;
  --red:#F00000; --amber:#F5A524;
  --ease:cubic-bezier(.16,.84,.24,1); --maxw:1200px; --sk:46px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ground);color:var(--hi);font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:inherit}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,border-color .2s}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 22px -12px rgba(240,0,0,.8)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--red);color:var(--hi)}
.btn-ghost:hover{border-color:var(--hi)}
.btn:hover{transform:translateY(-2px)}
.band{display:inline-block;vertical-align:middle}

.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;background:rgba(26,25,23,.35);backdrop-filter:blur(5px)}
header.stuck{background:rgba(26,25,23,.88);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--hi)}
.brand .logo-lockup{height:60px;width:auto;color:var(--hi);display:block}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{color:var(--lo-2);text-decoration:none;font-size:14px;font-weight:600;transition:color .18s}
.nav ul a:hover,.nav ul a.on{color:var(--hi)}
.nav .right{display:flex;align-items:center;gap:18px}
.lang{font-size:12.5px;font-weight:700;color:var(--lo)}.lang b{color:var(--hi)}
.lang a{text-decoration:none;color:var(--lo);transition:color .18s}
.lang a:hover{color:var(--hi)}
.nav .cta{background:var(--red);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700;font-size:13.5px;text-decoration:none;transition:transform .2s var(--ease)}
.nav .cta:hover{transform:translateY(-1px)}

/* section shell */
section.blk{position:relative;z-index:2;margin-top:-30px;border-radius:34px 34px 0 0;border:1px solid var(--line-2);padding:96px 0;box-shadow:0 -26px 54px -30px rgba(0,0,0,.6)}
.blk.dark{background:var(--ground)}
.blk.raise{background:var(--surface)}
.blk.raise-2{background:var(--surface-2)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.sec-h h2{font-weight:800;font-size:clamp(28px,4vw,46px);letter-spacing:-.025em;line-height:1.02;max-width:20ch}
.sec-h .lead{color:var(--lo);max-width:42ch;font-size:18px;line-height:1.5}
.tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.tag .band{width:20px;height:20px}

/* page header (inner pages: shorter statement-style intro under the fixed nav) */
.pagehero{padding:150px 0 60px}
.pagehero .tag{margin-bottom:18px}
.pagehero .eyebrow{display:block;margin-bottom:8px}
.pagehero h1{font-weight:800;font-size:clamp(32px,5.4vw,58px);line-height:1;letter-spacing:-.03em;max-width:18ch}
.pagehero p{color:var(--lo);font-size:18px;max-width:56ch;margin-top:18px}

/* services flip */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flip{perspective:1400px;height:304px}
.flip .face{position:relative;width:100%;height:100%;transition:transform .72s var(--ease);transform-style:preserve-3d;cursor:pointer}
.flip:hover .face,.flip:focus-within .face{transform:rotateY(180deg)}
.flip .side{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface-2)}
.flip .front{justify-content:center;gap:14px}
.flip .front h3{font-weight:800;font-size:25px;letter-spacing:-.01em}
.flip .front .fx{position:absolute;top:16px;right:18px;color:var(--lo);opacity:.45;font-size:18px;line-height:1}
.flip .back{transform:rotateY(180deg);background:linear-gradient(160deg,#241d17,var(--ground))}
.flip .back p{font-size:17px;color:var(--lo);line-height:1.55}
.flip .back .more{font-weight:800;font-size:14.5px;color:var(--amber)}
.flip .bar{height:4px;width:38px;border-radius:4px;background:var(--red)}
.flip:nth-child(2) .bar{background:var(--amber)}.flip:nth-child(3) .bar{background:var(--hi)}.flip:nth-child(4) .bar{background:var(--amber)}

/* work wall — solid spacing, hover lifts the tile */
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;border-radius:14px;overflow:hidden;background:#000;min-height:180px;transition:box-shadow .4s var(--ease);z-index:1}
.tile:hover{box-shadow:0 22px 46px -24px rgba(0,0,0,.7);z-index:3}
.tile .im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .3s cubic-bezier(.16,.84,.24,1);will-change:transform}
.tile .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.85),transparent 55%);opacity:0;transition:opacity .4s var(--ease);display:flex;align-items:flex-end;padding:18px}
.tile:hover .ov{opacity:1}
.tile .cap{transform:translateY(10px);transition:transform .45s var(--ease)}
.tile:hover .cap{transform:none}
.tile .cap .t{font-weight:800;font-size:16px}.tile .cap .s{font-size:12px;color:var(--amber);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tile .flag{position:absolute;top:12px;left:12px;width:26px;height:26px;opacity:0;transform:scale(.5) rotate(-14deg);transition:.5s var(--ease);z-index:2}
.tile:hover .flag{opacity:1;transform:none}
.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}
.h240{min-height:240px}.h300{min-height:320px}

/* stock stills */
.stockd .eyebrow{color:var(--amber)}
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.still{border-radius:14px;overflow:hidden;aspect-ratio:16/10;position:relative;box-shadow:0 16px 30px -18px rgba(80,50,20,.5)}
.still .im{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .3s cubic-bezier(.16,.84,.24,1);will-change:transform}
.still .price{position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff;font-weight:700;font-size:13px;opacity:0;transition:opacity .35s}
.still:hover .price{opacity:1}

/* studio — single column, no logo */
.studio{max-width:780px}
.studio h2{font-weight:800;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.02em;line-height:1.06;margin-bottom:18px}
.studio p{color:var(--lo);font-size:18px;max-width:62ch;margin-bottom:14px}
.studio .who{font-size:14px;color:var(--hi);font-weight:600;margin-top:12px}.studio .who span{color:var(--lo);font-weight:400}

/* contact CTA band */
.cta-big{text-align:center;padding:120px 0}
.cta-big h2{font-weight:800;font-size:clamp(34px,6vw,70px);letter-spacing:-.03em;line-height:.98}
.cta-big p{color:var(--lo);margin:18px auto 32px;max-width:48ch;font-size:18px}

/* contact form */
.formgrid{max-width:640px;margin:0 auto;text-align:left}
.formgrid label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--lo);margin-bottom:8px}
.formgrid .fld{margin-bottom:20px}
.formgrid input,.formgrid textarea,.formgrid select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--hi);font-family:inherit;font-size:15px}
.formgrid input:focus,.formgrid textarea:focus,.formgrid select:focus{outline:2px solid var(--amber);outline-offset:1px}
.formgrid textarea{min-height:140px;resize:vertical}
.formgrid .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formgrid .consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--lo)}
.formgrid .consent a{color:var(--hi)}
.formgrid .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formgrid .note{font-size:13px;color:var(--lo);margin-top:14px}
.form-msg{border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:14.5px}
.form-msg.ok{background:rgba(245,165,36,.12);border:1px solid var(--amber);color:var(--hi)}
.form-msg.err{background:rgba(240,0,0,.1);border:1px solid var(--red);color:var(--hi)}

/* tools cards */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool-card{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.tool-card h3{font-weight:800;font-size:22px;letter-spacing:-.01em}
.tool-card p{color:var(--lo);font-size:15px;line-height:1.55}
.tool-card .btn{align-self:flex-start;margin-top:6px}

/* legal / static content pages */
.legaldoc{max-width:760px}
.legaldoc h1{font-weight:800;font-size:clamp(30px,4.6vw,44px);letter-spacing:-.03em;margin-bottom:8px}
.legaldoc .updated{color:var(--lo);font-size:13.5px;margin-bottom:36px}
.legaldoc h2{font-weight:800;font-size:20px;margin:36px 0 12px}
.legaldoc p{color:var(--lo);font-size:15.5px;line-height:1.7;margin-bottom:14px}
.legaldoc a{color:var(--hi);text-decoration:underline}
.legaldoc ul{color:var(--lo);font-size:15.5px;line-height:1.7;margin:0 0 14px 20px}

footer{background:#141311;padding:58px 0 40px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;align-items:start}
.foot-lockup .logo-lockup{display:block;height:46px;width:auto;color:var(--hi)}
.foot p.sm{color:var(--lo);font-size:14px;margin-top:16px;max-width:32ch}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lo);margin-bottom:14px}
.foot ul{list-style:none}
.foot ul li{margin-bottom:11px}
.foot ul a{color:var(--hi);text-decoration:none;font-size:15px;font-weight:500;
  opacity:.85;transition:color .18s,opacity .18s}
.foot ul a:hover{opacity:1;color:var(--amber)}
.social-links a{display:flex;align-items:center;gap:9px}
.social-links svg{flex-shrink:0;opacity:.7;transition:opacity .18s}
.social-links a:hover svg{opacity:1}
.legal{max-width:var(--maxw);margin:36px auto 0;padding:18px 26px 0;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--lo);font-size:12.5px}
.legal .band{width:16px;height:16px;vertical-align:-3px;margin-right:6px}

a:focus-visible,button:focus-visible,.flip:focus-within,.strip:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

@media (max-width:900px){
  .nav ul{display:none}
  .lang{display:none}.nav .cta{display:none}.burger{display:flex}
  .svc{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(6,1fr)}.c8,.c6,.c4{grid-column:span 6}
  .stills{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .formgrid .row2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .foot-lockup{grid-column:1/-1}
  .foot-lockup .logo-lockup{display:block}
}
@media (max-width:560px){
  .svc{grid-template-columns:1fr}
  .wall{grid-template-columns:1fr}
}
@media(max-width:480px){
  .foot{grid-template-columns:1fr 1fr}
  .foot-lockup{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none}
  html{scroll-behavior:auto}
  .flip .face,.tile,.tile .im,.still .im{transition:none}
}

.burger{flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--hi);border-radius:2px;transition:.3s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{position:fixed;inset:0;z-index:59;background:var(--ground);transform:translateY(-100%);opacity:0;transition:transform .5s var(--ease),opacity .3s;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px 34px 40px}
.mobnav.open{transform:none;opacity:1}
.mobnav a{color:var(--hi);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.mobnav a.mcta{color:#fff;background:var(--red);border:0;border-radius:12px;text-align:center;margin-top:18px;padding:16px}
.mobnav .lang{display:block;color:var(--lo);font-weight:700;margin-top:22px;font-size:15px}
.mobnav .lang a{color:var(--lo)}
.watch-m{display:none;position:static;margin-top:16px}