/* ==========================================================================
   CALICHE PARTNERS
   Visual identity · v2

   PALETTE      Navy #1B2F47 · White #FFFFFF · Black #000000 + warm stone
   TYPE         EB Garamond (display, set light and large) · Carlito (body,
                metrically identical to Calibri) · Carlito wide-tracked caps
                for labels and navigation
   PRINCIPLE    Rules, not boxes. Air, not ornament. Motion belongs to
                surfaces and images — never to text that is meant to be read.
   ========================================================================== */

:root{
  /* ground */
  --navy:#1B2F47;
  --navy-deep:#101C2B;
  --navy-mid:#24405C;
  --navy-soft:#3A5473;
  --paper:#FBFAF7;
  --stone:#F1EDE6;
  --white:#FFFFFF;

  /* ink */
  --ink:#15181C;
  --ink-mid:#56606B;
  --ink-soft:#8A929B;
  --on-navy:rgba(255,255,255,.80);
  --on-navy-soft:rgba(255,255,255,.55);

  /* rules */
  --rule:rgba(27,47,71,.16);
  --rule-strong:rgba(27,47,71,.34);
  --rule-light:rgba(255,255,255,.22);

  /* ── ACCENT EXPERIMENT ────────────────────────────────────────────────
     Caliche Orange on the eyebrow rules and the link arrows.
     To undo: set --accent back to var(--rule-strong) equivalents, or
     simply change this one value. Nothing else needs touching. */
  --accent:#F7921D;

  /* type */
  --serif:"EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,"Times New Roman",serif;
  --sans:"Carlito",Calibri,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* metrics */
  --wrap:1180px;
  --gut:clamp(22px,6vw,88px);
  --nav-h:92px;
  --nav-h-sm:68px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.18,1);
  --t-fast:280ms;
  --t-mid:560ms;
  --t-slow:900ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--navy);color:#fff}

/* --------------------------------------------------------------------------
   1 · LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:860px}

.band{padding-block:clamp(88px,12vw,176px)}
.band--tight{padding-block:clamp(64px,8vw,112px)}
.band--stone{background:var(--stone)}
.band--navy{background:var(--navy);color:var(--on-navy)}
.band--navy-deep{background:var(--navy-deep);color:var(--on-navy)}

.cols{display:grid;gap:clamp(36px,6vw,96px)}
.cols--split{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:start}
.cols--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:880px){
  .cols--split,.cols--even,.cols--three{grid-template-columns:1fr}
}

.stack{display:grid;gap:clamp(18px,2vw,28px);align-content:start}
.stack--wide{gap:clamp(30px,4vw,52px)}

/* --------------------------------------------------------------------------
   2 · TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  color:var(--navy);
  margin:0;
  line-height:1.07;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.band--navy h1,.band--navy h2,.band--navy h3,
.band--navy-deep h1,.band--navy-deep h2,.band--navy-deep h3{color:#fff}

h1{font-size:clamp(42px,6.4vw,84px)}
h2{font-size:clamp(31px,4.3vw,54px);line-height:1.1}
h3{font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.008em;font-weight:500}

p{margin:0}
.stack p + p{margin-top:1.05em}

.lead{
  font-size:clamp(19px,1.55vw,22px);
  line-height:1.66;
  color:var(--ink-mid);
  max-width:60ch;
}
.band--navy .lead,.band--navy-deep .lead{color:var(--on-navy)}

.body{color:var(--ink-mid);max-width:66ch}
.band--navy .body,.band--navy-deep .body{color:var(--on-navy)}

.fine{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.band--navy .fine,.band--navy-deep .fine{color:var(--on-navy-soft)}

/* eyebrow: wide-tracked caps over a hairline that draws itself in */
.eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--navy-soft);margin:0;
}
.eyebrow::after{
  content:"";flex:1 1 auto;max-width:120px;height:1px;background:var(--accent);
  transform-origin:left center;
}
.band--navy .eyebrow,.band--navy-deep .eyebrow,.hero .eyebrow,.banner .eyebrow{color:var(--on-navy-soft)}
.band--navy .eyebrow::after,.band--navy-deep .eyebrow::after,
.hero .eyebrow::after,.banner .eyebrow::after{background:var(--accent)}

/* --------------------------------------------------------------------------
   3 · LINKS & ACTIONS
   Text links with a rule that draws left to right. No filled buttons.
   -------------------------------------------------------------------------- */
