/* Clay Compass Creative — homepage. "Made to Hold Up." */

/* Fonts: self-hosted Latin subsets from Google Fonts, SIL Open Font License (see assets/fonts/OFL-*.txt) */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-variable.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-variable.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-italic-variable.woff2") format("woff2"); }

:root {
  --black: #151515;   /* sign black: dark ground, text on cream */
  --cream: #EDE6D6;   /* cream wash: reading ground, text on dark */
  --copper: #DE8656;  /* copper-clay: the compass, accent on dark */
  --brick: #9C4A33;   /* the line, accent on cream */
  --ochre: #C8963E;   /* highlighter swipe only */
  --blue: #4E6B7A;    /* faded blue: quiet rules */

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sign: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;

  --pad: clamp(20px, 5.2vw, 76px);
  --max: 1320px;
  --section: clamp(96px, 11vw, 176px);
  --body: clamp(1.125rem, 1rem + 0.34vw, 1.3125rem);
  --gutter: clamp(52px, 11vw, 168px);   /* the line's rail in sections 4 and 5 */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* highlighter brushes: a partial swipe on cream, a full-height one on dark so no letter drops into the black */
  --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23C8963E' d='M6 22 C60 14 140 17 210 13 C280 10 350 12 396 9 C398 34 394 62 397 90 C330 94 250 88 170 92 C110 95 50 91 3 95 C7 70 2 46 6 22 Z'/%3E%3C/svg%3E");
  --swipe-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23C8963E' d='M4 4 C70 1 150 3 220 2 C290 1 350 3 398 1 C399 30 397 66 399 98 C330 99 250 97 170 99 C110 100 50 98 1 99 C3 70 0 36 4 4 Z'/%3E%3C/svg%3E");
}

/* comparison variant (index.html?hl=blue): the highlighter in faded blue instead of ochre. Nothing else changes. */
html.hl-blue {
  --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%234E6B7A' d='M6 22 C60 14 140 17 210 13 C280 10 350 12 396 9 C398 34 394 62 397 90 C330 94 250 88 170 92 C110 95 50 91 3 95 C7 70 2 46 6 22 Z'/%3E%3C/svg%3E");
  --swipe-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%234E6B7A' d='M4 4 C70 1 150 3 220 2 C290 1 350 3 398 1 C399 30 397 66 399 98 C330 99 250 97 170 99 C110 100 50 98 1 99 C3 70 0 36 4 4 Z'/%3E%3C/svg%3E");
}

/* comparison variant (index.html?hl=mix): ochre on the dark sections, as now; on the cream sections a full-height
   faded-blue swipe with cream text (4.6:1). Full height so no part of a letter falls outside the swipe onto cream. */
