/* ==========================================================================
   Vela PM · v5 (Option E, "Full Bleed"), 19 September 2026
   Built from the v4 site: same copy, palette, Archivo and
   Carlito, and photographs, set heavier. Full-screen home hero, pinned
   header, navy bands, duotone photo dividers.

   Guardrail 3: bronze is an accent (rules, edges, corners). Small text and
   button fills use --bronze-text, the darker bronze that passes contrast.
   ========================================================================== */

/* Carlito is self hosted. SIL OFL 1.1, licence in fonts/Carlito-OFL-licence.txt. */
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/carlito-regular.woff') format('woff')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/carlito-bold.woff') format('woff')}

:root{
  --ink:#182A3D;
  --deep:#0F1D2B;
  --graphite:#2E3640;
  --slate:#5A6570;
  --bronze:#A9794A;
  --bronze-text:#8A5E33;   /* 6.2:1 on white, 5.4:1 on stone */
  --sand:#CBB79B;
  --stone:#F2EEE7;
  --white:#FFFFFF;
  --line-dark:rgba(203,183,155,.2);
  --line-light:rgba(90,101,112,.2);

  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:'Carlito','Calibri',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1200px;
  --gut:clamp(1.25rem,5vw,3rem);
  --section:clamp(4.5rem,9vw,7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--graphite);font:400 1.1rem/1.65 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--sand);text-underline-offset:.2em}
a:hover{text-decoration-color:var(--bronze)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.05;letter-spacing:-.02em}
p{margin:0 0 1em;max-width:68ch}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.section--stone{background:var(--stone)}
.section--ink{background:var(--ink);color:var(--sand)}
.dark{color:var(--sand)}
.dark h1,.dark h2,.dark h3,.dark h4,.section--ink h2,.section--ink h3{color:var(--white)}

.rule{width:56px;height:3px;background:var(--bronze);border:0;margin:0 0 1.6rem}
.eyebrow{font:700 .78rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-text);margin:0 0 1rem}
.dark .eyebrow,.section--ink .eyebrow{color:var(--sand)}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;margin-bottom:2.8rem}
.lede{font-size:clamp(1.15rem,1.9vw,1.35rem);max-width:56ch}
.muted{color:var(--slate);font-size:1rem}
.mb0{margin-bottom:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:100;background:var(--white);padding:.75rem 1.1rem;border:2px solid var(--bronze)}

/* ---------- Buttons ------------------------------------------------------- */
.btns{display:flex;gap:.9rem;flex-wrap:wrap}
.btn{display:inline-block;font:700 .95rem var(--display);letter-spacing:.01em;text-decoration:none;padding:1.05rem 1.9rem;border:2px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn--primary{background:var(--bronze-text);color:var(--white)}
.btn--primary:hover{background:#744E2A}
.btn--ghost{border-color:var(--sand);color:var(--white)}
.btn--ghost:hover{border-color:var(--white)}
.btn--dark{border-color:var(--ink);color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:var(--white)}

/* ---------- Photo bands ----------------------------------------------------
   A photograph behind a section, with a navy scrim where type sits. Every
   band keeps a solid navy underneath in case the image does not load. */
.photo{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--sand)}
.photo > .bg{position:absolute;inset:0;z-index:-2;display:block}
.photo > .bg img{width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim,rgba(15,29,43,.9))}

/* ---------- Header ---------------------------------------------------------
   Pinned. Solid navy by default; site.js makes it clear only at the very top
   of the page, over the hero, and solid again as soon as the page scrolls.
   Without the script it simply stays solid. */
.site-head{position:fixed;inset:0 0 auto;z-index:50;background:rgba(15,29,43,.97);
  box-shadow:0 1px 0 var(--line-dark);transition:background-color .25s ease,box-shadow .25s ease}
.site-head__in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-block:1rem;transition:padding .25s ease}
.site-head.over-hero{background:transparent;box-shadow:none}
.site-head.over-hero .site-head__in{padding-block:1.5rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;font:700 1.6rem/1 var(--display);letter-spacing:.02em;color:var(--white);text-decoration:none}
.wordmark img{width:40px;height:40px}
.nav{display:flex;gap:2rem;font:600 .95rem var(--display);color:var(--white)}
.nav a{text-decoration:none;padding-bottom:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--bronze)}
.menu-btn{display:none}
@media (prefers-reduced-motion:reduce){.site-head,.site-head__in{transition:none}}

/* ---------- Home hero: full screen --------------------------------------- */
.hero{min-height:max(640px,100vh);display:flex;flex-direction:column;justify-content:center;
  --scrim:linear-gradient(95deg,rgba(15,29,43,.96) 0%,rgba(15,29,43,.9) 50%,rgba(15,29,43,.45) 100%)}
.hero__main{padding-block:8rem 5rem;width:100%}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem);font-weight:800;max-width:15ch;letter-spacing:-.035em;line-height:1}
.hero .descriptor{font-size:clamp(1.15rem,1.9vw,1.4rem);max-width:46ch;margin:1.8rem 0 1.2rem}
.hero .tagline{font:600 1.1rem var(--display);letter-spacing:.02em;color:var(--sand);margin-bottom:2.6rem}

