/* ============================================================
   BEAR IN STUDIO — Light editorial system
   "Masculine Frame lines, but light"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces — page bg matches the WebP animation background exactly */
  --bg:        #FAFBF8;
  --paper:     #FFFFFF;
  --ink:       #0C0B0A;
  --ink-2:     #3A3A38;   /* secondary text */
  --ink-3:     #6E6E6A;   /* muted / meta */
  --hair:      rgba(12,11,10,.14);   /* hairline rules */
  --hair-soft: rgba(12,11,10,.08);

  /* brand */
  --navy:      #1E2B5C;
  --navy-deep: #16213F;
  --red:       #BE1F2E;
  --red-deep:  #9C1622;
  --gold:      #B5935A;

  /* accent system (tweakable) */
  --accent:    var(--red);

  /* type */
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-ui:      'Outfit', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* spacing */
  --gut: clamp(20px, 5vw, 88px);  /* page side gutter */
  --maxw: 1320px;
  --nav-h: 88px;                  /* nav height (shrinks on mobile) */

  --dur: .5s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --snap: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-ui); font-weight:400;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* touch ergonomics */
a, button, .chip, .nav-link, .nav-cta, .btn, .btn-text, .nav-burger{ -webkit-tap-highlight-color:transparent; }
button, .chip{ touch-action:manipulation; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--bg); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(80px,11vw,168px); position:relative; }
.rule{ height:0; border:0; border-top:1.5px solid var(--ink); margin:0; opacity:.92; }
.rule-hair{ height:0; border:0; border-top:1px solid var(--hair); margin:0; }

/* ---------- type ---------- */
.display{
  font-family:var(--f-display); font-weight:900;
  text-transform:uppercase; line-height:.9; letter-spacing:-.01em;
  margin:0; color:var(--ink);
}
.h-hero{ font-size:clamp(44px,8.4vw,140px); }
.h1{ font-size:clamp(38px,6.2vw,96px); }
.h2{ font-size:clamp(30px,4.4vw,68px); }
.h3{ font-size:clamp(23px,2.6vw,38px); }
.navytone{ color:var(--navy); }

.eyebrow{
  font-family:var(--f-mono); font-weight:500;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0; display:flex; align-items:center; gap:.7em;
}
.sec-mark{ color:var(--accent); font-weight:600; }
.counter{ font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; color:var(--ink-3); }
.mono{ font-family:var(--f-mono); }

.lede{
  font-family:var(--f-ui); font-weight:400;
  font-size:clamp(19px,2.1vw,27px); line-height:1.45; color:var(--ink-2);
  max-width:46ch; margin:0; text-wrap:pretty;
}
.body{ font-size:17px; line-height:1.65; color:var(--ink-2); max-width:60ch; text-wrap:pretty; }

/* filled-square accent ■ */
.sq{ display:inline-block; width:.62em; height:.62em; background:var(--accent); vertical-align:.02em; margin-right:.1em; }
.strike{ text-decoration:line-through; text-decoration-thickness:2px; color:var(--ink-3); }

/* ---------- buttons ---------- */
.btn{
  --bg-b:var(--ink); --fg-b:var(--bg);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-ui); font-weight:600; font-size:15.5px; letter-spacing:.01em;
  padding:15px 26px; background:var(--bg-b); color:var(--fg-b);
  border:1.5px solid var(--bg-b); cursor:pointer; border-radius:0;
  transition:background var(--dur) var(--snap), color var(--dur) var(--snap), border-color var(--dur) var(--snap), transform .1s ease;
  white-space:nowrap;
}
.btn:hover{ --bg-b:var(--navy); border-color:var(--navy); }
.btn:active{ transform:translateY(1px); }
.btn .ar{ transition:transform var(--dur) var(--snap); }
.btn:hover .ar{ transform:translateX(4px); }

.btn-ghost{ --bg-b:transparent; --fg-b:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ --bg-b:var(--ink); --fg-b:var(--bg); border-color:var(--ink); }

