/* ============================================================
   LUMA Integration — site stylesheet
   Brand system applied: charcoal / gold / bronze + warm neutrals.
   Shared across Home, Projects and Project detail.
   ============================================================ */

:root{
  --charcoal:#2e3235;
  --charcoal-deep:#23272a;
  --gold:#c09c66;
  --gold-deep:#a6814c;
  --bronze:#754c24;
  --porcelain:#faf8f4;
  --cream:#f1ece3;
  --paper:#ffffff;
  --stone:#928d83;
  --slate:#5d5a54;
  --line:#e6e0d5;
  --line-dk:rgba(255,255,255,.14);
  --ink:#2e3235;
  --ink-soft:#56534e;

  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --container:1280px;
  --gutter:48px;
  --r:3px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#fff;}

/* ---- type ------------------------------------------------ */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.04;}
.display{font-weight:800;font-size:clamp(46px,6vw,88px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;}
.h1{font-weight:800;font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;}
.h2{font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.028em;text-wrap:balance;}
.h3{font-weight:600;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-soft);font-weight:400;text-wrap:pretty;}
.body{color:var(--ink-soft);text-wrap:pretty;}
.small{font-size:14px;color:var(--stone);}
.label{font-size:14px;font-weight:600;color:var(--gold-deep);}
strong{font-weight:600;}

/* ---- layout --------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.section{padding:clamp(72px,9vw,140px) 0;}
.section-sm{padding:clamp(56px,6vw,90px) 0;}
.dark{background:var(--charcoal);color:#fff;}
.dark .body{color:rgba(255,255,255,.66);}
.dark .lead{color:rgba(255,255,255,.74);}
.dark .label{color:var(--gold);}
.cream{background:var(--cream);}
.paper{background:var(--paper);}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.gold-rule{width:54px;height:2px;background:var(--gold);border:0;margin:0;}

/* ---- buttons -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.005em;line-height:1;
  padding:15px 28px;border-radius:var(--r);border:1.5px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
.btn .arr{font-size:15px;transition:transform .2s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn-primary{background:var(--charcoal);color:#fff;}
.btn-primary:hover{background:var(--charcoal-deep);}
.btn-accent{background:var(--gold);color:var(--charcoal);}
.btn-accent:hover{background:var(--gold-deep);color:#fff;}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-secondary:hover{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--charcoal);}
.btn-sm{padding:11px 20px;font-size:14px;}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:1.5px solid var(--gold);padding-bottom:3px;transition:color .2s var(--ease);white-space:nowrap;}
.tlink .arr{transition:transform .2s var(--ease);}
.tlink:hover .arr{transform:translateX(4px);}
.tlink.light{color:#fff;}

/* ---- nav ------------------------------------------------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;}
.nav.solid{position:sticky;background:rgba(46,50,53,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dk);}
.nav-inner{max-width:var(--container);margin:0 auto;padding:26px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:32px;}
.nav-logo img{height:30px;width:auto;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:15px;font-weight:500;color:rgba(255,255,255,.72);transition:color .18s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:#fff;}

/* ---- services dropdown ----------------------------------- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-svc{display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.nav-svc .caret{width:12px;height:12px;background-color:currentColor;opacity:.7;margin-top:1px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease),opacity .2s var(--ease);}
.nav-item:hover .nav-svc .caret,.nav-item:focus-within .nav-svc .caret{transform:rotate(180deg);opacity:1;}
.nav-dd{position:absolute;top:100%;left:-18px;min-width:248px;padding-top:16px;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .28s var(--ease),visibility .22s var(--ease);}
.nav-item:hover .nav-dd,.nav-item:focus-within .nav-dd{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.nav-dd-inner{background:rgba(36,39,42,.97);backdrop-filter:blur(14px);border:1px solid var(--line-dk);
  border-radius:var(--r);padding:8px;box-shadow:0 20px 50px -16px rgba(0,0,0,.55);display:flex;flex-direction:column;}
.nav-dd-inner a{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 16px;border-radius:2px;font-size:15px;font-weight:500;color:rgba(255,255,255,.82);
  transition:background .18s var(--ease),color .18s var(--ease);}
.nav-dd-inner a .ar{font-size:14px;opacity:0;transform:translateX(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease);}
.nav-dd-inner a:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-dd-inner a:hover .ar{opacity:.7;transform:none;color:var(--gold);}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;
  width:34px;height:34px;z-index:60;position:relative;}
.nav-burger span{width:26px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);transform-origin:center;}
body.mnav-open .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.mnav-open .nav-burger span:nth-child(2){opacity:0;}
body.mnav-open .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---- mobile menu modal ----------------------------------- */
.mnav{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none;}
.mnav-scrim{position:absolute;inset:0;background:rgba(14,16,18,.5);opacity:0;
  transition:opacity .4s var(--ease);backdrop-filter:blur(2px);}
