/* Shared styles for the inner pages: about, case studies, the four sector
   pages, laser, careers and contact. The tokens, masthead, menu, buttons and
   footer are copied from index.html, which keeps its own inline copy — change
   both together. Anything used by one page only lives in that page's <style>. */

:root{
  /* a light page: --ink is the page colour and --paper the type on it.
     Photo sections switch back to the dark set below */
  --ink:#F4F1EA;
  --paper:#15191D;
  --mist:rgba(21,25,29,.7);
  --hair:rgba(21,25,29,.18);
  --hair-soft:rgba(21,25,29,.1);
  /* --accent is for type and lines; the yellow can't carry type on a light
     page, so here it deepens to bronze. --fill is the button yellow */
  --accent:#8F5A00;
  --fill:#FFC24B;
  --on-fill:#15191D;
  --bar:rgba(244,241,234,.9);
  --bar-solid:rgba(244,241,234,.98);
  --mat:#E6E0D5;
  --tint:#ECE7DE;
  --word-hi:#EFEAE1;
  --word-top:#E9E3D8;
  --word-bot:#E2DBCE;
  /* the one photo behind every Get a quote section */
  --quote-photo:url("https://3unloi5wlp.ucarecd.net/1d087e8e-2363-457a-9e9b-3a3003951def/Contact%20Us%20-%20Hero1.avif");
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --display:'BBH Hegarty',Impact,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --grain: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
:root{color-scheme:light}
/* over photography the type stays light on the dark grade */
.phero,.band,.on-dark,
body:not(.is-stuck) .masthead,
body:not(.is-stuck):not(.menu-open) .burger{
  --ink:#0C1116;
  --paper:#F2EFE9;
  --mist:rgba(242,239,233,.72);
  --hair:rgba(242,239,233,.30);
  --hair-soft:rgba(242,239,233,.16);
  --accent:#FFC24B;
  --bar:rgba(8,12,16,.88);
  color:var(--paper);
  color-scheme:dark;
}
/* the desktop links sit over the hero photo until the header bar shows */
@media (min-width:1181px){
  body:not(.is-stuck) .menu{
    --ink:#0C1116;
    --paper:#F2EFE9;
    --mist:rgba(242,239,233,.72);
    --hair:rgba(242,239,233,.30);
    --hair-soft:rgba(242,239,233,.16);
    --accent:#FFC24B;
    --bar:rgba(8,12,16,.92);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{display:block;max-width:100%}

/* ---------- masthead ---------- */
/* the header's space above and below the name, at the top of the page and
   in the stuck bar; the menu and its dropdown line up from these */
:root{--head-top:32px;--head-bottom:26px;--logo-h:84px}
body.is-stuck{--head-top:18px;--head-bottom:18px;--logo-h:60px}
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:9;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;color:var(--paper);
  padding:var(--head-top) var(--gutter) var(--head-bottom);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background 320ms ease,border-color 320ms ease,padding 320ms ease;
}
.mark{display:flex;align-items:baseline;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px;line-height:1;transition:opacity 200ms ease}
a.mark{color:inherit;text-decoration:none}
/* in the header the subtitle sits under the name, as in the burger menu */
.masthead .mark{flex-direction:column;align-items:flex-start;gap:6px}
body.is-stuck .masthead{
  background:var(--bar);
  border-bottom-color:var(--hair-soft);
  backdrop-filter:blur(12px);
}
.mark span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:14px;color:var(--mist);letter-spacing:0}
/* the logo in the header, and in the burger menu's copy of it; its height
   is --logo-h, and the links, burger and dropdown centre on it from that.
   It shrinks a little in the stuck bar */
.masthead .logo,.menu-mark .logo{display:block;height:var(--logo-h);width:auto;max-width:min(66vw,520px);object-fit:contain;object-position:left center;transition:height 320ms ease,filter 320ms ease}
/* the header sits over a dark photo at the top of the page, and on a light
   bar once scrolled or with the burger menu open. The script marks <html>
   .logo-dark or .logo-light for how the logo itself is drawn, and it's
   inverted only where the background would hide it; the hue-rotate puts
   its colours back after the invert, so only light and dark swap */
.logo-dark body:not(.is-stuck) .masthead .logo,
.logo-light body.is-stuck .masthead .logo,
.logo-light .menu-mark .logo{filter:invert(1) hue-rotate(180deg)}
.menu{
  position:fixed;z-index:10;
  top:calc(var(--head-top) + var(--logo-h) / 2 - 13px);right:var(--gutter);
  transition:top 320ms ease;
  display:flex;gap:clamp(14px,2.4vw,34px);
  /* half the logo, less half a link's height, below the header's top
     padding centres the links on the logo */
  font-size:16px;font-weight:600;color:var(--mist);
}
.menu-mark{display:none}
.menu a{
  position:relative;color:inherit;text-decoration:none;padding:4px 0;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 280ms cubic-bezier(.3,0,.2,1);
}
.menu a:hover{color:var(--paper)}
.menu a:hover::after{transform:scaleX(1)}
/* the page you're on keeps its underline, and About Us keeps it for the
   two pages in its dropdown */
.menu a[aria-current="page"],.menu a.is-parent{color:var(--paper)}
.menu a[aria-current="page"]::after,.menu a.is-parent::after{transform:scaleX(1)}

/* Get a quote, last in the menu: a small filled button whose negative
   margins keep the row, and so the links, where they were. The capitals
   sit low in their line, so 2px of padding under lifts them to centre */
.menu a.menu-cta{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  height:36px;margin:-5px 0 -5px 6px;padding:0 16px 2px;border-radius:6px;
  font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-fill);background:var(--fill);
  transition:background 180ms ease,color 180ms ease;
}
.menu a.menu-cta::after{display:none}
.menu a.menu-cta:hover,.menu a.menu-cta:focus-visible{background:var(--paper);color:var(--ink)}