.btn-text{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-ui); font-weight:600; font-size:16px; color:var(--ink);
  cursor:pointer; position:relative; padding-bottom:3px;
}
.btn-text::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--snap); }
.btn-text:hover::after{ transform:scaleX(1); }
.btn-text .ar{ transition:transform var(--dur) var(--snap); }
.btn-text:hover .ar{ transform:translateX(4px); }
.ar{ width:1.05em; height:1.05em; display:inline-block; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gut); padding-top:env(safe-area-inset-top,0);
  background:rgba(250,251,248,0); transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{ background:rgba(250,251,248,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.nav-logo{ display:flex; align-items:center; height:46px; opacity:1; transition:opacity .5s var(--ease); }
.nav-logo img{ height:46px; width:auto; }
/* on the home hero, the nav logo is hidden until scroll reveals it */
.nav-logo.hero-hidden{ opacity:0; pointer-events:none; }
.nav-links{ display:flex; align-items:center; gap:clamp(20px,3vw,42px); }
.nav-link{
  font-family:var(--f-ui); font-weight:500; font-size:15.5px; color:var(--ink);
  position:relative; padding:6px 0;
}
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--snap); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{
  font-family:var(--f-ui); font-weight:600; font-size:15px;
  padding:9px 18px; border:1.5px solid var(--ink); color:var(--ink);
  transition:background .35s var(--snap), color .35s var(--snap);
}
.nav-cta:hover{ background:var(--ink); color:var(--bg); }
.nav-burger{ display:none; background:transparent; font:inherit; }

/* mobile slide-down menu */
.mmenu{
  position:fixed; inset:calc(var(--nav-h) + env(safe-area-inset-top,0)) 0 auto 0; z-index:79;
  background:var(--bg); border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column; padding:8px var(--gut) 26px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mmenu.open{ opacity:1; transform:none; pointer-events:auto; }
.mmenu a{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:28px; padding:15px 0; border-bottom:1px solid var(--hair-soft); }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#E8E6E1; padding-top:clamp(64px,8vw,104px); position:relative; }
.footer a{ color:#E8E6E1; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start; }
.foot-mark img{ height:84px; width:auto; }
.foot-tag{ font-size:16px; color:#9A988F; max-width:30ch; margin-top:22px; line-height:1.5; }
.foot-col h4{ font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7C7A72; margin:0 0 18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ font-size:16px; color:#D6D4CE; transition:color .25s; }
.foot-col a:hover{ color:#fff; }
.foot-rule{ border:0; border-top:1px solid rgba(255,255,255,.14); margin:clamp(48px,6vw,72px) 0 0; }
.foot-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:28px 0 0; }
.foot-legal p{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:#7C7A72; margin:0; line-height:1.7; }
.foot-marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,.14); margin-top:28px; padding:16px 0; }
.foot-marquee .track{ display:inline-flex; gap:0; white-space:nowrap; animation:marq 34s linear infinite; }
.foot-marquee span{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.04em; color:#3A3A3A; padding:0 14px; }
.foot-marquee .dot{ color:var(--accent); }
@keyframes marq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- generic cards / grids reused across pages ---------- */
.placeholder{
  background:#F0EFEA; border:1px solid var(--hair); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.placeholder::after{
  content:attr(data-label); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

@media (max-width:900px){
  .nav-links .nav-link{ display:none; }
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-mark{ grid-column:1 / -1; }
}

/* ---------- mobile: compact nav, bigger touch, safe areas ---------- */
@media (max-width:640px){
  :root{ --nav-h:64px; }
  .nav-logo{ height:34px; }
  .nav-logo img{ height:34px; }
  /* Menu + Contact buttons render identically */
  .nav-cta, .nav-burger{ padding:11px 16px; font-size:14.5px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* primary buttons: comfortable full-width tap targets */
  .btn{ min-height:52px; padding:15px 24px; }
  .btn-text{ padding:8px 0; min-height:40px; }
  /* footer */
  .foot-top{ grid-template-columns:1fr; gap:36px; }
  .foot-mark img{ height:64px; }
  .foot-legal{ flex-direction:column; gap:10px; }
  .footer .wrap{ padding-bottom:env(safe-area-inset-bottom,0); }
}

/* hover effects only where a real pointer exists (avoid sticky-hover on touch) */
@media (hover:none){
  .btn:hover{ --bg-b:var(--ink); border-color:var(--ink); }
  .btn-ghost:hover{ --bg-b:transparent; --fg-b:var(--ink); border-color:var(--ink); }
  .btn-text:hover::after{ transform:scaleX(0); }
  .nav-link:hover::after{ transform:scaleX(0); }
  .nav-cta:hover{ background:transparent; color:var(--ink); }
  /* press feedback instead */
  .btn:active{ --bg-b:var(--navy); border-color:var(--navy); transform:translateY(1px); }
  .btn-text:active::after{ transform:scaleX(1); }
  .nav-cta:active{ background:var(--ink); color:var(--bg); }
  .chip:active{ border-color:var(--ink); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .foot-marquee .track{ animation:none; }
}