/* Vasquez Pipeline and Fuel Construction
   Shared styles: tokens, base, layout, components. Every page loads this file.
   Direction: "Field Record" (see DESIGN.md). Light theme, locked. Radius 0 everywhere. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-100-900.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#f4f4f1;
  --paper-raised:#fcfcfb;
  --concrete:#e6e7e3;
  --line:rgba(13,27,48,.14);
  --line-strong:rgba(13,27,48,.34);
  --ink:#0d1b30;
  --navy-deep:#091322;
  --navy-panel:#13233d;
  --steel:#4b5567;
  --muted-on-dark:#aab3c2;
  --line-on-dark:rgba(244,244,241,.16);
  --amber:#e8a324;
  --amber-hover:#f2b43c;
  --amber-ink:#9c610e;
  --amber-light:#fbe7bd;
  --error:#a12a2a;
  --error-bg:#fbeaea;

  --font-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --font-text:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-display:clamp(2.5rem,1.1rem + 4.4vw,4.75rem);
  --fs-title:clamp(2.25rem,1.3rem + 3vw,3.75rem);
  --fs-h2:clamp(1.875rem,1.35rem + 1.8vw,3rem);
  --fs-h3:clamp(1.375rem,1.2rem + .5vw,1.625rem);
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-small:.875rem;
  --fs-label:.8125rem;

  --header-h:72px;
  --gutter:24px;
  --gap:24px;
  --container:1360px;
  --content:calc(var(--container) - 2 * var(--gutter));
  --section:clamp(64px,4vw + 40px,120px);

  --ease:cubic-bezier(.23,1,.32,1);
  --dur:220ms;
}
@media (min-width:1024px){:root{--gutter:48px}}
@media (max-width:899px){:root{--header-h:60px}}
@media (max-width:359px){:root{--fs-h2:1.625rem}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;scrollbar-color:#b6bfcc var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit;font-size:inherit}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--amber)}
[hidden]{display:none !important}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:var(--ink);padding:12px 20px;font:700 var(--fs-label)/1 var(--font-text);letter-spacing:.06em;text-transform:uppercase}
.skip-link:focus{left:16px;top:16px}

.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Type ---------- */
.display{font-family:var(--font-display);font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:-.012em;line-height:.96;text-wrap:balance}
.display-xl{font-size:var(--fs-display)}
.display-title{font-size:var(--fs-title)}
.display-h2{font-size:var(--fs-h2);line-height:1}
.display-h3{font-size:var(--fs-h3);line-height:1.05;font-weight:700;font-stretch:112%;letter-spacing:0}
.display-stat{font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);text-wrap:pretty}
.muted{color:var(--steel)}
.on-dark .muted{color:var(--muted-on-dark)}
.small{font-size:var(--fs-small)}
.label{font:600 var(--fs-label)/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.on-dark .label{color:var(--muted-on-dark)}
.prose{max-width:62ch;text-wrap:pretty}
.prose p + p{margin-top:1em}
.text-link{font-weight:600;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px;transition:color var(--dur) ease,text-decoration-color var(--dur) ease}
.text-link:hover{color:var(--amber-ink);text-decoration-color:currentColor}
.on-dark .text-link{color:var(--paper)}
.btn-row .text-link{display:inline-flex;align-items:center;min-height:44px}
.on-dark .text-link:hover{color:var(--amber)}

/* A short amber rule above section headings. Structural, not decorative:
   it marks the start of every top-level section the same way. */
.rule::before{content:"";display:block;width:56px;height:3px;background:var(--amber);margin-bottom:22px}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .6)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.surface-concrete{background:var(--concrete)}
.surface-navy{background:var(--navy-deep);color:var(--paper)}

/* 12-column content grid */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--row-gap,32px)}
.grid > *{grid-column:1 / -1}
@media (min-width:900px){
  .c1{grid-column:auto / span 1}.c2{grid-column:auto / span 2}.c3{grid-column:auto / span 3}.c4{grid-column:auto / span 4}.c5{grid-column:auto / span 5}.c6{grid-column:auto / span 6}.c7{grid-column:auto / span 7}.c8{grid-column:auto / span 8}.c9{grid-column:auto / span 9}.c10{grid-column:auto / span 10}.c11{grid-column:auto / span 11}.c12{grid-column:auto / span 12}
  .s1{grid-column-start:1}.s2{grid-column-start:2}.s3{grid-column-start:3}.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
}

