/* ==========================================================================
   Walter & Ortiz — styles.css
   Light-led, but tonal: the page moves paper → bone → deep navy → sand → ink,
   with a printed-matter pattern library over the top.
   ========================================================================== */

@font-face{
  font-family:'Bodoni Moda';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/bodoni-moda-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

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

:root{
  color-scheme:light;

  /* Grounds, warm to cool */
  --paper:    #FDFCFA;
  --bone:     #F6F1E9;
  --sand:     #EFE5D5;
  --cool:     #F1F5F9;

  /* Deeps */
  --ink:      #0A0E13;
  --navy:     #12293F;
  --navy-2:   #1B3A57;
  --navy-3:   #244B70;

  /* Text */
  --tx-1:     #0A0E13;
  --tx-2:     #333B47;
  --tx-3:     #4C5663;
  --tx-on-d1: #F4F7FA;
  --tx-on-d2: #A9BACB;

  /* Accents */
  --clay:      #A85238;   /* marks and rules */
  --clay-tx:   #9C4A31;   /* the same warm, dark enough to set 12px type on sand */
  --clay-on-d: #DC8C67;   /* and light enough to set it on the navy block */
  --brass:     #A8813F;   /* hairlines only — never text */
  --brass-tx:  #7A5B2B;   /* when a warm mark is actually a character */
  --sage:      #4E6B5C;

  --line:      #E3E0D9;
  --line-cool: #DCE3EA;
  --line-dark: rgba(255,255,255,.14);

  --accent:       var(--navy-2);
  --accent-press: var(--navy);
  --on-accent:    #FFFFFF;

  --card-a: #FFFFFF;
  --card-b: #FAFAF8;
  --shadow:    0 1px 2px rgba(10,14,19,.05), 0 20px 46px -28px rgba(10,14,19,.24);
  --shadow-up: 0 2px 6px rgba(10,14,19,.07), 0 40px 78px -32px rgba(10,14,19,.36);

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 62ch;

  --wrap: 1180px;
  --pad: 32px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --section-y: clamp(72px, 9vw, 136px);

  --ease:   cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.22,.61,.36,1);
  --t-fast: 180ms;
  --t-mid:  280ms;
  --t-slow: 620ms;
}

/* --------------------------------------------------------------- reset -- */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--tx-1);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2{ text-wrap:balance; font-variant-numeric:tabular-nums; }
a{ color:var(--accent); }
::selection{ background:rgba(27,58,87,.15); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }
.anchor{ display:block; }
#scroll-sentinel{ position:absolute; top:0; height:1px; width:1px; }
section[id]{ scroll-margin-top:96px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:40;
  background:var(--paper); color:var(--tx-1);
  padding:12px 16px; border:1px solid var(--line);
  font-family:var(--mono); font-size:13px;
}
.skip:focus{ left:var(--pad); top:8px; }

/* ------------------------------------------------------------- patterns --
   All drawn in CSS — no image requests. Each section owns one or two, always
   behind the content and never strong enough to sit under running text.
   ------------------------------------------------------------------------ */