.mnav-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,90vw);
  background:var(--charcoal);border-left:1px solid var(--line-dk);
  display:flex;flex-direction:column;padding:clamp(80px,12vh,110px) clamp(28px,6vw,48px) 40px;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);overflow-y:auto;}
.mnav-close{position:absolute;top:clamp(22px,4vh,34px);right:clamp(24px,6vw,40px);
  width:44px;height:44px;border:1.5px solid rgba(255,255,255,.28);border-radius:50%;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;
  transition:border-color .25s var(--ease),transform .35s var(--ease);}
.mnav-close:hover{border-color:var(--gold);transform:rotate(90deg);}
.mnav-close span{position:absolute;width:17px;height:2px;background:#fff;border-radius:2px;}
.mnav-close span:nth-child(1){transform:rotate(45deg);}
.mnav-close span:nth-child(2){transform:rotate(-45deg);}
.mnav-close:hover span{background:var(--gold);}
.mnav.is-open{visibility:visible;pointer-events:auto;}
.mnav.is-open .mnav-scrim{opacity:1;}
.mnav.is-open .mnav-panel{transform:none;}
.mnav-links{display:flex;flex-direction:column;}
.mnav-links > a,.mnav-grp-label{display:flex;align-items:center;justify-content:space-between;
  padding:17px 0;font-size:23px;font-weight:600;letter-spacing:-.02em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateX(22px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s var(--ease);}
.mnav-links > a:hover,.mnav-grp-label:hover{color:var(--gold);}
.mnav-links > a.active{color:var(--gold);}
.mnav.is-open .mnav-links > *{opacity:1;transform:none;}
.mnav.is-open .mnav-links > *:nth-child(1){transition-delay:.12s;}
.mnav.is-open .mnav-links > *:nth-child(2){transition-delay:.17s;}
.mnav.is-open .mnav-links > *:nth-child(3){transition-delay:.22s;}
.mnav.is-open .mnav-links > *:nth-child(4){transition-delay:.27s;}
.mnav.is-open .mnav-links > *:nth-child(5){transition-delay:.32s;}
.mnav.is-open .mnav-links > *:nth-child(6){transition-delay:.37s;}
.mnav-sub{display:flex;flex-direction:column;overflow:hidden;max-height:0;
  transition:max-height .45s var(--ease);}
.mnav-grp.open .mnav-sub{max-height:280px;}
.mnav-sub a{padding:13px 0 13px 16px;font-size:16px;font-weight:500;color:rgba(255,255,255,.66);
  border-bottom:1px solid rgba(255,255,255,.07);transition:color .2s var(--ease),transform .25s var(--ease);}
.mnav-sub a:hover{color:#fff;transform:translateX(6px);}
.mnav-grp-label{cursor:pointer;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:inherit;text-align:left;}
.mnav-grp-label .chev{width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:4px;color:rgba(255,255,255,.5);}
.mnav-grp.open .mnav-grp-label .chev{transform:rotate(-135deg);}
.mnav-foot{margin-top:auto;padding-top:34px;display:flex;flex-direction:column;gap:18px;}
.mnav-foot .btn{justify-content:center;}
.mnav-contact{display:flex;flex-direction:column;gap:7px;}
.mnav-contact a{font-size:15px;color:rgba(255,255,255,.66);transition:color .2s var(--ease);}
.mnav-contact a:hover{color:var(--gold);}

/* ---- footer ---------------------------------------------- */
.footer{background:var(--charcoal);color:#fff;padding:clamp(64px,7vw,96px) 0 44px;}
/* The brand column carries only the logo and socials now, so the columns sit
   closer to even than the old blurb layout allowed. */
.footer-top{display:grid;grid-template-columns:1.05fr .9fr .9fr .75fr 1fr;gap:40px;}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:26px;}
/* Logo and address read as one identity block, so they sit closer to each
   other than either does to the social row. */
.footer-ident{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-logo{display:inline-block;}
.footer-brand img{height:40px;width:auto;}
.footer-address{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.55);}
.footer-social{display:flex;gap:12px;}
.footer-soc{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .22s var(--ease),transform .22s var(--ease);}
.footer-soc:hover{background:var(--gold-deep);transform:translateY(-2px);}
.footer-soc:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.footer-soc svg{width:18px;height:18px;display:block;}
.footer-creds{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.footer-cred{font-size:13px;color:rgba(255,255,255,.55);border:1px solid var(--line-dk);border-radius:999px;padding:7px 14px;}
.footer-col h4{font-size:16px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:18px;letter-spacing:-.015em;}
.footer-col a,
.footer-col-btn{display:block;font-size:15px;color:rgba(255,255,255,.8);padding:6px 0;transition:color .18s var(--ease);}
.footer-col a:hover,
.footer-col-btn:hover{color:var(--gold);}
/* Reset the button so it is indistinguishable from the links beside it. */
.footer-col-btn{background:none;border:0;margin:0;font-family:inherit;font-weight:400;
  line-height:inherit;text-align:left;cursor:pointer;}
.footer-col-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.footer-bot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--line-dk);}
.footer-bot span{font-size:12.5px;color:rgba(255,255,255,.34);}
.footer-bot .sep{color:rgba(255,255,255,.2);}
/* Credit reads as plain text until hovered — no underline. */
.footer-bot a{font-size:12.5px;color:rgba(255,255,255,.34);border-bottom:0;
  transition:color .2s var(--ease);}
.footer-bot a:hover{color:var(--gold);}

/* ---- image slots ---------------------------------------- */
image-slot{--is-bg:var(--cream);background:var(--cream);}
.dark image-slot{--is-bg:#33373a;background:#33373a;}

/* a refined empty-state look for slots (the component renders its own,
   but we tone the surrounding chrome via these vars where supported) */

/* ---- chips / tags --------------------------------------- */
.chip{display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--paper);transition:all .18s var(--ease);cursor:pointer;white-space:nowrap;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
.tag{display:inline-flex;font-size:12.5px;font-weight:500;color:var(--slate);
  border:1px solid var(--line);border-radius:var(--r);padding:5px 11px;letter-spacing:.01em;white-space:nowrap;}

/* ---- cms hint (toggleable annotation of editable regions) --- */
[data-cms]{position:relative;}
body.show-cms [data-cms]{outline:1.5px dashed rgba(166,129,76,.55);outline-offset:5px;}
body.show-cms [data-cms]::before{
  content:attr(data-cms);position:absolute;top:-9px;left:0;transform:translateY(-100%);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:var(--gold-deep);padding:3px 8px;border-radius:3px;white-space:nowrap;z-index:40;pointer-events:none;
}
.cms-toggle{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:9px;
  background:var(--charcoal);color:#fff;border:1px solid var(--line-dk);border-radius:999px;
  padding:11px 18px;font-family:var(--sans);font-size:13.5px;font-weight:500;cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.22);transition:background .2s var(--ease);}
.cms-toggle:hover{background:var(--charcoal-deep);}
.cms-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--stone);transition:background .2s var(--ease);}
body.show-cms .cms-toggle .dot{background:var(--gold);}

