/* ==========================================================================
   Modiform Contracts
   "Night & Sand" — a dark-first system whose second hue is sampled from the
   planting in Modiform's own renders, so the page and the photography sit in
   one colour world. Logo orange is demoted to a signal.

   Display: Archivo. Body: Inter. Utility: JetBrains Mono, which carries every
   dimension, address, level and status — the drawing's own voice.

   The recurring marks are the dimension line and the corner bracket, both
   lifted off a working drawing. They replace the inherited rectangles.
   ========================================================================== */

:root {
  /* --- Ground: night --------------------------------------------------- */
  --night:      #0E0F11;
  --night-2:    #191B1E;
  --night-3:    #23262A;

  /* --- Ground: light --------------------------------------------------- */
  --sand:       #F4F1EC;
  --sand-2:     #EAE5DC;
  --plaster:    #D9D2C6;

  /* --- The second hue, sampled from the planting in the renders --------- */
  --euc:        #7C8B84;
  --euc-mid:    #4A5A53;
  --euc-deep:   #2C3733;

  /* --- The navy -----------------------------------------------------------
     The headline colour. Deep enough to hold a bold weight against a bright
     render, blue enough that it never reads as the same near-black the dark
     sections are built from. */
  --navy:       #16223C;
  --navy-2:     #38455F;
  --navy-3:     #6B7791;

  /* --- Ink on light -----------------------------------------------------
     Primary ink is the navy, so headings and body on every light ground sit
     in the same family as the hero. The secondaries stay eucalyptus-grey. */
  --ink:        var(--navy);
  --ink-2:      #4C5652;
  --ink-3:      #79837E;

  /* --- Ink on night ----------------------------------------------------- */
  --light:      #F4F1EC;
  --light-2:    #A7B0AB;
  --light-3:    #7B857F;

  /* --- Signal ----------------------------------------------------------- */
  --orange:     #FF7008;   /* on night */
  --orange-cta: #F26400;   /* button surface, white label clears contrast */
  --orange-ink: #A8420A;   /* orange as text on a light ground */

  --line-l:     #CFC7B8;
  --line-l2:    #BDB3A1;
  --line-d:     rgba(244, 241, 236, .14);
  --line-d2:    rgba(244, 241, 236, .26);

  /* --- Type ------------------------------------------------------------- */
  --font-display: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Space ------------------------------------------------------------ */
  --header-h: 5.5rem;
  --sec-pad: 8rem;
  --gutter: 7vw;
  /* A project-gallery view should fit one screen: cap the frame at the viewport
     less the fixed header and the caption row. Capping width rather than height
     keeps the aspect ratio, so the frame shrinks instead of cropping further.
     The 30rem floor stops landscape phones squeezing it down to a stamp. */
  --gframe-max-h: calc(100vh - var(--header-h) - 7.5rem);
  --gframe-max-h: calc(100dvh - var(--header-h) - 7.5rem);
  --gframe-max-w: max(30rem, calc(var(--gframe-max-h) * 16 / 9));

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-draw: cubic-bezier(.62, .02, .34, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-fast: cubic-bezier(.55, 0, 1, .45);
  --reveal: opacity .8s var(--ease-out), transform .8s var(--ease-out);

  --main-color: var(--orange);
}

/* --- Tone --------------------------------------------------------------
   A tone sets six variables and nothing else. Every component reads those
   variables, so one set of component rules serves every ground. Section
   rules must never set --sec-* themselves, or they would out-specify the
   tone class sitting on the same element. */

body,
.tone-sand {
  --sec-bg: var(--sand);
  --sec-ink: var(--ink);
  --sec-ink-2: var(--ink-2);
  --sec-ink-3: var(--ink-3);
  --sec-line: var(--line-l);
  --sec-accent-text: var(--orange-ink);
}
/* Daylight — the hero. A render carries its own ground, so this tone only
   names the ink that has to survive on top of it. */
.tone-daylight {
  --sec-bg: var(--sand);
  --sec-ink: var(--navy);
  --sec-ink-2: var(--navy-2);
  --sec-ink-3: var(--navy-3);
  --sec-line: rgba(22, 34, 60, .26);
  --sec-accent-text: var(--orange-ink);
}
.tone-plaster {
  --sec-bg: var(--plaster);
  --sec-ink: var(--ink);
  --sec-ink-2: var(--ink-2);
  --sec-ink-3: #6E7873;
  --sec-line: var(--line-l2);
  --sec-accent-text: var(--orange-ink);
}
.tone-night {
  --sec-bg: var(--night);
  --sec-ink: var(--light);
  --sec-ink-2: var(--light-2);
  --sec-ink-3: var(--light-3);
  --sec-line: var(--line-d);
  --sec-accent-text: var(--orange);
}
.tone-night-2 {
  --sec-bg: var(--night-2);
  --sec-ink: var(--light);
  --sec-ink-2: var(--light-2);
  --sec-ink-3: var(--light-3);
  --sec-line: var(--line-d);
  --sec-accent-text: var(--orange);
}
.tone-euc {
  --sec-bg: var(--euc-deep);
  --sec-ink: #EDF1EE;
  --sec-ink-2: #B4C1BA;
  --sec-ink-3: #8C9B94;
  --sec-line: rgba(237, 241, 238, .17);
  --sec-accent-text: var(--orange);
}
.tone-white {
  --sec-bg: #fff;
  --sec-ink: var(--ink);
  --sec-ink-2: var(--ink-2);
  --sec-ink-3: var(--ink-3);
  --sec-line: var(--line-l2);
  --sec-accent-text: var(--orange-ink);
}
.tone-sand, .tone-plaster, .tone-night, .tone-night-2, .tone-euc, .tone-white {
  background-color: var(--sec-bg);
  color: var(--sec-ink);
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anchor targets land clear of the fixed header instead of starting behind
   it. The hero (#top) is excluded on purpose — it is meant to sit flush
   under the header, which floats transparent over it. */
#about, #why, #process, #projects, #services, #enquire {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--sec-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin-top: 0;
  margin-bottom: .5rem;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--sec-ink);
}
h1 { font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -.038em; }
h2 { font-weight: 600; font-size: clamp(1.7rem, 2.8vw, 2.5rem); letter-spacing: -.03em; }
h3 { font-weight: 600; font-size: clamp(1.3rem, 1.7vw, 1.65rem); letter-spacing: -.025em; }
h4 { font-weight: 600; font-size: 1.12rem; letter-spacing: -.015em; }
h5 { font-weight: 500; font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.4; }
h6 { font-weight: 600; font-size: 1rem; }

p { margin-top: 0; margin-bottom: 1.1rem; line-height: 1.7; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
strong, b { font-weight: 600; color: var(--sec-ink); }

.filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background-color: var(--orange); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="slider"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* --- Layout tokens ------------------------------------------------------- */

.padding-class { padding-left: var(--gutter); padding-right: var(--gutter); }
.padding-class-big { padding-left: calc(var(--gutter) + 4vw); padding-right: calc(var(--gutter) + 4vw); }
.padding-TB { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.padding-TB-mini { padding-top: 5rem; padding-bottom: 5rem; }

.orange-color { color: var(--sec-accent-text); }

/* --- Utility type: the drawing's own voice -------------------------------
   Anything a drawing would letter — dimensions, levels, addresses, statuses,
   stage numbers — is set in mono. */

.eyebrow,
.chip,
.plate-meta,
.hero-foot,
.lvl-tag,
.credits div span,
.pcard-tag,
.gallery-head .count,
.gfoot .gcount,
.field label,
.dokmehCopyRight {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--sec-accent-text);
}

/* --- The dimension line --------------------------------------------------
   A hairline with tick ends. It draws out to width when its heading arrives,
   which is the one place a rule earns an animation. */

.dim-rule {
  display: block;
  height: 9px;
  background:
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) left center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) right center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) center / 100% 1.5px no-repeat;
}

.title { position: relative; text-align: center; margin-bottom: 4.5rem; }
.title h2 { display: inline-block; position: relative; margin: 0; }
.title h2::after,
section.orange-container .text-wrap h2::after,
.page-hero h1::after {
  content: '';
  display: block;
  width: 104px; height: 9px;
  margin: 1.4rem auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .9s var(--ease-draw) .15s;
  background:
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) left center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) right center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) center / 100% 1.5px no-repeat;
}
.title h2.is-in::after,
section.orange-container .text-wrap h2.is-in::after,
.page-hero h1::after { transform: scaleX(1); }
html:not(.js) .title h2::after { transform: scaleX(1); }

section.orange-container .text-wrap h2::after,
.page-hero h1::after { margin-left: 0; margin-right: 0; transform-origin: left center; }

.title .lead {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  color: var(--sec-ink-2);
  font-size: 1.02rem;
}

/* --- The corner bracket --------------------------------------------------
   Crop marks off a drawing sheet. This is what replaced the offset orange
   plate that used to sit behind every image. */

