/* Jackson Logic practice site. Tokens and rules follow DESIGN.md.
   White ground, black type, one blue that marks only where a visitor can ask for something. */

:root {
  --paper: #FBFBF9;
  --ink: #141414;
  --ink-2: #4C4C49;
  --hair: #DADAD5;
  --panel: #F1F1EE; /* the prices table header row only */
  --field: #B5B5AF; /* form field borders, 3:1 against paper */
  --ask: #1F3FD6;
  --ask-hover: #1631AD;
  --ask-ink: #FFFFFF;
  --font-head: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 1em;
  max-width: 50ch; /* about 66 characters a line in Public Sans at 17px; 68ch gave 90 */
  text-wrap: pretty;
}

blockquote {
  hanging-punctuation: first;
}

table,
dl {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--ask);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  border-radius: 3px;
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
}

/* Headings */

h1,
h2 {
  font-family: var(--font-head);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  line-height: 1.02;
  hanging-punctuation: first;
}

h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 40px;
}

h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  max-width: 48ch;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--hair);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 8px;
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 72px;
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  height: 24px;
  width: auto;
}

.menu-btn {
  display: none;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--font-text);
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 8px 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (max-width: 699px) {
  .js .menu-btn {
    display: inline-flex;
    align-items: center;
  }

  .js .site-nav {
    display: none;
    width: 100%;
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .site-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--hair);
  }

  .js .site-nav li {
    border-bottom: 1px solid var(--hair);
  }

  .js .site-nav a {
    display: block;
    padding: 14px 0;
  }
}

/* Sections: one hairline between sections, 72px on phones, 120px from 900px */

.section {
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--hair);
}

.hero {
  padding-top: 72px;
  padding-bottom: 72px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

.hero p.lead {
  margin-top: 32px;
  margin-bottom: 0;
}

.detail figcaption {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1.0625rem/1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--ink-2);
  text-decoration: none;
}

.btn-ask {
  background: var(--ask);
  color: var(--ask-ink);
}

.btn-ask:hover {
  background: var(--ask-hover);
}

.btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.shot {
  width: 100%;
  border: 1px solid var(--hair);
}

/* Form */

.form-wrap {
  max-width: 36rem;
}

.field {
  margin-bottom: 24px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--font-text);
}

.field textarea {
  height: auto;
  min-height: 144px;
  padding: 12px;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ask);
  outline-offset: 0;
  border-color: var(--ask);
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--ink);
  border-width: 2px;
  padding-left: 11px;
}

.field.has-error textarea {
  padding-top: 11px;
}

.field-error {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  margin-top: 16px;
}

.form-foot p {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sent,
.form-problem {
  display: none;
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.sent p,
.form-problem p {
  margin: 0;
}

.sent:target,
.sent.is-shown,
.form-problem:target,
.form-problem.is-shown {
  display: block;
}

.sent:target ~ form,
.sent.is-shown ~ form {
  display: none;
}

/* Work page */

.page-head {
  padding-top: 72px;
  padding-bottom: 72px;
}

.page-head p {
  margin-top: 32px;
  margin-bottom: 0;
}

.shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}

.phone-frame {
  position: relative;
  aspect-ratio: 1600 / 1111;
}

.phone-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.detail {
  margin: 24px 0 0;
}

.work-end {
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--hair);
}

.work-end p {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

/* Footer: the one dark surface on the site */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: 64px;
  padding-bottom: 64px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
}

.site-footer p {
  margin: 0 0 8px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--paper);
}

.site-footer :focus-visible {
  outline-color: var(--paper);
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  margin-bottom: 8px;
}

.footer-lockup {
  height: 32px;
  width: auto;
  margin-bottom: 24px;
}

/* 404 */

.notfound {
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  padding-bottom: 72px;
}

.notfound .wrap {
  position: relative;
}

.nf-mark {
  position: absolute;
  right: var(--gutter);
  top: 24px;
  width: min(420px, 60%);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
}