/* Products drops down to the five product pages, and About Us to Contact
   Us and Careers: a mouse opens them by hovering, touch and keyboard by
   the arrow beside each */
.menu-drop{position:relative;display:flex;gap:3px}
.drop-toggle{
  display:flex;align-items:center;justify-content:center;
  width:20px;margin-right:-6px;
}
.drop-toggle svg{transition:transform 260ms cubic-bezier(.3,0,.2,1)}
.menu-drop:hover > a,.menu-drop.is-open > a,
.menu-drop:hover .drop-toggle,.menu-drop.is-open .drop-toggle{color:var(--paper)}
.menu-drop.is-open .drop-toggle svg{transform:rotate(180deg)}
.drop{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:1181px){
  .drop{
    /* it hangs just under its own link, at the top of the page and in the
       stuck bar alike, lined up with the link's text */
    position:absolute;top:calc(100% + 12px);left:-18px;
    min-width:calc(100% + 36px);width:max-content;
    gap:2px;padding:8px;
    /* the same frosted colour as the header bar, so once the bar shows the
       panel reads as part of it; a soft shadow and a faint edge instead of
       a hard border */
    background:var(--bar);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
    border-radius:10px;
    box-shadow:0 0 0 1px var(--hair-soft),0 18px 40px -18px rgba(8,12,16,.45);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity 200ms ease,transform 260ms cubic-bezier(.3,0,.2,1),visibility 0s linear 260ms;
  }
  /* over the photo at the top of the page it's a lighter smoked glass */
  body:not(.is-stuck) .drop{background:rgba(8,12,16,.55)}
  /* its links get a soft highlight rather than the menu's underline */
  .drop a{
    align-self:stretch;padding:9px 12px;border-radius:6px;
    font-size:15px;color:var(--mist);
    transition:background 160ms ease,color 160ms ease;
  }
  .drop a::after{display:none}
  .drop a:hover,.drop a:focus-visible,.drop a[aria-current="page"]{background:var(--hair-soft);color:var(--paper)}
  /* while it's open, an unseen strip under About Us carries the pointer
     down to the panel; it sits beneath the links and the panel */
  .menu-drop::after{content:"";position:absolute;z-index:-1;left:-18px;right:-18px;top:100%;height:40px;display:none}
  .menu-drop.is-open::after{display:block}
  .menu-drop.is-open .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
@media (min-width:1181px) and (hover:hover){
  .menu-drop:hover .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .menu-drop:hover .drop-toggle svg{transform:rotate(180deg)}
  .menu-drop:hover::after{display:block}
}

/* hamburger */
/* the burger sits outside the header, over the menu panel, so it stays
   put as the panel slides in over the header; placed where the header's
   own layout used to centre it against the name */
.burger{
  display:none;position:fixed;z-index:11;
  top:calc(var(--head-top) + var(--logo-h) / 2 - 10px);right:var(--gutter);
  width:30px;height:20px;
  transition:top 320ms ease;
}
.burger span{
  position:absolute;left:0;right:0;height:1.5px;
  background:var(--paper);border-radius:1px;
  transform-origin:50% 50%;
  transition:transform 340ms cubic-bezier(.3,0,.2,1),opacity 160ms ease;
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9.25px}
.burger span:nth-child(3){top:18.5px}
.burger.is-open span:nth-child(1){transform:translateY(9.25px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.is-open span:nth-child(3){transform:translateY(-9.25px) rotate(-45deg)}

/* at 1180px and below the menu folds into the burger */
@media (max-width:1180px){
  .burger{display:flex}
  .menu{
    position:fixed;inset:0;z-index:10;
    width:100%;
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    gap:clamp(14px,2.6vh,24px);
    padding:clamp(86px,13vh,132px) var(--gutter) clamp(28px,6vh,48px);
    /* a phone on its side is too short for the whole list: let it scroll */
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--bar-solid);
    backdrop-filter:blur(18px);
    font-size:clamp(15px,2.6vw,19px);font-weight:600;
    text-transform:uppercase;letter-spacing:-.02em;
    color:var(--paper);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform 520ms cubic-bezier(.22,.9,.28,1),visibility 520ms;
  }
  .menu.is-open{transform:translateX(0);visibility:visible}
  /* the menu's copy of the name slides in with it and lands exactly on
     the header's, at the top of the page or scrolled */
  .menu-mark{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    position:absolute;top:var(--head-top);left:var(--gutter);
    font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1;
    text-transform:none;
  }
  .menu-mark span{
    font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:14px;color:var(--mist);letter-spacing:0;
  }
  /* the list starts a short step under the menu's copy of the logo */
  .menu{padding-top:calc(var(--head-top) + var(--logo-h) + 30px)}
  .menu a{opacity:1;transform:none;transition:color 200ms ease}
  .menu a::after{height:2px}
  /* in the burger menu the button closes the list */
  .menu a.menu-cta{height:46px;margin:clamp(6px,1.4vh,14px) 0 0;padding:0 26px 2px;font-size:13px}
  .menu a[aria-current="page"]{color:var(--accent)}
  /* the dropdown opens out into a list under About Us */
  .menu-drop{flex-direction:column;align-items:flex-start;gap:clamp(12px,2.2vh,18px)}
  .drop-toggle{display:none}
  .drop{
    gap:clamp(12px,2.2vh,18px);
    padding-left:18px;border-left:1px solid var(--hair);
    font-size:.84em;color:var(--mist);
  }
  .menu a.is-parent:not(:hover)::after{transform:scaleX(0)}
}
@media (max-width:760px){
  .mark span{display:none}
  .mark{font-size:15px}
  /* phones keep the subtitle under the name too, with a little less room */
  .masthead .mark span{display:block;font-size:12px}
  .menu-mark{font-size:15px}
  .menu-mark span{font-size:12px}
  :root{--head-top:22px;--head-bottom:20px;--logo-h:58px}
  body.is-stuck{--head-top:14px;--head-bottom:14px;--logo-h:46px}
}

/* ---------- buttons ---------- */
.cta{
  position:relative;
  display:inline-block;border-radius:6px;
  padding:14px 30px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-fill);background:var(--fill);
  text-decoration:none;
  transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease;
}
.cta-label{
  display:inline-block;
  transition:transform 280ms cubic-bezier(.3,0,.2,1);
}
.cta-arrow{
  position:absolute;right:13px;top:50%;
  transform:translateY(-50%) translateX(-16px) scale(.35);
  opacity:0;transform-origin:left center;
  transition:transform 300ms cubic-bezier(.25,.9,.3,1),opacity 200ms ease;
}
.cta-arrow svg{display:block}
.cta:hover,.cta:focus-visible{background:var(--paper);color:var(--ink)}
.cta:hover .cta-label,.cta:focus-visible .cta-label{transform:translateX(-9px)}
.cta:hover .cta-arrow,.cta:focus-visible .cta-arrow{
  opacity:1;transform:translateY(-50%) translateX(0) scale(1);
}
/* the quieter second button beside a primary one */
.cta-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.cta-ghost:hover,.cta-ghost:focus-visible{background:var(--paper);color:var(--ink);box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* round arrow buttons, as on the home page carousels */
.round-btn{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--hair);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease;
}
.round-btn:hover{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(13px,1.3vw,15px);color:var(--accent);margin:0 0 14px;
}
.kicker{
  margin:0 0 10px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.h2{
  margin:0 0 14px;font-size:clamp(28px,3.8vw,48px);font-weight:800;
  letter-spacing:-.03em;line-height:1;text-transform:uppercase;
}
.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(16px,1.5vw,20px);line-height:1.5;
  color:var(--mist);margin:0 0 18px;max-width:60ch;
}
.lede a,.body-link{color:var(--paper);text-decoration-color:var(--accent);text-underline-offset:3px}

/* short lists set as pills */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{
  padding:8px 14px;border:1px solid var(--hair);border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
}
.chips .chips-more{border-color:transparent;padding-left:2px;padding-right:2px;color:var(--mist)}

/* ---------- page hero ---------- */
/* the home hero's treatment: full-bleed photo, the same dark grade and grain,
   the title set big at the bottom left */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:88vh;min-height:88svh;
  display:flex;align-items:flex-end;
  padding:clamp(140px,24vh,240px) var(--gutter) clamp(64px,11vh,120px);
}
.phero-img{
  position:absolute;inset:-12% 0;z-index:-3;
  background:#10161C var(--photo) center/cover no-repeat;
  transform:scale(1.08);
  translate:0 var(--py,0px);
  animation:pheroIn 1900ms cubic-bezier(.22,0,.18,1) both;
  will-change:transform,translate;
}
.phero-img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,12,16,.94) 0%,rgba(8,12,16,.6) 40%,rgba(8,12,16,.22) 72%,rgba(8,12,16,.5) 100%),
    var(--grain);
}
@keyframes pheroIn{
  from{opacity:0;transform:scale(1.2)}
  to  {opacity:1;transform:scale(1.08)}
}
.phero-copy{position:relative;z-index:2;max-width:1100px}
.phero-title{
  margin:0;font-weight:800;text-transform:uppercase;
  /* sized off the width so the longest word, ARCHITECTURAL, still fits a 320px phone */
  font-size:clamp(30px,9.9vw,132px);line-height:.86;letter-spacing:-.035em;
}
.phero-lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(16px,1.6vw,22px);line-height:1.5;
  color:var(--mist);max-width:46ch;margin:22px 0 0;
}
.phero-copy .actions{margin-top:30px}
.phero-copy > *{animation:rise 900ms cubic-bezier(.2,.7,.25,1) both}
.phero-copy > :nth-child(1){animation-delay:250ms}
.phero-copy > :nth-child(2){animation-delay:360ms}
.phero-copy > :nth-child(3){animation-delay:470ms}
.phero-copy > :nth-child(4){animation-delay:580ms}
@keyframes rise{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}

