/* ==========================================================================
   POKRAJAC CORPORATION
   Accent is the brand gold #F7B01A, taken from the company wordmark and seal,
   paired with the brand's near-black. Neutrals are sampled from the GSR Arena
   photography - warm olive-tan dust (#A0A080) and earth browns (#806040) - so
   the page and the photographs sit in the same family as the logo.

   Gold is a FILL, never body text: #F7B01A on a light ground is about 1.9:1 and
   fails contrast badly. Black on gold is ~11:1, which is exactly how the logo
   itself works. Use --accent for fills and rules, --accent-ink for any text.

   No rounded corners anywhere - the seal, the plan set and the iron are all
   hard-edged.
   ========================================================================== */

:root {
  /* Light - the complete set */
  --ground:      #EDEAE1;
  --surface:     #F7F5EF;
  --surface-2:   #DFDBCF;
  --surface-3:   #D2CDBE;
  --ink:         #14120E;
  --ink-2:       #4C483E;
  --ink-3:       #6B6558;
  --rule:        #C8C4B5;
  --rule-soft:   #D8D5C8;
  --accent:      #F7B01A;   /* fills, rules, borders */
  --accent-hot:  #E09B06;   /* hover on fills */
  --accent-ink:  #8A5A05;   /* text and links on a light ground */
  --accent-wash: #F7B01A2B;
  --earth:       #7A6242;
  --on-accent:   #14120E;   /* black on gold, as the logo does it */
  --shade:       #14120E;
  --ok:          #2F6B4F;
  --warn:        #8A6516;
  --flag:        #A61B1B;


  /* CTA band: one fixed appearance in both themes - brand black and gold.
     Deeper than the dark ground so it still reads as a band on a dark page. */
  --band-bg:     #0A0806;
  --band-fg:     #F2EFE7;
  --band-muted:  #A79F91;
  --display: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Alternate",
             "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --body:    "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             Arial, sans-serif;
  --mono:    Consolas, "Cascadia Mono", "SF Mono", Menlo, ui-monospace, monospace;

  --pad:     clamp(20px, 5vw, 64px);
  --maxw:    1240px;
  --readw:   68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #14120E;
    --surface:     #1D1A15;
    --surface-2:   #27231D;
    --surface-3:   #322D25;
    --ink:         #EFEDE5;
    --ink-2:       #B2AC9C;
    --ink-3:       #A19A8C;
    --rule:        #34302A;
    --rule-soft:   #262219;
    --accent:      #F7B01A;
    --accent-hot:  #FFC44A;
    --accent-ink:  #F9BE45;   /* gold reads cleanly as text on a dark ground */
    --accent-wash: #F7B01A2B;
    --earth:       #B99163;
    --on-accent:   #14120E;
    --shade:       #000000;
    --ok:          #5FAE85;
    --warn:        #C9A144;
  --flag:        #E9705F;
    
  }
}
:root[data-theme="dark"] {
  --ground:      #14120E;
  --surface:     #1D1A15;
  --surface-2:   #27231D;
  --surface-3:   #322D25;
  --ink:         #EFEDE5;
  --ink-2:       #B2AC9C;
  --ink-3:       #A19A8C;
  --rule:        #34302A;
  --rule-soft:   #262219;
  --accent:      #F7B01A;
  --accent-hot:  #FFC44A;
  --accent-ink:  #F9BE45;
  --accent-wash: #F7B01A2B;
  --earth:       #B99163;
  --on-accent:   #14120E;
  --shade:       #000000;
  --ok:          #5FAE85;
  --warn:        #C9A144;
  --flag:        #E9705F;
}

/* ========================= BASE ========================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(44px, 8.2vw, 104px); }
h2 { font-size: clamp(34px, 5.2vw, 66px); }
h3 { font-size: clamp(21px, 2.4vw, 28px); }
h4 { font-size: clamp(17px, 1.6vw, 20px); }

p { margin: 0 0 1.05em; max-width: var(--readw); }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-2); }

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.label-quiet { color: var(--ink-3); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 0; }

/* ========================= LAYOUT ========================= */
.shell { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(38px, 5vw, 64px) 0; }
.section--edge { border-top: 1px solid var(--rule); }
.section--sunk { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .label { display: block; margin-bottom: 14px; }
.sec-head p { margin-top: 16px; }

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ========================= HEADER ========================= */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 74px;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand svg { width: 42px; height: 42px; flex: none; color: var(--ink); }
/* Header lockup: the seal carries the identity, the type carries the words.
   At 48px the wording inside the seal's ring is unreadable, so the company
   name sits beside it rather than relying on the artwork to say it. */
.brand img.brand-mark { width: 48px; height: 48px; flex: none; }
.brand img.brand-seal { width: 54px; height: 54px; flex: none; }
@media (max-width: 420px) {
  .brand img.brand-mark { width: 40px; height: 40px; }
  .brand-txt b { font-size: 18px; }
  .brand-txt span { font-size: 8.5px; letter-spacing: .16em; }
}
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.brand-txt span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}

