/* Base: reset, type, layout, masthead, sections, quotes, footer, buttons, owner notes, toast. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--masthead-h) + env(safe-area-inset-top, 0px)); }
html[data-motion="on"] { scroll-behavior: smooth; }
html.has-dialog { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* paints the phone's top safe area in the masthead colour */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--paper);
  z-index: 31;
}
/* a faint film grain over everything; fixed, so it never repaints on scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
pre { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--bluehour); outline-offset: 3px; }

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

.skip {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: calc(-4rem + env(safe-area-inset-top, 0px));
  z-index: 70;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
}
.skip:focus { top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); }

/* layout */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) {
  .wrap {
    padding-left: max(clamp(24px, 4vw, 56px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(24px, 4vw, 56px), env(safe-area-inset-right, 0px));
  }
}
.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section__head { display: grid; gap: var(--space-4); max-width: 62ch; margin-bottom: clamp(var(--space-7), 6vw, var(--space-9)); }
.section__intro { color: var(--ink-2); max-width: 52ch; }
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);
}
.lead { font-size: var(--step-1); font-weight: 300; line-height: 1.5; max-width: 34ch; }
.fine { font-size: var(--step--1); color: var(--ink-2); }
.text-link { font-size: var(--step--1); letter-spacing: 0.02em; }

/* buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--bluehour);
  border-radius: var(--radius);
  background: var(--bluehour);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.button:active { transform: scale(0.98); }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--ink); border-color: var(--ink); }
  .button--ghost:hover { background: var(--ink); color: var(--paper); }
}

/* masthead */
.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid var(--rule);
}
.masthead__bar { display: flex; align-items: center; gap: var(--space-5); min-height: var(--masthead-h); }
.wordmark {
  margin: 0 auto 0 0;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__nav { display: flex; align-items: center; gap: clamp(var(--space-4), 2.2vw, var(--space-6)); }
.masthead__nav a, .motion-toggle {
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav .nav-cta { color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); padding: 0.55rem 0.9rem; }
.motion-toggle { background: none; border: 0; padding: var(--space-2) 0; cursor: pointer; }
.motion-toggle[aria-pressed="true"] { color: var(--ink); }
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .masthead__nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) max(16px, env(safe-area-inset-right, 0px)) var(--space-5) max(16px, env(safe-area-inset-left, 0px));
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .masthead.is-open .masthead__nav { display: flex; }
  .masthead__nav a, .masthead__nav .motion-toggle { padding: var(--space-2) 0; font-size: var(--step-0); }
}

/* review bar shown to the owner while reviewMode is on */
.review-bar {
  border-bottom: 1px dashed var(--bluehour);
  background: var(--paper-2);
  color: var(--bluehour);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.review-bar .wrap { padding-block: var(--space-2); }

/* owner notes: unknown facts, visible only while reviewMode is on */
.owner-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--bluehour);
  border-radius: var(--radius);
  color: var(--bluehour);
  font-size: var(--step--1);
  line-height: 1.5;
  max-width: 60ch;
}
.owner-note::before {
  content: "Owner to confirm";
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-size: var(--step--2);
}

/* the studio */
.studio { display: grid; gap: var(--space-6); }
.studio .section__head { margin-bottom: 0; }
.studio__head h2 { font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -0.03em; line-height: 0.95; }
.studio__head .plus { font-family: var(--font-text); font-weight: 300; color: var(--tungsten); }
.studio__text { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.25; max-width: 24ch; }
@media (min-width: 900px) {
  .studio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .studio__head { grid-column: 1 / span 6; }
  .studio__body { grid-column: 8 / span 5; }
}

/* kind words */
.quotes { display: grid; gap: clamp(var(--space-7), 6vw, var(--space-9)); align-items: start; }
.quote { margin: 0; display: grid; gap: var(--space-4); align-content: start; max-width: 30ch; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.25; letter-spacing: -0.01em; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { display: grid; gap: var(--space-1); align-content: start; font-size: var(--step--1); }
.quote__name { font-weight: 500; letter-spacing: 0.04em; }
.quote__meta { color: var(--ink-2); }
.gloss { color: var(--ink-2); font-style: italic; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-8); }
  .quote:nth-child(1) { grid-column: 1 / span 6; }
  .quote:nth-child(2) { grid-column: 8 / span 5; margin-top: var(--space-9); }
  .quote:nth-child(3) { grid-column: 2 / span 5; }
  .quote:nth-child(4) { grid-column: 8 / span 5; margin-top: var(--space-8); }
}

/* basic form fields; the planner layout lives in inquiry.css */
input[type="text"], input[type="date"], textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, var(--step-0));
}
textarea { resize: vertical; min-height: 7rem; }
input:focus-visible, textarea:focus-visible { border-color: var(--bluehour); }

/* footer */
.colophon { background: var(--paper-2); border-top: 1px solid var(--rule); padding-block: var(--space-8) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); }
.colophon__grid { display: grid; gap: var(--space-6); font-size: var(--step--1); }
.colophon__mark { margin: 0; }
.colophon__address { font-style: normal; line-height: 1.7; }
.colophon__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.colophon__end { display: grid; gap: var(--space-2); align-content: start; }
@media (min-width: 900px) {
  .colophon__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .colophon__mark { grid-column: 1 / span 3; }
  .colophon__address { grid-column: 4 / span 3; }
  .colophon__contact { grid-column: 7 / span 3; }
  .colophon__end { grid-column: 10 / span 3; }
  .colophon .owner-note { grid-column: 1 / -1; }
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: min(90vw, 28rem);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* motion off: nothing animates, everything is already in place */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
}

/* the footer's giant wordmark, cut off by the page edge like a film title card */
.colophon { overflow: hidden; }
.colophon__wordmark {
  grid-column: 1 / -1;
  margin: var(--space-7) 0 calc(-0.22em - var(--space-7));
  font-family: var(--font-display);
  font-size: 13.6vw;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
}