/* foyla home page, pinned variant.
   One stylesheet, in page order. The layout is ordinary document flow at every
   size and all motion is additive (opacity / transform / colour). On desktop
   screens sections 01 to 03 become pinned pages that the scroll plays piece by
   piece (see "Pinned pages"); phones, tablets, reduced motion and no-JavaScript
   keep the plain flow. Scrolling is always the browser's own. */

/* ---------- Tokens ---------- */
:root {
  --paper: #f7f7f4;
  --ink: #191c1d;
  --dark: #15191b;
  --white: #F3F2ED;
  --silver: #C7C8C5;
  --muted: #969A98;
  --rule: #4b5356;
  --field-rule: #657073;
  --gutter: clamp(1.5rem, 4.3vw, 5.5rem);
  --edge: max(var(--gutter), calc((100% - 1680px) / 2)); /* frame inset as padding, for full-bleed blocks */
  --bar: 80px;
  --fade: clamp(110px, 16vh, 200px);
  --title: clamp(1.8rem, 3vw, 3.25rem);
  --body: 1.125rem;
  --label: .875rem;
  --section-pad: clamp(3rem, 6vw, 6rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1100px) { :root { --section-pad: clamp(5.5rem, 13vh, 9rem); } }
@media (max-width: 700px) { :root { --gutter: 1.5rem; --bar: 72px; --fade: 0px; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); scrollbar-gutter: stable; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
p { font-size: 1.125rem; line-height: 1.55; letter-spacing: -.015em; }
[hidden] { display: none !important; }
main section:focus { outline: none; } /* sections are focused by script after a menu jump, to move the keyboard position */
.frame { width: calc(100% - var(--gutter) * 2); max-width: 1680px; margin-inline: auto; }
.skip { position: fixed; z-index: 300; top: -5rem; left: 0; padding: 1rem; background: var(--paper); color: var(--ink); }
.skip:focus { top: .5rem; }
main { padding-top: var(--bar); }
@media (max-width: 700px) { p { font-size: 1.0625rem; } }

/* ---------- Masthead ----------
   Fixed bar. Its colour is one gradient whose dark edge (--front, set on scroll)
   travels up through the bar together with the dark section beneath it. Bar and
   soft fade are a single painted layer, so there is no seam between them. The
   fade only appears once the page has moved (--veil), so it never sits on top
   of the headline at rest. */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 200;
  display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem;
  height: var(--bar); padding-inline: var(--edge);
  --header-ink: var(--ink);
}
.masthead.on-dark { --header-ink: var(--silver); }
.masthead::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; pointer-events: none;
  height: calc(var(--bar) + var(--fade));
  background: linear-gradient(to bottom, var(--paper) calc(var(--front, 600px) - 60px), var(--dark) calc(var(--front, 600px) + 60px));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--bar), rgb(0 0 0 / var(--veil, 0)) var(--bar), rgb(0 0 0 / calc(.9 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .15), rgb(0 0 0 / calc(.5 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .48), rgb(0 0 0 / calc(.14 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .76), transparent);
  mask-image: linear-gradient(to bottom, #000 var(--bar), rgb(0 0 0 / var(--veil, 0)) var(--bar), rgb(0 0 0 / calc(.9 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .15), rgb(0 0 0 / calc(.5 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .48), rgb(0 0 0 / calc(.14 * var(--veil, 0))) calc(var(--bar) + var(--fade) * .76), transparent);
}
.masthead.menu-open { --header-ink: var(--ink); }
.masthead.menu-open::before { height: var(--bar); background: var(--paper); -webkit-mask-image: none; mask-image: none; }

.header-wordmark {
  position: relative; z-index: 102; order: 0; display: grid; align-items: center; min-width: 0; margin-right: auto;
  font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.065em; color: var(--header-ink); transition: color .2s ease;
}
.masthead-name, .masthead-section { grid-area: 1 / 1; transition: opacity .18s ease, transform .3s var(--ease); }
.masthead-section { font-size: clamp(.875rem, 1.2vw, 1.125rem); font-weight: 400; letter-spacing: normal; color: var(--muted); opacity: 0; transform: translateY(6px); }
/* Wordmark and section label hand over one after the other, never on top of each other. */
.masthead:not(.in-section) .masthead-name { transition-delay: .12s; }
.in-section .masthead-name { opacity: 0; transform: translateY(-6px); }
.in-section .masthead-section { opacity: 1; transform: none; transition-delay: .12s; }
.menu-open .masthead-name { opacity: 1; transform: none; transition-delay: 0s; }
.menu-open .masthead-section { opacity: 0; transition-delay: 0s; }
.masthead-section.is-swapping { animation: label-in .3s var(--ease); }
@keyframes label-in { from { opacity: 0; transform: translateY(5px); } }

.menu-toggle {
  position: relative; z-index: 102; order: 2; display: grid; place-items: center; flex-shrink: 0;
  width: 56px; height: 56px; padding: 4px; border: 0; background: none; cursor: pointer;
  color: var(--header-ink); transition: opacity .2s, color .2s ease;
}
.menu-toggle:hover { opacity: .65; }
.menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.menu-toggle svg { grid-area: 1 / 1; display: block; width: 48px; height: 48px; transition: opacity .2s ease, transform .25s ease; }
.menu-close { opacity: 0; transform: rotate(-35deg); }
.in-section:not(.menu-open) .menu-toggle { color: var(--muted); }
.menu-open .menu-close { opacity: 1; transform: rotate(0); }
.menu-open .foil-logo { opacity: 0; transform: rotate(35deg); }

#main-navigation { display: none; }
.menu-open #main-navigation {
  position: fixed; inset: var(--bar) 0 0; z-index: 100; display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(.75rem, 2vh, 1.5rem); padding: calc(100px - var(--bar)) var(--edge) 40px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper);
}
/* Centred when there is room, top-aligned and scrollable when there is not. */
#main-navigation a:first-child { margin-top: auto; }
#main-navigation a:last-child { margin-bottom: auto; }
#main-navigation a { display: block; color: var(--ink); font-size: clamp(2.5rem, min(6vw, 11vh), 6rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; text-underline-offset: .35em; transition: color .2s ease; }
#main-navigation a:hover { color: #707779; }
body.navigation-open { overflow: hidden; }
@media (max-width: 700px) {
  .header-wordmark { font-size: 34px; }
  #main-navigation a { white-space: nowrap; }
}