.link{
  position:relative;display:inline-flex;align-items:baseline;gap:12px;
  text-decoration:none;color:var(--navy);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:10px;
}
.link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent)}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--navy);
  transition:width var(--t-mid) var(--ease);
}
.link:hover::after,.link:focus-visible::after{width:100%}
.link .arw{transition:transform var(--t-mid) var(--ease);font-weight:400;color:var(--accent)}
.link:hover .arw{transform:translateX(6px)}

.link--light{color:#fff}
.link--light::before{background:var(--accent)}
.link--light::after{background:#fff}

.links{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,48px)}

/* --------------------------------------------------------------------------
   4 · NAVIGATION
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:120;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  display:flex;align-items:center;
  background:rgba(27,47,71,0);
  transition:background var(--t-mid) var(--ease),height var(--t-mid) var(--ease);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule-light);opacity:0;transition:opacity var(--t-mid) var(--ease);
}
/* scrim so white nav type holds over any hero image */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,28,43,.62),rgba(16,28,43,0));
  transition:opacity var(--t-mid) var(--ease);
}
.nav.is-scrolled{background:var(--navy);height:calc(var(--nav-h-sm) + env(safe-area-inset-top,0px))}
.nav.is-scrolled::before{opacity:0}
.nav.is-scrolled::after{opacity:1}

.nav__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}

.brand{display:flex;align-items:center;gap:15px;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto;transition:height var(--t-mid) var(--ease)}
.nav.is-scrolled .brand img{height:32px}
.brand__txt{
  color:#fff;font-weight:700;font-size:13px;line-height:1.2;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
}

.menu{display:flex;align-items:center;gap:clamp(14px,2.1vw,32px);list-style:none;margin:0;padding:0}
.menu a{
  position:relative;display:block;text-decoration:none;color:rgba(255,255,255,.82);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 0;white-space:nowrap;transition:color var(--t-fast) var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:#fff;
  transition:width var(--t-mid) var(--ease);
}
.menu a:hover{color:#fff}
.menu a:hover::after{width:100%}
.menu a[aria-current="page"]{color:#fff}
.menu a[aria-current="page"]::after{width:100%;background:rgba(255,255,255,.55)}

.burger{display:none;background:none;border:0;padding:12px;margin-right:-12px;cursor:pointer}
.burger i{display:block;width:26px;height:1px;background:#fff;margin:7px 0;
  transition:transform var(--t-fast) var(--ease),opacity 160ms linear}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:block}
  .menu{
    position:fixed;left:0;right:0;
    top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);padding:6px 0 30px;
    border-top:1px solid var(--rule-light);
    max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px));overflow:auto;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  }
  .menu.is-open{opacity:1;transform:none;pointer-events:auto}
  .menu a{padding:16px var(--gut);font-size:12.5px}
  .menu a::after{display:none}
  .menu a[aria-current="page"]{background:rgba(255,255,255,.06)}
  .brand__txt{font-size:11px;letter-spacing:.2em}
}

/* --------------------------------------------------------------------------
   5 · HERO & BANNERS
   -------------------------------------------------------------------------- */
.hero,.banner{
  position:relative;display:flex;align-items:flex-end;
  background:var(--navy-deep);overflow:hidden;isolation:isolate;
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
}
.hero{min-height:clamp(600px,88vh,920px)}
.banner{min-height:clamp(380px,56vh,560px)}

/* the drifting plate — the only element that tracks scroll position */
.plate{
  position:absolute;left:0;right:0;top:-8%;height:116%;z-index:-2;
  background-color:var(--navy-deep);
  background-image:linear-gradient(145deg,#24405C 0%,#1B2F47 48%,#101C2B 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;
}
.hero::after,.banner::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.hero::after{
  background:linear-gradient(180deg,rgba(16,28,43,.52) 0%,rgba(16,28,43,.34) 38%,rgba(16,28,43,.93) 100%);
}
.banner::after{
  background:linear-gradient(180deg,rgba(16,28,43,.70) 0%,rgba(16,28,43,.90) 100%);
}

.hero__in,.banner__in{
  position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);
}
.hero__in{padding-bottom:clamp(64px,10vh,120px);display:grid;gap:clamp(22px,3vw,38px)}
.banner__in{padding-bottom:clamp(44px,6vh,72px);display:grid;gap:clamp(16px,2vw,24px)}