/* "Safety & Prequal" is a long item, so the desktop nav runs tighter than the
   default rhythm to keep all six links plus the CTA on one line at 1240px. */
.nav { display: flex; align-items: center; gap: clamp(12px, 1.35vw, 21px); }
@media (min-width: 941px) { .masthead-in { gap: 16px; } .nav { margin-left: auto; } }
.nav a {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: .04em; text-decoration: none; color: var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-ink); }

.nav-cta {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  padding: 11px 18px; border: 0;
}
.nav-cta:hover { background: var(--accent-hot); color: var(--on-accent); }

/* Language toggle - shows the language you would switch TO, so it reads as an
   action rather than a status. Sits left of the nav CTA on desktop and stays
   visible next to the burger on mobile, because the crews most likely to want
   Spanish are on phones. */
.lang-toggle {
  order: 3; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* inline-flex, not inline-block: min-height alone makes the box 44px but
     leaves the text sitting at the top of it. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  /* letter-spacing adds a trailing gap after the last character, which throws
     centered text left by half of it. Nudge it back. */
  text-indent: .12em;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule); padding: 0 13px; cursor: pointer;
  white-space: nowrap; margin-left: auto;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--ink); }
.lang-toggle::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--accent); margin-right: 8px;
}
@media (min-width: 941px) { .lang-toggle { order: 0; margin-left: 0; } }
@media (max-width: 940px) { .lang-toggle { margin-left: auto; margin-right: 10px; } }

.burger {
  display: none; background: none; border: 1px solid var(--rule);
  color: var(--ink); padding: 0 15px; cursor: pointer;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  text-indent: .1em;
}
@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: 8px var(--pad) 20px;
    max-height: 78vh; overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--rule-soft); font-size: 19px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--accent-ink); }
  .nav-cta { text-align: center; margin-top: 16px; padding: 15px; font-size: 17px; }
}