/* oversized outline lettering over a photo, as on the home banners */
.outline-word{
  position:absolute;z-index:-1;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--display);
  font-size:min(clamp(240px,44vw,720px), 112vh);line-height:1;
  letter-spacing:.06em;white-space:nowrap;pointer-events:none;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,239,233,.16);
  translate:0 var(--py,0px);
}
@media (max-width:760px){
  .outline-word{-webkit-text-stroke-width:1px}
}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(80px,13vh,140px) var(--gutter)}
.sec-tight{padding-top:0}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  margin-bottom:clamp(34px,5vh,56px);
}
.sec-head .lede{margin:14px 0 0;max-width:52ch}
@media (max-width:760px){
  .sec-head{flex-direction:column;align-items:flex-start}
}

/* a label on the left, a large serif statement on the right */
.intro{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
  gap:clamp(24px,5vw,72px);align-items:start;
}
.intro .kicker{padding-top:.7em}
.intro-text{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(22px,2.6vw,38px);line-height:1.3;color:var(--paper);
}
.intro-text + .intro-text{margin-top:.8em}
/* the product pages drop the label: the statement keeps to the right */
.intro > :only-child{grid-column:2}
@media (max-width:860px){
  .intro{grid-template-columns:1fr}
  .intro .kicker{padding-top:0}
  .intro > :only-child{grid-column:auto}
}