.sec, .footer{ position:relative; isolation:isolate; overflow:clip; }
.pat{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Fine printed dot matrix */
.pat--dots{
  background-image:radial-gradient(circle at 1px 1px, rgba(18,41,63,.16) 1px, transparent 0);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 10%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 90% at 78% 10%, #000 0%, transparent 68%);
  opacity:.75;
}

/* Engraver's diagonal hatching */
.pat--hatch{
  background-image:repeating-linear-gradient(-45deg,
    rgba(168,129,63,.16) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(200deg, #000 0%, transparent 42%);
          mask-image:linear-gradient(200deg, #000 0%, transparent 42%);
}

/* Blueprint grid, for the dark blocks */
.pat--grid{
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 80%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 80%);
}

/* Guilloché — concentric rules, the bank-note trick */
.pat--arcs{
  background-image:repeating-radial-gradient(circle at 92% 8%,
    rgba(168,82,56,.13) 0 1px, transparent 1px 15px);
  -webkit-mask-image:radial-gradient(70% 70% at 92% 8%, #000 0%, transparent 72%);
          mask-image:radial-gradient(70% 70% at 92% 8%, #000 0%, transparent 72%);
}

.pat--bloom{
  background:
    radial-gradient(70% 55% at 18% 16%, rgba(27,58,87,.11) 0%, rgba(27,58,87,0) 66%),
    radial-gradient(60% 55% at 96% 78%, rgba(168,82,56,.10) 0%, rgba(168,82,56,0) 68%),
    radial-gradient(120% 90% at 50% 100%, rgba(246,241,233,.9) 0%, rgba(246,241,233,0) 70%);
}
.pat--glow{
  background:
    radial-gradient(58% 50% at 12% 8%, rgba(36,75,112,.55) 0%, rgba(36,75,112,0) 70%),
    radial-gradient(50% 45% at 92% 92%, rgba(168,82,56,.24) 0%, rgba(168,82,56,0) 72%);
}

/* Paper grain over the whole page */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* -------------------------------------------------------------- motion -- */

@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes drawRule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.js [data-rise]{ animation:rise 480ms var(--ease) both; animation-delay:var(--d, 0ms); }
.js [data-reveal]{ opacity:0; transform:translateY(18px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-slow) var(--ease) var(--d, 0ms),
             transform var(--t-slow) var(--ease) var(--d, 0ms);
}

.ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.ln__i{ display:block; will-change:transform; }
.js [data-lines].is-split .ln__i{ transform:translateY(110%); opacity:0; }
.js [data-lines].is-split.is-in .ln__i{
  transform:none; opacity:1;
  transition:transform 900ms var(--ease) var(--ld, 0ms),
             opacity 620ms var(--ease-2) var(--ld, 0ms);
}
.js [data-lines].is-split{ opacity:1; transform:none; }

/* -------------------------------------------------------------- header -- */

.header{
  position:sticky; top:0; z-index:20;
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color var(--t-mid) ease, border-color var(--t-mid) ease;
}
.header.is-scrolled{
  background:rgba(253,252,250,.88);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom-color:var(--line);
}
.header__inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s3); padding-block:14px 12px;
}
.progress{
  position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--navy-2) 0%, var(--brass) 55%, var(--clay) 100%);
  transform:scaleX(0); transform-origin:left center;
  opacity:0; transition:opacity var(--t-mid) ease;
}
.header.is-scrolled .progress{ opacity:1; }

/* Wordmark — matched to the logo file: +.078em, roman ampersand. */
.wordmark{
  --wm: 21px;
  display:inline-flex; flex-direction:column; align-items:stretch;
  text-decoration:none; color:var(--tx-1);
  font-family:var(--serif); font-weight:400; font-size:var(--wm); line-height:1.1;
}
.wordmark__rule{
  display:block; height:1px; transform-origin:left center;
  background:linear-gradient(90deg, var(--navy-2), var(--brass));
  margin-bottom:calc(var(--wm) * .7 * .25);
}
.js .wordmark__rule{ animation:drawRule 820ms var(--ease) 120ms both; }
.wordmark__text{
  display:block; text-transform:uppercase;
  letter-spacing:.078em; padding-left:.078em; white-space:nowrap;
}
.wordmark .amp{ font-style:normal; }
a.wordmark .wordmark__text{ transition:color var(--t-fast) ease; }
a.wordmark:hover .wordmark__text{ color:var(--accent); }

/* Nav ------------------------------------------------------------------ */

.nav{ display:flex; align-items:center; gap:var(--s1); }
.nav__link,.lang__btn{
  font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--tx-1); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; padding-inline:10px;
  background:none; border:0; cursor:pointer; position:relative;
  transition:color var(--t-fast) ease;
}
.nav__link::after{
  content:''; position:absolute; left:10px; right:10px; bottom:11px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-mid) var(--ease);
}
.nav__link:hover{ color:var(--accent); }
.nav__link:hover::after{ transform:scaleX(1); }
.header.is-scrolled .nav__link--cta{
  border:1px solid var(--line-cool); border-radius:999px;
  padding-inline:18px; min-height:38px; color:var(--accent);
  transition:background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.header.is-scrolled .nav__link--cta:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.header.is-scrolled .nav__link--cta::after{ display:none; }

.lang{ display:inline-flex; align-items:center; margin-left:var(--s1); }
.lang__btn{ font-family:var(--mono); font-size:13px; letter-spacing:.11em; color:var(--tx-3); padding-inline:8px; }
.lang__btn:hover{ color:var(--accent); }
.lang__btn[aria-pressed="true"]{ color:var(--tx-1); }
.lang__sep{ color:var(--tx-3); font-size:13px; }

[data-i18n]{ transition:opacity var(--t-fast) ease; }
body.is-swapping [data-i18n]{ opacity:.25; }

/* ------------------------------------------------------------- eyebrow -- */

.eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 var(--s4);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3);
}
.eyebrow__num{ color:var(--clay-tx); font-variant-numeric:tabular-nums; }
.eyebrow__rule{ width:38px; height:1px; background:var(--brass); opacity:.7; }
.eyebrow--on-dark{ color:var(--tx-on-d2); }
.eyebrow--on-dark .eyebrow__num{ color:var(--clay-on-d); }
.eyebrow--on-dark .eyebrow__rule{ background:var(--brass); opacity:.8; }

