/* ===================================================================
   Wayne's Websites — editorial dark
   -------------------------------------------------------------------
   The page behaves like a printed monograph: ink-charcoal stock, warm
   off-white paper for type, hairline rules instead of cards, and one
   authored motion at the top. Brand blue appears three times, total.

     1.  Tokens
     2.  Base
     3.  Texture (grain + column rules)
     4.  Layout helpers
     5.  Buttons
     6.  Header / navigation
     7.  Hero
     8.  What I do
     9.  My Work
     10. Call to action
     11. Contact + form
     12. Footer
     13. Mobile call bar
     14. Motion
     15. Responsive
     16. Reduced motion + print
   =================================================================== */


/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Ground — charcoal, never pure black */
  --ink:    #0d0d0f;
  --ink-2:  #121216;
  --ink-3:  #17171c;

  /* Paper — warm off-white, the only bright surface */
  --paper:  #f2f0ec;
  --text:   #e4e2dd;
  --muted:  #918e88;

  /* Hairlines */
  --line:   rgba(242, 240, 236, .11);
  --line-2: rgba(242, 240, 236, .20);

  /* The one accent. Used on the mark, focus, and nothing else. */
  --blue:   #6ea3e0;

  /* Type — one face for the whole site.
     CoFo Sans leads the stack. Until its files exist in fonts/, the browser
     falls straight through to Archivo and nothing looks broken. See the
     @font-face block directly below this :root rule.
     --display stays as its own token so a separate headline face can be
     swapped back in by editing one line, but it points at the same stack. */
  --sans: "CoFo Sans", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);

  /* Layout */
  --container: 1240px;
  --gutter: 28px;
  --header-h: 82px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: .5s;
}


/* ---------------------------------------------------------------
   1b. COFO SANS  —  not active yet
   ---------------------------------------------------------------
   CoFo Sans is a paid typeface from Contrast Foundry. You need a
   WEB license (a desktop licence does not permit serving it).

   TO TURN IT ON:
   1. Buy CoFo Sans at contrastfoundry.com and download the web kit.
   2. Put exactly these two files in the fonts/ folder, renamed to
      match if the kit names them differently:
         fonts/CoFoSans-Regular.woff2
         fonts/CoFoSans-Medium.woff2
   3. Below there are two lines that both begin "DELETE THIS WHOLE
      LINE" — one just above the rules, one just below them. Delete
      both of those lines entirely. That turns everything between
      them into live CSS.
   4. Bump the ?v= numbers in index.html and refresh.

   It stays commented out on purpose: with no files present every
   visitor's browser would request them and get a 404 on every page
   load. Nothing breaks meanwhile — the stack falls back to Archivo.

   --------------------------------------------------------------- */

/* DELETE THIS WHOLE LINE, AND THE MARKED LINE AT THE BOTTOM, TO ACTIVATE
@font-face {
  font-family: "CoFo Sans";
  src: url("fonts/CoFoSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CoFo Sans";
  src: url("fonts/CoFoSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
DELETE THIS WHOLE LINE TOO */


/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 .5em; color: var(--paper); font-weight: 400; }

/* Sizes are smaller than the serif version carried: a grotesque at the same
   point size reads considerably heavier and wider, so 6rem became 4.9rem.
   Weight 500 gives presence without going bold — size does the hierarchy. */
h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.035em;
}

h1 { font-size: clamp(2.55rem, 5.6vw, 4.9rem); }
h2 { font-size: clamp(1.95rem, 3.7vw, 2.95rem); }

/* No italic is loaded for the sans, and a browser-synthesised oblique looks
   cheap. The second hero line differentiates by tone instead. */
h1 em, h2 em { font-style: normal; color: var(--muted); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--paper); text-decoration: none; transition: color var(--t) var(--ease); }

img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(242, 240, 236, .18); color: #fff; }

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

.skip-link {
  position: absolute;
  left: 20px;
  top: -100px;
  z-index: 300;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 20px;
  font-size: .9rem;
  font-weight: 500;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--ink); }