/* a sector page's overview: the intro, three columns, then its materials */
/* its intro: a photo on the left that drifts against the scroll, like
   the home page's, and the title, opening statement and detail beside it */
.svc-intro{align-items:center}
.svc-photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--mat)}
.svc-photo-img{
  position:absolute;inset:-16% 0;
  background:var(--photo) center/cover no-repeat;
  translate:0 var(--py,0px);will-change:translate;
}
.svc-intro .h2{margin:0 0 clamp(18px,3vh,28px)}
@media (max-width:860px){
  /* on a narrow screen the text comes first and the photo follows */
  .svc-photo{order:2;aspect-ratio:16/10}
}
.svc-intro .intro-text{font-size:clamp(19px,1.9vw,27px);line-height:1.4}
.svc-lede{margin:clamp(18px,3vh,28px) 0 0}
/* a section set on a slightly deeper tone, to part it from its neighbours */
.sec--tint{background:var(--tint)}
.sec-title{margin-bottom:clamp(30px,5vh,52px)}
/* What we build: the title on the left and, level with it on the right,
   the materials as one line with the finish note under it; the columns
   below then run the full width */
.build-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;flex-wrap:wrap;
  margin-bottom:clamp(30px,5vh,52px);
}
.build-head .h2{margin:0}
.build-mat{text-align:right;max-width:72ch}
.build-mat-list{margin:0;font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.5;color:var(--paper)}
.build-mat-list b{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-right:10px}
.build-mat-list .dot{color:var(--accent);margin:0 3px}
.build-mat-note{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;line-height:1.5;color:var(--mist)}
/* narrower, the materials sit under the title, left-aligned */
@media (max-width:1100px){
  .build-head{flex-direction:column;align-items:flex-start}
  .build-mat{text-align:left}
}