@media(max-width:980px){
  :root{--gutter:28px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:760px){
  .nav-links,.nav-cta .btn{display:none;}
  .nav-burger{display:flex;}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px 40px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;gap:34px;}
  .footer-bot{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ============================================================
   MOTION LAYER  (gated by html.anim — added by luma-motion.js
   only when prefers-reduced-motion is not set, so no-JS and
   reduced-motion users always see fully-revealed content)
   ============================================================ */

/* reveal up */
html.anim .ru{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);will-change:opacity,transform;}
html.anim .ru.in{opacity:1;transform:none;}

/* image scale-settle */
html.anim .ri{opacity:0;transform:scale(1.06);
  transition:opacity 1s var(--ease),transform 1.5s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);will-change:opacity,transform;}
html.anim .ri.in{opacity:1;transform:scale(1);}

/* masked word-rise for headings */
html.anim .rw{text-wrap:pretty;}
html.anim .rw-word{display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .06em .26em;margin:0 -.06em -.26em;}
html.anim .rw-inner{display:inline-block;transform:translateY(116%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);}
html.anim .rw.in .rw-inner{transform:translateY(0);}

/* gold rule grow */
html.anim .rg{transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);}

/* accreditation logo badge — plain on light, white tile on dark */
.cred-mark{display:flex;align-items:center;justify-content:center;width:fit-content;}
.cred-mark img{height:34px;width:auto;display:block;}
.dark .cred-mark{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:7px;padding:11px 16px;}
.dark .cred-mark img{height:30px;}
/* credential captions */
html.anim .rg.in{transform:scaleX(1);}