.notfound p {
  margin-top: 24px;
}

@media (min-width: 700px) {
  .site-nav ul {
    flex-wrap: nowrap;
  }

  .brand img {
    height: 28px;
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 48px;
  }

  .section,
  .hero,
  .page-head,
  .work-end,
  .notfound {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }

  .page-head .grid > *,
  .notfound .grid > * {
    grid-column: 1 / span 8;
  }

  .hero .grid {
    align-items: stretch;
  }

  .hero-text {
    grid-column: 1 / span 7;
  }

  .shots {
    grid-template-columns: repeat(12, 1fr);
  }

  .shots .shot-desktop {
    grid-column: span 8;
  }

  .shots .phone-frame {
    grid-column: span 4;
    aspect-ratio: auto;
    min-height: 0;
  }

  .detail {
    max-width: calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);
  }

  .footer-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .footer-main {
    grid-column: 1 / span 8;
  }

  .footer-nav {
    grid-column: 9 / span 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

@media (min-width: 900px) {
  .hero .grid {
    align-items: center;
  }
}

/* Sleek pass: larger mark, a first screen that fills the viewport, a two-column contact */

.brand img {
  height: 30px;
}

.header-row {
  min-height: 80px;
}

h1 {
  font-size: clamp(3rem, 8.4vw, 7.5rem);
  letter-spacing: -0.015em;
}

.hero p.lead {
  max-width: 44ch;
}

@media (min-width: 900px) {
  .brand img {
    height: 40px;
  }

  .header-row {
    min-height: 96px;
  }

  .hero {
    min-height: calc(100svh - 97px);
    display: flex;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .hero > .wrap {
    width: 100%;
  }

  #contact .wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }

  #contact h2 {
    grid-column: 1 / span 4;
  }

  #contact .form-wrap {
    grid-column: 6 / span 7;
  }

  .form-wrap form {
    max-width: none;
  }
}

/* Discipline line under each piece's label on the work page */

.disciplines {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Three-sentence headline: a touch smaller so it holds in four lines on a wide screen */

@media (min-width: 900px) {
  .hero h1 {
    font-size: clamp(3rem, 6.2vw, 5.6rem);
    max-width: 12ch;
  }
}

/* Redesign: the Approach band (flat ink surface) and Where it applies */

.approach {
  background: var(--ink);
  color: var(--paper);
  padding-top: 72px;
  padding-bottom: 72px;
}

.approach h2 {
  color: var(--paper);
}

.approach h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--paper);
}

.approach p {
  max-width: none;
  margin: 0;
}

.approach a {
  color: var(--paper);
  text-decoration: underline;
}

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

.approach-col {
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 1px solid rgba(251, 251, 249, 0.18);
}

.approach-col:first-child {
  padding-top: 0;
  border-top: 0;
}

.approach-col:last-child {
  padding-bottom: 0;
}

@media (min-width: 900px) {
  .approach {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .approach-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .approach-col,
  .approach-col:first-child,
  .approach-col:last-child {
    padding: 0 32px;
    border-top: 0;
    border-left: 1px solid rgba(251, 251, 249, 0.18);
  }

  .approach-col:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .approach-col:last-child {
    padding-right: 0;
  }
}

/* ==========================================================================
   Home page, second version (2026-10-04): a staged opening with two real
   screens, a typographic index of what the company does, a statement band,
   and restrained reveal motion. Motion runs only when html.motion is set.
   ========================================================================== */

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
}

@media (min-width: 700px) {
  .site-nav a.nav-cta {
    padding: 10px 18px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 3px;
  }

  .site-nav a.nav-cta:hover {
    background: #000000;
    text-decoration: none;
  }
}

/* Opening */

.hero-v2 {
  overflow-x: clip;
  padding-top: 56px;
  padding-bottom: 72px;
}

@media (min-width: 900px) {
  .hero-v2 {
    padding-top: 40px;
    padding-bottom: 96px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: center;
  }

  .hero-v2 .hero-text {
    grid-column: 1 / span 6;
  }
}