/* Full-bleed grid: outer columns absorb the viewport margin, inner 12 columns match .container.
   Place children with grid-column: full / content / c N. */
.bleed{display:grid;column-gap:var(--gap);
  grid-template-columns:[full-start] minmax(calc(var(--gutter) - var(--gap)),1fr) [content-start] repeat(12,[c] minmax(0,calc((min(100% - 2 * var(--gutter),var(--content)) - 11 * var(--gap)) / 12))) [content-end] minmax(calc(var(--gutter) - var(--gap)),1fr) [full-end]}
.bleed > *{grid-column:content}
.bleed > .full{grid-column:full}
.bleed > .to-right{grid-column:c 7 / full-end}
.bleed > .to-left{grid-column:full-start / c 7}

/* ---------- Header (brand navy; the badge was drawn for a dark ground) ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(13,27,48,.96);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);border-bottom:1px solid rgba(244,244,241,.12);color:var(--paper)}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:14px;height:100%;min-width:0}
.brand img{height:56px;width:auto;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;gap:4px;line-height:1;white-space:nowrap}
.brand-name{font-family:var(--font-display);font-weight:800;font-stretch:118%;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
.brand-sub{font:600 .6875rem/1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark)}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{position:relative;display:inline-flex;align-items:center;height:var(--header-h);font:600 var(--fs-small)/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--muted-on-dark);transition:color var(--dur) ease}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.site-nav a:hover{color:var(--paper)}
.site-nav a[aria-current="page"]{color:var(--paper)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;cursor:pointer}
.menu-toggle span{position:relative;display:block;width:22px;height:2px;background:var(--paper);transition:transform var(--dur) var(--ease),opacity var(--dur) ease}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--paper);transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.menu-panel{display:none}
@media (max-width:899px){
  .brand{gap:12px}
  .brand img{height:44px}
  .brand-name{font-size:1.0625rem}
  .brand-text{gap:3px}
  .brand-sub{font-size:clamp(.5rem,2.4vw,.5625rem);letter-spacing:.1em}
  .site-nav,.header-actions .btn{display:none}
  .menu-toggle{display:inline-flex}
  .menu-panel{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:40;background:var(--ink);color:var(--paper);padding:24px var(--gutter) 40px;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--dur) ease,transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .menu-panel.is-open{transform:none;opacity:1;visibility:visible;transition:opacity var(--dur) ease,transform var(--dur) var(--ease),visibility 0s}
  .menu-panel ul{border-top:1px solid var(--line-on-dark)}
  .menu-panel li{border-bottom:1px solid var(--line-on-dark)}
  .menu-panel li a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:1.75rem;text-transform:uppercase;letter-spacing:-.005em;color:var(--paper)}
  .menu-panel li a[aria-current="page"]{color:var(--amber)}
  .menu-panel li a::after{content:"\2192";font-family:var(--font-text);font-weight:500;color:var(--muted-on-dark)}
  .menu-panel .btn{width:100%;justify-content:center;margin-top:24px}
  .menu-panel .menu-contact{margin-top:28px;color:var(--muted-on-dark)}
  .menu-panel .menu-contact a{color:var(--paper)}
  body.menu-open{overflow:hidden}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 24px;border:2px solid transparent;font:600 var(--fs-small)/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:none;transition:transform 160ms var(--ease),background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease}
.btn .arrow{display:inline-block;font-weight:500;transition:transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
.btn-secondary{border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn-secondary{border-color:rgba(244,244,241,.55);color:var(--paper)}
.on-dark .btn-secondary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:var(--fs-label)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:progress;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}

/* ---------- Photos ---------- */
.photo{position:relative;overflow:hidden;background:var(--navy-panel)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--4x3{aspect-ratio:4/3}
.photo--3x2{aspect-ratio:3/2}
.photo--16x9{aspect-ratio:16/9}
.photo--21x9{aspect-ratio:21/9}
.photo--3x4{aspect-ratio:3/4}
.photo--4x5{aspect-ratio:4/5}
.photo--2x3{aspect-ratio:2/3}

/* ---------- Paired photos ---------- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
@media (max-width:599px){.pair{grid-template-columns:minmax(0,1fr)}}

/* ---------- Section head ---------- */
.section-head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.section-head .lead{max-width:58ch}

.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.section-head--row .lead{margin-top:16px}

/* ---------- Spacing utilities ---------- */
.mt-0{margin-top:0}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}
.align-end{align-self:end}
.max-58{max-width:58ch}