/* ---------- Hero ---------- */
.hero-heading {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 6rem);
  min-height: calc(76svh - var(--bar)); padding-block: clamp(3rem, 6vw, 7rem);
}
#hero-title { width: 100%; padding-bottom: .16em; margin-bottom: -.16em; font-size: clamp(3rem, 6.25vw, 7rem); line-height: 1.04; letter-spacing: -.067em; text-align: left; }
#hero-title > span { display: block; white-space: nowrap; }
#hero-title > span:nth-child(2) { margin-left: 6%; }
#hero-title > span:nth-child(3) { margin-left: 12%; }
.hero-intro { min-width: 0; padding-left: 1.5vw; }
.hero-definition { padding-left: clamp(16px, 1.5vw, 28px); border-left: 1px solid currentColor; font-size: clamp(20px, 1.9vw, 34px); line-height: 1.5; letter-spacing: normal; color: var(--ink); text-align: left; }
.hero-definition strong, .hero-definition span { display: block; white-space: nowrap; }
.hero-definition strong { margin-bottom: .15em; font-weight: 600; }
@media (min-width: 851px) and (max-width: 960px) { .hero-definition { font-size: clamp(17px, 2.1vw, 20px); } } /* keeps both lines inside the narrow column */
@media (max-width: 850px) {
  .hero-heading { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding-block: 3rem; }
  #hero-title { font-size: clamp(2.8rem, 9vw, 5rem); }
  .hero-intro { padding-left: 0; }
  .hero-definition { font-size: clamp(17px, 3vw, 25px); }
}
@media (max-width: 700px) {
  .hero-heading { min-width: 0; }
  #hero-title { min-width: 0; font-size: clamp(2rem, 11vw, 3.5rem); letter-spacing: -.06em; }
  .hero-definition { text-wrap: pretty; }
  .hero-definition strong, .hero-definition span { white-space: normal; }
}