.bracket-frame { position: relative; display: block; margin: 0; }
.bracket-frame > img { display: block; width: 100%; height: auto; }
.bracket-frame::before,
.bracket-frame::after {
  content: '';
  position: absolute;
  width: 38px; height: 38px;
  border: 1.5px solid var(--orange);
  pointer-events: none;
  transition: transform .55s var(--ease-out);
}
.bracket-frame::before { top: -11px; left: -11px; border-right: 0; border-bottom: 0; }
.bracket-frame::after { bottom: -11px; right: -11px; border-left: 0; border-top: 0; }
.bracket-frame:hover::before { transform: translate(-6px, -6px); }
.bracket-frame:hover::after { transform: translate(6px, 6px); }

/* --- Drawn marks ---------------------------------------------------------
   Every icon on the page is one family: a hairline in the section's own ink,
   solid where the thing already exists and dashed where it is proposed, which
   is the convention a set of drawings already uses. Each shape carries
   pathLength="1", so a single dash rule draws them all at the same rate no
   matter how long the real path is. */

.icon-line {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
html.js .icon-line [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s var(--ease-draw);
}
html.js .icon-line .dash {
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .45s var(--ease-out) .42s;
}
.icon-line .dash { stroke-dasharray: 3 3; opacity: .8; }
html.js .is-in .icon-line [pathLength] { stroke-dashoffset: 0; }
html.js .is-in .icon-line .dash { opacity: .8; }
/* Stagger the strokes so the mark builds up rather than snapping on. */
.icon-line [pathLength]:nth-child(2) { transition-delay: .06s; }
.icon-line [pathLength]:nth-child(3) { transition-delay: .12s; }
.icon-line [pathLength]:nth-child(4) { transition-delay: .18s; }
.icon-line [pathLength]:nth-child(5) { transition-delay: .24s; }
.icon-line [pathLength]:nth-child(6) { transition-delay: .30s; }

/* --- Reveal -------------------------------------------------------------- */

.gs_reveal, .mBox, .fadeImage {
  opacity: 0;
  transform: translateY(34px);
  transition: var(--reveal);
  pointer-events: none;
}
.fadeImage { transform: translateY(20px); }
.gs_reveal.is-in, .mBox.is-in, .fadeImage.is-in { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .gs_reveal,
html:not(.js) .mBox,
html:not(.js) .fadeImage { opacity: 1; transform: none; pointer-events: auto; }

.splitText .line { display: block; overflow: hidden; padding-bottom: .06em; }
.splitText .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
}
html.loaded .splitText .line > span { transform: none; }
html.loaded .splitText .line:nth-child(2) > span { transition-delay: .11s; }
html.loaded .splitText .line:nth-child(3) > span { transition-delay: .22s; }
html:not(.js) .splitText .line > span { transform: none; }

/* --- Buttons -------------------------------------------------------------
   One shape, three fills. The label sits above a panel that rises from the
   bottom edge — transform and opacity only. */

.btn {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -.005em;
  transition: color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn span { display: block; position: relative; z-index: 2; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn.solidBtn, .btn.orangeBtn { background: var(--orange-cta); color: #fff; }
.btn.solidBtn::after, .btn.orangeBtn::after { background: var(--night); }

.btn.ghostBtn { background: transparent; color: var(--sec-ink); box-shadow: inset 0 0 0 1px var(--sec-line); }
.btn.ghostBtn::after { background: var(--sec-ink); }
.btn.ghostBtn:hover, .btn.ghostBtn:focus-visible { color: var(--sec-bg); box-shadow: inset 0 0 0 1px var(--sec-ink); }

.btn.blackBtn { background: var(--night); color: var(--sand); }
.btn.blackBtn::after { background: var(--orange-cta); }
.btn.blackBtn:hover, .btn.blackBtn:focus-visible { color: #fff; }

.slider-arrow {
  position: relative;
  width: 2.8rem; height: 1.5rem;
  flex: 0 0 auto;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M0 8h44M36 2l7 6-7 6' fill='none' stroke='%23FF7008' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.slider-arrow.prev { transform: scale(-1); }
.slider-arrow:hover { transform: translateX(4px); }
.slider-arrow.prev:hover { transform: scale(-1) translateX(4px); }
.slider-arrow[disabled] { opacity: .28; cursor: default; transform: none; }
.slider-arrow.prev[disabled] { transform: scale(-1); }

/* --- Loading veil --------------------------------------------------------
   The real MODIFORM/CONTRACTS lockup, built from Archivo — the site's own
   display face — rather than an invented monogram. Two identical copies of
   the wordmark sit in the same grid cell: a hairline "plaster" construction
   outline underneath, a solid-orange fill on top. Both are split into the
   same three overlapping groups (MOD / IFO / RM); each group's outline
   draws in, then that group's fill resolves over it. The rule draws
   left-to-right after, CONTRACTS settles in last.

   The whole sequence auto-plays off html.js with a fixed, known duration —
   no JS phase machine needed. site.js only decides *when* the veil is
   allowed to exit (see the "ready" block at the bottom of the file), and
   marks html.is-warm before first paint on an already-cached visit so this
   block can skip straight to its resolved end state. */

#loading {
  --sec-accent-text: var(--orange);
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .48s var(--ease-out), visibility .48s;
}
/* pointer-events drops immediately, not at the end of the fade — a
   `visibility` transition only flips at the end of its duration, so
   without this the (by-then invisible) veil still swallows the first
   click made during the ~480ms it takes to fade out. */
html.loaded #loading { opacity: 0; visibility: hidden; pointer-events: none; }
/* Without JS nothing ever adds html.loaded, so the veil must not depend on
   it to disappear — otherwise a script failure blacks out the whole page. */
html:not(.js) #loading { display: none; }

/* An ambient glow and a faint site-grid live behind the lockup from the
   very first paint, so there is never a dead, static black frame while the
   page gets moving. */
#loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(255, 112, 8, .16), transparent 42%);
  animation: loadGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}
#loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000, transparent 38%);
          mask-image: radial-gradient(circle at 50% 46%, #000, transparent 38%);
  opacity: .2;
  pointer-events: none;
}
@keyframes loadGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.05); }
}

/* The lockup drifts up and shrinks toward the header on exit — a hand-off,
   not a fade-to-black. It stays fully opaque itself; only the parent
   #loading veil (background, grid, glow) carries the opacity fade above,
   so the identity reads as arriving at its site position rather than
   dissolving. */
.wm-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(2.15rem, 8.6vw, 4.6rem);
  transform-origin: 50% 40%;
  transition: transform .48s var(--ease-bounce);
}
html.loaded .wm-lockup { transform: translate(-34vw, -42vh) scale(.42); }