/* ---------------------------------------------------------------
   3. TEXTURE
   Film grain and two hairline column rules, both fixed and inert.
   They sit above the page so section tones don't bury them, at an
   opacity meant to be felt rather than seen.
   --------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 400;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rules {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rules i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(242, 240, 236, .05);
}
.rules i:nth-child(1) { left:  max(var(--gutter), calc(50% - var(--container) / 2)); }
.rules i:nth-child(3) { right: max(var(--gutter), calc(50% - var(--container) / 2)); }
.rules i:nth-child(2) { left: 50%; opacity: .55; }


/* ---------------------------------------------------------------
   4. LAYOUT HELPERS
   --------------------------------------------------------------- */
.container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Two adjacent sections stack their padding, so this is half of what
   lands between them. Measured, not guessed: 12vw put 345px of void
   between the last pillar and the next heading. */
.section { padding: clamp(76px, 8.6vw, 124px) 0; }

/* Section opener: display heading left, quiet note right, hairline above */
.masthead {
  display: grid;
  grid-template-columns: 1.05fr .78fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(52px, 7vw, 96px);
}
.masthead h2 { margin: 0; }
.masthead-note {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 46ch;
  padding-top: .5em;
}


/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 500;
  letter-spacing: .002em;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.btn-primary {
  background: var(--paper);
  color: #101013;
}
.btn-primary:hover {
  background: #fff;
  color: #101013;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  background: rgba(242, 240, 236, .05);
  border-color: rgba(242, 240, 236, .38);
  color: var(--paper);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }

#submitBtn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Text link with a rule that draws across on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  color: var(--paper);
  font-size: .97rem;
  font-weight: 500;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-2);
}
/* Scales rather than animating width — width would relayout every frame */
.link-arrow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
  z-index: 1;
}
.link-arrow:hover::before { transform: scaleX(1); }
.link-arrow svg { width: 17px; height: 17px; transition: transform .45s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }


/* ---------------------------------------------------------------
   6. HEADER / NAVIGATION
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(13, 13, 15, .78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--paper);
}
.brand-mark { width: 43px; flex: none; color: var(--paper); }
.brand-mark svg { width: 100%; height: auto; overflow: visible; }
.brand-code { color: var(--blue); stroke: var(--blue); }

.brand-text {
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: -.018em;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav-list a {
  position: relative;
  font-size: .97rem;
  color: var(--muted);
  padding: 4px 0;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav-list a:hover { color: var(--paper); }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a.is-active { color: var(--paper); }
.nav-list a.is-active::after { transform: scaleX(1); }

/* The phone is the header's primary action */
.nav-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: #101013;
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.nav-phone:hover { background: #fff; color: #101013; transform: translateY(-2px); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bars { display: block; width: 17px; }
.nav-toggle-bars i {
  display: block;
  height: 1px;
  background: var(--paper);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle-bars i + i { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }


/* ---------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 104px) 0 clamp(72px, 9vw, 124px);
}

/* One soft light source, top-right. No blobs, no glow ring. */
.hero-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(110, 163, 224, .10), rgba(110, 163, 224, 0) 62%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.hero-title {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 14ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; }

.hero-sub { max-width: 46ch; }

.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.13rem);
  color: var(--muted);
  margin-bottom: clamp(28px, 3.5vw, 40px);
  max-width: 44ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(26px, 3vw, 36px);
}

.hero-phone {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}
.hero-phone a {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--paper);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: border-color var(--t) var(--ease);
}
.hero-phone a:hover { border-bottom-color: var(--paper); }

/* --- The artifact: a site being built. Bleeds off the right edge. --- */
.hero-figure {
  position: relative;
  z-index: 1;
  margin-right: clamp(-170px, -8.5vw, 0px);
}

.browser {
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 240, 236, .18); }
.browser-url {
  flex: 1;
  height: 18px;
  margin-left: 12px;
  background: rgba(242, 240, 236, .05);
}

.browser-body { padding: 32px; }

.mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.mock-logo { width: 70px; height: 10px; background: rgba(242, 240, 236, .34); }
.mock-links { display: flex; gap: 10px; }
.mock-links i { width: 28px; height: 6px; background: rgba(242, 240, 236, .13); }

.mock-hero { padding: 40px 0 34px; }
.mock-line { display: block; height: 14px; background: rgba(242, 240, 236, .11); margin-bottom: 12px; }
.mock-line.w-72 { width: 72%; height: 19px; background: rgba(242, 240, 236, .26); }
.mock-line.w-48 { width: 48%; }
.mock-btn {
  display: block;
  width: 104px; height: 30px;
  margin-top: 26px;
  border-radius: 999px;
  background: var(--paper);
}

.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-card { height: 96px; border: 1px solid var(--line); background: rgba(242, 240, 236, .022); }

.mock-foot { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--line); }
.mock-line.w-34 { width: 34%; }
.mock-line.w-22 { width: 22%; margin-bottom: 0; }


/* ---------------------------------------------------------------
   8. WHAT I DO
   --------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 4vw, 60px);
}

.pillar {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  transition: border-color .6s var(--ease);
}
.pillar:hover { border-top-color: var(--line-2); }

.pillar h3 {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--paper);
  margin-bottom: .7em;
}
.pillar p { font-size: .97rem; color: var(--muted); margin: 0; }


/* ---------------------------------------------------------------
   8b. OCCASIONS
   Deliberately a different rhythm from the three columns above it:
   full-width rows on rules, name left, description right. Two
   identical three-column grids in a row would read as a template.
   --------------------------------------------------------------- */
.occasions-section { background: var(--ink); }

.occasions { display: grid; }

.occasion {
  display: grid;
  grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
  gap: clamp(14px, 3vw, 52px);
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: border-color .6s var(--ease);
}
.occasion:last-child { border-bottom: 1px solid var(--line); }
.occasion:hover { border-top-color: var(--line-2); }

.occasion h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--paper);
}
.occasion p {
  margin: 0;
  font-size: .99rem;
  color: var(--muted);
  max-width: 56ch;
}


/* ---------------------------------------------------------------
   9. MY WORK
   --------------------------------------------------------------- */
.work { background: linear-gradient(180deg, var(--ink) 0%, #101013 50%, var(--ink) 100%); }

.projects { display: grid; gap: clamp(64px, 9vw, 148px); }

.project {
  display: grid;
  grid-template-columns: 1.14fr .76fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
/* Rows alternate on their own — nothing to set when you add one.
   The column widths swap too, so the image keeps the wide column on
   every row; moving it with `order` alone would shrink it. */
.project:nth-child(even) { grid-template-columns: .76fr 1.14fr; }
.project:nth-child(even) .project-media { order: 2; }

.project-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 15, .12) 0%, rgba(13, 13, 15, .42) 100%);
  transition: opacity .7s var(--ease);
}
.project:hover .project-media::after { opacity: .45; }

.project-media img {
  width: 100%;
  height: auto;
  filter: saturate(.9) contrast(1.03);
  transition: transform 1.3s var(--ease), filter .7s var(--ease);
  will-change: transform;
}
.project:hover .project-media img,
.project:focus-within .project-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1);
}

.project-info h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: .5em;
}
.project-info p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 40ch;
  margin-bottom: clamp(22px, 3vw, 32px);
}


/* ---------------------------------------------------------------
   9b. ABOUT
   Portrait left, copy right. The opening line runs smaller than a
   section heading on purpose — it's a lede, not a banner.
   --------------------------------------------------------------- */
.about { background: var(--ink); }

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.about-portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 15, .05) 0%, rgba(13, 13, 15, .45) 100%);
  transition: opacity .7s var(--ease);
}
.about-portrait:hover::after { opacity: .5; }

.about-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.88) contrast(1.03);
  transition: transform 1.3s var(--ease), filter .7s var(--ease);
  will-change: transform;
}
.about-portrait:hover img { transform: scale(1.03); filter: saturate(1) contrast(1); }