/* ---------------------------------------------------------------- hero -- */

.sec--hero{
  background:linear-gradient(180deg, var(--paper) 0%, var(--bone) 100%);
  padding-block:clamp(52px, 7vw, 92px) clamp(64px, 8vw, 112px);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(32px, 5vw, 72px); align-items:start;
}
h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px, 6.6vw, 76px);
  line-height:1.06; letter-spacing:-.008em;
  margin:0 0 var(--s3); max-width:15ch; color:var(--tx-1);
}
.lede{
  font-size:clamp(17px, 1.5vw, 20px); line-height:1.55;
  color:var(--tx-2); max-width:50ch; margin:0 0 var(--s5);
}
.cta-row{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3) var(--s4); }

/* The plate — a small piece of printed furniture, and two true clocks. */
.plate{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(165deg, #FFFFFF 0%, var(--bone) 100%);
  box-shadow:var(--shadow);
  padding:var(--s4) var(--s4) var(--s5);
  margin-top:calc(var(--s6) + 6px);
}
.plate__arcs{
  position:absolute; inset:-40% -30% auto -30%; height:200%;
  background-image:repeating-radial-gradient(circle at 50% 0%,
    rgba(18,41,63,.10) 0 1px, transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 62%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 62%);
  pointer-events:none;
}
.plate__amp{
  position:absolute; right:-14px; bottom:-46px;
  font-family:var(--serif); font-size:190px; line-height:1;
  color:var(--navy-2); opacity:.07; pointer-events:none;
}
.plate__label{
  position:relative; margin:0 0 var(--s4);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3);
}
.clocks{ list-style:none; margin:0; padding:0; position:relative; }
.clock{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:14px 0; border-top:1px solid var(--line);
}
.clock:last-child{ border-bottom:1px solid var(--line); }
.clock__city{ font-size:15px; color:var(--tx-2); }
.clock__time{
  font-family:var(--mono); font-size:20px; color:var(--tx-1);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.plate__foot{
  position:relative; margin:var(--s3) 0 0;
  font-family:var(--serif); font-size:17px; color:var(--tx-2);
}

/* Buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:0 30px;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--sans); font-size:16px; font-weight:500;
  text-decoration:none; border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 1px 2px rgba(10,14,19,.14);
  position:relative; overflow:hidden;
  transition:background-color var(--t-fast) ease,
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) ease;
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform 700ms var(--ease-2);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ background:var(--accent-press); transform:translateY(-2px); box-shadow:0 8px 22px -8px rgba(10,14,19,.42); }
.btn:active{ transform:translateY(0); }
.btn > *{ position:relative; z-index:1; }
.btn--light{ background:var(--bone); color:var(--navy); }
.btn--light:hover{ background:#fff; color:var(--navy); }
.arw{ display:inline-block; transition:transform var(--t-mid) var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

.link-2{
  display:inline-flex; align-items:center; gap:.4em; min-height:44px;
  font-size:15px; font-weight:500; color:var(--tx-2); text-decoration:none;
  position:relative; transition:color var(--t-fast) ease;
}
.link-2::after{
  content:''; position:absolute; left:0; right:1.2em; bottom:12px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-mid) var(--ease);
}
.link-2:hover{ color:var(--accent); }
.link-2:hover::after{ transform:scaleX(1); }
.link-2:hover .arw{ transform:translateX(4px); }

/* ------------------------------------------------------------- marquee -- */

.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--sand);
  padding-block:13px;
}
.marquee__track{
  display:flex; width:max-content; gap:0;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--navy);
  animation:marquee 42s linear infinite;
}
.marquee__track span{ padding-inline:26px; white-space:nowrap; }
.marquee__track b{ color:var(--clay); font-weight:400; }