/* on the sector pages, the location, scope and credits under a project's photos */
.proj-place{margin:14px 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.proj-text{margin:0;font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.55;color:var(--mist)}
.proj-credits{margin:14px 0 0;display:grid;gap:6px;font-size:13px;line-height:1.4}
.proj-credits div{display:grid;grid-template-columns:100px 1fr;gap:10px}
.proj-credits dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);padding-top:1px}
.proj-credits dd{margin:0}

/* featured projects: the gallery large beside its write-up, alternating sides */
.feats{display:grid;gap:clamp(64px,11vh,128px)}
.feat{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;
}
.feat:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.feat:nth-child(even) .gal{order:2}
.feat-body{max-width:46ch}
/* the location sits just under the project's name */
.feat .proj-place{margin:0 0 16px}
.feat-title{
  margin:0 0 10px;font-size:clamp(24px,2.6vw,38px);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;
}
.feat .proj-text{font-size:clamp(15px,1.2vw,17px)}
.feat .proj-credits{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
@media (max-width:860px){
  .feat,.feat:nth-child(even){grid-template-columns:1fr}
  .feat:nth-child(even) .gal{order:0}
  .feat-body{max-width:none}
}

/* everything else runs as an endless carousel of smaller tiles, like the
   Laser page's photo strip; site.js turns it */
.more-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;
  /* on a narrow screen the button drops under the heading */
  flex-wrap:wrap;
  margin-bottom:clamp(26px,4vh,40px);
  padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--hair);
}
.more-head .h2{margin:0}
.more-link{flex:0 0 auto}
/* the row keeps within the page's margins and always shows whole tiles:
   four across, three on a laptop, two on a tablet, one on a phone. It
   scrolls natively, so a finger or trackpad moves it smoothly with
   momentum, and it snaps to whole tiles when it stops */