/* Inner page heroes: shorter, same treatment */
.hero--page{min-height:min(64vh,600px);justify-content:flex-end}
.hero--page .hero__main{padding-block:9rem clamp(3.5rem,7vw,5rem)}
.hero--page h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:18ch}
.hero--page .descriptor{margin-bottom:0}

/* ---------- Home: proposition --------------------------------------------- */
.prop h2{font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:800;max-width:15ch;margin-bottom:2.8rem}
.prop__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);border-top:2px solid var(--ink);padding-top:2.2rem}
.prop__cols p{max-width:52ch}
.prop figure{margin:1.8rem 0 0}
.prop figure img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- Home: founder project experience ------------------------------ */
.record{padding-block:clamp(4.5rem,9vw,7.5rem);--scrim:linear-gradient(180deg,rgba(15,29,43,.86),rgba(15,29,43,.93))}
.record .intro{max-width:62ch;font-size:1.15rem;margin-bottom:3rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.stat{border-top:3px solid var(--bronze);padding-top:1.2rem}
.stat__n{font:800 clamp(1.9rem,3.8vw,3rem)/1.05 var(--display);color:var(--white);margin:0 0 .6rem;letter-spacing:-.02em}
.stat__n--names{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.15}
.stat__l{margin:0;font-size:1rem}
.record .btns{margin-top:3rem}

/* ---------- Home: what we do (navy cards with the drawings) -------------- */
.svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.svc-card{background:var(--deep);border-top:3px solid var(--bronze);display:flex;flex-direction:column}
.svc-card figure{margin:0;background:var(--stone)}
.svc-card figure img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:.8rem}
.svc-card > div{padding:1.2rem 1.2rem 1.4rem}
.svc-card h3{font-size:1.15rem;margin-bottom:.5rem}
.svc-card p{font-size:.98rem;margin:0}
.section--ink .btns{margin-top:3rem}

/* ---------- Duotone divider -------------------------------------------------
   The photograph redrawn in navy and a deep sand by the #duo SVG filter in
   the page, with a bronze line along its top edge. */
.duo{position:relative;height:clamp(200px,24vw,300px);background:var(--ink);overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover;filter:url(#duo)}
.duo::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--bronze);z-index:1}

/* ---------- Cards ------------------------------------------------------------ */
.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--white);border-top:3px solid var(--ink)}
.card__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card__img{margin:0}
.card__body{padding:1.7rem}
.card h3{font-size:1.4rem;margin-bottom:.7rem}
.card p{margin:0}
.card--dark{background:var(--ink);color:var(--sand);border-top-color:var(--bronze)}
.card--dark h3{color:var(--white)}

/* ---------- Closing call to action ---------------------------------------- */
.cta{padding-block:clamp(5.5rem,12vw,9rem);--scrim:linear-gradient(180deg,rgba(15,29,43,.9),rgba(15,29,43,.94))}
.cta h2{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:800;max-width:12ch;margin-bottom:1.4rem}
.cta p{font-size:1.2rem;max-width:52ch;margin-bottom:2.2rem}

/* ---------- Services page -------------------------------------------------- */
.svc-row{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:clamp(1.8rem,5vw,4rem);align-items:start;
  padding-block:2.8rem;border-top:1px solid var(--line-light)}
.svc-row:first-child{border-top:2px solid var(--ink)}
.svc-row figure{margin:0;background:var(--stone);border:1px solid rgba(90,101,112,.13)}
.svc-row figure img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:1rem}
.svc-row h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;margin-bottom:1rem}
.svc-row .svc__list{color:var(--slate);font-size:1.02rem;margin-bottom:.9rem}
.svc-row .svc__list strong{color:var(--ink)}
.audience-note{margin-top:2.2rem}

