/* ============================================================
   Studio 264 — shared stylesheet
   Brand: navy #2E3D4D · orange #FFA226 · grey #DDDDDD
   Fonts: Futura Std Light · Futura Medium · Avenir Light
   ============================================================ */

@font-face{font-family:"Futura Light";src:url("fonts/futura-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Futura Medium";src:url("fonts/futura-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Avenir Light";src:url("fonts/avenir-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}

:root{
  --navy:#2E3D4D;
  --navy-deep:#26333f;
  --navy-soft:#3a4c5e;
  --orange:#FFA226;
  --orange-deep:#e8901a;
  --grey:#DDDDDD;
  --grey-mid:#9aa6b0;
  --paper:#ffffff;
  --paper-soft:#f5f6f7;
  --ink:#2E3D4D;
  --display:"Futura Light","Futura Std Light",sans-serif;
  --medium:"Futura Medium",sans-serif;
  --avenir:"Avenir Light",sans-serif;
  --body:"Futura Light",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:46px;}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.12;letter-spacing:.005em;}
strong,b,.medium{font-family:var(--medium);font-weight:500;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--navy);color:#fff;}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--navy);}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:118px;}

/* Live-text logo — sized to match the prominence of the old site */
.logo{display:inline-flex;flex-direction:column;line-height:1;user-select:none;align-items:stretch;}
.logo .word{font-size:2.9rem;letter-spacing:.01em;white-space:nowrap;display:inline-block;}
.logo .word .s{font-family:var(--display);color:#fff;font-weight:300;}
.logo .word .n{font-family:var(--medium);color:var(--orange);font-weight:500;margin-left:.12em;}
.logo .strap{font-family:var(--avenir);color:var(--grey);text-transform:uppercase;font-size:.90rem;margin-top:10px;width:100%;display:flex;justify-content:space-between;}
.logo .strap span{display:inline-block;}
.logo .strap .sp{width:.5em;}
/* width-match: strapline spans the full wordmark width, letters evenly distributed */

nav ul{display:flex;list-style:none;gap:40px;}
nav a{font-family:var(--avenir);font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding:6px 0;transition:color .25s;}
nav a:hover,nav a.active{color:var(--orange);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.nav-toggle span{width:26px;height:2px;background:var(--grey);display:block;transition:.3s;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--avenir);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;padding:16px 34px;border:2px solid var(--navy);transition:.25s;cursor:pointer;}
.btn-solid{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-solid:hover{background:#fff;color:var(--navy);}
.btn-ghost{color:var(--navy);border-color:var(--navy);}
.btn-ghost:hover{background:var(--navy);color:#fff;}
.btn-light{color:#fff;border-color:#fff;}
.btn-light:hover{background:#fff;color:var(--navy);}

/* ---------- Sections ---------- */
.pad{padding:112px 0;}
.pad-soft{background:var(--paper-soft);}
.pad-navy{background:var(--navy);color:#fff;}
.label{font-family:var(--avenir);font-size:.88rem;letter-spacing:.28em;text-transform:uppercase;color:var(--navy);margin-bottom:20px;}
.pad-navy .label{color:var(--grey);}
.label .dot{color:var(--orange);}
.section-head{margin-bottom:58px;max-width:780px;}
.section-head h2{font-size:clamp(2rem,4vw,3.1rem);}
h1 .accent,h2 .accent{font-family:var(--medium);font-weight:500;}

/* ---------- Sticky bottom contact bar ---------- */
.contactbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy-deep);color:var(--grey);border-top:2px solid var(--orange);}
.contactbar .wrap{display:flex;justify-content:space-between;align-items:center;height:46px;gap:20px;padding-top:0;padding-bottom:0;}
.contactbar .cb-left{font-family:var(--avenir);font-size:.80rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mid);}
.contactbar .cb-right{display:flex;gap:30px;align-items:center;}
.contactbar a{font-family:var(--avenir);font-size:.92rem;letter-spacing:.03em;transition:color .2s;}
.contactbar a:hover{color:var(--orange);}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:var(--grey-mid);font-size:.90rem;}
footer .wrap{padding:54px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
footer .flinks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
footer .flinks a:hover{color:#fff;}
footer .sep{opacity:.4;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  header .wrap{height:96px;}
  .logo .word{font-size:2.3rem;}
  .logo .strap{font-size:.70rem;letter-spacing:.36em;}
  nav{position:fixed;inset:96px 0 auto 0;background:var(--navy);transform:translateY(-160%);transition:transform .4s ease;border-top:1px solid rgba(255,255,255,.08);}
  nav.open{transform:translateY(0);}
  nav ul{flex-direction:column;gap:0;padding:10px 40px;}
  nav li{border-bottom:1px solid rgba(255,255,255,.08);}
  nav a{display:block;padding:17px 0;}
  .nav-toggle{display:flex;}
  .contactbar .cb-left{display:none;}
  .contactbar .wrap{justify-content:center;}
  .contactbar .cb-right{gap:24px;}
}
@media(max-width:600px){
  .wrap{padding:0 24px;}
  .pad{padding:72px 0;}
  .logo .word{font-size:2rem;}
  footer .wrap{flex-direction:column;align-items:flex-start;}
}