/* ==========================================================================
   DALY STAGING CO
   Design System — DIRECTION V3 : "ATELIER"
   Luxurious · Monochrome · Couture · Still
   --------------------------------------------------------------------------
   Built to the supplied logo, not alongside it. The wordmark's three
   characteristics ARE the design system:
     1. HIGH-CONTRAST DIDONE CAPS — hairline serifs, light weight.
     2. EXTREME TRACKING — 0.32em. The logo is mostly the space between
        its letters, and so is the rest of this system.
     3. PURE BLACK ON PURE WHITE — no cream, no warmth, no accent.
   Where V1 was warm and editorial, this is colder, quieter and far emptier.
   Luxury here is achieved by removal: fewer colours, fewer weights, fewer
   elements, and roughly twice the white space.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Jost:wght@200;300;400&display=swap');

/* ==========================================================================
   1. TOKENS — PRIMITIVE
   ========================================================================== */

:root {

  /* --- Colour: monochrome ------------------------------------------------
     Taken from the logo: pure white ground, near-pure black mark. The four
     values between them exist only to make hairlines and secondary text
     possible. There is no warm tint anywhere — that is what separates this
     from V1.                                                             */
  --c-paper:    #FFFFFF;  /* page ground — pure, as the logo sits on        */
  --c-bone:     #FAFAF9;  /* alternating sections — barely a shade          */
  --c-pearl:    #F2F1EF;  /* sunk surfaces, image placeholders              */
  --c-ash:      #DEDCD8;  /* hairlines — 1.4:1, structural only             */
  --c-silver:   #A8A49E;  /* decorative type only — 2.6:1                   */
  --c-graphite: #6A655F;  /* secondary text — 5.7:1                         */
  --c-onyx:     #0A0A0A;  /* the logo's black — text, dark sections 19.8:1  */

  /* --- Colour: the single indulgence --------------------------------------
     Champagne appears as a hairline rule or a 1px underline and NOTHING
     else. It is never a fill, never a button, never a background. Used at
     roughly 0.5% of a screen it reads as gilt edging on a page; used at 5%
     it reads as a cheap gold gradient. The system runs perfectly with it
     switched off entirely — see --accent in the semantic layer.          */
  --c-champagne: #B08D57;  /* 3.4:1 — large type and rules only             */
  --c-champagne-deep: #8A6D40; /* 5.4:1 — safe for small text if needed     */

  /* --- Colour: state ------------------------------------------------------ */
  --c-success: #3D5E4A;
  --c-error:   #8A3A32;

  /* --- Typeface -----------------------------------------------------------
     Cormorant Garamond Light reproduces the logo's letterforms closely: the
     same fine bracketed serifs, the same high stroke contrast, the same
     narrow light caps. Set at 300 and tracked to 0.32em it matches the
     supplied mark. Jost carries body copy and interface — a geometric
     sans, the classic counterweight to a Didone in fashion typography.  */
  --f-display: 'Cormorant Garamond', 'Didot', 'Bodoni MT', 'Times New Roman', serif;
  --f-sans:    'Jost', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Type scale ---------------------------------------------------------
     Deliberately restrained at the top. A 96px headline shouts; a 64px
     headline surrounded by 240px of nothing whispers, and whispering is
     the more expensive sound.                                           */
  --t-display: clamp(2.25rem, 4.6vw, 4.5rem);   /* hero — tracked caps      */
  --t-h1:      clamp(2rem, 3.8vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 2.8vw, 2.5rem);
  --t-h3:      clamp(1.25rem, 1.7vw, 1.625rem);
  --t-h4:      1.125rem;
  --t-lede:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.75rem;
  --t-label:   0.8125rem;   /* 11px — tracked caps, the connective tissue   */
  --t-plate:   0.75rem;    /* 10px — plate numbers, the finest type used   */

  /* --- Leading ------------------------------------------------------------
     Looser than either previous direction. Air between lines is the
     cheapest luxury signal there is.                                    */
  --lh-display: 1.18;
  --lh-heading: 1.24;
  --lh-lede:    1.8;
  --lh-body:    1.95;
  --lh-tight:   1.4;

  /* --- Tracking -----------------------------------------------------------
     THE defining token of this direction. 0.32em is measured from the
     supplied logo. Every set of capitals in the system carries it.      */
  --ls-logo:    0.32em;   /* the wordmark — matches the supplied mark       */
  --ls-display: 0.14em;   /* large caps — tracking loosens as size grows    */
  --ls-heading: 0.06em;
  --ls-label:   0.30em;   /* small caps — labels, eyebrows, nav             */
  --ls-button:  0.26em;
  --ls-body:    0.012em;  /* a whisper of tracking, even on body copy       */

  /* --- Weight — 300 and 400 only. Nothing else exists. -------------------- */
  --w-light:   300;
  --w-reg:     400;
  --w-xlight:  200;   /* Jost only, for very large lede text                */

  /* --- Space scale --------------------------------------------------------
     Runs one full step further than V1: the top of the scale is 320px.  */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 12rem;
  --s-12: 15rem;
  --s-13: 20rem;

  /* Section rhythm — roughly double V1's. This single pair of values does
     more for the luxury read than any colour or font choice.            */
  --section-y:       clamp(6rem, 13vw, 15rem);
  --section-y-tight: clamp(4rem, 7vw, 8rem);

  /* --- Layout -------------------------------------------------------------
     A narrower container than either previous direction. Content pulled
     away from the screen edges reads as considered; content near the edge
     reads as efficient.                                                 */
  --container:        1240px;
  --container-narrow:  680px;   /* reading measure, ~62ch                   */
  --container-wide:   1560px;
  --gutter:           clamp(1.5rem, 6vw, 6rem);
  --grid-cols:        12;
  --grid-gap:         clamp(1rem, 2.4vw, 2.25rem);

  /* --- Radius — none. The logo has no curves that aren't letterforms. ----- */
  --r-0:    0px;
  --r-full: 999px;   /* pagination dots only */

  /* --- Elevation — none at all. Not even on the nav. ---------------------- */
  --shadow-none: none;
  --hairline:    1px;

  /* --- Motion -------------------------------------------------------------
     The slowest of the three directions. Nothing snaps; everything
     settles. Image reveals run over a second and a half.                */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:   320ms;
  --dur-2:   680ms;
  --dur-3:   1200ms;
  --dur-4:   1600ms;   /* hero and full-bleed reveals                       */
  --img-zoom: 1.06;

  /* --- Imagery ratios ------------------------------------------------------ */
  --ar-portrait:  4 / 5;
  --ar-editorial: 3 / 2;
  --ar-wide:     16 / 9;
  --ar-cine:     21 / 9;
  --ar-tall:      2 / 3;
  --ar-plate:     5 / 7;   /* the monograph crop — tall, formal, framed     */
  --ar-square:    1 / 1;

  --z-base: 1; --z-nav: 100; --z-menu: 200; --z-lightbox: 300;
}