.about-copy h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -.03em;
  max-width: 22ch;
  margin-bottom: 1.1em;
}
.about-copy p {
  color: var(--muted);
  font-size: 1.01rem;
  max-width: 64ch;
  margin-bottom: 1.15em;
}
.about-copy .about-closer {
  margin-top: 1.6em;
  margin-bottom: 0;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  color: var(--paper);
  font-size: 1.08rem;
  font-weight: 500;
  max-width: 40ch;
}


/* ---------------------------------------------------------------
   10. CALL TO ACTION
   --------------------------------------------------------------- */
.cta {
  position: relative;
  padding: clamp(96px, 13vw, 168px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(110, 163, 224, .045), rgba(110, 163, 224, 0) 58%),
    var(--ink-2);
}

.cta-inner { text-align: center; max-width: 720px; margin-inline: auto; }
.cta-inner h2 { margin-bottom: .5em; }
.cta-inner > p {
  color: var(--muted);
  font-size: 1.04rem;
  max-width: 48ch;
  margin: 0 auto clamp(30px, 4vw, 42px);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }


/* ---------------------------------------------------------------
   11. CONTACT + FORM
   --------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-row {
  display: grid;
  grid-template-columns: 68px 1fr 20px;
  align-items: center;
  gap: 16px;
  padding: 24px 2px;
  border-top: 1px solid var(--line);
  color: var(--text);
  transition: border-color .5s var(--ease);
}
.contact-row:last-of-type { border-bottom: 1px solid var(--line); }
.contact-row:hover { border-top-color: var(--line-2); color: var(--paper); }

.row-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .5s var(--ease);
}
.contact-row:hover .row-label { color: var(--text); }

.row-value { font-size: 1.03rem; }

.row-arrow {
  width: 18px; height: 18px;
  color: var(--muted);
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.contact-row:hover .row-arrow { transform: translateX(4px); color: var(--paper); }

/* Form */
.field { margin-bottom: 22px; }

.field label {
  display: block;
  margin-bottom: 9px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
}

.field input,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--paper);
  background: rgba(242, 240, 236, .028);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: rgba(242, 240, 236, .05);
  border-color: rgba(242, 240, 236, .45);
}

.field.has-error input,
.field.has-error textarea { border-color: #c8697a; background: rgba(200, 105, 122, .07); }

.error {
  margin: 8px 0 0;
  font-size: .86rem;
  color: #eda2ae;
}

/* Spam trap — hidden from people, visible to bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status { margin: 16px 0 0; font-size: .95rem; }
.form-status.is-success {
  padding: 14px 16px;
  border: 1px solid rgba(126, 214, 168, .32);
  background: rgba(126, 214, 168, .07);
  color: #9fe3bd;
}
.form-status.is-error {
  padding: 14px 16px;
  border: 1px solid rgba(237, 162, 174, .32);
  background: rgba(237, 162, 174, .07);
  color: #eda2ae;
}

.form-fineprint {
  margin: 18px 0 0;
  font-size: .9rem;
  color: var(--muted);
}
.form-fineprint a { border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.form-fineprint a:hover { border-bottom-color: var(--paper); }


/* ---------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------- */
.site-footer { padding-bottom: clamp(36px, 5vw, 56px); }

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

.footer-word {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--paper);
}