.wm-word {
  display: grid;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wm-line-copy, .wm-fill-copy { grid-area: 1 / 1; }
.wm-line-copy {
  color: transparent;
  -webkit-text-stroke: clamp(1px, .11vw, 1.5px) var(--plaster);
}
.wm-fill-copy { color: var(--orange); }

.wm-g, .wm-lead, .wm-rest { display: inline-block; }

/* Group 1 (M + OD) is a plain wrapper — only its two children animate, on
   their own slightly offset clocks, so the M leads by ~90ms as specified
   rather than the whole group snapping in as one block. Groups 2 and 3
   (IFO, RM) have no further split. */
.wm-line-copy .wm-lead,
.wm-line-copy .wm-rest,
.wm-line-copy .wm-g2,
.wm-line-copy .wm-g3 {
  clip-path: inset(0 100% 0 0);
  filter: blur(2px);
}
.wm-fill-copy .wm-lead,
.wm-fill-copy .wm-rest,
.wm-fill-copy .wm-g2,
.wm-fill-copy .wm-g3 { opacity: 0; }

/* Construction: each group's outline draws in left-to-right, heavily
   overlapping the next rather than waiting its turn — one elevation
   assembling, not eight letters typing. */
html.js #loading .wm-line-copy .wm-lead { animation: wmDraw .42s var(--ease-draw) forwards; }
html.js #loading .wm-line-copy .wm-rest { animation: wmDraw .42s var(--ease-draw) .09s forwards; }
html.js #loading .wm-line-copy .wm-g2   { animation: wmDraw .43s var(--ease-draw) .19s forwards; }
html.js #loading .wm-line-copy .wm-g3   { animation: wmDraw .44s var(--ease-draw) .31s forwards; }
@keyframes wmDraw { to { clip-path: inset(0 0 0 0); filter: blur(0); } }

/* Material resolution: the visual climax. Each group's solid orange
   crossfades in over its own outline shortly after that group finishes
   drawing — a ripple, not one flat crossfade at the end. */
html.js #loading .wm-fill-copy .wm-lead { animation: wmResolve .32s var(--ease-out) .52s forwards; }
html.js #loading .wm-fill-copy .wm-rest { animation: wmResolve .32s var(--ease-out) .56s forwards; }
html.js #loading .wm-fill-copy .wm-g2   { animation: wmResolve .32s var(--ease-out) .64s forwards; }
html.js #loading .wm-fill-copy .wm-g3   { animation: wmResolve .34s var(--ease-out) .74s forwards; }
@keyframes wmResolve { to { opacity: 1; } }

/* The structural line — a beam completing, left to right. */
.wm-rule {
  display: block;
  width: 2.55em;
  max-width: 100%;
  height: 2px;
  margin: .38em 0 .3em;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
html.js #loading .wm-rule { animation: wmRuleDraw .38s var(--ease-draw) 1.08s forwards; }
@keyframes wmRuleDraw { to { transform: scaleX(1); } }

/* CONTRACTS — supporting information, not the hero: a plain settle, no
   trace treatment. */
.wm-sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .27em;
  letter-spacing: .16em;
  color: var(--orange);
  opacity: 0;
  transform: translateY(6px);
}
html.js #loading .wm-sub { animation: wmSubIn .4s var(--ease-out) 1.4s forwards; }
@keyframes wmSubIn { to { opacity: 1; transform: none; } }

/* Cached visit: site.js has already marked html.is-warm before first paint
   because document.readyState was "complete" on arrival. Skip straight to
   the resolved lockup instead of replaying the full construction. */
html.is-warm #loading .wm-line-copy .wm-lead,
html.is-warm #loading .wm-line-copy .wm-rest,
html.is-warm #loading .wm-line-copy .wm-g2,
html.is-warm #loading .wm-line-copy .wm-g3,
html.is-warm #loading .wm-fill-copy .wm-lead,
html.is-warm #loading .wm-fill-copy .wm-rest,
html.is-warm #loading .wm-fill-copy .wm-g2,
html.is-warm #loading .wm-fill-copy .wm-g3,
html.is-warm #loading .wm-rule,
html.is-warm #loading .wm-sub { animation: none; }
html.is-warm #loading .wm-line-copy .wm-lead,
html.is-warm #loading .wm-line-copy .wm-rest,
html.is-warm #loading .wm-line-copy .wm-g2,
html.is-warm #loading .wm-line-copy .wm-g3 { clip-path: inset(0 0 0 0); filter: none; }
html.is-warm #loading .wm-fill-copy .wm-lead,
html.is-warm #loading .wm-fill-copy .wm-rest,
html.is-warm #loading .wm-fill-copy .wm-g2,
html.is-warm #loading .wm-fill-copy .wm-g3 { opacity: 1; transition: opacity .3s var(--ease-out); }
html.is-warm #loading .wm-rule { transform: scaleX(1); transition: transform .3s var(--ease-out); }
html.is-warm #loading .wm-sub { opacity: 1; transform: none; transition: opacity .3s var(--ease-out) .08s; }

@media (prefers-reduced-motion: reduce) {
  #loading::before, #loading::after { animation: none; }
  .wm-lockup { transition: none; }
  html.loaded .wm-lockup { transform: none; }
  #loading .wm-line-copy .wm-lead,
  #loading .wm-line-copy .wm-rest,
  #loading .wm-line-copy .wm-g2,
  #loading .wm-line-copy .wm-g3,
  #loading .wm-fill-copy .wm-lead,
  #loading .wm-fill-copy .wm-rest,
  #loading .wm-fill-copy .wm-g2,
  #loading .wm-fill-copy .wm-g3,
  #loading .wm-rule,
  #loading .wm-sub { animation: none !important; transition: opacity .25s var(--ease-out) !important; }
  #loading .wm-line-copy .wm-lead,
  #loading .wm-line-copy .wm-rest,
  #loading .wm-line-copy .wm-g2,
  #loading .wm-line-copy .wm-g3 { clip-path: inset(0 0 0 0); filter: none; }
  #loading .wm-fill-copy .wm-lead,
  #loading .wm-fill-copy .wm-rest,
  #loading .wm-fill-copy .wm-g2,
  #loading .wm-fill-copy .wm-g3 { opacity: 1; }
  #loading .wm-rule { transform: scaleX(1); }
  #loading .wm-sub { opacity: 1; transform: none; }
}

/* --- Header -------------------------------------------------------------- */

header {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  z-index: 99;
  --hdr-ink: var(--light);
  --hdr-line: var(--line-d2);
  --sec-ink: var(--light);
  --sec-line: var(--line-d);
  --sec-accent-text: var(--orange);
  transition: background .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
/* Over the daylight hero the header ink has to flip, and flip back the moment
   the dark backdrop slides in behind it. */
body.hero-light header:not(.bg-effect) {
  --hdr-ink: var(--navy);
  --hdr-line: rgba(22, 34, 60, .3);
}
header.bg-effect {
  background: rgba(14, 15, 17, .82);
  box-shadow: 0 1px 0 0 var(--line-d);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
header .identity { display: block; line-height: 0; }
header .identity img {
  width: 9.5rem;
  height: auto;
  opacity: 0;
  transform: translateY(-20px);
  transition: var(--reveal);
}
html.loaded header .identity img { opacity: 1; transform: none; transition-delay: .75s; }
html:not(.js) header .identity img { opacity: 1; transform: none; }

header .header-lang-menu-wrap { display: flex; align-items: center; column-gap: 2rem; }
header .header-lang-box { opacity: 0; transform: translateY(-20px); transition: var(--reveal); }
html.loaded header .header-lang-box { opacity: 1; transform: none; transition-delay: .85s; }
html:not(.js) header .header-lang-box { opacity: 1; transform: none; }
header .header-lang-box a { position: relative; display: inline-block; padding-bottom: .5rem; }
header .header-lang-box a span {
  font-family: var(--font-display);
  font-size: .93rem;
  font-weight: 500;
  color: var(--hdr-ink);
  transition: color .3s var(--ease-out);
}
header .header-lang-box a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-out);
  background:
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) left center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) right center / 1.5px 9px no-repeat,
    linear-gradient(var(--sec-accent-text), var(--sec-accent-text)) center / 100% 1.5px no-repeat;
}
header .header-lang-box a:hover::after,
header .header-lang-box a:focus-visible::after { transform: scaleX(1); }
header .header-lang-box a:hover span { color: var(--orange); }

/* The menu control is a hairline box, not a filled slab. */
header #menu {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.9rem;
  column-gap: 2rem;
  padding: 0 1.4rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hdr-line);
  opacity: 0;
  transform: translateY(-20px);
  transition: var(--reveal), box-shadow .35s var(--ease-out), color .3s var(--ease-out);
}
html.loaded header #menu { opacity: 1; transform: none; transition-delay: .95s; }
html:not(.js) header #menu { opacity: 1; transform: none; }
header #menu::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--orange-cta);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
header #menu:hover::after,
header #menu:focus-visible::after { transform: translateY(0); }
header #menu:hover { box-shadow: inset 0 0 0 1px var(--orange-cta); }
header #menu:hover .menu-text span,
header #menu:focus-visible .menu-text span { color: #fff; }
header #menu:hover .menu-span-boxes span,
header #menu:focus-visible .menu-span-boxes span { background-color: #fff; }
header #menu .menu-text { position: relative; z-index: 1; width: 44px; height: 22px; display: block; }
header #menu .menu-text span {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--hdr-ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .3s var(--ease-out);
}
header #menu .menu-text span:last-child { opacity: 0; }
html.op-menu header #menu::after { transform: translateY(0); }
html.op-menu header #menu .menu-text span:first-child { opacity: 0; }
html.op-menu header #menu .menu-text span:last-child { opacity: 1; }

header #menu .menu-span-boxes {
  position: relative;
  z-index: 1;
  width: 30px; height: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
header #menu .menu-span-boxes span {
  position: relative;
  width: 100%; height: 1px;
  display: block;
  background-color: var(--hdr-ink);
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s, background-color .3s var(--ease-out);
}
header #menu .menu-span-boxes span:first-child { width: 60%; }
header #menu:hover .menu-span-boxes span:first-child { width: 100%; }
html.op-menu header #menu .menu-span-boxes span:first-child { width: 100%; transform: translateY(5.5px) rotate(45deg); }
html.op-menu header #menu .menu-span-boxes span:nth-child(2) { opacity: 0; }
html.op-menu header #menu .menu-span-boxes span:last-child { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Menu overlay -------------------------------------------------------- */

#menu-container {
  --sec-bg: var(--night);
  --sec-ink: var(--light);
  --sec-ink-2: var(--light-2);
  --sec-line: var(--line-d);
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0; left: 0;
  z-index: 98;
  background-color: var(--night);
  color: var(--sec-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
html.op-menu #menu-container { opacity: 1; pointer-events: auto; }
#menu-container #menu-bg-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(244, 241, 236, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 236, .05) 1px, transparent 1px),
    linear-gradient(to right, rgba(244, 241, 236, .026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 236, .026) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
}

#menu-container .menu-contact-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 9vh;
  justify-content: space-between;
  column-gap: 4rem;
}
#menu-container nav ul { list-style: none; margin: 0; padding: 0; }
#menu-container nav ul li { line-height: 1.35; }
#menu-container nav ul li p { margin: 0; }
#menu-container nav ul li .menu-item,
#menu-container nav ul li .menu-has-sub-menu {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.035em;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  color: var(--sec-ink);
  padding-bottom: .12em;
  transition: color .3s var(--ease-out);
}
#menu-container nav ul li .menu-item::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  pointer-events: none;
  background: var(--orange);
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease-out);
}
#menu-container nav ul li .menu-item:hover { color: var(--orange); }
#menu-container nav ul li .menu-item:hover::before {
  transform-origin: 0 50%;
  transform: scale3d(1, 1, 1);
}