html.hl-mix { --swipe-blue-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%234E6B7A' d='M4 4 C70 1 150 3 220 2 C290 1 350 3 398 1 C399 30 397 66 399 98 C330 99 250 97 170 99 C110 100 50 98 1 99 C3 70 0 36 4 4 Z'/%3E%3C/svg%3E"); }
html.hl-mix .cream mark:not(.dark mark) { --h: 100%; background-image: var(--swipe-blue-full); background-position: 0 50%; padding: 0 0.14em; color: var(--cream); }
html.js.hl-mix .cream mark:not(.dark mark) { color: var(--black); }            /* dark until the swipe arrives, then cream */
html.js.hl-mix .cream mark.in:not(.dark mark) { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { html.js.hl-mix .cream mark:not(.dark mark) { color: var(--cream); } }

/* rust + teal (default since 6 November; index.html?pal=old shows the September copper + faded blue): buttons in the
   logo's rust instead of the compass's copper, and teal #155E63 for the outline buttons and accent lines. Logo rust
   measures about #A85A3E, but cream text on it is 4.0:1, so the buttons use #A0503A, a shade deeper (cream 4.6:1).
   Teal is never text on dark (2.5:1); there it is lines only. */
html.pal-rust { --rust: #A0503A; --teal: #155E63; --blue: var(--teal); }
html.pal-rust .btn-copper { background: var(--rust); color: var(--cream); }
html.pal-rust .btn-copper:hover { background: var(--teal); color: var(--cream); }   /* cream on teal 6.0:1 */
html.pal-rust .btn-line { box-shadow: inset 0 0 0 2px var(--teal); }   /* 2px: teal on sign black is only 2.5:1 */
html.pal-rust .btn-line:hover { background: var(--teal); color: var(--cream); }
html.pal-rust .dark .label::after { background: var(--teal); opacity: 1; }
html.pal-rust .svc-list, html.pal-rust .svc { border-color: rgb(21 94 99 / 0.6); }
html.pal-rust .qa-item + .qa-item { border-top-color: rgb(21 94 99 / 0.5); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--copper) var(--black); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font: 400 var(--body)/1.6 var(--sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

::selection { background: var(--ochre); color: var(--black); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--copper); border: 3px solid var(--black); border-radius: 6px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 1px; }
.cream :focus-visible { outline-color: var(--brick); }

.skip {
  position: absolute; left: var(--pad); top: -80px; z-index: 50;
  background: var(--cream); color: var(--black); padding: 10px 14px; font: 500 0.875rem/1 var(--sign);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }
.dark { background: var(--black); color: var(--cream); caret-color: var(--copper); }
.cream { background: var(--cream); color: var(--black); caret-color: var(--brick); }

/* ---------- type ---------- */
.label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  font: 500 0.875rem/1.2 var(--sign); letter-spacing: 0.18em; text-transform: uppercase;
}
.label::after { content: ""; width: 34px; height: 1px; background: var(--blue); flex: none; }   /* the rule trails the label */
.dark .label::after { background: var(--copper); opacity: 0.9; }

.h2 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.35rem + 3.7vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.012em;
}
.lede { max-width: 44ch; margin-top: clamp(20px, 2vw, 30px); font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; }

/* the highlighter: one ochre swipe behind dark text, wiped on when it first comes into view */
mark {
  --h: 68%;
  color: var(--black);
  background: none;
  background-image: var(--swipe);
  background-repeat: no-repeat;
  background-size: 100% var(--h);
  background-position: 0 72%;
  padding: 0 0.1em;
  margin: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dark mark { --h: 100%; background-image: var(--swipe-full); background-position: 0 50%; padding: 0 0.14em; }
html.js mark { background-size: 0% var(--h); transition: background-size 750ms cubic-bezier(0.65, 0, 0.35, 1), color 300ms 250ms; }
html.js .dark mark { color: var(--cream); }
html.js mark.in { background-size: 100% var(--h); color: var(--black); }
@media (prefers-reduced-motion: reduce) {
  html.js mark, html.js .dark mark { background-size: 100% var(--h); color: var(--black); transition: none; }
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 26px;
  font: 500 0.9375rem/1 var(--sign); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.8125rem; }
.btn-copper { background: var(--copper); color: var(--black); }
.btn-copper:hover { background: var(--cream); }
.btn-line { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgb(237 230 214 / 0.75); }
.btn-line:hover { background: var(--cream); color: var(--black); }
.arr { width: 1.15em; height: 0.7em; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.textlink {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  color: var(--brick); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 220ms var(--ease-out);
}
.textlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.textlink .arr { align-self: center; }

/* ---------- header and nav ---------- */
.site-head {
  position: absolute; inset: 0 0 auto; z-index: 20; color: var(--cream);
  padding-top: clamp(16px, 2vw, 28px);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: block; flex: none; }
.logo img { height: clamp(56px, 5.2vw, 80px); width: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav a:not(.btn) {
  font: 500 0.875rem/1 var(--sign); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; padding: 10px 0;
  background: linear-gradient(var(--copper), var(--copper)) 0 100% / 0 1px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.nav a:not(.btn):hover { background-size: 100% 1px; }
.nav-toggle { display: none; }

/* ---------- 1 · hero ---------- */
.hero {
  position: relative; overflow: clip;
  min-height: max(640px, min(100svh, 980px));
  display: flex; align-items: center;
  padding-block: clamp(140px, 12vw, 180px) clamp(72px, 7vw, 112px);
}
.hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: 24px; }
.hero-copy { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(3.25rem, 1.5rem + 5.6vw, 6rem);
  line-height: 1.02; letter-spacing: -0.018em;
}
.hero h1 .ln { display: block; }
.sub { max-width: 34ch; margin-top: clamp(24px, 2.6vw, 36px); font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 3.4vw, 46px); }

.hero-compass {
  grid-column: 7 / span 6; grid-row: 1;
  justify-self: end;
  width: min(42.5vw, 620px);
  margin-right: calc(-1 * clamp(0px, 3vw, 50px));
  position: relative; z-index: 1;
  translate: 0 9%;   /* the box carries floor shadow below the clay; this centres the clay itself on the text */
}
.compass {
  position: relative; width: 100%; aspect-ratio: var(--c-ar, 1.437);
  /* the floor shadow runs to the render's edge; fade the edges so it dissolves instead of stopping on a line */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%), linear-gradient(to right, transparent 0, #000 6%, #000 84%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 72%, transparent 99%), linear-gradient(to right, transparent 0, #000 6%, #000 84%, transparent 99%);
  mask-composite: intersect;
}
.compass img, .compass canvas { position: absolute; }
.compass-body { inset: 0; width: 100%; height: 100%; }
.compass-needle { left: var(--n-l); top: var(--n-t); width: var(--n-w); height: var(--n-h); }
.compass canvas.compass-needle { opacity: 0; }
.compass.live canvas.compass-needle { opacity: 1; }
.compass.live img.compass-needle { visibility: hidden; }

/* ---------- 2 · services ---------- */
.section { padding-block: var(--section); scroll-margin-top: 24px; }
.services-head { max-width: 900px; }
.svc-list { margin-top: clamp(56px, 6vw, 96px); border-bottom: 1px solid rgb(78 107 122 / 0.55); }
.svc {
  display: grid;
  grid-template-columns: minmax(64px, 1.3fr) minmax(0, 4.6fr) minmax(0, 5.1fr);
  column-gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(34px, 3.6vw, 54px);
  border-top: 1px solid rgb(78 107 122 / 0.55);
  scroll-margin-top: 24px;
}
.svc-num {
  font: 400 clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem)/0.9 var(--sign);
  color: var(--brick); letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}
.svc h3 { font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; }
.svc .promise { margin-top: 12px; max-width: 30ch; font: 400 clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem)/1.45 var(--sans); }   /* quiet, so the name leads */
.svc .desc { max-width: 52ch; padding-top: 0.35em; }
/* "In person, too": same grid, one step quieter, so the five marketing services lead */
.inperson { margin-top: clamp(64px, 7vw, 112px); }
.inperson-head { display: grid; grid-template-columns: minmax(64px, 1.3fr) minmax(0, 4.6fr) minmax(0, 5.1fr); column-gap: clamp(20px, 3vw, 48px); align-items: baseline; }
.inperson-title { grid-column: 2; font: 400 clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem)/1.2 var(--sign); text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); }
.inperson-head p { grid-column: 3; max-width: 52ch; }
.svc-list--quiet { margin-top: clamp(28px, 3vw, 44px); }
.svc-list--quiet .svc { padding-block: clamp(26px, 2.8vw, 40px); }
.svc-list--quiet .svc-num { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); color: var(--blue); }
.svc h4 { margin: 0; font-weight: 400; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.05; letter-spacing: -0.01em; }
.svc-aside { margin-top: clamp(40px, 4vw, 60px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }

/* ---------- 3 · connected ---------- */
.connected .h2-sign {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 0.9rem + 6.1vw, 6rem);
  line-height: 1.04; letter-spacing: -0.02em;
  max-width: 13.5em;
}
.connected .body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; margin-top: clamp(48px, 5vw, 80px); }
.connected .body p { grid-column: 7 / span 6; max-width: 56ch; }