.footer-links ul { display: flex; flex-wrap: wrap; gap: 30px; }
.footer-links a { font-size: .97rem; color: var(--muted); }
.footer-links a:hover { color: var(--paper); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.footer-bottom p { margin: 0; font-size: .9rem; color: var(--muted); }
.footer-contact a { color: var(--text); }
.footer-contact a:hover { color: var(--paper); }
.footer-contact .sep { padding: 0 12px; color: rgba(242, 240, 236, .22); }


/* ---------------------------------------------------------------
   13. MOBILE CALL BAR (phones + tablets)
   --------------------------------------------------------------- */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 190;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(13, 13, 15, .9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; min-height: 50px; padding-inline: 14px; }


/* ---------------------------------------------------------------
   14. MOTION
   The hero headline is the authored moment: two lines rise out of
   their own mask. Everything else settles quietly, and only once.
   `.reveal-ready` is set by script.js, so content is visible if
   JavaScript never runs.
   --------------------------------------------------------------- */
.reveal-ready .hero-title .line > span {
  transform: translateY(108%);
  transition: transform 1.15s var(--ease);
}
.reveal-ready .hero-title.is-visible .line > span { transform: none; }
.reveal-ready .hero-title .line:nth-child(2) > span { transition-delay: .1s; }

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
.reveal-ready .hero-sub { transition-delay: .34s; }
.reveal-ready .hero-figure { transition-delay: .16s; }

/* Portfolio rows and pillars stagger against each other, not in unison */
.reveal-ready .pillar:nth-child(2) { transition-delay: .09s; }
.reveal-ready .pillar:nth-child(3) { transition-delay: .18s; }

/* Occasion rows arrive in sequence down the list, not all at once */
.reveal-ready .occasion:nth-child(2) { transition-delay: .06s; }
.reveal-ready .occasion:nth-child(3) { transition-delay: .12s; }
.reveal-ready .occasion:nth-child(4) { transition-delay: .18s; }
.reveal-ready .occasion:nth-child(5) { transition-delay: .24s; }
.reveal-ready .occasion:nth-child(6) { transition-delay: .30s; }


/* ---------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav { gap: 26px; }
  .nav-list { gap: 26px; }
  .hero-figure { margin-right: 0; }
}

/* Tablet — nav collapses, layout goes single column */
@media (max-width: 900px) {
  :root { --header-h: 74px; }

  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 30px;
    background: rgba(13, 13, 15, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    padding: 18px 2px;
    font-size: 1.15rem;
    color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  .nav-list a::after { display: none; }

  .nav-phone { justify-content: center; margin-top: 22px; padding: 15px 22px; font-size: 1rem; }

  .hero { padding-top: clamp(36px, 7vw, 60px); }
  .hero-inner { grid-template-columns: 1fr; gap: clamp(44px, 8vw, 64px); }
  .hero-title { max-width: 100%; }
  .hero-sub { max-width: 100%; }

  .masthead { grid-template-columns: 1fr; gap: 20px; }
  .masthead-note { padding-top: 0; }

  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillar { padding: 24px 0; }
  .pillar:last-child { border-bottom: 1px solid var(--line); }

  .occasion { grid-template-columns: 1fr; gap: 7px; padding: 22px 0; }

  /* Photo above the copy, capped so it doesn't swallow the screen */
  .about-layout { grid-template-columns: 1fr; gap: 34px; }
  .about-portrait { max-width: 320px; }

  .project { grid-template-columns: 1fr; gap: 26px; }
  .project:nth-child(even) .project-media { order: 0; }

  .contact-layout { grid-template-columns: 1fr; }

  .mobile-bar { display: flex; }
  .site-footer { padding-bottom: 92px; }

  .rules i:nth-child(2) { display: none; }
}

/* Phones */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }

  .hero-actions .btn { flex: 1 1 100%; }
  .cta-actions .btn { flex: 1 1 100%; }

  .hero-phone { flex-direction: column; gap: 4px; align-items: flex-start; }

  .browser-body { padding: 18px; }
  .mock-cards { gap: 8px; }
  .mock-card { height: 48px; }

  .contact-row { grid-template-columns: 58px 1fr 18px; gap: 12px; padding: 20px 0; }
  .row-value { font-size: .97rem; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-contact .sep { padding: 0 8px; }
}

@media (max-width: 380px) {
  .brand-text { font-size: 1.02rem; }
  .row-value { font-size: .92rem; }
}


/* ---------------------------------------------------------------
   16. REDUCED MOTION + PRINT
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-ready .reveal,
  .reveal-ready .hero-title .line > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:hover, .nav-phone:hover { transform: none; }
  .project:hover .project-media img { transform: none; }
}

@media print {
  .site-header, .mobile-bar, .grain, .rules, .hero-glow, .hero-figure { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, a { color: #000; }
}