#menu-container nav ul li.has-sub-menu { position: relative; cursor: pointer; padding-right: 20px; }
#menu-container nav ul li.has-sub-menu::before,
#menu-container nav ul li.has-sub-menu::after {
  content: '';
  position: absolute;
  right: -14px; top: .55em;
  width: 1rem; height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity .3s var(--ease-out);
}
#menu-container nav ul li.has-sub-menu::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23FF7008' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#menu-container nav ul li.has-sub-menu::after {
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16' stroke='%23FF7008' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#menu-container nav ul li.has-sub-menu.change::before { opacity: 0; }
#menu-container nav ul li.has-sub-menu.change::after { opacity: 1; }
#menu-container nav ul li ul.subMenu {
  padding-left: 1.75rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out);
}
#menu-container nav ul li.has-sub-menu.change ul.subMenu { max-height: 16rem; }
#menu-container nav ul li ul.subMenu li { line-height: 1.9; }
#menu-container nav ul li ul.subMenu li .menu-item {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sec-ink-2);
}

#menu-container .menu-contact-info-wrap { text-align: left; flex: 0 0 auto; }
#menu-container .menu-contact-info-wrap > a:not(.btn) {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: .55rem;
  color: var(--sec-ink-2);
  pointer-events: none;
  transition: color .3s var(--ease-out);
}
#menu-container .menu-contact-info-wrap > a:not(.btn):hover { color: var(--orange); }
html.op-menu #menu-container .menu-contact-info-wrap a { pointer-events: auto; }
#menu-container .menu-contact-info-wrap a.btn { margin: 0 0 2rem; text-align: center; }
#menu-container .menu-contact-info-wrap ul {
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  column-gap: .6rem;
}
#menu-container .menu-contact-info-wrap ul li a {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1rem;
  color: var(--sec-ink);
  box-shadow: inset 0 0 0 1px var(--sec-line);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
#menu-container .menu-contact-info-wrap ul li a:hover {
  background: var(--orange-cta);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--orange-cta);
}
#menu-container .menu-contact-info-wrap ul li a svg { width: 1rem; height: 1rem; display: block; }

#menu-container nav ul > li,
#menu-container .menu-contact-info-wrap > * {
  opacity: 0;
  transform: translateY(28px);
  transition: var(--reveal);
}
html.op-menu #menu-container nav ul > li,
html.op-menu #menu-container .menu-contact-info-wrap > * { opacity: 1; transform: none; }
html.op-menu #menu-container nav ul > li:nth-child(1) { transition-delay: .10s; }
html.op-menu #menu-container nav ul > li:nth-child(2) { transition-delay: .16s; }
html.op-menu #menu-container nav ul > li:nth-child(3) { transition-delay: .22s; }
html.op-menu #menu-container nav ul > li:nth-child(4) { transition-delay: .28s; }
html.op-menu #menu-container nav ul > li:nth-child(5) { transition-delay: .34s; }
html.op-menu #menu-container .menu-contact-info-wrap > *:nth-child(1) { transition-delay: .18s; }
html.op-menu #menu-container .menu-contact-info-wrap > *:nth-child(2) { transition-delay: .24s; }
html.op-menu #menu-container .menu-contact-info-wrap > *:nth-child(3) { transition-delay: .30s; }
html.op-menu #menu-container .menu-contact-info-wrap > *:nth-child(4) { transition-delay: .36s; }

html.op-menu body { overflow: hidden; }

/* ==========================================================================
   Hero — daylight

   The render is left at its own brightness and the drawing set is laid back
   over it: grid, levels, dimensions, in navy. Three loops of deliberately
   unrelated length run at once — the photograph pushes over 34s, two gradient
   fields drift over 34s and 47s, the line-work breathes over 19s and the
   dimension stack over 27s — so the background never lands on the same frame
   twice, and there is nothing here to click.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--sand);
  padding-top: var(--header-h);
}

.hero-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-layer { position: absolute; inset: 0; }
/* Framed to carry the house into the top right, which leaves the lower left
   for the copy. */
.hero-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 34%;
  display: block;
  will-change: transform;
}

/* 1 — the push. */
html.js .hero-photo img { transform: scale(1.045); }
html.js.loaded .hero-photo img { animation: heroPush 34s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes heroPush {
  0%   { transform: scale(1.045) translate3d(0, 0, 0); }
  50%  { transform: scale(1.115) translate3d(-1.6%, -1.1%, 0); }
  100% { transform: scale(1.045) translate3d(0, 0, 0); }
}

/* 2 — the wash. Two fields on prime-ish periods, one multiplying the shade
   into the render and one lifting light back out of it. */
.hero-wash {
  position: absolute;
  inset: -22%;
  z-index: 1;
  pointer-events: none;
}
.hero-wash::before,
.hero-wash::after { content: ''; position: absolute; inset: 0; }
.hero-wash::before {
  background:
    radial-gradient(38% 44% at 24% 32%, rgba(22, 34, 60, .34), rgba(22, 34, 60, 0) 70%),
    radial-gradient(42% 38% at 76% 70%, rgba(74, 90, 83, .34), rgba(74, 90, 83, 0) 72%);
  mix-blend-mode: multiply;
  animation: washA 34s ease-in-out infinite;
}
.hero-wash::after {
  background:
    radial-gradient(48% 42% at 64% 20%, rgba(255, 112, 8, .2), rgba(255, 112, 8, 0) 70%),
    radial-gradient(40% 48% at 14% 84%, rgba(244, 241, 236, .55), rgba(244, 241, 236, 0) 68%);
  mix-blend-mode: soft-light;
  animation: washB 47s ease-in-out infinite;
}
@keyframes washA {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1.04); }
  50%      { transform: translate3d(4%, 3%, 0) scale(1.16); }
}
@keyframes washB {
  0%, 100% { transform: translate3d(3.5%, 2%, 0) scale(1.14); }
  50%      { transform: translate3d(-4%, -3.5%, 0) scale(1.02); }
}

/* 3 — the drawing set, breathing over the render. */
.hero-draw {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .38;
}
html.js.loaded .hero-draw { animation: drawBreathe 19s ease-in-out infinite; }
@keyframes drawBreathe {
  0%, 100% { opacity: .15; }
  46%      { opacity: .6; }
}

.draw-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(22, 34, 60, .30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 34, 60, .30) 1px, transparent 1px),
    linear-gradient(to right, rgba(22, 34, 60, .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 34, 60, .13) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
}

.draw-notes { position: absolute; inset: 0; width: 100%; height: 100%; }
.draw-notes line { fill: none; vector-effect: non-scaling-stroke; }
.draw-notes .lvl-line { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 7 7; opacity: .8; }
.draw-notes .dim-stem,
.draw-notes .dim-tick { stroke: var(--orange-cta); stroke-width: 1.2; }
.draw-notes .dim { opacity: .85; }
html.js.loaded .draw-notes .dim { animation: dimBreathe 27s ease-in-out infinite; }
@keyframes dimBreathe {
  0%, 100% { opacity: .3; }
  40%      { opacity: 1; }
}

.draw-labels { position: absolute; inset: 0; }
.lvl-tag {
  position: absolute;
  right: calc(var(--gutter) + 3.4rem);
  top: var(--y);
  transform: translateY(-150%);
  font-size: .62rem;
  letter-spacing: .13em;
  color: var(--navy-2);
  white-space: nowrap;
}
.lvl-tag b { color: var(--orange-ink); font-weight: 500; }

/* --- The wash that guarantees the copy ----------------------------------
   Sand rather than shadow, so the hero stays a daylight photograph and the
   navy still clears contrast wherever the render happens to be dark. */

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(244, 241, 236, .96) 0%, rgba(244, 241, 236, .84) 20%, rgba(244, 241, 236, .26) 40%, rgba(244, 241, 236, 0) 58%),
    linear-gradient(to right, rgba(244, 241, 236, .88) 0%, rgba(244, 241, 236, .3) 26%, rgba(244, 241, 236, 0) 46%),
    linear-gradient(to bottom, rgba(244, 241, 236, .8) 0%, rgba(244, 241, 236, .14) 12%, rgba(244, 241, 236, 0) 22%);
}

/* --- Hero copy ----------------------------------------------------------- */

.hero-copy {
  position: relative;
  z-index: 4;
  padding: 3rem var(--gutter) 2.75rem;
  max-width: 46rem;
}
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--navy);
}

