@import url("../tokens.css");
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;font-synthesis:none}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-0)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);line-height:var(--lh-tight);margin:0 0 var(--s-2);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-4);font-weight:600} h2{font-size:var(--fs-3);font-weight:600} h3{font-size:var(--fs-2);font-weight:600}
p{margin:0 0 var(--s-2)}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.depts :focus-visible,.call :focus-visible{outline-color:var(--amber)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-3)}
section{padding:var(--s-7) 0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:var(--s-2);top:var(--s-2)}
.eyebrow{font:600 .85rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s-2)}
.lead{font-size:var(--fs-1);color:var(--ink-2);max-width:42rem}
.ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid var(--blue);background:var(--blue);color:#fff;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.amber:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
.btn.amber:active{background:var(--amber-active);border-color:var(--amber-active)}
/* top bar */
.bar{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:4rem}
.brand{margin-right:auto;display:flex;align-items:center;min-height:44px;line-height:0;flex-shrink:1;min-width:0}
.brand img{height:34px;width:auto}
.bar nav{display:flex;gap:var(--s-3)}
.bar nav a{color:var(--ink);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem}
.bar nav a:hover{color:var(--blue)}
.bar .btn{white-space:nowrap;padding:.5rem 1.1rem;min-height:44px}
.sound{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;min-height:44px;min-width:44px;border:1.5px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);padding:0 .9rem;font:500 .9rem var(--font-body);cursor:pointer}
.sound[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* hero */
.hero{padding:var(--s-6) 0 var(--s-7)}
.hero .grid{display:grid;gap:var(--s-5);grid-template-columns:1.05fr 1fr;align-items:center}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .sub{font-size:var(--fs-1);margin:var(--s-2) 0 var(--s-4);max-width:34rem}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
figure{margin:0}
.art{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.art img{width:100%;height:100%;object-fit:cover}
.hero .art{aspect-ratio:7/4}.hero .art img{object-position:50% 40%}
/* idea */
.idea{background:var(--paper-2)}
.idea .grid{display:grid;gap:var(--s-5);grid-template-columns:1.1fr 1fr;align-items:center}
.idea .art{aspect-ratio:4/3}
.steps{display:grid;gap:var(--s-3);grid-template-columns:repeat(3,1fr);margin:var(--s-5) 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{background:var(--paper);border-radius:var(--radius);padding:var(--s-3);box-shadow:var(--shadow);counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--amber);color:var(--ink);font:600 1.1rem var(--font-display);margin-bottom:var(--s-2)}
/* departments (BIG) */
.depts{background:var(--ink);color:var(--on-dark);padding:calc(var(--s-7)*1.25) 0}
.depts .eyebrow{color:var(--amber)} .depts .lead{color:var(--on-dark-2)} .depts a{color:var(--blue-on-dark)}
.cards{display:grid;gap:var(--s-3);grid-template-columns:repeat(6,1fr);margin:var(--s-5) 0}
.card{grid-column:span 2;background:#16264A;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);overflow:hidden;transition:transform .25s var(--ease),border-color .25s}
.card:hover,.card:focus-within{transform:translateY(-3px);border-color:rgba(242,165,65,.6)}
.card:nth-child(n+4){grid-column:span 3}
.card .art{border-radius:0;box-shadow:none;aspect-ratio:16/10;background:#0F1B33}
.card .art img{object-position:50% var(--pos,40%)} /* 16:10 window per design-notes 4.7; --pos tuned per card for >=12% headroom (see ASSETS.md) */
.card .body{padding:var(--s-3) var(--s-4) var(--s-4)}
.card h3{font-size:var(--fs-2);color:#fff}
.card dl{margin:0;display:grid;gap:.4rem;font-size:.97rem}
.card dt{font-weight:600;color:var(--amber);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.card dd{margin:0 0 .5rem;color:var(--on-dark)}
.depts .cta{text-align:center}
.depts .btn.amber{min-height:56px;padding:1rem 2rem;font-size:1.1rem}
/* single hire */
.hire .grid{display:grid;gap:var(--s-5);grid-template-columns:1fr 1fr;align-items:center}
.hire .art{aspect-ratio:1/1;margin-bottom:var(--s-3)}
.panel{background:var(--sage);border-radius:var(--radius-lg);padding:var(--s-4)}
.panel-lead{margin:0 0 var(--s-2);font-weight:500}
.checks{list-style:none;padding:0;margin:0 0 var(--s-3)}
.checks li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem}
.checks .ic{margin-top:.25em;color:var(--blue);stroke-width:2.6}
/* story */
.story{background:var(--paper-2)}
.story .grid{display:grid;gap:var(--s-5);grid-template-columns:1.2fr 1fr;align-items:center}
.story .art{aspect-ratio:4/3}
/* call */
.call{position:relative;background:var(--ink) center/cover no-repeat;color:var(--on-dark);text-align:center;isolation:isolate}
.call::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,27,51,.74) /* flat overlay per design-notes 1.3 (6.85:1 for light text on the worst case; the amber email link measured 4.74 to 5.19 on the real image, so do not swap call-bg for a brighter image without re-measuring) */}
.call h2{font-size:var(--fs-4)}
.call a{color:var(--amber)}
.call .big{display:block;font:600 var(--fs-3) var(--font-display);color:#fff;text-decoration:none;margin:var(--s-2) 0 0;padding:.4rem 0;min-height:44px}
.call p a{display:inline-block;padding:.65rem .5rem;min-height:44px;line-height:1.4}
.call p{margin:0}
.call address{font-style:normal;color:var(--on-dark);margin-top:var(--s-3)}
.call .lead{margin-inline:auto;color:var(--on-dark)}
footer{padding:var(--s-4) 0;font-size:.9rem;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between;align-items:center}
footer img{height:28px;width:auto}
footer a{display:inline-block;padding:.75rem .4rem;min-height:44px;line-height:1.3}
/* motion */
/* content is visible by default; it is hidden for the fade only when JS has added the `js` class (and reset if app.js never reports in: `late`) */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js:not(.late) .reveal{opacity:0;transform:translateY(14px)}
.js:not(.late) .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.js:not(.late) .reveal{opacity:1!important;transform:none!important;transition:none}.btn,.card{transition:none}}
@media (max-width:860px){
  .hero .grid,.hire .grid,.idea .grid,.story .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}.card,.card:nth-child(n+4){grid-column:auto}
  .bar nav{display:none}
  section{padding:var(--s-6) 0}.depts{padding:var(--s-6) 0}
}
@media (max-width:520px){
  .bar .wrap{gap:var(--s-1);padding:0 var(--s-2)}.brand img{height:28px}
  .sound{padding:0 .75rem;font-size:.8rem;flex-shrink:0;gap:.3rem}.bar .btn{padding:.4rem .8rem;font-size:.9rem;flex-shrink:0}
  .hero .art{aspect-ratio:4/3}.hero .art img{object-position:50% 38%}
  .actions .btn{width:100%}
}