.hero h1{color:#fff;max-width:14ch}
.hero .lead{color:rgba(255,255,255,.84);max-width:52ch}
.banner h1{color:#fff;max-width:16ch;font-size:clamp(38px,5.4vw,68px)}
.banner .lead{color:rgba(255,255,255,.72);max-width:54ch;font-size:clamp(17px,1.35vw,20px)}

/* scroll cue, home only */
.cue{
  position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:2;
  width:1px;height:54px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55));
}
@media (max-width:880px){.cue{display:none}}

/* --------------------------------------------------------------------------
   6 · CONTENT COMPONENTS — rules, not boxes
   -------------------------------------------------------------------------- */

/* specification list: label left, value right, hairline between */
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.spec > li{
  display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);
  padding-block:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--rule);
}
.spec dt,.spec .k{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);padding-top:.45em;margin:0;
}
.spec .v{margin:0;color:var(--ink-mid)}
.band--navy .spec,.band--navy-deep .spec{border-color:var(--rule-light)}
.band--navy .spec > li,.band--navy-deep .spec > li{border-color:var(--rule-light)}
.band--navy .spec .k,.band--navy-deep .spec .k{color:#fff}
.band--navy .spec .v,.band--navy-deep .spec .v{color:var(--on-navy)}
@media (max-width:640px){
  .spec > li{grid-template-columns:1fr;gap:6px}
  .spec .k{padding-top:0}
}

/* figure with its own caption rule */
.figure{margin:0;display:grid;gap:14px}
.figure img,.figure .plate-img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--navy-deep);
  filter:saturate(.52) contrast(1.02);
}
.figure figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.figure--wide img{aspect-ratio:16/9}

/* project tile */
.tile{position:relative;display:block;text-decoration:none;overflow:hidden;background:var(--navy-deep)}
/* Portrait in a three-up row; landscape when two share the row, otherwise a
   3:4 tile at half-width runs absurdly tall. */
.cols--even .tile__img{aspect-ratio:4/3}

/* Sketch placeholder: a drawing, not a photograph. It carries no navy wash
   (that would muddy the pencil), sits on paper rather than navy, keeps its
   own 5:3 proportion so no part of the drawing is cropped, and does not
   scale on hover — there is nothing yet to invite a click into. */
/* Stone frame — the same colour as the Target Markets band (--stone) and the
   same width as the mat on the leadership portraits, clamp(5px,.5vw,7px), so
   the two read as one system. The border and the tile's own ground are the
   same value, so they merge into a single mat around the drawing. */
.tile--sketch{background:var(--stone);
  border:clamp(5px,.5vw,7px) solid var(--stone)}
.tile--sketch .tile__img{
  aspect-ratio:5/3;
  filter:none;
  background-color:#F7F5F1;
  background-size:contain;
  background-position:center;
}
.tile--sketch:hover .tile__img{transform:none}
.tile--sketch::after{
  background:linear-gradient(180deg,rgba(16,28,43,0) 46%,rgba(16,28,43,.82) 100%);
}
.tile__img{
  aspect-ratio:3/4;background-size:cover;background-position:center;
  background-color:var(--navy-deep);
  background-image:linear-gradient(150deg,#24405C,#101C2B);
  filter:saturate(.5);
  transition:transform 1.4s var(--ease-soft),filter var(--t-slow) var(--ease);
}
.tile:hover .tile__img,.tile:focus-visible .tile__img{transform:scale(1.045);filter:saturate(.62)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,28,43,0) 42%,rgba(16,28,43,.86) 100%);
}
.tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.4vw,30px)}
.tile__cap h3{color:#fff;margin-bottom:8px}
.tile__cap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* status flag, top-right of the tile — same face, size and tracking as the
   city / square-footage line beneath the project name */
.tile__status{
  position:absolute;z-index:2;margin:0;
  top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--navy);
}

/* biography — two principals side by side, each stacked vertically:
   name, title, portrait, bio, credentials. A hairline divides them. */