/* ---------- Hero (home): headline, copy and button, then a full-width row of five jobs ---------- */
.hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,4vw + 16px,88px)}
.hero__title{margin-bottom:clamp(24px,3vw,36px)}
.hero__phrase{display:inline-block}
.hero__copy{display:flex;flex-direction:column;gap:24px;margin-bottom:clamp(28px,4vw,40px)}
.hero__copy .lead{max-width:52ch}
.hero__media{margin-inline:calc(-1 * var(--gutter))}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mosaic > .photo{aspect-ratio:1}
.mosaic > .mosaic__a{grid-column:1 / -1;aspect-ratio:4/3}
@media (min-width:900px){
  .hero__copy{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
  .hero__media{margin-inline:0}
  .mosaic{grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:12px;height:clamp(280px,24vw,360px)}
  .mosaic > .photo{aspect-ratio:auto;min-height:0}
  .mosaic > .mosaic__a{grid-column:auto;grid-row:auto}
}
.hero__title,.hero__copy,.mosaic > .photo{opacity:1;transform:none;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.hero__copy{transition-delay:90ms}
.mosaic > .photo:nth-child(1){transition-delay:160ms}
.mosaic > .photo:nth-child(2){transition-delay:220ms}
.mosaic > .photo:nth-child(3){transition-delay:280ms}
.mosaic > .photo:nth-child(4){transition-delay:340ms}
.mosaic > .photo:nth-child(5){transition-delay:400ms}
.mosaic__a img{transform:none;transition:transform 900ms var(--ease) 160ms}
@starting-style{
  .hero__title,.hero__copy,.mosaic > .photo{opacity:0;transform:translateY(12px)}
  .mosaic__a img{transform:scale(1.04)}
}

/* ---------- Page title (inner pages) ---------- */
.page-head{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(32px,4vw,56px)}
.page-head .lead{margin-top:24px}
.page-head--offset .lead{margin-top:0}

/* ---------- Service list (home) ---------- */
.svc-list{border-top:1px solid var(--line-strong)}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.svc-row h3{font-family:var(--font-display);font-weight:700;font-stretch:114%;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);line-height:1;text-transform:uppercase;letter-spacing:-.01em;transition:color var(--dur) ease}
.svc-row p{color:var(--steel);max-width:52ch}
.svc-row .arrow{justify-self:end;font-size:1.5rem;font-weight:500;line-height:1;color:var(--steel);transition:transform var(--dur) var(--ease),color var(--dur) ease}
.svc-row:hover h3{color:var(--amber-ink)}
@media (min-width:900px){
  .svc-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr) 48px;padding:32px 0}
}