html.js .hero-lead,
html.js .hero-actions {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js.loaded .hero-lead { opacity: 1; transform: none; transition-delay: .25s; }
html.js.loaded .hero-actions { opacity: 1; transform: none; transition-delay: .38s; }

.hero-lead {
  margin: 1.7rem 0 2.5rem;
  max-width: 32rem;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--navy-2);
}
.hero-actions {
  display: flex;
  align-items: center;
  column-gap: .8rem;
  row-gap: .75rem;
  flex-wrap: wrap;
}

.hero-foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  column-gap: 2rem;
  row-gap: .4rem;
  flex-wrap: wrap;
  padding: 1.1rem var(--gutter);
  border-top: 1px solid rgba(22, 34, 60, .2);
  font-size: .66rem;
  letter-spacing: .17em;
  color: var(--navy-3);
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
html.loaded .hero-foot { opacity: 1; transition-delay: .65s; }
html:not(.js) .hero-foot { opacity: 1; }
.hero-foot .hf-name { color: var(--navy); }
.hero-foot .hf-status { margin-left: auto; color: var(--orange-ink); }

/* ==========================================================================
   About — was the full-bleed orange slab, now the deep eucalyptus band
   ========================================================================== */

section.orange-container {
  position: relative;
  padding-top: var(--sec-pad);
  padding-bottom: var(--sec-pad);
  z-index: 1;
  overflow: hidden;
}
section.orange-container .back-overlay { display: none; }
section.orange-container .columnTwoWrapper {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 52fr);
  align-items: center;
  column-gap: 5vw;
}
section.orange-container .columnWrapOne,
section.orange-container .columnWrapTwo { width: auto; }
section.orange-container .text-wrap h2 { margin: 0; }
section.orange-container .text-wrap .content { margin-top: 2.5rem; }
section.orange-container .text-wrap .content h5 { margin: 0 0 1.4rem; color: var(--sec-ink); }
section.orange-container .text-wrap .content p { color: var(--sec-ink-2); }
section.orange-container .media-wrap { position: relative; }
section.orange-container .media-wrap img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow:
    0 2px 4px rgba(6, 10, 8, .3),
    0 18px 40px -14px rgba(6, 10, 8, .5),
    0 48px 90px -34px rgba(6, 10, 8, .6);
}

/* ==========================================================================
   Why build with us
   ========================================================================== */

section.home-framework-container { position: relative; overflow: hidden; }
section.home-framework-container .circle-frame-wrap { display: none; }
section.home-framework-container .framework-wrapper { position: relative; width: 100%; }
section.home-framework-container .framework-wrapper.twoColWrapper {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 55fr);
  align-items: center;
  column-gap: 5vw;
}
section.home-framework-container .framework-wrapper.twoColWrapper .colOneWrap,
section.home-framework-container .framework-wrapper.twoColWrapper .colTwoWrap { width: auto; position: relative; }
section.home-framework-container .framework-wrapper h3 { margin: 0; line-height: 1.2; font-size: clamp(1.4rem, 2.1vw, 2rem); }
section.home-framework-container .framework-wrapper .content { margin-top: 2rem; }
section.home-framework-container .framework-wrapper .content p { color: var(--sec-ink-2); }
section.home-framework-container .framework-wrapper .content p strong { color: var(--sec-ink); }
section.home-framework-container .framework-wrapper img {
  width: 100%; height: auto; display: block;
  box-shadow:
    0 2px 4px rgba(58, 46, 28, .08),
    0 14px 32px -12px rgba(58, 46, 28, .18),
    0 40px 76px -30px rgba(58, 46, 28, .26);
}

section.home-framework-container .reason-grid {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.5rem;
  row-gap: 3rem;
}
/* A corner bracket, in place of the short orange bar that used to sit here. */
section.home-framework-container .reason {
  position: relative;
  padding-top: 1.9rem;
  border-top: 1px solid var(--sec-line);
}
section.home-framework-container .reason::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 18px; height: 18px;
  border-top: 1.5px solid var(--orange);
  border-left: 1.5px solid var(--orange);
}
section.home-framework-container .reason h4 { margin: 0 0 .8rem; }
section.home-framework-container .reason p { margin: 0; color: var(--sec-ink-2); font-size: .95rem; }

/* ==========================================================================
   Process — the dark anchor

   The rail is the through-line: it fills as the section passes the middle of
   the screen, and each stage draws itself as its node lights. Scroll back up
   and every stage resets, so the sequence can be watched again.
   ========================================================================== */

section.home-timeline-container {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
}
section.home-timeline-container .circle-frame-wrap { display: none; }
section.home-timeline-container .time-line-wrapper {
  --rail: 0;
  position: relative;
  width: 62%;
  margin: 0 auto;
  display: block;
}
section.home-timeline-container .rail {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line-d2);
}
section.home-timeline-container .rail-fill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform-origin: top center;
  transform: scaleY(var(--rail));
  box-shadow: 0 0 14px rgba(255, 112, 8, .45);
}
html:not(.js) section.home-timeline-container .rail-fill { transform: scaleY(1); }

section.home-timeline-container .time-line-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 3.5rem;
}
section.home-timeline-container .time-line-wrap:last-child { margin: 0; }
section.home-timeline-container .time-line-wrap:nth-of-type(2n) { flex-direction: row-reverse; }

section.home-timeline-container .time-line-wrap .logo {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1.25rem;
  padding-right: 2.5rem;
}
section.home-timeline-container .time-line-wrap:nth-of-type(2n) .logo {
  justify-content: flex-end;
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 2.5rem;
}
section.home-timeline-container .step-icon {
  width: 3.5rem; height: 3.5rem;
  flex: 0 0 auto;
  stroke-width: 1.25;
  color: var(--orange);
}
section.home-timeline-container .stage-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #34393E;
  display: block;
  transition: color .6s var(--ease-out);
}
section.home-timeline-container .step.is-in .stage-num { color: #4A5157; }

section.home-timeline-container .time-line-wrap .time-line-info { width: 50%; padding: 0 2.5rem; }
section.home-timeline-container .time-line-wrap:nth-of-type(2n) .time-line-info { text-align: right; }
section.home-timeline-container .time-line-wrap .time-line-info > .node {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(.2);
  width: 9px; height: 9px;
  background: var(--orange);
  opacity: 0;
  transition: transform .5s var(--ease-out) .18s, opacity .4s var(--ease-out) .18s, box-shadow .5s var(--ease-out) .18s;
}
section.home-timeline-container .step.is-in .time-line-info > .node {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  box-shadow: 0 0 0 4px var(--night), 0 0 18px rgba(255, 112, 8, .55);
}
section.home-timeline-container .time-line-wrap .time-line-info .content { position: relative; padding-top: 0; }
section.home-timeline-container .time-line-wrap .time-line-info .content h3 { margin: 0 0 .65rem; font-size: 1.22rem; }
section.home-timeline-container .time-line-wrap .time-line-info .content p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sec-ink-2);
}

/* One stage, one small sequence: the mark draws, the number lifts, the text
   follows. Repeatable, because nothing here is a one-shot animation. */
html.js .step .logo,
html.js .step .content {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
html.js .step .content { transition-delay: .13s; }
html.js .step.is-in .logo,
html.js .step.is-in .content { opacity: 1; transform: none; }

/* ==========================================================================
   Portfolio
   ========================================================================== */

section.home-projects-container {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
}
section.home-projects-container .project-show {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--night-3);
  outline: 1px solid var(--sec-line);
}
section.home-projects-container .project-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
section.home-projects-container .project-slide.is-active { opacity: 1; }
section.home-projects-container .project-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  transition: transform 8s linear;
}
section.home-projects-container .project-slide.is-active img { transform: scale(1); }

section.home-projects-container .project-caps { position: relative; margin-top: 2.2rem; }
section.home-projects-container .project-cap {
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 3rem;
  row-gap: 1.25rem;
  flex-wrap: wrap;
}
section.home-projects-container .project-cap.is-active { display: flex; }
section.home-projects-container .project-cap h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0; }
section.home-projects-container .project-cap .addr {
  margin: .6rem 0 0;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--sec-ink-2);
  font-size: .94rem;
}
section.home-projects-container .project-cap .addr svg { width: .95rem; height: .95rem; flex: 0 0 auto; color: var(--orange); }
section.home-projects-container .project-cap .cap-actions { display: flex; align-items: center; column-gap: 1.5rem; }

.chip {
  display: inline-block;
  padding: .42rem .8rem;
  font-size: .64rem;
  letter-spacing: .15em;
  color: var(--sec-accent-text);
  box-shadow: inset 0 0 0 1px rgba(255, 112, 8, .42);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  color: var(--sec-ink);
  transition: color .3s var(--ease-out);
}
.link-arrow svg { width: 1.05rem; height: 1.05rem; transition: transform .35s var(--ease-out); }
.link-arrow:hover { color: var(--sec-accent-text); }
.link-arrow:hover svg { transform: translateX(5px); }

section.home-projects-container .project-dots {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .6rem;
}
.dot {
  width: 42px; height: 1px;
  background: var(--sec-line);
  cursor: pointer;
  padding: 12px 0;
  background-clip: content-box;
  transition: background-color .3s var(--ease-out);
}
.dot.is-active, .dot.is-active:hover { background-color: var(--orange); }
.dot:hover { background-color: var(--sec-ink-3); }