/* Contact intro beside the form */

.contact-intro .lead {
  margin: 16px 0 32px;
  color: var(--ink-2);
  max-width: 30ch;
}

@media (min-width: 900px) {
  #contact .contact-intro {
    grid-column: 1 / span 4;
  }

  #contact .contact-intro h2 {
    grid-column: auto;
  }
}

/* Reveal motion: only with html.motion, which the script sets when the visitor
   has not asked for reduced motion (or the address carries ?motion=on) */

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.8, 0.18, 1), transform 0.8s cubic-bezier(0.22, 0.8, 0.18, 1);
}

html.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.motion .hero-text [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
html.motion .hero-text [data-reveal]:nth-child(3) { transition-delay: 0.2s; }
html.motion .approach-col:nth-child(2) { transition-delay: 0.1s; }
html.motion .approach-col:nth-child(3) { transition-delay: 0.2s; }

/* Opening, tuned after the first look: a four-line headline, the phone set over the photo side */

@media (min-width: 900px) {
  .hero-v2 h1 {
    font-size: clamp(2.8rem, 5.4vw, 4.9rem);
    max-width: none;
  }

  .hero-v2 p.lead {
    max-width: 36ch;
  }
}

/* Opening without pictures: the headline carries the first screen */

@media (min-width: 900px) {
  .hero-type .hero-text {
    grid-column: 1 / span 11;
  }

  .hero-type h1 {
    font-size: clamp(3.4rem, 8.2vw, 8rem);
    line-height: 0.98;
    max-width: 11.5ch;
  }

  .hero-type p.lead {
    max-width: 46ch;
    margin-top: 40px;
  }
}

@media (min-width: 900px) {
  .hero-type h1 {
    font-size: clamp(3.2rem, 7vw, 7rem);
  }
}

/* On-site viewer for client work: a slim Jackson Logic bar over the client's own site */

.viewer-page {
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
}

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}

.viewer-bar .brand img {
  height: 26px;
}

.viewer-name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.25rem;
  white-space: nowrap;
}

.viewer-tools {
  display: flex;
  align-items: center;
  gap: 20px;
}

.viewer-switch {
  display: none;
}

.viewer-switch button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--font-text);
  cursor: pointer;
}

.viewer-switch button + button {
  border-left: 0;
}

.viewer-switch button:first-child {
  border-radius: 3px 0 0 3px;
}

.viewer-switch button:last-child {
  border-radius: 0 3px 3px 0;
}

.viewer-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.viewer-back,
.viewer-tools .nav-cta {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.viewer-back:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.viewer-tools .nav-cta {
  display: none;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
}

.viewer-main {
  flex: 1;
  min-height: 0;
  background: var(--panel);
}

.viewer-stage {
  display: flex;
  justify-content: center;
  height: 100%;
}

.viewer-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #FFFFFF;
}

.open-site {
  margin: 12px 0 0;
}

@media (max-width: 699px) {
  .viewer-name {
    display: none;
  }
}

@media (min-width: 700px) {
  .js .viewer-switch {
    display: flex;
  }

  .viewer-tools .nav-cta {
    display: inline-block;
  }

  .viewer-bar .brand img {
    height: 30px;
  }

  .viewer-stage[data-view="phone"] {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .viewer-stage[data-view="phone"] .viewer-frame {
    width: 390px;
    border: 1px solid var(--field);
  }
}

/* Privacy page text */

.legal {
  max-width: 1200px;
}

.legal h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 56px 0 16px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  max-width: 62ch;
}