/* ---------- Filmstrip ---------- */
.strip-wrap{position:relative}
.strip{--strip-pad:max(var(--gutter),calc((100% - var(--content)) / 2));display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-inline:var(--strip-pad);scroll-padding-inline:var(--strip-pad);padding-bottom:8px;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip__item{flex:0 0 auto;scroll-snap-align:start;margin:0}
.strip__item button{display:block;padding:0;border:0;background:var(--navy-panel);cursor:zoom-in;position:relative;overflow:hidden}
.strip__item img{height:var(--strip-h,440px);width:auto;max-width:none;transition:transform 600ms var(--ease)}
.strip__item:last-child{padding-right:var(--gutter)}
.strip-nav{display:flex;gap:8px}
.strip-nav button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--ink);background:none;cursor:pointer;font-size:1.25rem;line-height:1;transition:background-color var(--dur) ease,color var(--dur) ease,opacity var(--dur) ease}
.strip-nav button:hover{background:var(--ink);color:var(--paper)}
.strip-nav button[disabled]{opacity:.3;cursor:default;background:none;color:var(--ink)}
@media (max-width:899px){.strip{--strip-h:300px;gap:12px}.strip__item img{max-width:calc(100vw - 2 * var(--gutter));object-fit:cover}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,19,34,.94);display:flex;align-items:center;justify-content:center;padding:72px 80px;opacity:1;transition:opacity 220ms ease}
@starting-style{.lightbox{opacity:0}}
.lightbox.closing{opacity:0}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);opacity:1;transform:none;transition:opacity 180ms ease,filter 180ms ease,transform 260ms var(--ease)}
@starting-style{.lightbox-img{opacity:0;transform:scale(.97)}}
.lightbox.closing .lightbox-img{transform:scale(.98);opacity:0}
.lightbox-img.switching{opacity:0;filter:blur(6px)}
.lightbox-count{font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}
.lightbox-caption{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:var(--muted-on-dark);font-size:var(--fs-small);padding:0 80px}
.lightbox-close,.lightbox-nav{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(244,244,241,.1);border:1px solid rgba(244,244,241,.22);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background-color 160ms ease}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(244,244,241,.22)}
.lightbox-close{top:16px;right:16px}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox :focus-visible{outline-color:var(--amber)}
@media (max-width:899px){.lightbox{padding:72px 16px 64px}.lightbox-caption{padding:0 16px;bottom:16px}.lightbox-prev{left:8px;top:auto;bottom:8px;transform:none}.lightbox-next{right:8px;top:auto;bottom:8px;transform:none}.lightbox-caption{bottom:64px}}

/* ---------- Commitments / stacked entries ---------- */
.entries{border-top:1px solid var(--line-strong)}
.entry{display:grid;gap:10px 24px;padding:26px 0;border-bottom:1px solid var(--line)}
.entry h3{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:var(--fs-h3);line-height:1.05;text-transform:uppercase}
.entry p{color:var(--steel);max-width:50ch}
@media (min-width:900px){.entry{grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:30px 0}}

/* ---------- Facts row ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:3px solid var(--ink)}
.fact{padding:28px 24px 28px 0;border-bottom:1px solid var(--line)}
.fact .label{margin-top:10px}
@media (min-width:900px){.facts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.fact{padding:36px 32px 36px 0;border-bottom:0}.fact + .fact{padding-left:32px;border-left:1px solid var(--line)}}

/* ---------- Values / three columns ---------- */
.cols{display:grid;gap:40px var(--gap)}
.cols > div{border-top:1px solid var(--line-strong);padding-top:20px}
.cols > div h3{margin-bottom:12px}
.cols > div p{color:var(--steel);max-width:40ch}
@media (min-width:900px){.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Service entries (services page) ---------- */
.svc{padding-block:clamp(48px,3vw + 24px,80px)}
.svc + .svc{border-top:1px solid var(--line)}
.svc .grid{align-items:start}

/* ---------- Jump list (services index) ---------- */
.jump{border-top:1px solid var(--line-strong)}
.jump a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font:600 var(--fs-body)/1.2 var(--font-text);transition:color var(--dur) ease}
.jump a .arrow{color:var(--steel);transition:transform var(--dur) var(--ease)}
.jump a:hover{color:var(--amber-ink)}

/* ---------- Checklist ---------- */
.check{display:grid;gap:14px}
.check li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start}
.check li::before{content:"";display:block;width:18px;height:3px;background:var(--amber);margin-top:.6em}

/* ---------- Policy pages ---------- */
.policy{display:grid;gap:clamp(36px,3vw + 16px,56px)}
.policy section{display:grid;gap:16px;padding-top:clamp(28px,2vw + 16px,40px);border-top:1px solid var(--line)}
.policy section:first-child{padding-top:0;border-top:0}
.policy h2{scroll-margin-top:96px}
.policy p,.policy li{max-width:62ch;text-wrap:pretty}
.policy strong{font-weight:600}
/* Below 900px the index would push the policy far down the page; the headings carry it. */
@media (max-width:899px){.policy-nav{display:none}}
@media (min-width:900px){.policy-nav{position:sticky;top:104px;align-self:start}}