section.home-projects-container .all-projects { margin-top: 2.5rem; text-align: center; }

/* ==========================================================================
   What we do
   ========================================================================== */

section.home-functional-container {
  position: relative;
  width: 100%;
  display: block;
}
section.home-functional-container .functional-wrapper { position: relative; width: 100%; display: block; }
section.home-functional-container .tab-slider-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  column-gap: 1rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--sec-line);
}
section.home-functional-container .tab-track {
  width: 100%;
  display: flex;
  overflow: hidden;
}
section.home-functional-container .tab-title {
  margin: 0;
  position: relative;
  cursor: pointer;
  flex: 0 0 33.3333%;
  text-align: left;
  display: flex;
  align-items: baseline;
  column-gap: .7rem;
  white-space: nowrap;
  padding-bottom: 1.4rem;
}
section.home-functional-container .tab-title span:last-child {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sec-ink-2);
  transition: color .3s var(--ease-out);
}
section.home-functional-container .tab-title span:first-child {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--sec-ink-3);
  transition: color .3s var(--ease-out);
}
section.home-functional-container .tab-title.active span:last-child { color: var(--sec-ink); }
section.home-functional-container .tab-title.active span:first-child { color: var(--sec-accent-text); }
section.home-functional-container .tab-title:hover span { color: var(--sec-accent-text); }
section.home-functional-container .tab-title::before {
  content: '';
  position: absolute;
  width: 0; height: 2px;
  bottom: -1px; left: 0;
  background-color: var(--orange);
  transition: width .5s var(--ease-out);
}
section.home-functional-container .tab-title.active::before { width: 100%; }
section.home-functional-container .slider-arrow { margin-top: .35rem; }

section.home-functional-container .panel-stack { position: relative; }
section.home-functional-container .functional-panel { opacity: 0; transition: opacity .5s var(--ease-out); }
section.home-functional-container .functional-panel.active { opacity: 1; }

section.home-functional-container .functional-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section.home-functional-container .functional-info-mobile { display: none; }
section.home-functional-container .functional-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 4vw;
}
/* The mark sits inside corner brackets, the same crop marks the rest of the
   page uses, at the size a photograph used to occupy. */
section.home-functional-container .functional-mark {
  width: 40%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sec-ink);
}
section.home-functional-container .mark-frame {
  position: relative;
  display: block;
  padding: 1.6rem;
}
section.home-functional-container .mark-frame::before,
section.home-functional-container .mark-frame::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 44px; height: 44px;
  border: 1.5px solid var(--orange);
  pointer-events: none;
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .5s var(--ease-out);
}
section.home-functional-container .mark-frame::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
  transform: translate(12px, 12px);
}
section.home-functional-container .mark-frame::after {
  bottom: 0; right: 0;
  border-left: 0; border-top: 0;
  transform: translate(-12px, -12px);
}
section.home-functional-container .functional-panel.active .mark-frame::before,
section.home-functional-container .functional-panel.active .mark-frame::after {
  opacity: 1;
  transform: translate(0, 0);
}
section.home-functional-container .svc-icon {
  width: clamp(9rem, 13vw, 12.5rem);
  height: auto;
  stroke-width: 1.1;
}
/* The panel is what arrives, so it is what triggers the draw. */
html.js .functional-panel .icon-line [pathLength] { stroke-dashoffset: 1; }
html.js .functional-panel.active .icon-line [pathLength] { stroke-dashoffset: 0; }
html.js .functional-panel .icon-line .dash { opacity: 0; }
html.js .functional-panel.active .icon-line .dash { opacity: .8; }

section.home-functional-container .functional-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 52%;
}
section.home-functional-container .functional-info > span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sec-ink-3);
  display: block;
}
section.home-functional-container .functional-info .info h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); margin: 1.5rem 0 1.1rem; }
section.home-functional-container .functional-info .info .content p { margin: 0; color: var(--sec-ink-2); }

/* ==========================================================================
   Contact — one place, not two

   The question and the form used to be separate sections asking the same
   thing. They are one now: the render carries the headline, the form sits
   directly under it on solid ground, and Send is the last thing on the page
   before the footer.
   ========================================================================== */

section.contact-container { position: relative; width: 100%; display: block; }

/* The short call to action the portfolio pages end on. */
section.page-cta { position: relative; width: 100%; display: block; text-align: center; }

.contact-band {
  position: relative;
  width: 100%;
  min-height: 62vh;
  display: block;
  overflow: hidden;
  --sec-ink: #fff;
  --sec-line: rgba(255, 255, 255, .28);
}
.contact-band .contact-photo { position: absolute; inset: 0; z-index: 0; }
.contact-band .contact-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* A graded wash for legibility, then a cool pass so the render sits in the
   same colour world as the rest of the page. */
.contact-band .contact-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(20 26 24 / 55%);
  background-image: radial-gradient(ellipse at center, rgba(6, 10, 8, .5) 0%, rgba(6, 10, 8, .1) 72%);
}
.contact-band .contact-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(14, 15, 17, .5) 0%, rgba(14, 15, 17, 0) 34%, rgba(244, 241, 236, .18) 88%, rgba(244, 241, 236, .5) 100%);
}
.contact-band .contact-band-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.contact-band .title { width: min(46rem, 100%); margin: 0; }
.contact-band .title h2 {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -.038em;
  line-height: 1.06;
  color: #fff;
}
.contact-band .title h2::after { display: none; }

.contact-form-wrap {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 4.5rem;
}

/* The frame sits tight around the form itself, not the full-bleed section —
   a border out at the section's own edges reads as a page margin on a wide
   viewport, not as a border around the query box. Everything inside the
   border runs on the night tone, so the ink flips to light-on-dark; the
   white fields still hold their own contrast whichever ground sits behind
   them, so they need no separate treatment here.

   The card carries two columns — the form, and a short info panel with the
   one thing a form alone can't give you: another way to reach us. The M
   mark sits behind both as a watermark, not off to the side, so the card
   reads as one composed panel instead of a form with empty room around it. */
.form-card {
  --sec-bg: var(--night);
  --sec-ink: var(--light);
  --sec-ink-2: var(--light-2);
  --sec-ink-3: var(--light-3);
  --sec-line: var(--line-d);
  --sec-accent-text: var(--orange);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 3.5rem clamp(1.5rem, 4vw, 4rem);
  border: 8px solid var(--night);
  background: var(--sec-bg);
  color: var(--sec-ink);
}
.form-col { position: relative; z-index: 1; flex: 1 1 28rem; min-width: 0; }
.contact-form-wrap form { width: 100%; margin: 0; }