.more-wrap{position:relative;--per:4;--gap:clamp(14px,1.6vw,22px)}
@media (max-width:1100px){.more-wrap{--per:3}}
@media (max-width:760px){.more-wrap{--per:2}}
@media (max-width:480px){.more-wrap{--per:1}}
.more-strip{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.more-strip::-webkit-scrollbar{display:none}
.more-grid{display:flex;align-items:flex-start;gap:var(--gap)}
.more-grid > .mp{scroll-snap-align:start}
/* arrows in the page margins either side of the photos, centred on their
   height; they show only while the pointer is over the photos or on an
   arrow, or while one has keyboard focus. Touch screens and narrow windows have
   none: the row is scrolled by hand there */
.more-arrow{
  position:absolute;z-index:2;top:50%;
  width:44px;height:44px;
  opacity:0;visibility:hidden;
  transition:opacity 220ms ease,visibility 0s linear 220ms,background 200ms ease,border-color 200ms ease,color 200ms ease;
}
.more-prev{left:calc(var(--gutter) / -2);transform:translate(-50%,-50%)}
.more-next{right:calc(var(--gutter) / -2);transform:translate(50%,-50%)}
.more-wrap:has(.more-arrow:focus-visible) .more-arrow{opacity:1;visibility:visible;transition-delay:0s}
@media (hover:hover) and (pointer:fine){
  .more-wrap:hover .more-arrow{opacity:1;visibility:visible;transition-delay:0s}
}
@media (hover:none),(pointer:coarse),(max-width:1024px){
  .more-arrow{display:none}
}
/* one photo per tile; the project's name lies over it, shown on hover
   with a mouse, on keyboard focus, and on a tap on touch screens */
.mp{
  position:relative;margin:0;min-width:0;
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  aspect-ratio:4/3;overflow:hidden;background:var(--mat);cursor:pointer;
}
.mp img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;
  transition:transform 900ms cubic-bezier(.2,.7,.25,1);
}
.mp-cap{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(14px,1.6vw,20px);
  background:linear-gradient(180deg,rgba(8,12,16,0) 35%,rgba(8,12,16,.82) 100%);
  color:#F2EFE9;pointer-events:none;
  opacity:0;transition:opacity 260ms ease;
}
.mp-title{
  font-size:clamp(15px,1.2vw,18px);font-weight:600;letter-spacing:-.01em;line-height:1.25;
  transform:translateY(8px);transition:transform 320ms cubic-bezier(.3,0,.2,1);
}
.mp.is-open .mp-cap,.mp:focus-visible .mp-cap{opacity:1}
.mp.is-open .mp-title,.mp:focus-visible .mp-title{transform:none}
.mp.is-open img{transform:scale(1.04)}
.mp:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  .mp:hover .mp-cap{opacity:1}
  .mp:hover .mp-title{transform:none}
  .mp:hover img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .mp img,.mp-title{transition:none}
}

/* columns under a hairline, like the home page's venue cards; the careers
   steps keep a number (.col-num) since their order matters */
.cols{
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:clamp(30px,5vh,44px) clamp(28px,4vw,64px);
}
.col{border-top:1px solid var(--hair);padding-top:clamp(22px,3vh,30px)}
.col-num{
  margin:0 0 clamp(22px,4.5vh,46px);
  font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent);
}
.col-title{
  margin:0 0 10px;font-size:clamp(18px,1.7vw,24px);font-weight:600;
  letter-spacing:-.01em;line-height:1.15;
}
.col-text{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:15px;line-height:1.55;color:var(--mist);
}
/* three items stay in one row until the screen narrows, then stack in a
   single column, never splitting two and one; sets of two or four go two
   across first, since they divide evenly */