.legal-date {
  margin-top: 56px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Smaller button for "Open the site" */

.btn-small {
  height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

.open-site {
  margin: 20px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .site-nav a.nav-cta,
  .viewer-tools .nav-cta,
  .viewer-switch button {
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
  }

  input,
  textarea {
    transition: border-color 0.2s ease-out;
  }
}

/* One firm: the argument behind the headline, in place of a service list */

.onefirm h2 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.04;
  max-width: 12ch;
  margin: 0 0 32px;
}

.onefirm-text p.lead {
  max-width: 40ch;
  margin: 0 0 20px;
}

.onefirm-text p.lead:last-child {
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 600;
}

html.motion .onefirm-text p:nth-child(2) { transition-delay: 0.1s; }

@media (min-width: 900px) {
  .onefirm {
    padding-top: 144px;
    padding-bottom: 144px;
  }

  .onefirm .wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .onefirm h2 {
    grid-column: 1 / span 6;
    margin: 0;
  }

  .onefirm-text {
    grid-column: 8 / span 5;
    padding-top: 10px;
  }
}

/* ==========================================================================
   Premium pass (2026-10-04): one colour, sharper edges, larger type contrast,
   the mark used as architecture, line-only form fields, a wordmark sign-off.
   ========================================================================== */

:root {
  --ask: #141414;
  --ask-hover: #000000;
  --ask-ink: #FBFBF9;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

h1,
h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.btn,
.site-nav a.nav-cta,
.viewer-tools .nav-cta {
  border-radius: 0;
}

.btn {
  height: 52px;
  padding: 0 26px;
}

.btn-small {
  height: 40px;
  padding: 0 16px;
}

/* Opening: the mark rises on the right like two columns, cut off by the fold */

.hero-type {
  position: relative;
  overflow: hidden;
}

.hero-mark {
  display: none;
}

@media (min-width: 900px) {
  .hero-type .hero-text {
    grid-column: 1 / span 8;
    position: relative;
    z-index: 1;
  }

  .hero-mark {
    display: block;
    position: absolute;
    right: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
    bottom: -14%;
    height: 96%;
    pointer-events: none;
  }

  .hero-mark img {
    display: block;
    height: 100%;
    width: auto;
  }

  html.motion .hero-mark[data-reveal] {
    transform: translateY(40px);
    transition-duration: 1.2s;
    transition-delay: 0.2s;
  }

  html.motion .hero-mark[data-reveal].is-in {
    transform: none;
  }
}

/* Small label over large content */

.label-heading {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1.5;
}

.approach .label-heading {
  margin-bottom: 40px;
  color: rgba(251, 251, 249, 0.7);
}

.approach-col h3 {
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1;
  margin-bottom: 24px;
}

.approach-col p.lead {
  font-size: 1.0625rem;
  color: rgba(251, 251, 249, 0.82);
}

@media (min-width: 900px) {
  .approach {
    padding-top: 144px;
    padding-bottom: 144px;
  }

  .approach .label-heading {
    margin-bottom: 64px;
  }
}

/* Contact: a large invitation, fields drawn as single lines */

#contact h2 {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.98;
}

.field input,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.field textarea {
  min-height: 120px;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 2px 0 0 var(--ink);
}

.field.has-error input,
.field.has-error textarea {
  box-shadow: 0 1px 0 0 var(--ink);
}

@media (min-width: 900px) {
  #contact {
    padding-top: 144px;
    padding-bottom: 144px;
  }

  #contact .contact-intro {
    grid-column: 1 / span 5;
  }

  #contact .form-wrap {
    grid-column: 7 / span 6;
  }
}

/* Footer: the wordmark as a sign-off */

.footer-sign {
  margin-top: 72px;
}

.footer-sign img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.92;
}