/* ==========================================================================
   2. TOKENS — SEMANTIC
   ========================================================================== */

:root {
  --bg:            var(--c-paper);
  --bg-alt:        var(--c-bone);
  --bg-sunk:       var(--c-pearl);
  --bg-inverse:    var(--c-onyx);

  --text:          var(--c-onyx);
  --text-muted:    var(--c-graphite);
  --text-subtle:   var(--c-silver);
  --text-inverse:  var(--c-paper);

  --border:        var(--c-ash);
  --border-strong: var(--c-onyx);

  /* The accent is champagne. To run the system in strict monochrome —
     which is equally correct — change this one line to var(--c-onyx).  */
  --accent:        var(--c-champagne);
  --accent-text:   var(--c-champagne-deep);  /* the AA-safe variant        */
  --accent-hover:  var(--c-onyx);

  --focus-ring:    var(--c-onyx);
}

/* Dark scope — .invert flips to onyx. Champagne lifts against black, so it
   becomes usable as text here where it isn't on white. */
.invert {
  --bg:            var(--c-onyx);
  --bg-alt:        #141414;
  --bg-sunk:       #141414;
  --text:          var(--c-paper);
  --text-muted:    rgba(255, 255, 255, 0.60);
  --text-subtle:   rgba(255, 255, 255, 0.34);
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: var(--c-paper);
  --accent:        var(--c-champagne);
  --accent-text:   var(--c-champagne);   /* 6.1:1 on onyx — safe for text  */
  --accent-hover:  var(--c-paper);
  --focus-ring:    var(--c-champagne);
  background: var(--bg);
  color: var(--text);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--c-onyx); color: var(--c-paper); }
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. THE WORDMARK
   Reproduces the supplied logo in live text. Weight 300, uppercase,
   0.32em tracking. The trailing letter carries the same tracking as the
   rest, so the mark needs a compensating negative margin to sit optically
   centred — without it, a "centred" wordmark reads slightly left.
   ========================================================================== */