/* ========================= HERO ========================= */
.hero { position: relative; background: var(--shade); color: #F5F2EA; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Where the subjects sit low in the frame, bias the crop downward so faces
   land in the upper half of the hero rather than behind the caption gradient. */
.hero-media--lower img { object-position: center 60%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,10,7,.72) 0%, rgba(12,10,7,.45) 42%, rgba(12,10,7,.88) 100%);
}
.hero-in {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(90px, 15vh, 190px) var(--pad) clamp(44px, 7vw, 84px);
  min-height: clamp(500px, 78vh, 800px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero h1 { color: #FFFFFF; max-width: 15ch; }
.hero .label { color: var(--accent); }
.hero p { color: #E4DFD4; max-width: 54ch; margin-top: 20px; font-size: clamp(17px, 1.9vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Placeholder ground when a photo has not been generated yet */
.hero-media--empty {
  background:
    repeating-linear-gradient(135deg, #2B2620 0 14px, #241F1A 14px 28px);
}

/* ========================= BUTTONS ========================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 17px; text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none;
  padding: 15px 26px; border: 2px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hot); border-color: var(--accent-hot); color: var(--on-accent); }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.1); color: #FFFFFF; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--ground); }

/* ========================= STAT BAR ========================= */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stat { background: var(--ground); padding: clamp(20px, 3vw, 30px) clamp(16px, 2vw, 24px); }
.stat b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 5vw, 60px); line-height: .94; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat b em { font-style: normal; font-size: .48em; color: var(--accent-ink); margin-left: 2px; }
.stat span {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 11px; line-height: 1.45;
}

/* ========================= CARDS ========================= */
.card { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.card-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.card-body p { font-size: 15.5px; color: var(--ink-2); }
.card h3 { font-size: clamp(19px, 2vw, 24px); }

/* Photo band at the top of a card. The fixed aspect ratio matters: the source
   photos are a mix of shapes, and without it a row of cards ends up with the
   body text starting at a different height in each one. Sits before .card-body,
   inside .card, so it meets the card border with no gap. */
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunk); }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.svc { border-top: 3px solid var(--accent); }
/* On a service card the accent rule reads as the top edge of the photo. */
.svc .card-media { border-bottom: 1px solid var(--rule); }
.svc .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase;
}
.svc ul { margin: 4px 0 0; padding-left: 1.1em; font-size: 14.5px; color: var(--ink-2); }
.svc li { margin-bottom: 4px; }
.svc li::marker { color: var(--accent-ink); }

/* Project cards */
.proj { text-decoration: none; color: inherit; overflow: hidden; }
.proj-img { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; position: relative; }
.proj-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.proj:hover .proj-img img { transform: scale(1.04); }
.proj-img--empty {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
}
.proj-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.proj-qty {
  font-family: var(--mono); font-size: 13px; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.proj h3 { transition: color .2s; }
.proj:hover h3 { color: var(--accent-ink); }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.filters button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule); padding: 9px 15px; cursor: pointer;
}
.filters button:hover { border-color: var(--ink-3); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

.no-results { padding: 40px 0; color: var(--ink-3); font-family: var(--mono); font-size: 14px; }

/* ========================= FEATURE / QUOTE ========================= */
.feature-img { background: var(--surface-2); aspect-ratio: 3 / 2; overflow: hidden; }

/* Soften where the photo meets the page. It used to end on a hard 1px rectangle,
   which reads as a box pasted onto the background; this just takes the edge off
   so it settles into the ground rather than sitting on top of it.

   The fade is in px, not %, on purpose. A percentage is measured against the
   element, so the same value gives a short fade on a wide landscape image and a
   long one down a tall portrait - which made the About and Safety photos look
   like they were dissolving. A fixed distance reads the same everywhere.

   A mask is used rather than a colored scrim: a gradient to a fixed dark would
   blend on the dark theme and show as a grey haze on the light one. Where
   mask-composite is unsupported the photo renders unfeathered - the old
   behaviour minus the border, never a broken image. */
.feature-img {
  --feather: 9px;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 var(--feather),
                    #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(90deg,  transparent 0, #000 var(--feather),
                    #000 calc(100% - var(--feather)), transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 var(--feather),
                    #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(90deg,  transparent 0, #000 var(--feather),
                    #000 calc(100% - var(--feather)), transparent 100%);
  -webkit-mask-composite: source-in;   /* older WebKit keyword */
          mask-composite: intersect;   /* standard */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Portrait sources need a portrait frame. Forcing a 2:3 photograph into a 3:2
   box shows only a 44% band through the middle, which decapitates any standing
   figure. At 3/4 roughly 89% of the frame survives; the 30% Y bias keeps the
   head well clear of the top and trims empty foreground instead. */
.feature-img--portrait { aspect-ratio: 3 / 4; }
.feature-img--portrait img { object-position: center 30%; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }

.pull {
  border-left: 4px solid var(--accent);
  padding: 6px 0 6px 26px;
  margin: 32px 0;
  max-width: 60ch;
}
.pull p {
  font-family: var(--display); font-size: clamp(21px, 2.6vw, 31px);
  text-transform: none; line-height: 1.22; letter-spacing: .005em; color: var(--ink);
}
.pull cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ========================= TABLES ========================= */
.t-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
  background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, .tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.right, td.right { text-align: right; }

/* ========================= JOBS ========================= */
.job { border: 1px solid var(--rule); background: var(--surface); border-left: 4px solid var(--accent); }
.job-in { padding: clamp(20px, 2.6vw, 30px); display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: start; }
@media (max-width: 700px) { .job-in { grid-template-columns: 1fr; } }
.job h3 { margin-bottom: 8px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.job-pay { font-family: var(--display); font-size: clamp(21px, 2.4vw, 28px); color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-pay small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; }

/* ========================= FORMS ========================= */
.form { display: grid; gap: 18px; max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field label .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  padding: 13px 14px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-ink); outline: 2px solid var(--accent-wash); }
.field textarea { min-height: 130px; resize: vertical; }

/* File input. The browser draws the button itself and will not inherit the
   padding above, so it gets its own rule - without this it sits as a bare
   unstyled control in the middle of a styled form. */
.field input[type="file"] { padding: 10px; font-size: 15px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); padding: 9px 14px; margin-right: 12px;
}
.field input[type="file"]::file-selector-button:hover { background: var(--surface-3); }

/* Sits under a control to explain a limit before someone hits it. */
.field-hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin: 0; max-width: 52ch; }
.form-note { font-size: 13.5px; color: var(--ink-3); }
.form-status {
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  padding: 12px 14px; border-left: 3px solid var(--rule); margin: 0;
  background: var(--surface-2); color: var(--ink-2);
}
.form-status.is-ok    { border-left-color: var(--ok);     color: var(--ok); }
.form-status.is-error { border-left-color: var(--flag, #A61B1B); color: var(--flag, #A61B1B); }
.form-status.is-warn  { border-left-color: var(--accent); color: var(--accent-ink); }
.form-status.is-busy  { border-left-color: var(--ink-3); }
.form button[type="submit"][disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Human check -----------------------------------------------------------
   The image keeps its own light background in both themes, because the SVG is
   drawn on one and letters inverted against a dark panel would be harder to
   read than the distortion already makes them. */
.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha-img {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; min-height: 80px;
  background: #EFEDE5; border: 1px solid var(--rule); border-radius: 6px;
}
.captcha-img svg { display: block; border-radius: 5px; }
.captcha-img[data-loading]::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #B9A06A; border-top-color: transparent;
  animation: captcha-spin .7s linear infinite;
}
@keyframes captcha-spin { to { transform: rotate(360deg); } }

.captcha-refresh {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  padding: 10px 14px; border-radius: 4px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule);
}
.captcha-refresh:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.captcha-refresh:focus-visible { outline: 2px solid var(--accent-wash); outline-offset: 2px; }

/* Shorter than the other inputs - it only ever holds five characters, and a
   full-width box invites people to think more is expected. */
.captcha input[name="captcha_answer"] {
  max-width: 260px; font-family: var(--mono); letter-spacing: .22em;
  text-transform: uppercase;
}
.captcha input[name="captcha_answer"]::placeholder {
  letter-spacing: normal; text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .captcha-img[data-loading]::after { animation: none; }
}

/* ========================= CTA BAND ========================= */
.band { background: var(--band-bg); color: var(--band-fg); border-top: 2px solid var(--accent); }
.band .shell { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }
.band h2 { color: #FFFFFF; }
.band p { color: var(--band-muted); }
.band .label { color: var(--accent); }
.band-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }
.band .btn--line { color: var(--band-fg); border-color: var(--band-fg); }
.band .btn--line:hover { background: var(--band-fg); color: var(--band-bg); }

/* ========================= FOOTER ========================= */
.foot { border-top: 1px solid var(--rule); background: var(--surface); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding: clamp(40px, 5vw, 66px) 0 36px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }
.foot h4 { font-size: 14px; letter-spacing: .13em; color: var(--ink-3); margin-bottom: 14px; font-family: var(--mono); font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--accent-ink); }
.foot address { font-style: normal; font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.foot-bottom {
  border-top: 1px solid var(--rule); padding: 20px 0 32px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ========================= REVIEW MARKERS =========================
   Content we could not verify is wrapped in .tbd so it is obvious during
   local review. Set data-review="off" on <body> (or delete this block)
   before the site goes public.
   ================================================================== */
[data-review="on"] .tbd {
  background: var(--accent-wash);
  border-bottom: 2px dotted var(--accent);
  padding: 0 3px;
}
[data-review="on"] .tbd::after {
  content: "TBD";
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; vertical-align: super;
  color: var(--accent-ink); margin-left: 3px;
}
[data-review="on"] .review-bar {
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; padding: 7px 16px;
}
[data-review="off"] .review-bar { display: none; }

.util { list-style: none; margin: 0; padding: 0; }
.util li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15.5px; }
.util li:last-child { border-bottom: 0; }
.util .k { font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 130px; padding-top: 4px; }
@media (max-width: 560px) { .util li { flex-direction: column; gap: 4px; } .util .k { flex: none; } }


/* ==========================================================================
   MOTION + PHOTOGRAPHY LAYER
   The photo library is the strongest asset here, so these components exist to
   put it on screen at size. Motion is deliberately slow and singular - one
   drift on the hero, one rise on scroll - rather than scattered effects.
   ========================================================================== */

/* --- Scroll reveal -------------------------------------------------------
   The hidden state is applied ONLY when JS is running (html.js-reveal), so
   with JavaScript off every element renders normally. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
}
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
html.js-reveal .reveal-2 { transition-delay: .1s; }
html.js-reveal .reveal-3 { transition-delay: .2s; }
html.js-reveal .reveal-4 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Hero: slow drift ---------------------------------------------------- */
@keyframes heroDrift { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero-media img { animation: heroDrift 22s ease-out forwards; will-change: transform; }
.hero-in { min-height: clamp(560px, 86vh, 900px); }
.hero h1 { letter-spacing: -.012em; }

/* --- Full-bleed photo break ---------------------------------------------- */
.photo-break {
  position: relative; overflow: hidden; background: var(--shade);
  min-height: clamp(360px, 58vh, 680px);
  display: flex; align-items: flex-end;
}
/* ==========================================================================
   EQUIPMENT BAND  (.eq-band)
   --------------------------------------------------------------------------
   The photo is a cover background and its sides ARE trimmed. That is fine and
   intended. What decides how badly it is trimmed is how tall the band has to
   be, because cover scales the image up until the height is filled and throws
   the width away to do it.

   So only the label and the heading sit on the photo. The paragraph and the
   four stat boxes sit underneath it. Carrying all of that on the image is what
   forced the band tall enough to cut two thirds of the yard off, which is the
   bug this section exists to avoid.

   The heading is in normal flow inside a flex container aligned to the bottom.
   It is NOT absolutely positioned - that is what previously let the label get
   clipped off the top edge. In flow, the text sets the height and cannot be cut.
   ========================================================================== */
.eq-band { background: var(--band-bg); color: var(--band-fg); }

.eq-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--shade);
  /* Enough for the heading, never so much that the crop gets severe. */
  min-height: clamp(210px, 26vw, 360px);
}
/* Descendant, not "> img" - the image is a child of .eq-photo, and a child
   combinator scoped to the section would silently match nothing. */
.eq-photo img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.eq-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
              rgba(10,8,6,0)   0%,
              rgba(10,8,6,.28) 34%,
              rgba(10,8,6,.66) 62%,
              rgba(10,8,6,.88) 86%,
              rgba(10,8,6,.95) 100%);
  pointer-events: none;
}
.eq-head {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(30px, 5vw, 64px);
  padding-bottom: clamp(18px, 2.4vw, 34px);
}
/* Shadowed as well as scrimmed. The label sits at the top of this block where
   the gradient is lightest, and gold on yellow machines is the worst pairing
   on the page. */