/* ----------------------------------------------------------- who / cost -- */

.sec--who{
  background:linear-gradient(180deg, var(--bone) 0%, var(--paper) 62%, var(--paper) 100%);
  padding-block:var(--section-y);
}
.who{
  max-width:var(--measure); margin:0;
  font-size:clamp(18px,1.6vw,21px); line-height:1.62; color:var(--tx-2);
  padding-left:var(--s4); border-left:2px solid var(--brass);
}
.cost{ margin:clamp(64px, 8vw, 112px) 0 0; }
.cost__line{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px, 2.9vw, 34px); line-height:1.3; color:var(--tx-1);
  text-wrap:balance; max-width:38ch; margin:0 0 clamp(32px, 4.5vw, 56px);
}
.cost__line:last-child{ margin-bottom:0; }

.pull{ margin:clamp(48px, 6vw, 72px) 0 0; }
.pull a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sans); font-size:16px; font-weight:500;
  color:var(--accent); text-decoration:none; padding-bottom:3px; position:relative;
  transition:color var(--t-fast) ease;
}
.pull a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(.24); transform-origin:left center;
  transition:transform var(--t-mid) var(--ease);
}
.pull a:hover{ color:var(--clay-tx); }
.pull a:hover::after{ transform:scaleX(1); background:var(--clay-tx); }

/* ---------------------------------------------------------------- work --
   The one deep block. The client screenshots are the brightest thing on the
   page here, which is the point.
   ------------------------------------------------------------------------ */

.sec--work{
  background:linear-gradient(175deg, var(--navy) 0%, var(--ink) 100%);
  color:var(--tx-on-d1);
  padding-block:var(--section-y);
}
h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 4.4vw, 50px); line-height:1.12;
  margin:0 0 clamp(40px, 5vw, 64px); max-width:20ch; color:var(--tx-1);
}
.sec--work h2{ color:var(--tx-on-d1); }

.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--s4);
}
.card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:linear-gradient(158deg, var(--card-a) 0%, var(--card-b) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px; box-shadow:var(--shadow); overflow:hidden; position:relative;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) ease, border-color var(--t-mid) ease;
}
.card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--navy-3) 0%, var(--brass) 55%, var(--clay) 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 560ms var(--ease);
}
a.card:hover::before, a.card:focus-visible::before{ transform:scaleX(1); }
a.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-up); border-color:rgba(255,255,255,.24); }
.card__shot{ display:block; overflow:hidden; border-bottom:1px solid var(--line-cool); }
.card__img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center;
  transition:transform 760ms var(--ease);
}
a.card:hover .card__img{ transform:scale(1.05); }
.card__body{ padding:var(--s3) var(--s3) var(--s4); display:flex; flex-direction:column; gap:var(--s1); flex:1; }
.card__flag{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-3); margin:0 0 var(--s1);
}
.card__name{
  font-family:var(--sans); font-size:20px; font-weight:600; line-height:1.25;
  margin:0; color:var(--tx-1); transition:color var(--t-fast) ease;
}
a.card:hover .card__name{ color:var(--accent); }
.card__meta{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--tx-3); margin:0; }
.card__note{ margin:var(--s1) 0 0; font-size:15px; line-height:1.6; color:var(--tx-2); }
.card__go{
  margin-top:auto; padding-top:var(--s3);
  display:inline-flex; align-items:center; gap:.45em;
  font-size:15px; font-weight:500; color:var(--accent);
}
a.card:hover .card__go .arw{ transform:translateX(6px); }

.closer{
  margin:clamp(48px, 6vw, 72px) 0 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3) var(--s5);
}
.closer__line{
  margin:0; font-family:var(--serif);
  font-size:clamp(21px, 2.4vw, 29px); line-height:1.3; color:var(--tx-on-d1);
}

/* ------------------------------------------------------------- contact -- */