.wordmark {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  font-size: clamp(0.9375rem, 1.5vw, 1.25rem);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  margin-right: calc(-1 * var(--ls-logo));   /* optical centring */
  display: inline-block;
}
.wordmark--lg { font-size: clamp(1.25rem, 3vw, 2.5rem); }
.wordmark--xl { font-size: clamp(1.45rem, 5.5vw, 4.5rem); }

/* Full lockup — wordmark with descriptor beneath, divided by a hairline.
   This is the version for the footer and the site header on inner pages. */
.lockup { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.lockup .rule-fine { width: 100%; }
.lockup .descriptor {
  font-family: var(--f-display);
  font-weight: var(--w-reg);
  font-size: var(--t-plate);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: calc(-1 * var(--ls-label));
}

/* ==========================================================================
   5. TYPOGRAPHY
   The serif carries the brand: headings AND small tracked labels, so every
   piece of type on the page rhymes with the logo. Jost carries only body
   copy and functional interface text.
   ========================================================================== */

.display, h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}

/* Display — uppercase and tracked, echoing the logo at scale. Used once
   per page, and never for more than five or six words. */
.display, .t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-right: calc(-1 * var(--ls-display));
}

h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }

h4, .h4 {
  font-family: var(--f-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  margin: 0;
}

/* LABEL — the serif, in caps, at 0.30em. This is the single most repeated
   element in the system and the reason everything feels of a piece with
   the logo. Replaces V1's sans eyebrow entirely. */
.label {
  font-family: var(--f-display);
  font-weight: var(--w-reg);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin: 0 calc(-1 * var(--ls-label)) var(--s-6) 0;
}
.label--accent { color: var(--accent-text); }
.label--onyx   { color: var(--text); }

/* Plate number — the monograph device. "PLATE 01" above a project, set in
   the finest type in the system. */
.plate {
  font-family: var(--f-display);
  font-weight: var(--w-reg);
  font-size: var(--t-plate);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-subtle);
  display: block;
  margin-right: calc(-1 * var(--ls-label));
}

.lede {
  font-family: var(--f-sans);
  font-size: var(--t-lede);
  font-weight: var(--w-light);
  line-height: var(--lh-lede);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0 0 var(--s-6); max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.caption { font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-tight); }
.fine    { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0.08em; }

/* Pull quote — the serif at size, sentence case, never in quotation marks
   larger than the text itself. */
.quote {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 30ch;
}

.stat-figure {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ==========================================================================
   6. RULES
   Two weights only, both hairline. The champagne rule is the one place
   the accent colour appears in the entire system.
   ========================================================================== */

.rule       { height: var(--hairline); background: var(--border); border: 0; margin: 0; }
.rule-fine  { height: var(--hairline); background: var(--border-strong); border: 0; margin: 0; }
.rule-accent{ height: var(--hairline); background: var(--accent); border: 0; margin: 0; }

/* Short centred rule — the punctuation mark between a label and a heading,
   or above a centred call to action. */
.rule-mark {
  width: 56px; height: var(--hairline);
  background: var(--border-strong);
  border: 0; margin: var(--s-6) auto;
}
.rule-mark--accent { background: var(--accent); }

/* ==========================================================================
   7. LAYOUT
   Symmetry is the default here. V1 was asymmetric and editorial; V3 is
   centred and formal, which is the older and more expensive convention.
   ========================================================================== */

.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--bg-alt); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.stack { display: flex; flex-direction: column; gap: var(--s-6); }
.row   { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.center { text-align: center; }

/* Section opener — centred label, heading, short rule, lede. Used at the
   top of nearly every section. */
.section-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(3.5rem, 7vw, 6.5rem);
}
.section-head .lede { margin-inline: auto; }
.section-head--left { text-align: left; margin-inline: 0; }
.section-head--left .lede { margin-inline: 0; }

/* Split — 1:1 and generously gapped. The asymmetric 5/7 of V1 is
   deliberately not used here; symmetry reads more formal. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.split--flip > *:first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--flip > *:first-child { order: 0; }
}

/* Inset feature — a full-bleed band with the image inset from both edges,
   so white space frames the photograph like a mount board. */
.inset { padding-inline: clamp(1.5rem, 10vw, 12rem); }