@media (min-width: 900px) {
  .footer-sign {
    margin-top: 120px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (min-width: 900px) {
  .hero-mark {
    right: calc(max(var(--gutter), (100vw - 1200px) / 2 + var(--gutter)) - 19vw);
    height: 100%;
    bottom: -16%;
  }
}

.footer-lockup {
  display: none;
}

/* The opening must fit one screen: size the headline from the window's height as well as its width */

@media (min-width: 900px) {
  .hero-type {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .hero-type h1 {
    font-size: clamp(2.6rem, min(7vw, calc((100svh - 470px) * 0.25)), 7rem);
  }

  .hero-type p.lead {
    margin-top: clamp(20px, 3.5svh, 40px);
  }

  .hero-type .hero-actions {
    margin-top: clamp(20px, 3.5svh, 32px);
  }
}

.hero-type h1 {
  max-width: none;
  text-wrap: normal;
}

@media (min-width: 900px) {
  .hero-type h1 {
    font-size: clamp(2.6rem, min(7vw, calc((100svh - 470px) * 0.25)), 6.6rem);
    white-space: nowrap;
  }
}

/* The whole mark, uncropped, beside the headline */

@media (min-width: 900px) {
  .hero-mark {
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
    grid-column: 9 / span 4;
    justify-self: end;
    align-self: center;
    width: min(100%, 380px, calc((100svh - 220px) * 0.876));
  }

  .hero-mark img {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 900px) {
  .hero-mark {
    width: min(100%, 340px, calc((100svh - 220px) * 0.876));
  }
}

/* ==========================================================================
   Sizing pass (2026-10-04), from measurements at 390, 768, 1024, 1440, 1920.
   One scale: home headline largest, inner page titles below it, section
   statements equal to each other, every tappable thing at least 44px tall.
   ========================================================================== */

/* Inner page titles sit below the home headline, never above it */
.page-head h1,
.notfound h1 {
  font-size: clamp(2.75rem, 5.6vw, 5rem);
  line-height: 1.02;
}

/* The two section statements on the home page share one size */
.onefirm h2,
#contact h2 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.04;
}

/* Tap targets */
.footer-nav a,
.site-footer p a {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
}

.footer-nav li {
  margin: 0;
}

.hero-actions a:not(.btn),
.work-end a {
  display: inline-block;
  padding-top: 12px;
  padding-bottom: 12px;
}

.viewer-back {
  padding-top: 10px;
  padding-bottom: 10px;
}

.viewer-switch button {
  height: 44px;
}

.menu-btn {
  min-height: 44px;
}

.site-nav a {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Tablet widths: give sections the room phones do not need and desktops already have */
@media (min-width: 700px) and (max-width: 899px) {
  .section,
  .page-head {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .approach {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* Inner pages use the same vertical rhythm as the home page */
@media (min-width: 900px) {
  .page-head {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Review fixes (2026-10-04): three columns of equal text width, a calmer footer sign-off */

@media (min-width: 900px) {
  .approach-cols {
    grid-template-columns:
      calc((100% - 128px) / 3 + 32px)
      calc((100% - 128px) / 3 + 64px)
      calc((100% - 128px) / 3 + 32px);
  }

  .footer-sign {
    margin-top: 80px;
  }

  .footer-sign img {
    max-width: 720px;
  }
}

/* ==========================================================================
   Second review (2026-10-04): sturdier display type, one tighter scale,
   96 to 128px section rhythm, 18 to 20px text at 55 to 65 characters.
   ========================================================================== */

/* The display face thins out at large optical sizes; hold it at a sturdier cut */
h1,
h2,
h3,
.viewer-name {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 28;
}

h1 {
  font-variation-settings: "opsz" 40;
}

body {
  font-size: 1.125rem;
  line-height: 1.6;
}

p.lead {
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}

main p {
  max-width: 62ch;
}

/* Largest serif for the opening only; section statements one step down */
.onefirm h2,
#contact h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.06;
}

.approach-col h3 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
  margin-bottom: 16px;
}

.approach-col p.lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.contact-intro .lead {
  max-width: 34ch;
}

@media (min-width: 900px) {
  .section,
  .onefirm,
  .approach,
  #contact {
    padding-top: 128px;
    padding-bottom: 128px;
  }

  .hero-type {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .hero-type h1 {
    font-size: clamp(2.6rem, min(6.2vw, calc((100svh - 470px) * 0.25)), 5.9rem);
  }

  .hero-type p.lead {
    font-size: clamp(1.125rem, 1.45vw, 1.3rem);
    max-width: 44ch;
  }
}

/* ==========================================================================
   Featured work on the home page: each project in its own setting, with a
   gallery that moves through the site's screens.
   ========================================================================== */

.feature {
  padding-top: 72px;
  padding-bottom: 72px;
}

.feature-nagomi {
  background: #E3E8E4;
  color: var(--ink);
}

.feature-tio {
  background: #15110F;
  color: var(--paper);
}

.feature-label {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.7;
}

.feature h2 {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 4.4vw, 3.75rem);
  line-height: 1.02;
}

.feature-meta {
  margin: 0 0 28px;
  max-width: 28ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.78;
}

.feature-open {
  margin: 0 0 40px;
}

.btn-light {
  background: var(--paper);
  color: var(--ink);
}

.btn-light:hover {
  background: #FFFFFF;
  color: var(--ink);
}

.gallery-frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: var(--panel);
}

.feature-tio .gallery-frame {
  border-color: rgba(251, 251, 249, 0.16);
  background: #0E0B0A;
}

.gallery-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
}

.gallery-frame img.is-active {
  opacity: 1;
}

.gallery-frame:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.gallery-nav {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.js .gallery-nav {
  display: flex;
}

.gallery-dot {
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gallery-dot span {
  display: block;
  position: relative;
  height: 2px;
  background: color-mix(in srgb, currentColor 24%, transparent);
  overflow: hidden;
}

.gallery-dot span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: currentColor;
}

.gallery-dot.is-active span::after {
  width: 100%;
}

.gallery-dot:focus-visible,
.gallery-pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.gallery-pause {
  display: none;
  margin-left: auto;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: 600 0.9375rem/1 var(--font-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.motion .gallery-pause {
  display: inline-block;
}

@media (min-width: 900px) {
  .feature {
    padding-top: 128px;
    padding-bottom: 112px;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: end;
  }

  .feature-text {
    grid-column: 1 / span 4;
    padding-bottom: 52px;
  }

  .feature-grid .gallery {
    grid-column: 5 / span 8;
  }

  .feature-grid-flip .feature-text {
    grid-column: 10 / span 3;
    grid-row: 1;
  }

  .feature-grid-flip .gallery {
    grid-column: 1 / span 8;
    grid-row: 1;
  }

  .feature-open {
    margin-bottom: 0;
  }
}

/* Motion: the frame opens upward, the screen settles, slides cross-fade, the active bar fills */

html.motion .gallery[data-reveal] {
  opacity: 1;
  transform: none;
}

html.motion .gallery[data-reveal] .gallery-frame {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.motion .gallery[data-reveal].is-in .gallery-frame {
  clip-path: inset(0 0 0 0);
}

html.motion .gallery-frame img {
  transform: scale(1.08);
  transition: opacity 0.9s ease, transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.motion .gallery.is-in .gallery-frame img.is-active {
  transform: none;
}

html.motion .gallery.is-running .gallery-dot.is-active span::after {
  animation: gallery-fill 4.6s linear both;
}

@keyframes gallery-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* ==========================================================================
   Opening sequence (html.hero-intro, wide screens, once per visit):
   1. the mark rises at the left, where the headline will start
   2. it travels to its place and the headline is uncovered behind it
   3. the sentence and the buttons follow
   ========================================================================== */

html.hero-intro .hero-type [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.hero-intro .hero-mark {
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  transform: translateX(var(--mark-from, 0px));
}

html.hero-intro .hero-type h1 {
  clip-path: inset(-10% 100% -10% -5%);
}

html.hero-intro .hero-type p.lead,
html.hero-intro .hero-type .hero-actions {
  opacity: 0;
  transform: translateY(16px);
}

html.hero-intro.hero-intro-go .hero-mark {
  animation:
    intro-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    intro-glide 1.25s cubic-bezier(0.65, 0, 0.2, 1) 0.75s both;
}

html.hero-intro.hero-intro-go .hero-type h1 {
  animation: intro-wipe 1.25s cubic-bezier(0.65, 0, 0.2, 1) 0.75s both;
}

html.hero-intro.hero-intro-go .hero-type p.lead {
  animation: intro-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.85s both;
}

html.hero-intro.hero-intro-go .hero-type .hero-actions {
  animation: intro-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 2s both;
}

@keyframes intro-rise {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes intro-glide {
  from { transform: translateX(var(--mark-from, 0px)); }
  to { transform: translateX(0); }
}

@keyframes intro-wipe {
  from { clip-path: inset(-10% 100% -10% -5%); }
  to { clip-path: inset(-10% -5% -10% -5%); }
}

@keyframes intro-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Direct pass (2026-10-05): fewer words, three form fields, a plain footer */

.onefirm-text p.lead,
.onefirm-text p.lead:last-child {
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  max-width: 34ch;
}

.approach-col p.lead {
  font-size: 1.125rem;
  max-width: 30ch;
}

.site-footer {
  padding-top: 72px;
}

@media (min-width: 900px) {
  .onefirm .wrap {
    align-items: center;
  }

  .onefirm-text {
    padding-top: 0;
  }
}

@media (min-width: 700px) {
  .footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .footer-nav ul {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
  }

  .footer-main p {
    margin: 0;
  }
}

/* Three-beat headline: "Find it. Build it. Run it." Shorter lines, so the type can be larger */

.hero-type h1 {
  font-size: clamp(3.6rem, 17vw, 6rem);
  line-height: 0.96;
}

@media (min-width: 900px) {
  .hero-type h1 {
    font-size: clamp(3.4rem, min(10vw, calc((100svh - 440px) * 0.31)), 9rem);
    font-variation-settings: "opsz" 36;
  }
}

/* Process headings are now three words each: a step smaller so they sit on one line */

.approach-col h3 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: 1.08;
  white-space: nowrap;
}

.approach-col p.lead {
  max-width: 32ch;
}

/* One line under the three steps: a single piece is fine */

.approach .approach-single {
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(251, 251, 249, 0.18);
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(251, 251, 249, 0.82);
}

.approach .approach-single a {
  color: var(--paper);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .approach .approach-single {
    margin-top: 72px;
  }
}

/* Keyboard focus on dark surfaces: a light ring, since the default ring is black */

.feature-tio :focus-visible,
.approach :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--paper);
}

.btn:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}

/* Headline strokes: a lower optical size keeps the thin lines from vanishing at this scale */

@media (min-width: 900px) {
  .hero-type h1 {
    font-variation-settings: "opsz" 18;
    letter-spacing: -0.02em;
  }
}

.hero-type h1 {
  font-variation-settings: "opsz" 18;
}

.onefirm h2 {
  max-width: 14ch;
}

/* Crest & Grove panel: a warm stone taken from the tan in its logo */
.feature-crest {
  background: #E8E2D7;
  color: var(--ink);
}

/* Viewer: a strip of things to try, and a closing line after a sample request */
.viewer-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.viewer-try[hidden] { display: none; }
.viewer-try-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.6;
}
.viewer-try-list { display: flex; flex-wrap: wrap; gap: 8px; }
.viewer-try-list button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.875rem/1 var(--font-text);
  cursor: pointer;
}
.viewer-try-list button:hover { background: var(--ink); color: var(--paper); }
.viewer-close { margin: 0; font-size: 0.9375rem; }
.viewer-close a { font-weight: 600; color: var(--ink); text-underline-offset: 4px; }
@media (min-width: 900px) { .viewer-close { margin-left: auto; } }

.piece-gap { margin: 0 0 20px; max-width: 46ch; font-size: 1rem; line-height: 1.5; }

.concepts-note { padding-top: 0; padding-bottom: 0; }
.concepts-note .piece-gap { margin: 0; padding-top: 40px; border-top: 1px solid var(--hair); max-width: 52ch; font-size: 1.125rem; }

.disciplines + .piece-gap { margin-top: 14px; }