/* ---------- Films ----------
   Both films look as they always have: the same photograph first, then the film
   in its place the moment it plays, filling its frame exactly. The one change is
   that the top frame has the film's 16:9 shape from the first paint (the
   photograph is 3:2 and is cut at the bottom, off screen at load), so the page
   below no longer jumps when the film takes over. */
.film { position: absolute; inset: 1px 0; overflow: clip; } /* 1px inside its frame, so the frame's own edge colour always wins */
.film-still, .film-motion { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-image .film-still { object-position: center top; }
.film-motion { opacity: 0; }
.film-motion.is-playing { opacity: 1; }
.hero-image { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(var(--paper) 50%, var(--dark) 50%); }
.hero-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--paper) 0, var(--paper) 2px, transparent 22%, transparent 76%, var(--dark) calc(100% - 2px), var(--dark) 100%); }

/* ---------- Dark sections: shared ---------- */
.ocean-story, .closing { background: var(--dark); color: var(--silver); }
.closing { margin-bottom: -1px; } /* covers a fractional last pixel row at the page end */
.focus, .process, .why { padding-block: var(--section-pad); }
.focus { border-bottom: 1px solid var(--rule); }
.why { border-top: 1px solid var(--rule); }
/* Section labels are shown by the masthead; the in-page copies keep their space. */
.eyebrow { font-size: var(--label); line-height: 1.5; letter-spacing: .015em; color: var(--muted); visibility: hidden; }
.focus h2, .process h2, .why h2, .contact h2 { font-size: var(--title); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; color: var(--white); }
.focus-copy p, .process-intro, .why-copy p, .contact-details p { font-size: var(--body); font-weight: 700; line-height: 1.5; text-wrap: balance; color: var(--silver); }
.focus-content, .process-layout {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
  column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(4rem, 8vw, 8rem);
}
@media (min-width: 1100px) { .focus-content, .process-layout { row-gap: clamp(3.5rem, 8vh, 7rem); } }
@media (max-width: 700px) { .focus-content, .process-layout { grid-template-columns: 1fr; } }