@media (max-width:860px){
  .cols{grid-template-columns:1fr;row-gap:clamp(30px,5vh,44px)}
  .cols[style*="--n:2"],.cols[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cols[style*="--n:2"],.cols[style*="--n:4"]{grid-template-columns:1fr}
}

/* big figures in a row, divided by hairlines */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border-top:1px solid var(--hair);
}
.stat{padding:clamp(22px,3.4vh,36px) clamp(18px,2.4vw,36px) clamp(22px,3.4vh,36px) 0;border-bottom:1px solid var(--hair)}
.stat + .stat{padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--hair)}
.stat-num{
  display:block;
  font-size:clamp(44px,6vw,88px);font-weight:800;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--accent);white-space:nowrap;
}
.stat-num small{font-size:.42em;letter-spacing:-.01em;margin-left:.12em}
.stat-label{
  display:block;margin-top:16px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.stat-note{
  display:block;margin-top:6px;
  font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.45;
  color:var(--mist);max-width:34ch;
}
@media (max-width:560px){
  .stat,.stat + .stat{padding-left:0;padding-right:0;border-left:0}
}

/* a photo beside copy; the photo drifts slowly inside its frame */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);align-items:center;
}
.split-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mat);margin:0}
.split-img > div{
  position:absolute;inset:-10% 0;
  background:var(--photo) center/cover no-repeat;
  translate:0 var(--py,0px);
}
.split--flip .split-img{order:2}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split--flip .split-img{order:0}
  .split-img{aspect-ratio:16/11}
}

/* ---------- closing band ---------- */
/* the home page's Get a quote section: photo, outline CSI, centred copy */
.band{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:88vh;min-height:88svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(90px,14vh,150px) var(--gutter);
  text-align:center;
}
.band-img{
  position:absolute;inset:-18% 0;z-index:-3;
  background:#10161C var(--quote-photo) center/cover no-repeat;
  translate:0 var(--py,0px);
}
.band-img::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 65% at 50% 50%,rgba(8,12,16,.8) 0%,rgba(8,12,16,.5) 55%,rgba(8,12,16,.25) 100%),
    var(--grain);
}
.band-inner{position:relative;z-index:2;max-width:min(56ch,62vw)}
.band h2{
  margin:0 0 14px;font-size:clamp(30px,4.4vw,60px);font-weight:800;
  letter-spacing:-.03em;line-height:1;text-transform:uppercase;
}
.band .lede{margin:0 auto clamp(30px,4.5vh,48px)}
.band .actions{justify-content:center}
@media (max-width:1024px){
  .band-inner{max-width:none}
}

/* ---------- reveal on scroll ---------- */
.js .reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity 900ms ease var(--d,0ms),transform 1100ms cubic-bezier(.2,.7,.25,1) var(--d,0ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- footer ---------- */
.foot{
  position:relative;background:var(--ink);overflow:hidden;
  padding:clamp(60px,9vh,100px) var(--gutter) clamp(28px,4vh,40px);
  border-top:1px solid var(--hair);
}
/* the three section letters, oversized and half sunk below the page edge */
.foot-word{
  position:absolute;z-index:0;
  left:50%;right:auto;top:50%;bottom:auto;
  /* centred on the footer: the same space before the C as the letter
     spacing leaves after the I, so the letters, not the box, sit on the
     middle, and it turns about its own centre */
  transform:translate(-50%,-50%) rotate(-7deg);
  transform-origin:50% 50%;
  padding-left:.06em;
  translate:0 var(--py,0px);
  font-family:var(--display);
  font-size:min(clamp(270px,46vw,730px), 113vh);line-height:1;
  letter-spacing:.06em;white-space:nowrap;pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(90% 120% at 30% 20%,var(--word-hi) 0%,transparent 62%),
    linear-gradient(180deg,var(--word-top) 0%,var(--word-bot) 82%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:.9;
}
@media (max-width:760px){
  .foot-word{transform:translate(-50%,-50%) rotate(-9deg)}
}
.foot-top,.foot-bottom{position:relative;z-index:1}
.foot-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(36px,6vw,90px);
  padding-bottom:clamp(44px,7vh,76px);
}
.foot-mark{font-size:20px}
.foot-line{
  margin:18px 0 0;font-family:var(--serif);font-weight:300;
  font-size:16px;line-height:1.55;color:var(--mist);max-width:38ch;
}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-h{
  margin:0 0 6px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.foot-col a{
  color:var(--mist);text-decoration:none;font-size:14px;line-height:1.45;
  transition:color 200ms ease;width:fit-content;
}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--hair);
  font-size:12px;color:var(--mist);
}
.foot-bottom p{margin:0}
.foot-legal{display:flex;gap:22px}
.foot-legal a{color:inherit;text-decoration:none;transition:color 200ms ease}
.foot-legal a:hover{color:var(--paper)}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:clamp(34px,5vh,50px)}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .phero-img,.phero-copy > *{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .menu,.burger span,.drop,.drop-toggle svg{transition-duration:1ms}
}