.leaders{
  --lead-gap:clamp(20px,2.6vw,42px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:0;align-items:start;
}
.leader{
  display:grid;gap:clamp(16px,1.8vw,24px);align-content:start;min-width:0;
  padding-inline:var(--lead-gap);
}
.leader:first-child{padding-left:0}
.leader:last-child{padding-right:0}
.leader h2{font-size:clamp(26px,2.9vw,38px)}

/* hairline between the two columns */
@media (min-width:881px){
  .leader + .leader{border-left:1px solid var(--rule)}
}
@media (max-width:880px){
  .leaders{grid-template-columns:1fr}
  .leader{padding-inline:0}
  .leader + .leader{
    margin-top:clamp(52px,8vw,84px);
    padding-top:clamp(52px,8vw,84px);
    border-top:1px solid var(--rule);
  }
}

/* Portrait is never cropped: no aspect-ratio, no object-fit, natural height.
   Whatever the file is, the whole photo shows. */
.bio__frame{margin:0;width:100%;max-width:230px;background:var(--stone);
  padding:clamp(5px,.5vw,7px)}
.bio__portrait{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03)}
.bio__role{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy-soft);margin:0}

/* quiet placeholder — a ruled note, not a dashed box */
.pending{
  border-top:1px solid var(--rule-strong);
  padding-top:clamp(22px,2.5vw,30px);
  display:grid;gap:12px;max-width:70ch;
}
.pending__tag{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--navy-soft);margin:0}
.pending p{color:var(--ink-mid);margin:0}
.band--navy .pending,.band--navy-deep .pending{border-color:var(--rule-light)}
.band--navy .pending p,.band--navy-deep .pending p{color:var(--on-navy)}

/* --------------------------------------------------------------------------
   7 · FORM
   -------------------------------------------------------------------------- */
.form{display:grid;gap:clamp(22px,2.6vw,32px);max-width:640px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}

.field{display:grid;gap:9px}
.field label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16.5px;color:var(--ink);line-height:1.6;
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  border-radius:0;padding:10px 2px;width:100%;
  transition:border-color var(--t-fast) var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--navy);border-bottom-width:1px;
  box-shadow:0 1px 0 0 var(--navy);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),
                   linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 13px) 1.25em,calc(100% - 8px) 1.25em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}

button.link{background:none;border:0;cursor:pointer;font-family:var(--sans)}

.addr{font-style:normal;line-height:1.95;color:var(--ink-mid)}
.addr strong{display:block;font-family:var(--serif);font-size:23px;font-weight:500;
  color:var(--navy);margin-bottom:10px;letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   8 · FOOTER
   -------------------------------------------------------------------------- */
.foot{background:var(--navy);color:var(--on-navy);font-size:14.5px;line-height:1.85}
.foot__in{padding-block:clamp(60px,7vw,100px) 0}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(48px,6vw,76px)}
.foot img.mark{height:60px;width:auto}   /* tagline removed — no trailing gap */
.foot h4{margin:0 0 20px;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{position:relative;text-decoration:none;color:var(--on-navy);
  transition:color var(--t-fast) var(--ease)}
.foot a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:#fff;transition:width var(--t-mid) var(--ease)}
.foot a:hover{color:#fff}
.foot a:hover::after{width:100%}
.foot__bar{border-top:1px solid var(--accent);padding-block:24px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12px;letter-spacing:.06em;color:var(--on-navy-soft)}
@media (max-width:860px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:540px){.foot__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   9 · MOTION SYSTEM
   Three behaviours only:
     a) page arrival / departure veil
     b) once-only settle on structural elements (never on running copy)
     c) slow parallax drift on hero and banner plates
   Running body copy carries no animation at all — it is painted at rest.
   -------------------------------------------------------------------------- */

/* a · page veil */
.veil{
  position:fixed;inset:0;z-index:1000;background:var(--navy-deep);
  opacity:0;pointer-events:none;
}
.js .veil{opacity:1;transition:opacity 620ms var(--ease-soft)}
.js.is-ready .veil{opacity:0}
.js.is-leaving .veil{opacity:1;transition:opacity 300ms var(--ease);pointer-events:auto}

/* b · settle — opacity plus a short rise, once, on structural elements */
.js [data-settle]{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity var(--t-slow) var(--ease-soft),transform var(--t-slow) var(--ease-soft)}
.js [data-settle].is-in{opacity:1;transform:none}

/* copy blocks fade only — no displacement under the reader's eye */
.js [data-settle="copy"]{transform:none;transition:opacity var(--t-mid) linear}

/* hairlines draw themselves */
.js [data-settle] .eyebrow::after{transform:scaleX(0);
  transition:transform var(--t-slow) var(--ease-soft) 160ms}
.js [data-settle].is-in .eyebrow::after{transform:scaleX(1)}

/* images settle out of a slight scale */
.js [data-settle] .figure img,
.js [data-settle] .tile__img{
  transform:scale(1.05);transition:transform 1500ms var(--ease-soft)}