/* hero / detail-hero parallax targets */
.hero image-slot,.pd-hero image-slot{will-change:transform;}
.pd-hero{overflow:hidden;}

/* nav motion states */
.nav{transition:background .45s var(--ease),border-color .45s var(--ease),
  transform .5s cubic-bezier(.16,1,.3,1),margin .45s var(--ease);}
.nav.nav-fixed{position:fixed;top:0;left:0;right:0;}
.nav.nav-fixed.scrolled{background:rgba(46,50,53,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dk);}
.nav .nav-inner{transition:padding .45s var(--ease);}
.nav.scrolled .nav-inner{padding-top:15px;padding-bottom:15px;}

/* The solid nav is position:sticky, so it still occupies its flow box at the top
   of the document. Condensing it would shrink that box and yank every section up
   by the 22px the padding lost. This margin gives that height back, below the
   fold where it cannot be seen, so the bar shrinks and the page underneath stays
   put. The fixed/hero nav is out of flow and needs no compensation. */
.nav.solid.scrolled{margin-bottom:22px;}

.nav.nav-hidden{transform:translateY(-101%);}

/* ---- WordPress admin bar --------------------------------------
   WP pushes the page down with `html{margin-top:32px}` and overlays a fixed
   32px bar. A position:sticky nav respects that margin and sits below the bar;
   a position:fixed one ignores it and sits underneath. That put the header 32px
   lower on the solid pages than on the hero pages for anyone signed in. Offset
   both so the header lands in the same place either way — and so the sticky nav
   docks below the bar rather than behind it once scrolled. */
body.admin-bar .nav.nav-fixed,
body.admin-bar .nav.solid{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .nav.nav-fixed,
  body.admin-bar .nav.solid{top:46px;}
}

@media(prefers-reduced-motion:reduce){
  .nav{transition:background .2s linear;}
  html .ru,html .ri,html .rw-inner,html .rg{transition:none!important;transform:none!important;opacity:1!important;}
}