/* Beweging prototype — global theme. Variables are driven live by the Tweaks panel. */
:root{
  --bg:#0E0F12;
  --bg2:#16181D;
  --panel:#1B1E25;
  --fg:#F4F5F2;
  --mut:#9CA0A8;
  --line:#262932;
  --accent:#E8590C;      /* house accent — tak colors are set per program */
  --radius:4px;
  --head-tt:uppercase;   /* heading text-transform (toggle) */
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.anton{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;cursor:pointer;
  text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius);padding:14px 22px;
  border:1px solid transparent;transition:transform .12s ease,filter .15s,border-color .15s,opacity .15s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-pri{background:var(--accent);color:#fff;}
.btn-pri:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border-color:#33363f;color:var(--fg);}
.btn-ghost:hover{border-color:var(--fg);}
.btn-lg{padding:17px 28px;font-size:15px;}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,15,18,.78);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;}
.wm{font-family:'Anton',sans-serif;font-size:25px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{color:var(--mut);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  transition:color .15s;cursor:pointer;}
.nav-links a:hover{color:var(--fg);}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-burger{display:none;align-items:center;justify-content:center;background:transparent;
  border:1px solid #33363f;border-radius:var(--radius);color:var(--fg);width:44px;height:44px;cursor:pointer;}
.nav-burger:hover{border-color:var(--fg);}
.nav-mobile{display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--bg);}
.nav-mobile a{padding:16px clamp(20px,5vw,56px);border-bottom:1px solid var(--line);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--fg);cursor:pointer;}
.nav-mobile a:active{background:var(--bg2);}
.nav-mobile .nm-row{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--fg);
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:14px;padding:16px clamp(20px,5vw,56px);cursor:pointer;}
.nav-mobile .nm-sub{display:flex;flex-direction:column;background:var(--bg2);}
.nav-mobile .nm-sub a{display:flex;align-items:center;gap:13px;padding:14px clamp(20px,5vw,56px);
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--fg);}
.nav-mobile .nm-sub a .dot{width:9px;height:9px;border-radius:50%;flex:none;}

/* generic section */
.section{padding:clamp(60px,8vw,104px) 0;}
.sec-head{margin-bottom:46px;}
.sec-head h2{font-family:'Anton',sans-serif;font-size:clamp(36px,5vw,56px);text-transform:var(--head-tt);
  letter-spacing:-.01em;margin:0 0 8px;line-height:.96;}
.sec-head p{color:var(--mut);font-size:17px;margin:0;max-width:52ch;}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--bg2);padding:56px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;}
.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:0 0 16px;font-weight:700;}
.foot a.fl{display:block;color:var(--fg);font-size:15px;padding:5px 0;opacity:.85;cursor:pointer;}
.foot a.fl:hover{opacity:1;color:var(--accent);}
.foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:var(--mut);font-size:13px;}

/* view transition */
.view{animation:fade .4s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* intensity pips */
.pips{display:inline-flex;gap:4px;align-items:center;}
.pip{width:8px;height:8px;border-radius:50%;background:#33363f;}
.pip.on{background:var(--ac,var(--accent));}

@media(max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:inline-flex;}
  .foot-grid{grid-template-columns:1fr;}
}
@media(min-width:861px){
  .nav-mobile{display:none;}
}

/* ---- Imagery: unified duotone treatment (keeps mixed photos one family) ---- */
:root{--img-gray:1;--img-tint:.6;--img-grain:.16;}
.media{position:relative;overflow:hidden;background:var(--bg2);display:block;}
.media>img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(var(--img-gray)) contrast(1.06) brightness(.9);transition:transform .6s ease,filter .3s;}
.media .duo{position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;
  opacity:var(--img-tint);pointer-events:none;}
.media .shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg) 94%,transparent) 0%,
    color-mix(in srgb,var(--bg) 30%,transparent) 32%, transparent 62%);}
.media .grain{position:absolute;inset:0;pointer-events:none;opacity:var(--img-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.media.zoom:hover>img{transform:scale(1.04);}