.js [data-settle].is-in .figure img,
.js [data-settle].is-in .tile__img{transform:none}

/* hero: settles on arrival, staggered by depth, not by scroll */
.js .hero__in > *,.js .banner__in > *{opacity:0;transform:translate3d(0,20px,0)}
.js.is-ready .hero__in > *,.js.is-ready .banner__in > *{
  opacity:1;transform:none;
  transition:opacity 1000ms var(--ease-soft),transform 1000ms var(--ease-soft);
}
.js.is-ready .hero__in > *:nth-child(1),.js.is-ready .banner__in > *:nth-child(1){transition-delay:220ms}
.js.is-ready .hero__in > *:nth-child(2),.js.is-ready .banner__in > *:nth-child(2){transition-delay:340ms}
.js.is-ready .hero__in > *:nth-child(3),.js.is-ready .banner__in > *:nth-child(3){transition-delay:460ms}
.js .cue{opacity:0}
.js.is-ready .cue{opacity:1;transition:opacity 900ms var(--ease) 900ms}

/* c · plate drift is applied by script via translate3d */

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--navy);outline-offset:4px;
}
.nav a:focus-visible,.burger:focus-visible,
.link--light:focus-visible,.foot a:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  .js [data-settle],
  .js.is-ready .hero__in > *,.js.is-ready .banner__in > *,
  .js .hero__in > *,.js .banner__in > *{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-settle] .eyebrow::after{transform:none!important;transition:none!important}
  .js [data-settle] .figure img,
  .js [data-settle] .tile__img{transform:none!important;transition:none!important}
  .js .veil{display:none}
  .js .cue{opacity:1}
  .plate{transform:none!important}
  *{scroll-behavior:auto!important}
}


/* --------------------------------------------------------------------------
   TARGET MARKET MAP
   Inline SVG built from US Census state boundaries. Colours come from the
   palette tokens, so the map follows the brand rather than hard-coded hex.
   -------------------------------------------------------------------------- */
/* right-hand column of the Target Markets band, sitting under the list */
.cp-map-figure{margin:clamp(30px,4vw,54px) 0 0}
.cp-map{
  display:block;width:100%;height:auto;
  margin:0;
  overflow:visible;
}
.cp-map__base path{
  fill:var(--stone);
  stroke:var(--navy);
  stroke-width:.9;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* target states in the site navy; their shared borders are drawn in the
   page ground instead, otherwise Arizona, Nevada, Utah and Colorado would
   merge into one silhouette */
.cp-map__target path{
  fill:var(--navy);
  stroke:var(--stone);
  stroke-width:1.1;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cp-map__stars polygon{
  fill:#CDD2D8;                 /* silver */
  stroke:#F4F2EE;
  stroke-width:.9;
  stroke-linejoin:round;
  paint-order:stroke fill;
  vector-effect:non-scaling-stroke;
}
/* the stone band already sits on stone, so untargeted states need a hair
   more definition there */
.band--stone .cp-map__base path{fill:#FBFAF7}


/* --------------------------------------------------------------------------
   11 · PHOTOGRAPHIC WASH
   A white band with a photograph beneath it at low opacity and a white scrim
   over the top, so body copy keeps full contrast against near-white.
   Each variant sets its own image, focal point and strength.
   -------------------------------------------------------------------------- */
.band--wash{position:relative;isolation:isolate;background:var(--white);overflow:hidden}
.band--wash > *{position:relative;z-index:1}
.band--wash::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--wash-img);
  background-size:var(--wash-size,cover);
  background-position:var(--wash-pos,center);
  background-repeat:no-repeat;
  filter:var(--wash-filter,grayscale(1) contrast(.78) brightness(1.12));
  opacity:var(--wash-opacity,.22);
}
.band--wash::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.34) 34%,
    rgba(255,255,255,.44) 68%,
    rgba(255,255,255,.88) 100%);
}
@media (max-width:880px){
  .band--wash::before{
    opacity:var(--wash-opacity-sm,.17);
    background-position:var(--wash-pos-sm,var(--wash-pos,center));
    background-size:var(--wash-size-sm,var(--wash-size,cover));
  }
}

/* Contact — the caliche road */
.band--road{
  --wash-img:url("caliche-road.jpg");
  --wash-pos:center 62%;
  --wash-pos-sm:center 70%;
  --wash-opacity:.27;
  --wash-opacity-sm:.20;
}