/* ---------- 01 Where we focus ---------- */
.focus-intro { grid-column: 1 / 10; grid-row: 1; }
.workflow-scan { position: relative; isolation: isolate; grid-column: 5 / 11; grid-row: 2; width: min(100%, 25rem); padding: 1.5rem; }
.workflow-scan::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.025); border-top: 1px solid var(--rule); transition: background-color .25s ease, border-color .25s ease; }
.workflow-scan:hover::before { background: rgba(255,255,255,.075); border-top-color: #d6d9da; }
.workflow-scan ul { margin: 0; padding: 0; list-style: none; }
.workflow-scan li { padding: .85rem 0; border-top: 1px solid var(--rule); font-size: var(--body); font-weight: 700; line-height: 1.5; letter-spacing: -.015em; color: var(--white); }
.workflow-scan li:first-child { border-top: 0; }
.focus-copy { grid-column: 3 / 10; grid-row: 3; max-width: 42rem; }
@media (min-width: 1100px) {
  .focus-intro { grid-column: 1 / -1; }
  .workflow-scan { grid-column: 7 / 12; }
  .focus-copy { grid-column: 2 / 8; }
}
@media (max-width: 700px) {
  .focus-intro, .workflow-scan, .focus-copy { grid-column: 1; grid-row: auto; }
  .workflow-scan { justify-self: end; width: 90%; }
}

/* ---------- 02 How we work ---------- */
.process-heading { display: contents; }
#process-title { grid-column: 1 / 11; grid-row: 1; }
.process-intro { grid-column: 5 / 12; grid-row: 2; max-width: 42rem; }
.process-content { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: clamp(3rem, 7vh, 5rem); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: clamp(1.25rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.steps li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; align-items: baseline; gap: .6rem .5rem;
  height: 100%; padding: 1.5rem; background: rgba(255,255,255,.025); border-top: 1px solid var(--rule);
  transition: background-color .25s ease, border-color .25s ease;
}
.steps li:hover { background: rgba(255,255,255,.075); border-top-color: #d6d9da; }
.step-number { font-size: var(--label); font-weight: 600; line-height: 1.5; letter-spacing: -.03em; color: var(--white); }
.steps h3 { font-size: var(--body); font-weight: 700; line-height: 1.5; letter-spacing: -.015em; color: var(--white); }
.steps p { grid-column: 2; font-size: var(--body); line-height: 1.5; text-wrap: balance; color: var(--silver); }
@media (min-width: 1100px) { #process-title { grid-column: 1 / -1; } }
/* Between phone and desktop four columns leave one word per line; use two. */
@media (min-width: 701px) and (max-width: 1099px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #process-title, .process-intro, .process-content { grid-column: 1; grid-row: auto; }
  #process-title { text-wrap: wrap; }
  .process-content { margin-top: 2rem; }
  .steps { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- 03 Why Foyla ---------- */
.why-heading { margin-top: 1.75rem; }
.why-body { margin-top: clamp(4rem, 8vw, 8rem); }
.why-copy { width: 65%; max-width: 48rem; margin-left: auto; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: 2rem; width: min(100%, 740px); margin-top: clamp(5rem, 10vw, 10rem); }
.founder { width: 100%; min-width: 0; }
.portrait { aspect-ratio: 2 / 3; overflow: hidden; }
.portrait img { width: 100%; height: auto; object-fit: contain; object-position: center top; filter: saturate(.72) contrast(.98); }
.founder:last-child .portrait img { transform: scale(1.14); transform-origin: 50% 27%; }
.founder figcaption { padding-top: 1rem; }
.founder h3 { font-size: var(--body); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; color: var(--white); }
.founder-name { color: var(--silver); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: .25em; }
.founder-name:hover, .founder-name:focus-visible { color: var(--white); text-decoration-color: currentColor; }
.role { margin-top: .35rem; font-size: var(--label); line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) { .why-copy { width: 100%; } }
@media (max-width: 700px) {
  .why-copy { max-width: none; }
  .founders { grid-template-columns: 1fr; gap: 3rem; max-width: 347px; }
  .founder { max-width: 347px; }
}

/* ---------- Pinned pages (desktop) ----------
   On screens of at least 1100 x 620 with motion allowed, every .track is a page:
   one screen tall plus --beats of extra scroll, with its .scene stuck under the
   masthead for that distance. home.js turns the scroll position into --t (0 to 1)
   on each piece, so the scroll plays the page. The layout itself is pure CSS,
   switched on by the .js class that home-boot.js sets before first paint, so the
   page has its final height from the start. A page whose content does not fit
   the screen gets .is-loose from home.js and scrolls normally. Every page starts
   its content on the same line, so the titles do not move from page to page. */
.focus .track { --beats: 5; }
.process .track { --beats: 6; }
.why .track { --beats: 2; }
@media screen and (min-width: 1100px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .js {
    --page: calc(100svh - var(--bar));
    --beat: clamp(100px, 13svh, 150px);
    --scene-pad: clamp(2rem, 4vh, 3rem);
    --head-gap: max(clamp(2rem, 5vh, 4rem), calc(16vh - 96px)); /* tall screens start a little lower */
    --row-gap: clamp(2.5rem, 8vh, 7rem);
  }
  .js .focus, .js .process, .js .why { padding-block: 0; }
  .js .scene { display: flex; flex-direction: column; min-height: var(--page); padding-block: var(--scene-pad); }
  .js .eyebrow { margin-bottom: var(--head-gap); }
  .js .focus-content, .js .process-layout { row-gap: var(--row-gap); }
  .js .process-content { margin-top: 0; }
  /* 03 is one movement: title and text hold under the masthead while the portraits, in their usual place
     below, come up to meet them; then everything moves on together. Only the upper part is stuck, so its
     track is as tall as its own content plus the stretch it holds for. */
  .js .why { padding-bottom: var(--section-pad); }
  .js .why-heading { margin-top: 0; }
  .js .why-body { margin-top: var(--row-gap); }
  .js .why .scene { min-height: 0; padding-bottom: 0; }
  .js .why .track:not(.is-loose) { height: auto; }
  .js .why .track:not(.is-loose)::after { content: ""; display: block; height: calc(var(--beats) * var(--beat)); }
  .js .why .track:not(.is-loose) > .scene { height: auto; }

  .js .track:not(.is-loose) { height: calc(var(--page) + var(--beats) * var(--beat)); }
  .js .track:not(.is-loose) > .scene { position: sticky; top: var(--bar); height: var(--page); min-height: 0; }
  /* Pieces wait at --t: 0 until the script places them. */
  .js .track:not(.is-loose) :is(.workflow-scan li, .focus-copy, .process-intro, .steps li, .why-copy),
  .js .why .track:not(.is-loose) ~ .founders .founder {
    opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 28px), 0); will-change: opacity, transform;
  }
  .js .track:not(.is-loose) .workflow-scan::before { opacity: var(--t, 0); }
  /* The step being played is lit the way a hovered step is, then settles back. */
  .js .track:not(.is-loose) .steps li { background-color: rgba(255,255,255, calc(.025 + .05 * var(--hl, 0))); border-top-color: color-mix(in srgb, #d6d9da calc(var(--hl, 0) * 100%), var(--rule)); transition: none; }
  .js .track:not(.is-loose) .steps li:hover { background-color: rgba(255,255,255,.075); border-top-color: #d6d9da; }
  .js .why .track:not(.is-loose) ~ .founders .founder:first-child .portrait img { transform: scale(calc(1 + (1 - var(--t, 0)) * .05)); }
  .js .why .track:not(.is-loose) ~ .founders .founder:last-child .portrait img { transform: scale(calc(1.14 + (1 - var(--t, 0)) * .05)); }
}

/* ---------- 04 Contact ---------- */
.contact {
  position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column;
  height: 85svh; min-height: 640px; max-height: 960px;
  margin-top: clamp(6rem, 10vw, 10rem); padding: clamp(2.5rem, 5vh, 4rem) var(--edge);
  background: var(--dark); color: var(--paper);
}
.contact-film { z-index: -2; }
.contact-film > * { object-position: center bottom; }
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #15191b 0%, rgba(21,25,27,.96) 8%, rgba(21,25,27,.65) 35%, rgba(21,25,27,.38) 65%, rgba(21,25,27,.65) 83%, #15191b 100%);
}
.contact-default { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.contact h2 { max-width: 20em; margin-top: 1.75rem; }
.contact-details { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 2.5rem; }
.contact-details p { width: 100%; max-width: 40rem; }
.contact button { font-family: inherit; }
.contact-link {
  align-self: flex-end; margin-top: auto; padding: 2rem 6px .55rem; background: none; border: 0; border-bottom: 1px solid #fff; border-radius: 0; cursor: pointer;
  font-size: var(--body); line-height: 1.5; letter-spacing: -.015em; white-space: nowrap; color: var(--white);
}
.contact button:focus-visible, .contact input:focus-visible, .contact select:focus-visible, .contact textarea:focus-visible { outline: 2px solid #e2e5e5; outline-offset: 5px; }
.contact .contact-link:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
@media (max-width: 700px) {
  .contact { height: auto; min-height: 720px; max-height: none; }
  .contact-details p { max-width: 100%; }
}

/* Contact form: opens in place of the invitation, inside the same film frame.
   The frame grows with the form instead of scrolling inside itself. */
.contact.contact-open { height: auto; min-height: clamp(640px, 85svh, 960px); max-height: none; padding-block: clamp(3.5rem, 11vh, 6rem) clamp(1.25rem, 3vh, 2rem); } /* top inset keeps "Back" clear of the masthead fade */
.contact-open::before { background: linear-gradient(to bottom, #15191b, rgba(21,25,27,.89) 25%, rgba(21,25,27,.83) 75%, #15191b); }
#contact-panel { width: min(100%, 800px); margin: 0 auto; padding: 0 .5rem .5rem; font-size: .9375rem; line-height: 1.5; color: var(--silver); }
.contact-back { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); }
#contact-panel h3 { margin: 1rem 0 1.25rem; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.05em; color: var(--white); }
#contact-panel h3:focus { outline: none; } /* focused by script when the panel opens */
.contact-options { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.contact-options button, .contact-submit { padding: .4rem 0; background: transparent; border: 0; border-bottom: 1px solid #778083; cursor: pointer; font: inherit; color: var(--silver); }
.contact-options button[aria-pressed=true] { border-bottom: 2px solid #fff; font-weight: 700; }
#contact-form fieldset { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
#contact-form legend { margin-bottom: .65rem; padding: 0; font-size: .9375rem; font-weight: 700; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0 0 1rem; }
#contact-form label { display: flex; flex-direction: column; gap: .25rem; }
#contact-form input, #contact-form select, #contact-form textarea {
  width: 100%; min-width: 0; padding: .5rem .65rem; background: #15191ba6; border: 1px solid var(--field-rule); border-radius: 0;
  font: inherit; font-size: .9375rem; color: var(--silver); color-scheme: dark;
}
#contact-form input, #contact-form select { height: 42px; }
#contact-form select:disabled { cursor: not-allowed; color: var(--muted); opacity: 1; }
#contact-form textarea { height: 64px; min-height: 44px; max-height: 100px; resize: vertical; }
#contact-form ::placeholder { color: var(--muted); opacity: 1; }
#message-optional { display: contents; }
.contact-submit { display: block; margin: .75rem 0 0 auto; padding: .35rem 0; color: var(--white); }
#contact-result { padding: 1rem 0; border-top: 1px solid var(--field-rule); }
@media (max-width: 700px) {
  .contact.contact-open { min-height: calc(100svh - var(--bar)); padding-block: 1.25rem 2rem; }
  #contact-panel { width: 100%; padding: 0; font-size: 1rem; }
  .contact-back { display: inline-flex; align-items: center; min-height: 44px; }
  #contact-panel h3 { max-width: 15em; margin: .75rem 0 1.25rem; font-size: clamp(1.65rem, 6.5vw, 2rem); line-height: 1.15; }
  .contact-options { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; margin: 0 0 1.25rem; }
  .contact-options button { min-height: 48px; font-size: 1rem; white-space: nowrap; }
  #contact-form fieldset { width: 100%; }
  #contact-form legend { margin-bottom: .75rem; font-size: .875rem; font-weight: 500; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  #contact-form label { gap: .4rem; min-width: 0; font-size: .9375rem; }
  #contact-form input, #contact-form select, #contact-form textarea { max-width: 100%; min-height: 48px; padding: .75rem; font-size: 16px; }
  #contact-form textarea { height: 88px; max-height: 180px; }
  #contact-form input[type=date] { display: block; -webkit-appearance: none; appearance: none; height: 48px; line-height: 24px; overflow: hidden; text-align: left; }
  #contact-form input[type=date]::-webkit-date-and-time-value { min-width: 0; height: 24px; text-align: left; }
  #contact-form input[type=date]::-webkit-datetime-edit { min-width: 0; padding: 0; }
  .contact-submit { min-height: 48px; margin: 1rem 0 0 auto; padding: .65rem 0; font-size: 1.0625rem; }
  .contact input:focus-visible, .contact select:focus-visible, .contact textarea:focus-visible { outline-offset: 2px; }
}

/* ---------- Footer ---------- */
.footer { display: grid; grid-template-columns: 100px minmax(0, 1fr) 100px; align-items: center; gap: 2rem; padding-block: 2rem; }
.footer::before { content: ""; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; font-size: .875rem; line-height: 1.5; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer > span { font-size: .8125rem; text-align: right; white-space: nowrap; color: var(--muted); }
@media (max-width: 700px) {
  .footer { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem; }
  .footer::before { display: none; }
  .legal-links { order: 3; gap: .4rem 1rem; }
  .legal-links a { padding-block: .4rem; }
  .footer > span { text-align: center; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Opening: the statement and its definition settle in once. */
  #hero-title, .hero-intro { animation: settle .9s var(--ease) both; }
  .hero-intro { animation-delay: .12s; }
  @keyframes settle { from { opacity: 0; transform: translateY(18px); } }

  /* Arrivals: home.js marks what is still below the fold as waiting and releases
     each piece as it scrolls into view. Pieces arriving together follow each
     other by --d. Without JavaScript nothing is ever hidden. */
  .is-waiting { opacity: 0; transform: translateY(22px); }
  .reveal { transition: opacity .7s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
  .steps li.reveal { transition: opacity .7s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s), background-color .25s ease, border-color .25s ease; }
  /* The list tile stays in place; its panel fades and its three lines follow one another. */
  .workflow-scan.is-waiting { opacity: 1; transform: none; }
  .workflow-scan.is-waiting::before { opacity: 0; }
  .workflow-scan.is-waiting li { opacity: 0; transform: translateY(14px); }
  .workflow-scan.reveal { transition: none; }
  .workflow-scan.reveal::before { transition: opacity .6s ease var(--d, 0s), background-color .25s ease, border-color .25s ease; }
  .workflow-scan.reveal li { transition: opacity .7s ease, transform .9s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 90ms); }
  .workflow-scan li:nth-child(2) { --i: 1; }
  .workflow-scan li:nth-child(3) { --i: 2; }
  .founder.is-waiting:first-child .portrait img { transform: scale(1.05); }
  .founder.is-waiting:last-child .portrait img { transform: scale(1.19); }
  .founder.reveal .portrait img { transition: transform 1.4s var(--ease) var(--d, 0s); }

  /* A quiet reflection crosses each title as it travels up the screen (--sheen, set on scroll). */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #hero-title, .focus h2, .process h2, .why h2, .contact h2 {
      background-size: 300% 100%; background-position: var(--sheen, 110%) center;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    #hero-title { background-image: linear-gradient(110deg, #191c1d 0%, #191c1d 40%, #424748 46%, #72797b 50%, #424748 54%, #191c1d 60%, #191c1d 100%); }
    .focus h2, .process h2, .why h2, .contact h2 { background-image: linear-gradient(110deg, #F3F2ED 0%, #F3F2ED 40%, #C7C8C5 46%, #FFFFFF 50%, #C7C8C5 54%, #F3F2ED 60%, #F3F2ED 100%); }
  }

}
/* Phones: plain painted headings (text-clipped paint is unreliable on iOS). */
@media (max-width: 700px) {
  #hero-title, .focus h2, .process h2, .why h2, .contact h2 { background: none; -webkit-text-fill-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .film-motion, .contact-film { display: none; }
  .hero-image { aspect-ratio: 3 / 2; } /* no film: the whole photograph, as before */
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .masthead { background: Canvas; }
}
@media print {
  :root { --dark: #fff; --white: #191c1d; --silver: #191c1d; --muted: #515759; --rule: #b9bdbc; }
  .masthead { position: static; }
  .skip, .masthead::before, .menu-toggle, .film-motion, .contact-film, .contact::before, .hero-image::after { display: none; }
  .eyebrow { visibility: visible; }
  .contact { height: auto; min-height: 0; }
  .contact-link { border-bottom-color: currentColor; }
  #hero-title, .focus h2, .process h2, .why h2, .contact h2 { background: none; -webkit-text-fill-color: currentColor; }
  .is-waiting, .workflow-scan.is-waiting li { opacity: 1 !important; transform: none !important; }
}