/* ---------- more of our work: the other product pages as tall photo panels
   on the tinted background, so it reads apart from the "More projects" strip.
   The hovered panel widens; the name sits on the photo. ---------- */
.more-work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin:0 0 clamp(24px,4vh,40px)}
.more-work-head .h2{margin:0}
.more-work-head p{margin:0;max-width:36ch;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--mist)}
.work-cards{display:flex;gap:clamp(10px,1.2vw,16px);height:clamp(340px,56vh,540px);container-type:inline-size;--grow:2.2}
/* five panels: widen less, so the others keep room for their names */
.work-cards[style*="--n:5"]{--grow:1.6}
.work-card{
  position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:8px;background:var(--mat);color:#F2EFE9;text-decoration:none;isolation:isolate;
  transition:flex-grow 700ms cubic-bezier(.2,.7,.25,1);
}
.work-cards:hover .work-card:hover,.work-card:focus-visible{flex-grow:var(--grow)}
.work-img{position:absolute;inset:0;z-index:-1}
.work-img::before,.work-img::after{content:"";position:absolute;inset:0}
.work-img::before{background:var(--photo) center/cover no-repeat;transition:transform 900ms cubic-bezier(.2,.7,.25,1)}
.work-img::after{background:linear-gradient(to top,rgba(8,11,14,.86) 0%,rgba(8,11,14,.35) 45%,rgba(8,11,14,0) 70%)}
.work-name{
  display:block;margin-top:auto;
  padding:clamp(18px,2vw,28px);padding-top:20px;
  /* names stay on one line: the size is capped by how narrow a panel gets
     while a neighbour is widened (n / (n - 1 + grow) of its resting width);
     the longest names run about 8 ems wide */
  font-size:min(clamp(18px,1.55vw,25px),calc((100cqi / (var(--n,4) - 1 + var(--grow)) - 2 * clamp(18px,2vw,28px) - 6px) / 8.1));
  white-space:nowrap;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase;
}
.work-name::before{content:"";display:block;margin-bottom:14px;width:36px;height:3px;background:var(--fill);transition:width 500ms ease}
.work-go{position:absolute;top:clamp(16px,1.8vw,24px);right:clamp(16px,1.8vw,24px);width:44px;height:44px;color:#F2EFE9;border-color:rgba(242,239,233,.55);background:rgba(8,11,14,.25)}
.work-card:hover .work-img::before,.work-card:focus-visible .work-img::before{transform:scale(1.06)}
.work-card:hover .work-name::before,.work-card:focus-visible .work-name::before{width:72px}
.work-card:hover .work-go,.work-card:focus-visible .work-go{background:var(--fill);border-color:var(--fill);color:#15191D}
/* tablet and phone: full-width photo rows, no widening */
@media (max-width:1100px){
  .work-cards{flex-direction:column;height:auto}
  .work-card{flex:none;height:clamp(150px,26vw,210px)}
  .work-name{font-size:clamp(18px,3.4vw,25px)}
  .work-cards:hover .work-card:hover,.work-card:focus-visible{flex-grow:0}
}
@media (prefers-reduced-motion:reduce){.work-card,.work-img::before,.work-name::before{transition:none}}