.eq-head .label,
.eq-head h2 { text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.9); }
.eq-head .label { color: var(--accent-hot); }
.eq-head h2 { color: #FFFFFF; max-width: 20ch; }

.eq-body {
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
}
.eq-body p { color: #E6E1D6; max-width: 54ch; font-size: clamp(17px, 1.9vw, 20px); }
.eq-body .stats { margin-top: clamp(24px, 3vw, 36px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.eq-body .stat { background: rgba(14,11,8,.72); }
.eq-body .stat b { color: #FFFFFF; }
.eq-body .stat b em { color: var(--accent); }
.eq-body .stat span { color: #C9C2B4; }

.photo-break > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.photo-break::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,8,6,.20) 0%, rgba(10,8,6,.30) 45%, rgba(10,8,6,.88) 100%);
}
.photo-break .shell {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 64px);
}
.photo-break h2 { color: #FFFFFF; max-width: 17ch; }
.photo-break p  { color: #E6E1D6; max-width: 54ch; margin-top: 16px; font-size: clamp(17px,1.9vw,20px); }
.photo-break .label { color: var(--accent); }
.photo-break .stats { margin-top: clamp(26px,3vw,38px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.photo-break .stat { background: rgba(14,11,8,.72); }
.photo-break .stat b { color: #FFFFFF; }
.photo-break .stat b em { color: var(--accent); }
.photo-break .stat span { color: #C9C2B4; }

/* --- Mosaic strip -------------------------------------------------------- */
.mosaic {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(110px, 13vw, 190px);
}
.mosaic figure { margin: 0; overflow: hidden; background: var(--surface-2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic .m-wide { grid-column: span 2; }
.mosaic .m-tall { grid-row: span 2; }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .mosaic .m-tall { grid-row: span 2; }
}

/* --- Project card without a photograph -----------------------------------
   A typographic panel reads as a deliberate result card. A grey placeholder
   box reads as a broken image. */
.proj-stat {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: var(--band-bg);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: clamp(18px, 2.2vw, 26px);
}
.proj-stat::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(247,176,26,.07) 0 8px, rgba(247,176,26,0) 8px 22px);
}
.proj-stat > * { position: relative; }
.proj-stat .v {
  font-family: var(--display); font-weight: 600; line-height: .92;
  font-size: clamp(40px, 5.2vw, 62px); color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.proj-stat .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--band-muted); max-width: 24ch; line-height: 1.5;
}
.proj:hover .proj-stat::before { background: repeating-linear-gradient(135deg,
    rgba(247,176,26,.13) 0 8px, rgba(247,176,26,0) 8px 22px); }

/* --- Card polish --------------------------------------------------------- */
.proj { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s; }
.proj:hover { transform: translateY(-4px); border-color: var(--accent); }
.card { transition: border-color .3s; }

/* --- Section rhythm ------------------------------------------------------ */
.section--flush { padding-top: 0; padding-bottom: 0; }
/* ==========================================================================
   TESTIMONIALS
   Deliberately NOT another card grid. The homepage already runs three of those
   back to back, and a fourth made the strongest content on the site vanish
   into the pattern. This is a dark full-bleed band with the quote at headline
   size - it stops the scroll and reads as a different kind of content.
   ========================================================================== */
.voices { background: var(--band-bg); color: var(--band-fg); border-top: 2px solid var(--accent); }
.voices .shell { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.voices .label { color: var(--accent); }
.voices h2 { color: #FFFFFF; }
.voices .lead { color: var(--band-muted); }

.voices-list { display: grid; gap: 0; margin-top: clamp(30px, 4vw, 48px); }
.voice {
  display: grid; grid-template-columns: minmax(0,1fr) 260px;
  gap: clamp(20px, 4vw, 56px); align-items: start;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.voice:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
@media (max-width: 820px) { .voice { grid-template-columns: 1fr; gap: 16px; } }

.voice blockquote {
  margin: 0; font-family: var(--display); text-transform: none;
  font-size: clamp(21px, 2.9vw, 34px); line-height: 1.22; letter-spacing: .004em;
  color: #FFFFFF; text-wrap: balance;
}
.voice-who { padding-top: 6px; }
.voice-who b {
  display: block; font-family: var(--display); font-size: clamp(16px,1.8vw,19px);
  text-transform: uppercase; letter-spacing: .03em; color: var(--accent); font-weight: 600;
}
.voice-who span {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--band-muted); line-height: 1.6;
}
/* ==========================================================================
   HERO CAROUSEL
   Slides cross-fade behind a fixed headline. The thesis does not flicker; only
   the imagery and its caption change. Each slide takes an <img> OR a <video>,
   so compressed site footage can drop straight in later without new CSS.
   ========================================================================== */
.hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.hero-slide.is-on { opacity: 1; }
.hero-slide img, .hero-slide video { width: 100%; height: 100%; object-fit: cover; }
/* Drift is for the stills only. Drone footage is already moving, and panning
   a moving shot reads as a wobble rather than a slow push. */
.hero-slide.is-on img { animation: heroDrift 7s linear forwards; }

/* Caption naming what is on screen, bottom right, out of the headline's way. */
.hero-cap {
  position: absolute; right: var(--pad); bottom: clamp(22px, 4vw, 38px); z-index: 3;
  text-align: right; max-width: 42ch; pointer-events: none;
}
.hero-cap-item {
  position: absolute; right: 0; bottom: 0; opacity: 0;
  transition: opacity .7s ease; white-space: nowrap;
}
.hero-cap-item.is-on { opacity: 1; position: relative; }
.hero-cap b {
  display: block; font-family: var(--display); font-size: clamp(15px,1.7vw,19px);
  text-transform: uppercase; letter-spacing: .04em; color: #FFFFFF; font-weight: 600;
}
.hero-cap span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
@media (max-width: 720px) { .hero-cap { display: none; } }

/* Dots double as the manual control. */
.hero-dots {
  display: flex; gap: 9px; margin-top: clamp(26px, 3.5vw, 40px); position: relative; z-index: 3;
}
.hero-dots button {
  width: 42px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.34); transition: background .3s;
}
.hero-dots button:hover { background: rgba(255,255,255,.6); }
.hero-dots button[aria-current="true"] { background: var(--accent); }
.hero-dots button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-on img { animation: none; }
}