.info-col {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding-top: 2.5rem;
  border-top: 1px solid var(--sec-line);
}
.info-col .info-eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sec-accent-text);
}
.info-col h3 {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--sec-ink);
}
.info-col .info-lead {
  margin: 0 0 1.8rem;
  max-width: 26rem;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--sec-ink-2);
}
.info-col .info-links { display: flex; flex-direction: column; row-gap: .6rem; }
.info-col .info-links a {
  color: var(--sec-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sec-line);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.info-col .info-links a:hover,
.info-col .info-links a:focus-visible { color: var(--sec-accent-text); border-color: var(--sec-accent-text); }

@media (min-width: 900px) {
  .form-card { flex-direction: row; column-gap: 3.5rem; }
  .info-col {
    flex: 0 0 20rem;
    padding-top: 0;
    padding-left: 3.5rem;
    border-top: 0;
    border-left: 1px solid var(--sec-line);
  }
}

/* A big, faded M — the same mark drawn in the site's favicon, at monument
   scale — with the same photograph used behind the band above showing
   through its strokes. Sits behind the two columns as a watermark, so it
   reads as texture rather than competing with the form or the info panel.
   A dark wash sits under the photo so the mark reads whatever tone shows
   through it, and stays faint enough not to fight the text sitting over it. */
.form-mark {
  position: absolute;
  z-index: 0;
  right: -3rem;
  bottom: -3rem;
  width: 28rem;
  height: 28rem;
  background:
    linear-gradient(rgba(14, 15, 17, .55), rgba(14, 15, 17, .55)),
    url('/Assets/img/cta.jpg') center / cover;
  opacity: .16;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 46V18l11 14 11-14v28' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 54h48' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 46V18l11 14 11-14v28' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 54h48' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}
@media (min-width: 1200px) { .form-mark { width: 34rem; height: 34rem; right: -4rem; bottom: -4rem; } }

.field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.field { margin-bottom: 1.9rem; }
.field label {
  display: block;
  margin-bottom: .55rem;
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--sec-ink-2);
}
.field label span { text-transform: none; letter-spacing: .02em; color: var(--sec-ink-3); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--line-l2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: #E4574A; box-shadow: 0 0 0 1px #E4574A inset; }
/* Sits directly on the card's night ground, not inside the white box, so
   it needs a red that holds up on dark rather than the #96261C tuned for
   light grounds elsewhere on the page. */
.field .field-error { display: none; margin: .5rem 0 0; font-size: .85rem; color: #FF6B5B; }
.field.is-invalid .field-error { display: block; }

/* The select keeps the same white box as every other field. The chevron
   is a background image on the select itself — not a pseudo-element pinned
   to the field's bottom edge — so it stays centred on the box even when an
   error message appears below and pushes the field taller. */
.field-select { position: relative; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FF7008' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.field select:invalid { color: var(--ink-3); }
/* Native option popups render with their own (light) system background
   regardless of the field's own fill, so their text stays dark. */
.field select option { color: var(--ink); }

.form-foot { display: flex; align-items: center; margin-top: .5rem; }
.btn-send { min-width: 12rem; letter-spacing: .14em; text-transform: uppercase; }
.form-status { margin: 1.5rem 0 0; font-size: .95rem; font-weight: 500; }
.form-status.ok { color: var(--sec-accent-text); }
.form-status.bad { color: #FF6B5B; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer { position: relative; width: 100%; display: block; }

footer .bottom-footer {
  position: relative;
  width: 100%;
  display: block;
}
footer .bottom-footer .footer-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  column-gap: 6rem;
}
footer .bottom-footer .footer-about-links-wrap { flex: 3; }
footer .bottom-footer .footer-menu-wrap { flex: 1; margin-top: 3.5rem; }
footer .bottom-footer .footer-contact-wrap { flex: 2; margin-top: 3.5rem; }

footer .bottom-footer .footer-about-wrap { position: relative; width: 100%; display: block; margin-bottom: 3.5rem; }
footer .bottom-footer .footer-about-wrap .footer-identity { position: relative; width: 100%; display: block; line-height: 0; }
footer .bottom-footer .footer-about-wrap .footer-identity img { width: 12rem; height: auto; }
footer .bottom-footer .footer-about-wrap .content { margin-top: 1.75rem; max-width: 28rem; }
footer .bottom-footer .footer-about-wrap .content p { color: var(--sec-ink-2); margin: 0; font-size: .95rem; }
footer .bottom-footer .footer-about-wrap .founded {
  margin-top: 1.4rem;
  font-size: .66rem;
  letter-spacing: .17em;
  color: var(--orange);
  display: block;
}

footer .bottom-footer .footer-links-wrap ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .4rem; }
footer .bottom-footer .footer-links-wrap ul li a {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--sec-ink-2);
  transition: color .3s var(--ease-out);
}
footer .bottom-footer .footer-links-wrap ul li a:hover { color: var(--orange); }

footer .bottom-footer .footer-menu-wrap ul { list-style: none; margin: 0; padding: 0; }
footer .bottom-footer .footer-menu-wrap ul li { line-height: 1.45; margin-bottom: .6rem; }
footer .bottom-footer .footer-menu-wrap ul li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  transition: color .3s var(--ease-out);
}
footer .bottom-footer .footer-menu-wrap ul li a:hover { color: var(--orange); }

footer .bottom-footer .footer-contact-wrap .footer-contact-info a {
  margin-bottom: 1.25rem;
  display: block;
  line-height: 1.55;
  font-size: .95rem;
  color: var(--sec-ink-2);
  transition: color .3s var(--ease-out);
}
footer .bottom-footer .footer-contact-wrap .footer-contact-info a:hover { color: var(--orange); }
footer .bottom-footer .footer-contact-wrap .footer-contact-info a.email { color: var(--sec-ink); }

footer .bottom-footer .contact-buttons {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: flex;
  align-items: center;
  column-gap: .6rem;
  flex-wrap: wrap;
  row-gap: .6rem;
}
footer .bottom-footer .contact-buttons li a {
  display: inline-flex;
  align-items: center;
  column-gap: .55rem;
  padding: .65rem 1.1rem;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 500;
  color: var(--sec-ink);
  box-shadow: inset 0 0 0 1px var(--sec-line);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
footer .bottom-footer .contact-buttons li a svg { width: 1.02rem; height: 1.02rem; color: var(--orange); transition: color .3s var(--ease-out); }
footer .bottom-footer .contact-buttons li a:hover {
  background: var(--orange-cta);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--orange-cta);
}
footer .bottom-footer .contact-buttons li a:hover svg { color: #fff; }

footer .bottom-footer .footer-contact-wrap .dokmehCopyRight {
  display: block;
  color: var(--sec-ink-3);
  font-size: .64rem;
  letter-spacing: .13em;
}

/* ==========================================================================
   Portfolio pages
   ========================================================================== */

.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: 4rem;
  overflow: hidden;
  background: var(--sec-bg);
}
.page-hero .circle-frame-wrap { display: none; }
.page-hero h1 { margin: 0; position: relative; display: block; max-width: 18ch; }
.page-hero .lead { margin: 1.6rem 0 0; max-width: 36rem; color: var(--sec-ink-2); font-size: 1.04rem; }

.page-hero .meta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
}
.page-hero .meta .addr {
  margin: 0;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--sec-ink-2);
  font-size: .95rem;
}
.page-hero .meta .addr svg { width: .95rem; height: .95rem; color: var(--orange); }
.credits { margin-top: 2.25rem; display: flex; column-gap: 3rem; row-gap: 1rem; flex-wrap: wrap; }
.credits div span {
  display: block;
  font-size: .64rem;
  letter-spacing: .15em;
  color: var(--sec-ink-3);
  margin-bottom: .35rem;
}
.credits div b { font-family: var(--font-display); font-weight: 600; color: var(--sec-ink); }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; row-gap: 4rem; }
.pcard { position: relative; display: block; }
.pcard .pcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--night-3);
}
.pcard .pcard-media::before,
.pcard .pcard-media::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 34px; height: 34px;
  border: 1.5px solid var(--orange);
  pointer-events: none;
  transition: transform .55s var(--ease-out);
}
.pcard .pcard-media::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.pcard .pcard-media::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.pcard:hover .pcard-media::before { transform: translate(-6px, -6px); }
.pcard:hover .pcard-media::after { transform: translate(6px, 6px); }
.pcard .pcard-media .media { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.pcard .pcard-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-out);
}
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard .pcard-tag {
  margin: 1.75rem 0 .6rem;
  font-size: .64rem;
  letter-spacing: .15em;
  color: var(--sec-ink-3);
}
.pcard h2 { font-size: 1.42rem; margin: 0 0 .5rem; }
.pcard h2::after { display: none; }
.pcard .addr {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  color: var(--sec-ink-2);
  font-size: .93rem;
}
.pcard .addr svg { width: .9rem; height: .9rem; flex: 0 0 auto; color: var(--orange); }
.pcard .pcard-foot { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; flex-wrap: wrap; row-gap: .75rem; }