/* three signs that don't agree */
.plates { grid-column: 1 / span 5; position: relative; height: clamp(300px, 26vw, 360px); max-width: 470px; }
.plate {
  position: absolute; width: min(100%, 270px);
  display: grid; gap: 2px; padding: 18px 20px 16px;
  background: var(--cream); color: var(--black);
  border-radius: 3px;
  font: 600 1.0625rem/1.35 var(--sans);
  box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.9), 0 2px 0 rgb(0 0 0 / 0.15);
}
.plate::before, .plate::after {   /* two mounting screws */
  content: ""; position: absolute; top: 9px; width: 5px; height: 5px; border-radius: 50%;
  background: rgb(21 21 21 / 0.35);
}
.plate::before { left: 9px; } .plate::after { right: 9px; }
.plate-k { font: 500 0.8125rem/1.2 var(--sign); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; color: var(--brick); }
.p1 { left: 0; top: 0; transform: rotate(-2.2deg); }
.p2 { left: 22%; top: 31%; transform: rotate(1.6deg); }
.p3 { left: 44%; top: 62%; transform: rotate(-1deg); }

/* ---------- 4 + 5 · the line's run ---------- */
.run { position: relative; }
.run > .line-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.line-svg .line-b { stroke: var(--copper); }
.line-svg path { fill: none; stroke: var(--brick); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.railed { padding-left: var(--gutter); position: relative; z-index: 2; }

.questions { padding-bottom: clamp(40px, 5vw, 80px); }
.q-note { margin-top: 14px; font-style: italic; }
.qa { margin-top: clamp(48px, 5vw, 80px); }
.qa-item { padding-block: clamp(36px, 4vw, 60px); max-width: 780px; }
.qa-item + .qa-item { border-top: 1px solid rgb(78 107 122 / 0.4); }
.qa-item h3 { font-family: var(--serif); font-size: clamp(1.9rem, 1.25rem + 1.9vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; }
.qa-item p { margin-top: 16px; max-width: 58ch; }
.qa-item .textlink { margin-top: 18px; font-style: italic; }

.how { padding-top: var(--section); }
.steps { margin-top: clamp(48px, 5vw, 80px); }
.step { position: relative; padding-block: clamp(22px, 2.4vw, 34px); max-width: 780px; }
.step-num {
  position: absolute; left: calc(-1 * var(--gutter) / 2); top: clamp(22px, 2.4vw, 34px);
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: clamp(40px, 3.6vw, 52px); aspect-ratio: 1;
  background: var(--cream);
  border: 1.5px solid var(--brick);
  border-radius: 50%;
  font: 500 clamp(1rem, 0.9rem + 0.4vw, 1.25rem)/1 var(--sign); color: var(--brick);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.dark .step-num { background: var(--black); border-color: var(--copper); color: var(--copper); }
.step h3 { font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; }
.step p { margin-top: 6px; max-width: 58ch; }

/* the sign: a small serif lead-in, then the line set like a painted sign between brick rules */
.sign { margin-top: clamp(44px, 4.6vw, 72px); max-width: 780px; }
.sign-pre { font: italic 400 clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem)/1.2 var(--serif); color: var(--brick); margin-bottom: 12px; }
.dark .sign-pre { color: var(--copper); }
.dark .sign-line { border-color: var(--copper); }
.sign-line {
  padding-block: clamp(16px, 1.6vw, 24px);
  border-block: 2px solid var(--brick);
  font: 500 clamp(1.85rem, 1.1rem + 2.4vw, 3.4rem)/1.05 var(--sign);
  letter-spacing: 0.015em; text-transform: uppercase;
}

/* ---------- 6 · about ---------- */
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.about-photo { grid-column: 1 / span 4; max-width: 340px; position: relative; isolation: isolate; }
.about-photo::before {   /* a thin brick frame, offset down and right, echoing the sign rules */
  content: ""; position: absolute; inset: 0; z-index: -1;
  translate: clamp(12px, 1.2vw, 18px) clamp(12px, 1.2vw, 18px);
  border: 1.5px solid var(--brick); border-radius: 2px;
}
.about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; box-shadow: 0 18px 40px -22px rgb(21 21 21 / 0.55); }
.about-text { grid-column: 6 / span 7; }
.about-text > p + p { margin-top: 1.1em; }
.about-text > p { max-width: 60ch; }
.principle-follow { margin-top: 20px; }
.about .sign { max-width: none; }   /* one line for the principle at wide sizes */

/* ---------- 7 · close ---------- */
.close { padding-bottom: clamp(56px, 6vw, 96px); }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; align-items: center; }
.close h2 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 0.9rem + 6.1vw, 6rem);
  line-height: 1.04; letter-spacing: -0.02em; max-width: 10em;
}
.close .lede { max-width: 46ch; }
.close .actions { align-items: center; gap: 16px 28px; }
.mail { font-weight: 600; text-decoration: none; background: linear-gradient(var(--copper), var(--copper)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size 220ms var(--ease-out); }
.mail:hover { background-size: 0 1px; background-position: 100% 100%; }

/* contact form (Netlify Forms) */
.contact-form { max-width: 620px; margin-top: clamp(28px, 3vw, 40px); }
.contact-form .hp { position: absolute; left: -9999px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 8px; font: 500 0.8125rem/1.2 var(--sign); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(237 230 214 / 0.82); }
.field input, .field textarea {
  display: block; width: 100%; padding: 13px 14px;
  font: 400 1.0625rem/1.45 var(--sans); color: var(--cream);
  background: rgb(237 230 214 / 0.06); border: 1px solid rgb(237 230 214 / 0.38); border-radius: 2px;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover, .field textarea:hover { border-color: rgb(237 230 214 / 0.6); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--copper); background: rgb(237 230 214 / 0.09); box-shadow: 0 0 0 1px var(--copper); }
.contact-form .actions { margin-top: 8px; }
.contact-form button { border: 0; cursor: pointer; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.form-alt { margin: 0; color: rgb(237 230 214 / 0.82); }
.form-status:empty { display: none; }
.form-status { margin: 18px 0 0; font-size: 1.0625rem; }
.contact-form.sent .field-row, .contact-form.sent .field, .contact-form.sent .actions { display: none; }
.contact-form.sent .form-status { margin-top: 0; padding: 20px 22px; border-left: 2px solid var(--copper); background: rgb(237 230 214 / 0.06); font-size: 1.1875rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
/* no transform here: it would become the frame of reference for the fixed compass inside. The script sets its size
   and left margin so it sits exactly where the footer's first frame puts the compass */
.drop-slot { justify-self: start; width: var(--drop-w, 220px); height: var(--drop-h, 160px); margin-left: var(--drop-ml, 0px); position: relative; }
.drop-compass {
  width: 100%; height: 100%;
  /* its shadow runs to the crop edge: fade the edges so no rectangle shows on black */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.drop-compass.flying { position: fixed; z-index: 15; pointer-events: none; }
.drop-compass.gone { visibility: hidden; }

/* ---------- footer: the compass falls and becomes the logo ---------- */
.scrub { position: relative; height: 135vh; background: #1e1512; }   /* round 5: the melt happens on the way down; the pinned part only paints the logo in */
.clay-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 14; pointer-events: none; display: none; }
.clay-layer.on { display: block; }
.scrub-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scrub-stage canvas, .scrub-stage picture, .scrub-stage picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub-stage picture img { object-fit: cover; }
.scrub-stage canvas { display: none; }
.scrub.live .scrub-stage canvas { display: block; }
.scrub.live .scrub-stage picture { display: none; }
.foot-bar {
  position: absolute; inset: auto 0 0; z-index: 2;
  background: rgb(21 21 21 / 0.9); color: var(--cream);
  padding-block: 16px;
  font-size: 0.9375rem;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
html.js .scrub.live .foot-bar { opacity: 0; transform: translateY(100%); }
html.js .scrub.live .foot-bar.show { opacity: 1; transform: none; }
.foot-bar .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.foot-bar a { text-decoration: none; }
.foot-bar a:hover { text-decoration: underline; }



/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-copy { grid-column: 1 / span 8; }
  .hero-compass { width: min(48vw, 520px); }
  .nav ul { gap: 18px; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    font: 500 0.8125rem/1 var(--sign); letter-spacing: 0.14em; text-transform: uppercase;
    background: none; color: var(--cream); border: 0; box-shadow: inset 0 0 0 1.5px rgb(237 230 214 / 0.75); border-radius: 2px; cursor: pointer;
  }
  .nav { position: relative; }
  .nav ul {
    display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0; min-width: 230px;
    background: var(--black); border: 1px solid rgb(237 230 214 / 0.2); border-radius: 4px; padding: 8px;
    box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.8);
  }
  .nav.open ul { display: flex; }
  .nav ul a:not(.btn) { display: block; padding: 14px 12px; }
  .nav ul .btn { margin-top: 8px; justify-content: center; }
}

@media (max-width: 820px) {
  .hero { min-height: 0; padding-top: 112px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-compass { grid-row: 1; grid-column: 1; justify-self: center; width: min(66vw, 300px); margin: 0 0 8px; }
  .hero-copy { grid-row: 2; grid-column: 1; }

  .svc { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .svc .desc { padding-top: 6px; }
  .svc-num { font-size: 2.25rem; }
  .inperson-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .inperson-title, .inperson-head p { grid-column: 1; }
  .svc-list--quiet .svc-num { font-size: 1.75rem; }

  .connected .body { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .connected .body p { grid-column: 1; }
  .plates { grid-column: 1; height: 290px; max-width: 360px; }
  .plate { width: 230px; padding: 15px 16px 13px; font-size: 1rem; }
  .p2 { left: 18%; top: 32%; } .p3 { left: 36%; top: 64%; }

  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { grid-column: 1; max-width: 210px; }
  .about-text { grid-column: 1; }

  .scrub { height: 130vh; }
  .close-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
}

@media (max-width: 480px) {
  .logo img { height: 50px; }
  .actions .btn { width: 100%; justify-content: center; }
  .close .actions .btn { width: auto; }
  .foot-bar { font-size: 0.875rem; padding-block: 12px; }
  .foot-bar .wrap { gap: 2px 16px; }
}

/* reduced motion: the still compass, the straight line, the finished logo */
@media (prefers-reduced-motion: reduce) {
  .scrub { height: auto; }
  .scrub-stage { position: relative; height: auto; aspect-ratio: 16 / 10; }
  .scrub.live .scrub-stage canvas { display: none; }
  .scrub.live .scrub-stage picture { display: block; }
  .clay-layer { display: none !important; }
  .btn, .textlink, .nav a, .foot-bar, .mail { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (orientation: portrait) {
  .scrub-stage { aspect-ratio: 9 / 16; max-height: 100svh; width: 100%; }
}