/* ---------- Forms ---------- */
.form{display:grid;gap:28px}
.form fieldset{margin:0;padding:0;border:0;min-width:0;display:grid;gap:20px}
.form legend{padding:0;margin-bottom:6px;font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:var(--fs-h3);text-transform:uppercase;line-height:1}
.form .field-group{display:grid;gap:12px}
.form .legend-label{font:600 var(--fs-small)/1.3 var(--font-text);letter-spacing:.01em;text-transform:none;margin-bottom:0}
.form .legend-label .hint{font-weight:400;margin-left:6px}
.form-grid{display:grid;gap:20px}
@media (min-width:700px){.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:8px;min-width:0}
.field label,.field .legend-label{font:600 var(--fs-small)/1.3 var(--font-text);letter-spacing:.01em}
.field .optional{font-weight:400;color:var(--steel)}
.field .hint{font-size:var(--fs-small);color:var(--steel);line-height:1.4}
.input,.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:0;background:var(--paper-raised);color:var(--ink);font:400 1rem/1.4 var(--font-text);transition:border-color var(--dur) ease,box-shadow var(--dur) ease;appearance:none;-webkit-appearance:none}
.field textarea{min-height:160px;resize:vertical}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input::placeholder,.field textarea::placeholder{color:#6b7483;opacity:1}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--amber)}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--error)}
.field-error{display:none;font-size:var(--fs-small);font-weight:600;color:var(--error)}
.field.is-invalid .field-error{display:block}
.field.is-invalid .choice{border-color:var(--error)}
.choices{display:grid;gap:10px}
@media (min-width:700px){.choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--line-strong);background:var(--paper-raised);cursor:pointer;transition:border-color var(--dur) ease,background-color var(--dur) ease}
.choice:hover{border-color:var(--ink)}
.choice input{margin:3px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink)}
.choice span{line-height:1.35}
.choice small{display:block;color:var(--steel);font-size:var(--fs-small);margin-top:2px}
.choice:has(input:checked){border-color:var(--ink);background:var(--amber-light)}
.choice:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.choice--inline{display:inline-flex;align-items:center}
.choice--inline input{margin-top:0}
.choices--row{display:flex;flex-wrap:wrap;gap:10px}
.form-alert{display:grid;gap:4px;padding:16px 18px;border-left:3px solid var(--error);background:var(--error-bg);color:var(--error);font-weight:600;font-size:var(--fs-small)}
.form-success{display:grid;gap:14px;padding:31px 28px 28px;background:var(--ink);color:var(--paper);position:relative;opacity:1;transform:none;transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.form-success::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);transform:scaleX(1);transform-origin:left;transition:transform 500ms var(--ease) 120ms}
@starting-style{
  .form-success{opacity:0;transform:translateY(12px) scale(.98)}
  .form-success::before{transform:scaleX(0)}
}
.form-success h2{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:var(--fs-h3);text-transform:uppercase;line-height:1.05}
.form-success p{color:var(--muted-on-dark);max-width:54ch}
.form-success a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:4px;text-decoration-thickness:2px}
.form-footer{display:grid;gap:14px}
.form-footer .small{color:var(--steel)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

/* ---------- Contact details ---------- */
.details{display:grid;gap:28px;align-content:start}
.details .label{margin-bottom:8px}
.details .value{font-size:var(--fs-lead);line-height:1.35}
.details .value a{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.details .value a:hover{color:var(--amber-ink)}
.details .note{margin-top:6px;color:var(--steel);font-size:var(--fs-small);max-width:40ch}

/* ---------- Quote band ---------- */
.band{background:var(--navy-deep);color:var(--paper);border-top:3px solid var(--amber)}
.band .grid{align-items:center;row-gap:40px}
.band__copy{display:grid;gap:24px}
.band__copy .lead{color:var(--muted-on-dark)}
.band__copy .btn-row{margin-top:8px}
.band .photo{aspect-ratio:3/2}
@media (min-width:900px){.band .photo{aspect-ratio:4/3}}

/* ---------- Footer (title block) ---------- */
.site-footer{background:var(--ink);color:var(--paper)}
@media (pointer:coarse){.footer-col{gap:0}.footer-col > a,.footer-col > span{padding-block:8px}.details .value a{display:inline-block;padding-block:6px;margin-block:-6px}}
.footer-top{display:grid;gap:40px var(--gap);padding-block:clamp(48px,5vw,80px)}
.footer-brand{display:grid;gap:18px;align-content:start}
.footer-brand img{height:72px;width:auto}
.footer-brand .name{font-family:var(--font-display);font-weight:800;font-stretch:118%;font-size:1.375rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.footer-brand .tag{color:var(--muted-on-dark);max-width:34ch}
.footer-col{display:grid;gap:10px;align-content:start}
.footer-col .label{margin-bottom:6px}
.footer-col a,.footer-col span{color:var(--paper);line-height:1.4}
.footer-col a{transition:color var(--dur) ease}
.footer-col a:hover{color:var(--amber)}
.footer-col .sub{color:var(--muted-on-dark);font-size:var(--fs-small)}
@media (min-width:900px){.footer-top{grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr)) ;}}
.footer-copy{color:var(--muted-on-dark);font-size:var(--fs-small);margin-top:6px}
.footer-copy a{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
html.js .reveal.is-visible{opacity:1;transform:none}
/* Staggered groups: the container shows at once; its rows enter 60ms apart. */
html.js .svc-list.reveal,html.js .strip.reveal{opacity:1;transform:none;transition:none}
html.js .svc-list.reveal > .svc-row,html.js .strip.reveal > .strip__item{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
html.js .svc-list.reveal.is-visible > .svc-row,html.js .strip.reveal.is-visible > .strip__item{opacity:1;transform:none}
html.js .svc-list.reveal > .svc-row:nth-child(2),html.js .strip.reveal > .strip__item:nth-child(2){transition-delay:60ms}
html.js .svc-list.reveal > .svc-row:nth-child(3),html.js .strip.reveal > .strip__item:nth-child(3){transition-delay:120ms}
html.js .svc-list.reveal > .svc-row:nth-child(4),html.js .strip.reveal > .strip__item:nth-child(4){transition-delay:180ms}
html.js .strip.reveal > .strip__item:nth-child(5){transition-delay:240ms}
html.js .strip.reveal > .strip__item:nth-child(n+6){transition-delay:300ms}

/* ---------- Hover motion only where a hover exists ---------- */
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover::after{transform:scaleX(1)}
  .btn:hover .arrow{transform:translateX(3px)}
  .svc-row:hover .arrow{transform:translateX(4px);color:var(--ink)}
  .strip__item button:hover img{transform:scale(1.025)}
  .jump a:hover .arrow{transform:translateY(3px)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html,.strip{scroll-behavior:auto}
  html.js .reveal,html.js .svc-list.reveal > .svc-row,html.js .strip.reveal > .strip__item{transform:none;transition:opacity 200ms ease;transition-delay:0s}
  .hero__title,.hero__copy,.mosaic > .photo{transition:opacity 200ms ease;transition-delay:0s}
  .mosaic__a img{transition:none}
  @starting-style{
    .hero__title,.hero__copy,.mosaic > .photo{transform:none}
    .mosaic__a img{transform:none}
  }
  .btn,.btn .arrow,.svc-row .arrow,.strip__item img,.jump a .arrow,.site-nav a::after,.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{transition:none}
  .btn:active,.btn:hover .arrow,.svc-row:hover .arrow,.strip__item button:hover img,.jump a:hover .arrow{transform:none}
  .menu-panel,.menu-panel.is-open{transform:none;transition:opacity 200ms ease,visibility 0s}
  .form-success{transition:opacity 200ms ease}
  .form-success::before{transition:none}
  @starting-style{
    .form-success{transform:none}
    .form-success::before{transform:scaleX(1)}
  }
  .lightbox{transition:opacity 160ms ease}
  .lightbox-img{transition:opacity 160ms ease;transform:none !important;filter:none !important}
  @starting-style{.lightbox-img{transform:none}}
}

/* ---------- Mobile type scale (after the base rules so it wins) ---------- */
@media (max-width:899px){
  .display-xl{font-size:clamp(1.5rem,10vw - 6px,2.75rem);font-stretch:110%}
  .display-title{font-size:clamp(1.875rem,6.4vw + .4rem,2.5rem);font-stretch:112%}
}