.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 2rem;
  /* Heading, frame and caption share one width so the block reads as a column. */
  max-width: var(--gframe-max-w);
  margin-inline: auto;
  border-bottom: 1px solid var(--sec-line);
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
}
.gallery-head h2 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); margin: 0; }
.gallery-head h2::after { display: none; }
.gallery-head .count {
  margin: 0;
  font-size: .66rem;
  letter-spacing: .15em;
  color: var(--sec-ink-3);
  white-space: nowrap;
}
.gframe {
  position: relative;
  width: 100%;
  /* Width, not height, is capped: shrinking the frame keeps the 16/9 ratio
     intact so nothing is cropped further than object-fit already does. */
  max-width: var(--gframe-max-w);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night-3);
  outline: 1px solid var(--sec-line);
}
.gslide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease-out); }
.gslide.is-active { opacity: 1; }
.gslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfoot {
  position: relative;
  z-index: 2;
  /* Track the frame's width so caption and controls stay flush with the image. */
  max-width: var(--gframe-max-w);
  margin-inline: auto;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
}
.gfoot .gcaption { margin: 0; color: var(--sec-ink-2); font-size: .95rem; }
.gfoot .gnav { display: flex; align-items: center; column-gap: 1.25rem; flex: 0 0 auto; }
.gfoot .gcount {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--sec-ink-3);
}
.gfoot .gcount b { color: var(--sec-ink); font-weight: 500; }
.gbtn {
  width: 2.7rem; height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sec-ink);
  box-shadow: inset 0 0 0 1px var(--sec-line);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s var(--ease-out);
}
.gbtn svg { width: 1.1rem; height: 1.1rem; }
.gbtn:hover { background: var(--orange-cta); box-shadow: inset 0 0 0 1px var(--orange-cta); color: #fff; }

.coming-soon {
  padding: 4rem 2rem;
  text-align: center;
  border: 1px dashed var(--sec-line);
  color: var(--sec-ink-3);
  font-family: var(--font-display);
  font-weight: 500;
}

/* Portfolio pages carry no tone class of their own, so they take the night
   ground the identity is built on. */
body[data-pagetype="portfolio"],
body[data-pagetype="project"] {
  --sec-bg: var(--night);
  --sec-ink: var(--light);
  --sec-ink-2: var(--light-2);
  --sec-ink-3: var(--light-3);
  --sec-line: var(--line-d);
  --sec-accent-text: var(--orange);
  background: var(--night);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (max-width: 1400px) {
  :root { --sec-pad: 6.5rem; }
  section.home-timeline-container .time-line-wrapper { width: 74%; }
}

@media only screen and (min-width: 769px) and (max-width: 1199px) {
  :root { --gutter: 6vw; --sec-pad: 5.5rem; }
  section.home-timeline-container .time-line-wrapper { width: 92%; }
  section.home-framework-container .reason-grid { margin-top: 4rem; column-gap: 2rem; }
  footer .bottom-footer .footer-container { column-gap: 3rem; }
  .portfolio-grid { column-gap: 1.5rem; }
}

@media only screen and (max-width: 1099px) {
  .hero-copy { max-width: none; }
  .lvl-tag { right: calc(var(--gutter) + 2rem); }
}

@media only screen and (max-width: 768px) {
  :root { --gutter: 20px; --sec-pad: 4.5rem; --header-h: 4.5rem; }

  .padding-TB-mini { padding-top: 3rem; padding-bottom: 3rem; }
  .title { margin-bottom: 3rem; }
  .title .lead { font-size: .95rem; }

  header .identity img { width: 7.5rem; }
  header .header-lang-menu-wrap { column-gap: 1rem; }
  header .header-lang-box { display: none; }
  header #menu { column-gap: 1rem; height: 2.6rem; padding: 0 1rem; }
  header #menu .menu-text { width: 40px; }
  header #menu .menu-text span { font-size: .7rem; }

  #menu-container { overflow: hidden; overflow-y: auto; }
  #menu-container .menu-contact-wrap { display: block; padding-top: 15vh; padding-bottom: 6vh; }
  #menu-container nav ul li ul.subMenu { padding-left: 1.25rem; }
  #menu-container .menu-contact-info-wrap { display: block; margin-top: 2.5rem; }
  #menu-container .menu-contact-info-wrap a.btn { display: block; margin: 0 0 1.25rem; font-size: .95rem; }
  #menu-container .menu-contact-info-wrap ul { margin-top: 1.25rem; }

  /* A phone sees only a fifth of this render's width, so the crop has to be
     re-centred on the house or it lands on boundary wall. */
  .hero-layer img { object-position: 52% 36%; }
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(244, 241, 236, .98) 0%, rgba(244, 241, 236, .93) 44%, rgba(244, 241, 236, .32) 72%, rgba(244, 241, 236, 0) 88%),
      linear-gradient(to bottom, rgba(244, 241, 236, .92) 0%, rgba(244, 241, 236, .24) 16%, rgba(244, 241, 236, 0) 26%);
  }
  .hero-copy { padding: 2rem var(--gutter) 2rem; }
  .hero-lead { margin: 1.4rem 0 1.9rem; font-size: 1.02rem; }
  .hero .btn { font-size: .94rem; padding: .95rem 1.5rem; }
  .hero-foot { font-size: .58rem; column-gap: 1rem; padding: .9rem var(--gutter); }
  .hero-foot .hf-status { margin-left: 0; }
  .lvl-tag { display: none; }
  .draw-grid { background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; }

  section.orange-container .columnTwoWrapper { grid-template-columns: 1fr; row-gap: 2.5rem; }

  section.home-framework-container .framework-wrapper.twoColWrapper { grid-template-columns: 1fr; row-gap: 2.5rem; }
  section.home-framework-container .framework-wrapper .content { margin-top: 1.5rem; }
  section.home-framework-container .reason-grid { margin-top: 3.5rem; grid-template-columns: 1fr; row-gap: 2.25rem; }

  /* A phone cannot alternate sides, so the timeline folds to one column and
     the rail moves to the left gutter, threading straight through the marks.
     The mark becomes the station; the diamond node is not needed. */
  section.home-timeline-container .time-line-wrapper { width: 100%; }
  section.home-timeline-container .rail { left: 1.5rem; transform: none; }
  section.home-timeline-container .time-line-wrap { flex-wrap: nowrap; margin-bottom: 2.75rem; align-items: flex-start; }
  section.home-timeline-container .time-line-wrap:nth-of-type(2n) { flex-direction: row; }
  section.home-timeline-container .time-line-wrap .logo,
  section.home-timeline-container .time-line-wrap:nth-of-type(2n) .logo {
    position: relative;
    z-index: 1;
    width: auto;
    flex: 0 0 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: .3rem;
    column-gap: 0;
    padding: .4rem 1.25rem .4rem 0;
    background:
      linear-gradient(var(--night), var(--night)) left top / 3rem 100% no-repeat;
  }
  section.home-timeline-container .step-icon { width: 2.25rem; height: 2.25rem; }
  section.home-timeline-container .stage-num { font-size: 1.5rem; }
  section.home-timeline-container .time-line-wrap .time-line-info { width: auto; flex: 1; padding: 0 0 0 .5rem; }
  section.home-timeline-container .time-line-wrap:nth-of-type(2n) .time-line-info { text-align: left; }
  section.home-timeline-container .time-line-wrap .time-line-info > .node { display: none; }

  section.home-projects-container .project-show { aspect-ratio: 4 / 3; }
  section.home-projects-container .project-caps { margin-top: 1.75rem; }
  section.home-projects-container .project-cap .cap-actions { column-gap: 1rem; }
  section.home-projects-container .project-dots { margin-top: 2rem; }

  section.home-functional-container { padding-bottom: 2rem; }
  section.home-functional-container .tab-slider-wrapper { display: none; }
  section.home-functional-container .functional-panel { display: block; opacity: 1; margin-bottom: 2.5rem; }
  section.home-functional-container .functional-panel[hidden] { display: block; }
  section.home-functional-container .functional-box { flex-wrap: wrap; margin-bottom: 1rem; }
  section.home-functional-container .functional-wrap { display: block; }
  section.home-functional-container .functional-info-mobile {
    display: flex;
    column-gap: .7rem;
    align-items: baseline;
    margin-bottom: 1rem;
  }
  section.home-functional-container .functional-info-mobile span:last-child { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
  section.home-functional-container .functional-info-mobile span:first-child { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; color: var(--sec-accent-text); }
  section.home-functional-container .functional-mark { width: 100%; min-height: 0; padding: 2.25rem 0; margin-bottom: 1.5rem; }
  section.home-functional-container .mark-frame::before,
  section.home-functional-container .mark-frame::after { opacity: 1; transform: none; width: 30px; height: 30px; }
  section.home-functional-container .mark-frame { padding: 1.6rem; }
  section.home-functional-container .svc-icon { width: 7.5rem; }
  /* All three panels are stacked and visible at once on mobile, not tab-switched,
     so the draw-in must not stay gated behind the desktop tab's .active class. */
  html.js section.home-functional-container .functional-panel .icon-line [pathLength] { stroke-dashoffset: 0; }
  html.js section.home-functional-container .functional-panel .icon-line .dash { opacity: .8; }
  section.home-functional-container .functional-info { width: 100%; padding-bottom: 0; }
  section.home-functional-container .functional-info > span,
  section.home-functional-container .functional-info .info h3 { display: none; }

  .contact-band, .contact-band .contact-band-inner { min-height: 0; }
  .contact-band .contact-band-inner { padding: 5rem 0; }
  .form-card { border-width: 5px; padding: 2.25rem 1.25rem; }
  .contact-form-wrap form { width: 100%; }
  .field-row { grid-template-columns: 1fr; column-gap: 0; }
  .btn-send { width: 100%; }

  .page-hero { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 2.5rem; }
  .portfolio-grid { grid-template-columns: 1fr; row-gap: 3rem; }
  /* Frame turns 4/3 here, so the width cap has to follow the new ratio. */
  :root { --gframe-max-w: max(30rem, calc(var(--gframe-max-h) * 4 / 3)); }
  .gframe { aspect-ratio: 4 / 3; }

  footer .bottom-footer .footer-container { flex-wrap: wrap; row-gap: 2.5rem; column-gap: 0; }
  footer .bottom-footer .footer-about-links-wrap,
  footer .bottom-footer .footer-menu-wrap,
  footer .bottom-footer .footer-contact-wrap { flex: 0 0 100%; margin-top: 0; }
  footer .bottom-footer .footer-about-wrap { margin-bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gs_reveal, .mBox, .fadeImage { opacity: 1; transform: none; }
  .splitText .line > span { transform: none; }
  .title h2::after,
  section.orange-container .text-wrap h2::after { transform: scaleX(1); }
  header .identity img,
  header .header-lang-box,
  header #menu { opacity: 1; transform: none; }
  /* Everything arrives already drawn. */
  .hero-foot { opacity: 1; }
  .icon-line [pathLength] { stroke-dashoffset: 0 !important; }
  .icon-line .dash { opacity: .8 !important; }
  .step .logo, .step .content, .step .node { opacity: 1 !important; transform: none !important; }
  .rail-fill { transform: scaleY(1) !important; }
  section.home-projects-container .project-slide img { transform: none; }
}