.sec--contact{
  background:linear-gradient(180deg, var(--sand) 0%, var(--bone) 55%, var(--paper) 100%);
  padding-block:var(--section-y);
}
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 80px); align-items:start;
}
.form-slot{ max-width:560px; }
.form{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line); border-radius:8px;
  padding:var(--s4);
  box-shadow:var(--shadow);
}
.field{ margin:0 0 var(--s3); display:flex; flex-direction:column; gap:6px; }
.label{
  font-family:var(--mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-3); transition:color var(--t-fast) ease;
}
.field:focus-within .label{ color:var(--accent); }
.input{
  font-family:var(--sans); font-size:16px; color:var(--tx-1);
  background:#fff; border:1px solid var(--line-cool); border-radius:6px;
  min-height:50px; padding:13px 14px; width:100%;
  transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.input:hover{ border-color:var(--navy-3); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(27,58,87,.12); }
.input--area{ min-height:112px; resize:vertical; line-height:1.6; }
.input[aria-invalid="true"]{ border-color:var(--clay-tx); box-shadow:inset 2px 0 0 var(--clay-tx); }
.err{ font-family:var(--sans); font-size:14px; color:var(--tx-1); display:none; }
.err.is-on{ display:block; animation:fadeUp 260ms var(--ease) both; }
.err--form{ margin:0 0 var(--s3); }
.form__note{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--tx-3); margin:var(--s2) 0 0;
}
.success{
  font-family:var(--serif); font-size:clamp(21px, 2.4vw, 28px); line-height:1.35;
  color:var(--tx-1); margin:0; padding:var(--s4) 0;
  border-top:2px solid var(--clay-tx); border-bottom:1px solid var(--line);
  max-width:34ch; animation:fadeUp 520ms var(--ease) both;
}
.people{
  list-style:none; margin:clamp(40px,5vw,60px) 0 0; padding:0;
  font-family:var(--mono); font-size:13px; line-height:2.1; color:var(--tx-3);
}
.people a{
  color:var(--tx-2); text-decoration:none; border-bottom:1px solid var(--brass);
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.people a:hover{ color:var(--clay-tx); border-bottom-color:var(--clay-tx); }
.dot{ color:var(--brass-tx); padding-inline:4px; }

/* -------------------------------------------------------------- footer -- */

.footer{
  background:linear-gradient(175deg, var(--ink) 0%, var(--navy) 100%);
  color:var(--tx-on-d1);
  padding-block:var(--s7) var(--s7);
}
.footer__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.footer .wordmark{ color:var(--tx-on-d1); }
.footer .wordmark__rule{ background:linear-gradient(90deg, var(--brass), var(--clay)); }
.wordmark--footer{ --wm:24px; margin-bottom:var(--s3); }
.footer__desc{ font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--tx-on-d1); margin:0 0 4px; }
.footer__meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--tx-on-d2); margin:0;
}
.footer .dot{ color:var(--brass); }

/* ---------------------------------------------------------------- dock -- */

.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(253,252,250,.94);
  backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform 420ms var(--ease);
}
.dock.is-up{ transform:none; }
.dock__btn{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:500; text-decoration:none;
}
@media (min-width: 761px){ .dock{ display:none; } }

/* ----------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js [data-lines].is-split .ln__i{ transform:none; opacity:1; }
  .marquee__track{ animation:none; }
  a.card:hover{ transform:none; }
  a.card:hover .card__img{ transform:none; }
  .btn:hover{ transform:none; }
  .dock{ transform:none; }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .plate{ margin-top:var(--s5); max-width:460px; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){ .cards{ grid-template-columns:1fr; } }
@media (max-width: 760px){ body{ padding-bottom:78px; } }
@media (max-width: 660px){
  .header__inner{ flex-direction:column; align-items:flex-start; gap:2px; padding-block:12px 4px; }
  .nav{ margin-left:-10px; }
  section[id]{ scroll-margin-top:112px; }
  .header.is-scrolled .nav__link--cta{ padding-inline:14px; }
  .footer__inner{ align-items:flex-start; }
}
@media (max-width: 640px){
  :root{ --pad:20px; --section-y:68px; }
  body{ font-size:16px; }
  .plate{ padding:var(--s3) var(--s3) var(--s4); }
  .plate__amp{ font-size:150px; }
  .form{ padding:var(--s3); }
  .who{ padding-left:var(--s3); }
}
@media (max-width: 380px){ .nav__link{ padding-inline:8px; font-size:14px; } }