/* About — port cranes and container stacks; dense detail sits low, so the
   frame is pulled up to keep the open sky behind the running copy */
.band--port{
  --wash-img:url("port-cranes.jpg");
  /* 100% auto stretches the frame to the band's full width, edge to edge.
     The photo is squarer than the band, so it runs past the top and bottom
     and is trimmed there. On narrow screens the band is far taller than the
     scaled image would be, so cover fills it instead of stranding it. */
  --wash-size:100% auto;
  --wash-size-sm:cover;
  --wash-pos:center;
  --wash-pos-sm:center;
  --wash-opacity:.17;
  --wash-opacity-sm:.12;
}

/* Investment Criteria — night speed bay. This frame is far darker than the
   others (mean luminance ~76 of 255 against ~200 for the road), so at a
   matched opacity it would read much heavier. It gets its own filter: a
   stronger brightness lift and lower contrast, which lands it in the same
   visual register as the rest at .18. */
.band--speedbay{
  --wash-img:url("speed-bay.jpg");
  --wash-filter:grayscale(1) contrast(.58) brightness(1.85);
  --wash-pos:center 60%;
  --wash-opacity:.18;
  --wash-opacity-sm:.14;
}

/* Company News — tilt-wall panel being set, shot from above. Dense detail
   (crane, panels, site) sits low and centre-right; the flat horizon and open
   sky sit high, so the frame is anchored low and the copy reads against sky. */
.band--newsaerial{
  --wash-img:url("tiltwall-aerial.jpg");
  --wash-filter:grayscale(1) contrast(.74) brightness(1.22);
  --wash-pos:center 76%;
  --wash-pos-sm:center 62%;
  --wash-opacity:.20;
  --wash-opacity-sm:.16;
}

/* Projects — tilt-wall panel being set against a heavy sky. A 2.11:1
   panorama in a band that runs past 1200px tall (copy plus two 4:3 tiles):
   sized to the width it would only be ~560px high and strand white above and
   below, so it fills instead and is trimmed at the sides. Anchored low so the
   steel frame sits behind the copy and the cloud bank holds the top. */
.band--tiltwall{
  --wash-img:url("tiltwall-set.jpg");
  --wash-filter:grayscale(1) contrast(.74) brightness(1.16);
  --wash-pos:center 72%;
  --wash-pos-sm:center 58%;
  --wash-opacity:.20;
  --wash-opacity-sm:.16;
}

/* Home — Class A interior, angled: dock doors down the left, steel columns
   receding right. Mid-toned (mean ~141), so a modest lift is enough. */
.band--interior-angle{
  --wash-img:url("interior-angle-v2.jpg");
  --wash-filter:grayscale(1) contrast(.72) brightness(1.28);
  --wash-pos:center 62%;
  --wash-opacity:.18;
  --wash-opacity-sm:.14;
}

/* Leadership — Class A interior, columns receding to a centred vanishing
   point. Its vanishing point lands on the hairline between the two
   principals, so it stays centred. */
.band--interior{
  --wash-img:url("interior-columns.jpg");
  --wash-pos:center 58%;
  --wash-opacity:.22;
  --wash-opacity-sm:.17;
}

/* --------------------------------------------------------------------------
   12 · BACK TO TOP
   -------------------------------------------------------------------------- */
.totop{
  position:fixed;right:clamp(16px,2.4vw,34px);
  bottom:calc(clamp(16px,2.4vw,34px) + env(safe-area-inset-bottom,0px));
  z-index:110;
  width:46px;height:46px;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--navy);color:#fff;
  box-shadow:0 2px 14px rgba(16,28,43,.22);
  opacity:0;visibility:hidden;transform:translate3d(0,12px,0);
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
             visibility 0s linear var(--t-mid),background var(--t-fast) var(--ease);
}
.totop.is-shown{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop:hover{background:var(--navy-deep)}
.totop svg{width:15px;height:15px;display:block;
  transition:transform var(--t-fast) var(--ease)}
.totop:hover svg{transform:translateY(-2px)}
@media (max-width:640px){.totop{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity 1ms linear,visibility 0s}
  .totop svg{transition:none}
}

/* --------------------------------------------------------------------------
   10 · UTILITIES
   -------------------------------------------------------------------------- */
.center{text-align:center;justify-items:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}
.center .lead,.center .body{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);
  padding:12px 20px;z-index:2000}
.skip:focus{left:12px;top:12px}