/* ---------- Work page ------------------------------------------------------ */
.engage{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.engage figure{margin:0}
.engage figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.entry{border-top:1px solid var(--line-light);padding-top:1.8rem;margin-top:1.8rem}
.entry:first-child{border-top:2px solid var(--ink);margin-top:0}
.entry h3{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:800;margin-bottom:.8rem}
.attrib{border-left:3px solid var(--bronze);background:var(--white);padding:1.5rem 1.75rem;margin-bottom:2.8rem;max-width:80ch}
.attrib p{margin:0}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.sector{background:var(--white);border-top:3px solid var(--ink)}
.sector figure{margin:0;background:var(--stone);border-bottom:1px solid rgba(90,101,112,.13)}
.sector figure img{width:100%;aspect-ratio:16/9;object-fit:contain;padding:.9rem}
.sector > div{padding:1.4rem 1.5rem 1.6rem}
.sector h3{font-size:1.2rem;margin-bottom:.6rem}
.sector p{margin:0;font-size:1.02rem}

/* ---------- About page ----------------------------------------------------- */
.media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.media figure{margin:0}
.media figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.leader{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.leader figure{margin:0;position:relative}
.leader figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.leader figcaption{font-size:.9rem;margin-top:.8rem}
.leader h2{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;margin-bottom:.5rem}
.leader .role{font:600 1.05rem var(--display);color:var(--sand);margin-bottom:1.6rem}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:.4rem}
.term{background:var(--white);border-top:3px solid var(--bronze);padding:1.7rem}
.term h3{font-size:1.4rem;margin-bottom:.6rem}
.terms + p{margin-top:2.2rem}

/* ---------- Contact page --------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
.contact-grid > div{border-top:2px solid var(--ink);padding-top:2rem}
.contact-h{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:1.8rem}
.detail{margin-bottom:1.6rem}
.detail__k{font:700 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-text);margin:0 0 .35rem}
.detail p{margin:0}
.detail .big{font:700 clamp(1.3rem,2.4vw,1.7rem)/1.3 var(--display);color:var(--ink)}
.detail .big a{text-decoration:none}
.detail .big a:hover{text-decoration:underline}
/* Address band. Its own scrim: the plaster is the lightest photograph in the
   set, so the scrim is held at .91 to .95 to keep the bronze rule at 3:1 and
   the address well above 4.5:1. */
.addr{padding-block:clamp(4rem,8vw,6rem);--scrim:linear-gradient(180deg,rgba(15,29,43,.91),rgba(15,29,43,.95))}
.addr__line{font:800 clamp(1.8rem,4.2vw,3rem)/1.15 var(--display);color:var(--white);letter-spacing:-.02em;margin:0 0 .6rem;max-width:22ch}

/* ---------- Footer --------------------------------------------------------- */
.site-foot{background:var(--deep);color:var(--sand);padding-block:3.5rem 2rem;font-size:1rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--white)}
.site-foot__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;padding-bottom:2.2rem}
.site-foot__top p{margin:.8rem 0 0;max-width:34ch}
.site-foot__nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1rem;font:600 .92rem var(--display)}
.site-foot .detail__k{color:var(--sand)}
.site-foot__bar{border-top:1px solid var(--line-dark);padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem}
.site-foot__bar .tagline{font-family:var(--display)}

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width:960px){
  /* services as rows on tablets, so the fifth card is never left alone */
  .svc-grid{grid-template-columns:1fr;gap:1rem}
  .svc-card{flex-direction:row;align-items:stretch}
  .svc-card figure{flex:0 0 min(38%,240px)}
  .svc-card figure img{height:100%}
  .svc-card > div{align-self:center;padding:1.2rem 1.4rem}
  .sectors{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .engage{grid-template-columns:1fr}
  .engage figure{order:-1}
}
@media (max-width:700px){
  /* phone menu: the button only appears once site.js has run (html.js) */
  .site-head__in{flex-wrap:wrap;gap:.6rem 1.2rem}
  .site-head .nav{gap:1.2rem;font-size:.9rem;flex-wrap:wrap}
  .js .site-head .nav{display:none}
  .js .menu-btn{display:inline-block;background:none;cursor:pointer;color:var(--white);
    font:700 .9rem var(--display);padding:.6rem 1rem;border:1.5px solid rgba(203,183,155,.6)}
  .js .menu-btn:hover{border-color:var(--white)}
  .js .site-head.menu-open{background:var(--deep);box-shadow:0 1px 0 var(--line-dark)}
  .js .site-head.menu-open .nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--deep);padding:.25rem var(--gut) 1.5rem;box-shadow:0 1px 0 var(--line-dark)}
  .js .site-head.menu-open .nav a{font-size:1.2rem;padding:1rem 0;border-bottom:1px solid rgba(203,183,155,.15)}
  .js .site-head.menu-open .nav a[aria-current="page"]{color:var(--sand);box-shadow:inset 3px 0 0 var(--bronze);padding-left:.9rem}

  .hero__main{padding-top:7rem}
  .prop__cols,.stats,.grid--2,.grid--3,.sectors,.terms,.contact-grid,.media,.leader,.svc-row{grid-template-columns:1fr}
  .svc-card{flex-direction:column}
  .svc-card figure{flex:none}
  .svc-card figure img{height:auto}
  .svc-row figure{max-width:320px}
  .leader figure{max-width:340px}
}

@media print{
  .site-head,.btns,.duo,.photo > .bg{display:none}
  .photo,.section--ink{background:none;color:var(--graphite)}
  .photo h1,.photo h2,.section--ink h2,.section--ink h3{color:var(--ink)}
  body{font-size:11pt}
}

/* ---------- Image set: axonometric illustrations (style 2) ---------------------------------------------
   The service and sector images are made to the exact frame proportions
   (4:3 and 16:9), so they fill their frames edge to edge. */
.svc-card figure img,.svc-row figure img,.sector figure img{object-fit:cover;padding:0}
.svc-row figure,.sector figure{border:0}