/* ==========================================================================
   8. IMAGERY
   Photography is framed, never cropped to the edge of a card. The plate
   crop (5:7) is the house format for project work.
   ========================================================================== */

.figure { margin: 0; position: relative; overflow: hidden; background: var(--bg-sunk); }
.figure img { width: 100%; height: 100%; object-fit: cover; }

.ar-portrait { aspect-ratio: var(--ar-portrait); }
.ar-editorial{ aspect-ratio: var(--ar-editorial); }
.ar-wide     { aspect-ratio: var(--ar-wide); }
.ar-cine     { aspect-ratio: var(--ar-cine); }
.ar-tall     { aspect-ratio: var(--ar-tall); }
.ar-plate    { aspect-ratio: var(--ar-plate); }
.ar-square   { aspect-ratio: var(--ar-square); }

.zoom img, .zoom .ph { transition: transform var(--dur-4) var(--ease); will-change: transform; }
a:hover .zoom img, a:hover .zoom .ph, .zoom:hover img { transform: scale(var(--img-zoom)); }

/* Mount — a hairline frame set in from the image edge, like a gallery
   mount. One per page at most. */
.mount { position: relative; }
.mount::after {
  content: '';
  position: absolute; inset: var(--s-5);
  border: var(--hairline) solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.scrim::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 10, 10, 0.52) 0%, rgba(10, 10, 10, 0.16) 42%, rgba(10, 10, 10, 0) 72%);
}

.figcaption {
  margin-top: var(--s-4);
  display: flex; justify-content: space-between; gap: var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-plate);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.figcaption--center { justify-content: center; text-align: center; }

/* Placeholder — delete once real photography lands. */
.ph {
  position: absolute; inset: 0;
  background: linear-gradient(158deg, #F4F3F1 0%, #EAE8E5 50%, #DEDBD7 100%);
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--f-display);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-silver);
}
.ph--dark { background: linear-gradient(158deg, #1F1F1F 0%, #141414 55%, #0A0A0A 100%); }
.ph--dark::after { color: rgba(255,255,255,0.34); }

/* ==========================================================================
   9. BUTTONS & LINKS
   No filled buttons on white. A luxury interface asks, it does not
   instruct — so the primary action is an outlined box or a tracked link,
   and the filled variant is reserved for dark sections and forms.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 56px;
  padding: 0 var(--s-8);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-0);
  background: transparent;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* Fill rises slowly from the bottom — the only button animation allowed. */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--border-strong);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur-2) var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--bg); }

.btn--solid { background: var(--c-onyx); color: var(--c-paper); border-color: var(--c-onyx); }
.btn--solid::before { background: var(--c-paper); }
.btn--solid:hover { color: var(--c-onyx); }

.btn--quiet { border-color: var(--border); }
.btn--quiet:hover { border-color: var(--border-strong); }

.btn--sm { min-height: 44px; padding-inline: var(--s-6); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }

/* Text link — tracked caps over a hairline that extends on hover. */
.link {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding-bottom: var(--s-3);
  border-bottom: var(--hairline) solid var(--border);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.link:hover { color: var(--accent-text); border-color: var(--accent); }
.link .arrow { transition: transform var(--dur-2) var(--ease); }
.link:hover .arrow { transform: translateX(8px); }

/* Centred link with a rule ABOVE it — the formal call to action, used
   under centred section content. */
.link--above {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-5);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 0;
}
.link--above::before {
  content: '';
  width: 48px; height: var(--hairline);
  background: var(--border-strong);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.link--above:hover::before { width: 96px; background: var(--accent); }

.a-inline {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: var(--border);
  transition: text-decoration-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.a-inline:hover { color: var(--accent-text); text-decoration-color: var(--accent); }

/* ==========================================================================
   10. NAVIGATION
   Centred wordmark, links split either side, capped top and bottom by
   hairlines. Sits on white — never over the hero image, so the mark is
   always legible at full contrast, exactly as supplied.
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-6);
  padding: var(--s-6) var(--gutter);
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--border);
  transition: padding var(--dur-2) var(--ease);
}
.nav.is-stuck { padding-block: var(--s-4); }
.nav-center { display: flex; justify-content: center; }

.nav-links { display: flex; align-items: center; gap: var(--s-7); }
.nav-links--right { justify-content: flex-end; }

.nav-link {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  padding-block: var(--s-2);
  transition: color var(--dur-1) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0; width: 100%; height: var(--hairline);
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--s-2); color: inherit; }
@media (max-width: 940px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

.crumbs {
  display: flex; gap: var(--s-4); align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: var(--t-plate);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--text-subtle); }

/* ==========================================================================
   11. HERO
   The masthead: wordmark, hairline, descriptor — then the photograph
   beneath it, inset from the page edges. The logo is the first thing on
   the page and it sits on white, at full contrast, exactly as designed.
   ========================================================================== */

.masthead {
  text-align: center;
  padding: clamp(4rem, 10vw, 10rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.masthead .wordmark--xl { display: inline-block; }
.masthead .descriptor {
  font-family: var(--f-display);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s-6) calc(-1 * var(--ls-label)) 0 0;
  display: block;
}

.hero { position: relative; overflow: hidden; background: var(--bg-sunk); }
.hero--cine { aspect-ratio: var(--ar-cine); }
.hero--wide { aspect-ratio: var(--ar-wide); }
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* Optional overlaid variant, for inner pages */
.hero-body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(2rem, 5vw, 5rem) var(--gutter);
  color: var(--c-paper);
  text-align: center;
}
.hero-body .label { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   12. PORTFOLIO — the plate grid
   Projects presented as plates in a monograph: number, image, address,
   suburb. Centred captions, generous gaps, no hover chrome beyond a slow
   scale on the photograph itself.
   ========================================================================== */

.card { display: block; text-decoration: none; color: inherit; text-align: center; }
.card .plate { margin-bottom: var(--s-4); }
.card .figure { margin-bottom: var(--s-5); }
.card-title {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  font-size: var(--t-h3);
  letter-spacing: 0.06em;
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-3);
  transition: color var(--dur-1) var(--ease);
}
.card:hover .card-title { color: var(--accent-text); }
.card-meta {
  font-family: var(--f-display);
  font-size: var(--t-plate);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: calc(-1 * var(--ls-label));
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(3rem, 7vw, 7rem) var(--grid-gap);
}
.work-grid > *        { grid-column: span 6; }
.work-grid > .span-4  { grid-column: span 4; }
.work-grid > .span-5  { grid-column: span 5; }
.work-grid > .span-6  { grid-column: span 6; }
.work-grid > .span-7  { grid-column: span 7; }
.work-grid > .span-8  { grid-column: span 8; }
.work-grid > .span-12 { grid-column: span 12; }
.work-grid > .drop    { margin-top: clamp(2.5rem, 6vw, 6rem); }
@media (max-width: 880px) {
  .work-grid > * { grid-column: span 12 !important; }
  .work-grid > .drop { margin-top: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: center; }
.chip {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--s-2) 0;
  border: 0; border-bottom: var(--hairline) solid transparent;
  background: transparent; color: var(--text-subtle); cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip:hover { color: var(--text); }
.chip[aria-pressed='true'] { color: var(--text); border-bottom-color: var(--accent); }

/* ==========================================================================
   13. BEFORE / AFTER
   ========================================================================== */

.ba { position: relative; aspect-ratio: var(--ar-editorial); overflow: hidden; background: var(--bg-sunk); user-select: none; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: var(--hairline); background: var(--c-paper); pointer-events: none;
}
.ba-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px; transform: translate(-50%, -50%);
  border: var(--hairline) solid var(--c-paper);
  border-radius: var(--r-full);
  background: transparent;
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag {
  position: absolute; bottom: var(--s-6);
  font-family: var(--f-display); font-size: var(--t-plate);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-paper); pointer-events: none;
  text-shadow: 0 1px 12px rgba(10,10,10,0.55);
}
.ba-tag--before { left: var(--s-6); }
.ba-tag--after  { right: var(--s-6); }

.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

/* ==========================================================================
   14. SERVICES — the index
   Centred, numbered, divided by hairlines. No hover fills; the heading
   simply shifts to champagne.
   ========================================================================== */

.services { border-top: var(--hairline) solid var(--border); }
.service {
  display: grid;
  grid-template-columns: 90px 1fr 1.25fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--hairline) solid var(--border);
  align-items: start;
}
.service .plate { padding-top: var(--s-2); }
@media (max-width: 880px) { .service { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ==========================================================================
   15. STATS · TEAM · TESTIMONIAL
   ========================================================================== */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.stat { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.stat .plate { max-width: 20ch; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(2.5rem, 5vw, 4rem); }
.member { text-align: center; }
.member .figure { margin-bottom: var(--s-5); }
.member-name {
  font-family: var(--f-display); font-weight: var(--w-light);
  font-size: var(--t-h3); letter-spacing: 0.06em; margin: 0 0 var(--s-3);
}
.member-bio { font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s-4); max-width: 34ch; margin-inline: auto; }

.testimonial { text-align: center; max-width: 46ch; margin-inline: auto; }
.testimonial .quote { margin-inline: auto; }
.testimonial .plate { margin-top: var(--s-7); }

.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.logo-strip > * {
  font-family: var(--f-display); font-weight: var(--w-light);
  font-size: 0.9375rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-subtle);
}

/* ==========================================================================
   16. ACCORDION
   ========================================================================== */

.accordion { border-top: var(--hairline) solid var(--border); }
.acc-item { border-bottom: var(--hairline) solid var(--border); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding-block: var(--s-7);
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-light);
  letter-spacing: 0.04em;
  color: var(--text); text-align: left; list-style: none;
  transition: color var(--dur-1) var(--ease);
}
.acc-trigger::-webkit-details-marker { display: none; }
.acc-trigger:hover { color: var(--accent-text); }
.acc-icon { flex: none; font-family: var(--f-sans); font-weight: var(--w-xlight); transition: transform var(--dur-2) var(--ease); }
.acc-item[open] .acc-icon { transform: rotate(45deg); }
.acc-panel { padding-bottom: var(--s-7); max-width: 62ch; color: var(--text-muted); font-size: var(--t-sm); line-height: 1.9; }

/* ==========================================================================
   17. FORMS
   Underline fields, wide-tracked serif labels, and generous vertical
   spacing. A form should feel like a note card, not a database entry.
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--s-4); }
.field-label {
  font-family: var(--f-display);
  font-size: var(--t-label);
  font-weight: var(--w-reg);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: calc(-1 * var(--ls-label));
}
.input, .textarea, .select {
  font-family: var(--f-sans); font-size: var(--t-body); font-weight: var(--w-light);
  color: var(--text); background: transparent;
  border: 0; border-bottom: var(--hairline) solid var(--border);
  border-radius: var(--r-0);
  padding: var(--s-4) 0; width: 100%;
  transition: border-color var(--dur-1) var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-subtle); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.textarea { resize: vertical; min-height: 120px; line-height: var(--lh-body); }
.select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field-error { font-family: var(--f-display); font-size: var(--t-plate); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-error); }
.input[aria-invalid='true'] { border-color: var(--c-error); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.check { display: flex; gap: var(--s-4); align-items: flex-start; }
.check input { margin-top: 6px; accent-color: var(--c-onyx); }
.check label { font-size: var(--t-sm); color: var(--text-muted); }

/* ==========================================================================
   18. FOOTER
   Centred lockup, hairline, three columns of tracked caps. The wordmark
   appears one final time at full size — the bookend to the masthead.
   ========================================================================== */

.footer { padding-block: clamp(5rem, 9vw, 9rem) var(--s-8); text-align: center; }
.footer-mark { margin-bottom: clamp(3rem, 6vw, 5rem); }
.footer-top {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: var(--hairline) solid var(--border);
  border-bottom: var(--hairline) solid var(--border);
}
.footer-col { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.footer-col a {
  font-family: var(--f-sans); font-size: var(--t-label); font-weight: var(--w-light);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.footer-col a:hover { color: var(--text); }
.footer-col .plate { margin-bottom: var(--s-3); color: var(--text); }
.footer-bottom {
  display: flex; justify-content: center; gap: var(--s-6); flex-wrap: wrap;
  padding-top: var(--s-7);
}
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; } }

/* ==========================================================================
   19. UTILITY
   ========================================================================== */

.pagination { display: flex; gap: var(--s-5); align-items: center; justify-content: center; }
.page-dot {
  width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--border); border: 0; padding: 0; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.page-dot[aria-current='true'] { background: var(--accent); }

.skip-link { position: absolute; left: -9999px; background: var(--c-onyx); color: var(--c-paper); padding: var(--s-4) var(--s-6); z-index: var(--z-lightbox); }
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

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

/* Reveal — the slowest of the three directions. A long, low fade-up. */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 120ms; }
.reveal:nth-child(3) { transition-delay: 240ms; }
.reveal:nth-child(4) { transition-delay: 360ms; }