/* ==========================================================================
   MC MILLWORK — design system
   Extracted from the approved visual direction:
     - heavy condensed uppercase display type
     - warm neutral palette, orange used only as an accent
     - full-bleed, zero-gutter, irregular-height project mosaic
     - hard horizontal edges; NO rounded corners, NO shadows
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  /* surfaces */
  --paper:      #F7F5F2;
  --band:       #E8E4DC;
  --band-deep:  #D6D2C8;
  --shop-dark:  #26333B;

  /* ink */
  --ink:        #2E2A26;
  --ink-soft:   #6B625A;
  --ink-faint:  #9C9288;
  --on-dark:    #EFEAE3;
  --on-dark-soft: #A9B4BA;

  /* brand */
  --accent:     #F1901E;
  --accent-dim: #D97D12;
  --bronze:     #C08B4F;
  --line:       #D8D2C8;
  --line-dark:  #3D4C55;

  /* type */
  --display: "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid display scale */
  --fs-hero:    clamp(2.5rem, 7.2vw, 6rem);
  --fs-section: clamp(1.9rem, 4.4vw, 3.5rem);
  --fs-sub:     clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:    clamp(0.975rem, 0.35vw + 0.9rem, 1.075rem);

  /* rhythm */
  --gutter:     clamp(1.25rem, 4vw, 4.5rem);
  --section-y:  clamp(3.5rem, 8vw, 7.5rem);
  --measure:    68ch;
  --header-h:   82px;

  /* image slot ratios — mirrored in tools/placeholders.mjs */
  --ratio-ultrawide: 21 / 9;
  --ratio-hero:      16 / 9;
  --ratio-landscape: 4 / 3;
  --ratio-square:    1 / 1;
  --ratio-portrait:  4 / 5;
  --ratio-tall:      2 / 3;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- 2. base */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--accent); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.85rem 1.4rem; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- 3. primitives */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }

.section { padding-block: var(--section-y); }
.section--band      { background: var(--band); }
.section--band-deep { background: var(--band-deep); }
.section--dark      { background: var(--shop-dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--flush-bottom { padding-bottom: 0; }
.section--flush-top    { padding-top: 0; }

/* Section heading: left-aligned, per the reference */
.section-head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.section-head h2 { font-size: var(--fs-section); }
.section-head p {
  max-width: var(--measure);
  margin-top: 1rem;
  color: var(--ink-soft);
}
.section-head--center { text-align: center; }
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.section--dark .eyebrow { color: var(--bronze); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* buttons — square, no radius */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* text link with animated rule */
.tlink {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--accent);
  transition: color .2s var(--ease);
}
.tlink:hover { color: var(--accent); }

/* ------------------------------------------------------- 4. image slots
   Every image lives in a fixed-ratio box with object-fit:cover, so a
   replacement photo of ANY dimensions drops in without shifting layout.
   ------------------------------------------------------------------------ */

.slot {
  position: relative;
  overflow: hidden;
  background: var(--band);
  aspect-ratio: var(--slot-ratio, var(--ratio-landscape));
}
.slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slot-focus, center);
}

.slot--ultrawide { --slot-ratio: var(--ratio-ultrawide); }
.slot--hero      { --slot-ratio: var(--ratio-hero); }
.slot--landscape { --slot-ratio: var(--ratio-landscape); }
.slot--square    { --slot-ratio: var(--ratio-square); }
.slot--portrait  { --slot-ratio: var(--ratio-portrait); }
.slot--tall      { --slot-ratio: var(--ratio-tall); }
.slot--free      { aspect-ratio: auto; }

.slot--zoom > img { transition: transform .7s var(--ease); }
.slot--zoom:hover > img { transform: scale(1.045); }

/* ---------------------------------------------------------------- 5. header */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header__logo { display: block; flex-shrink: 0; line-height: 0; }
.header__logo img { height: 34px; width: auto; }

/* The wordmark is white, so it disappears once the header turns solid over the
   light page. Swap to the ink version whenever the background is light — on
   scroll, and while the mobile drawer (which is paper-coloured) is open. */
.header__logo .logo--dark { display: none; }
.header.is-solid .logo--light { display: none; }
.header.is-solid .logo--dark { display: block; }
.nav-open .header .logo--light { display: none; }
.nav-open .header .logo--dark { display: block; }

.header__nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }

.header__link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.header__link:hover { border-bottom-color: var(--accent); }
.header__link[aria-current="page"] { border-bottom-color: var(--accent); }

.header__cta { padding: 0.75rem 1.3rem; font-size: 0.72rem; }

/* solid state — set by site.js on scroll, and always on non-hero pages */
.header.is-solid {
  background: var(--paper);
  border-bottom-color: var(--line);
}
.header.is-solid .header__link { color: var(--ink); }
.header.is-solid .burger span { background: var(--ink); }

/* mobile toggle */
.burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; z-index: 120;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px auto;
  background: #fff;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
}
.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-open .burger span { background: var(--ink); }

@media (max-width: 860px) {
  .burger { display: block; }
  .header__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    z-index: 110;
  }
  .nav-open .header__nav { transform: none; }
  .header__link { color: var(--ink); font-size: 1.05rem; }
  .header__cta { margin-top: 0.5rem; }
}

/* ------------------------------------------------------------------ 6. hero */

.hero {
  position: relative;
  min-height: clamp(520px, 88svh, 900px);
  display: grid;
  align-items: end;
  isolation: isolate;
}
.hero > .slot,
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim — fixes the low-contrast headline problem in the current site */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,.12) 32%, rgba(20,17,15,.72) 100%);
}

.hero__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  color: #fff;
}
.hero--center { align-items: center; text-align: center; }
.hero--center .hero__inner { padding-bottom: var(--gutter); }
.hero--center .hero__lede { margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  max-width: 16ch;
}
.hero--center h1 { max-width: 20ch; margin-inline: auto; }

.hero__lede {
  max-width: 52ch;
  margin-top: 1.4rem;
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.hero .btn-row { margin-top: 2.2rem; }

/* compact hero for interior pages */
.hero--page { min-height: clamp(360px, 58svh, 620px); align-items: end; }
.hero--page h1 { max-width: 22ch; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  color: #fff; opacity: .75;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px;
  background: currentColor;
  animation: drop 2s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ------------------------------------------------------------ 7. proof strip */

.proof {
  background: var(--ink);
  color: var(--paper);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.proof__item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter);
  border-right: 1px solid rgba(255,255,255,.12);
}
.proof__item:last-child { border-right: 0; }
.proof__num {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--accent);
}
.proof__label {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* --------------------------------------------------------- 8. service tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.tile { position: relative; display: block; text-decoration: none; color: inherit; }
.tile__body { padding-top: 1.15rem; }
.tile h3 { font-size: 1.4rem; }
.tile p {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.tile__more {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.tile__more::after { content: " →"; transition: transform .2s var(--ease); display: inline-block; }
.tile:hover .tile__more::after { transform: translateX(4px); }

/* ---------------------------------------------------------- 9. project mosaic
   The signature layout: full-bleed, zero-gutter, irregular heights.
   ------------------------------------------------------------------------ */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;                 /* zero gutter is the whole point */
  width: 100%;
}
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .mosaic--two { grid-template-columns: repeat(2, 1fr); }
}

.mosaic__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--band);
  aspect-ratio: var(--slot-ratio, var(--ratio-portrait));
}
.mosaic__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.mosaic__item:hover img { transform: scale(1.05); }

/* irregular heights, per the reference contact-sheet feel */
.mosaic__item--tall      { --slot-ratio: var(--ratio-tall); }
.mosaic__item--portrait  { --slot-ratio: var(--ratio-portrait); }
.mosaic__item--landscape { --slot-ratio: var(--ratio-landscape); }
.mosaic__item--square    { --slot-ratio: var(--ratio-square); }
.mosaic__item--wide      { grid-column: span 2; --slot-ratio: var(--ratio-hero); }

.mosaic__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 2vw, 1.75rem);
  background: linear-gradient(0deg, rgba(20,17,15,.85), rgba(20,17,15,0));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mosaic__item:hover .mosaic__overlay,
.mosaic__item:focus-visible .mosaic__overlay { opacity: 1; transform: none; }

.mosaic__name {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.05;
}
.mosaic__type {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* touch devices can't hover — keep the label permanently visible */
@media (hover: none) {
  .mosaic__overlay { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 10. filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.filter {
  padding: 0.6rem 1.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.mosaic__item[hidden] { display: none; }

.filter-empty {
  padding: 3rem 0;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------------------------------------------------------- 11. split blocks */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right > *:first-child { order: -1; }
  .split--narrow-media { grid-template-columns: 5fr 7fr; }
}
.split h2 { font-size: var(--fs-section); }

.pillars { margin: 1.75rem 0 0; padding: 0; list-style: none; }
.pillars li {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: uppercase;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.pillars li::before {
  content: "";
  display: inline-block;
  width: 26px; height: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 0.9rem;
}
.section--dark .pillars li { border-bottom-color: var(--line-dark); }

.tagline {
  margin-top: 2rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

/* ------------------------------------------------------------- 12. process */

.steps {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  counter-reset: step;
}
.step { counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.step p { color: var(--ink-soft); font-size: 0.94rem; }
.section--band .step h3 { color: var(--ink); }

/* ------------------------------------------------------------ 13. accordion */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--accent); }
.acc__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  position: relative;
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: var(--accent);
  left: 50%; top: 50%;
}
.acc__icon::before { width: 18px; height: 2px; transform: translate(-50%,-50%); }
.acc__icon::after  { width: 2px; height: 18px; transform: translate(-50%,-50%); transition: transform .25s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%,-50%) scaleY(0); }

/* Height is measured and set in JS. The CSS-only `grid-template-rows: 0fr -> 1fr`
   technique collapses to 0px here: `overflow:hidden` on the inner element drops
   its automatic minimum to zero, so `1fr` has no free space to resolve against
   in an auto-height container. Measuring scrollHeight is content-agnostic and
   works no matter how long an answer gets. */
.acc__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s var(--ease);
}
.acc__panel p {
  max-width: var(--measure);
  padding-bottom: 1.4rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 14. form */

.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .2s var(--ease);
}
.section--band-deep .field input,
.section--band-deep .field select,
.section--band-deep .field textarea { background: #fff; border-color: transparent; }

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 130px; }

.field__error {
  font-size: 0.78rem;
  color: #B4442E;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  min-height: 1.2em;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #B4442E; }

/* file drop */
.drop {
  border: 1px dashed var(--ink-faint);
  padding: 1.9rem 1rem;
  text-align: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.88rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: rgba(241,144,30,.05); }
.drop input { display: none; }
.drop__plus {
  display: block;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.3rem;
  line-height: 1;
}
.drop__files { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink); }
.drop__hint { display: block; margin-top: 0.35rem; font-size: 0.76rem; color: var(--ink-faint); }

/* Selected-file previews. Square tiles on the same grid rhythm as the rest of
   the site: hard edges, no radius, accent only on interaction. */
.picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}
.picks:empty { display: none; }

.pick {
  position: relative;
  aspect-ratio: 1;
  background: var(--band);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Non-image files (PDF, DWG) get a readable tile instead of a thumbnail. */
.pick__doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
  text-align: center;
  gap: 0.25rem;
}
.pick__ext {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: .04em;
}
.pick__name {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--ink-soft);
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pick__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: rgba(20,17,15,.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s var(--ease);
}
.pick__remove:hover, .pick__remove:focus-visible { background: #B4442E; }

/* Touch devices have no hover, so the control stays visible there. */
@media (hover: hover) {
  .pick__remove { opacity: 0; }
  .pick:hover .pick__remove,
  .pick__remove:focus-visible { opacity: 1; }
}

.picks__note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.picks__note[hidden] { display: none; }

/* Honeypot: never shown, never announced, never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  background: rgba(241,144,30,.08);
  font-size: 0.9rem;
}
.form__status[hidden] { display: none; }
.form__status--ok { border-left-color: #3E7C4A; background: rgba(62,124,74,.08); }
.form__status--err { border-left-color: #B4442E; background: rgba(180,68,46,.08); }

/* ----------------------------------------------------------- 15. contact cta */

.cta__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .cta__grid { grid-template-columns: 5fr 7fr; } }
.cta h2 { font-size: var(--fs-section); }
.cta p { margin-top: 1.1rem; color: var(--ink-soft); max-width: 34ch; }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list dt {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.2rem;
}
.contact-list dd { margin: 0; font-size: 1.05rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--accent); }

/* --------------------------------------------------------------- 16. footer */

.footer { background: var(--ink); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--accent); }

.footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 800px) { .footer__top { grid-template-columns: 2fr 1fr 1fr; } }

.footer__logo img { height: 42px; width: auto; margin-bottom: 1.25rem; }
.footer__blurb { color: rgba(255,255,255,.6); max-width: 38ch; font-size: 0.94rem; }

.footer h3 {
  font-size: 0.72rem;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.footer li { font-size: 0.94rem; color: rgba(255,255,255,.75); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,.5);
}
.socials { display: flex; gap: 1rem; }
.socials a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); }
.socials a:hover { border-color: var(--accent); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------- 17. lightbox */

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgba(20,17,15,.94); }
.lightbox__img { max-width: 92vw; max-height: 84vh; object-fit: contain; margin-inline: auto; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 0.25rem; color: #fff; font-size: 0.78rem; letter-spacing: 0.1em;
}
.lightbox__bar button {
  background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
  padding: 0.55rem 1.1rem; cursor: pointer; text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.14em;
}
.lightbox__bar button:hover { background: rgba(255,255,255,.14); }

/* ------------------------------------------------------------- 18. project */

.project-meta {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
}
.project-meta dt {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.project-meta dd { margin: 0; font-size: 1.02rem; }

.project-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ 19. utilities */

.stack-sm > * + * { margin-top: 1rem; }
.stack    > * + * { margin-top: 1.75rem; }
.lede { font-size: var(--fs-sub); font-weight: 300; line-height: 1.5; color: var(--ink-soft); }
.text-muted { color: var(--ink-soft); }

/* Content still awaiting real values. Deliberately loud so nothing ships
   half-finished — unreplaced template defaults in the footer and services
   list are the exact failure mode of the current live site. Run `npm run
   check` to list every instance; the style disappears when text is replaced. */
.todo {
  background: rgba(241,144,30,.18);
  border-bottom: 2px dotted var(--accent);
  color: inherit;
  font-style: normal;
  padding: 0 .2em;
  /* Must wrap: longer hints ("Add a short description of this project…") would
     otherwise force an unbreakable line and push the page wider than the
     viewport on narrow screens. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sections switched off in the editor. They stay in the HTML source so they
   can be switched back on, are hidden in the local preview, and are removed
   outright by the production build — nothing hidden ever reaches the live site. */
[data-enabled="false"] { display: none; }

/* placeholder notice — remove once real photography is in */
.ph-note {
  position: fixed;
  left: 0; bottom: 0; z-index: 90;
  background: var(--accent); color: #fff;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 0.9rem;
}
.ph-note button {
  background: none; border: 0; color: inherit; cursor: pointer;
  margin-left: 0.6rem; font-weight: 700;
}

/* -------------------------------------------------------------- 20. motion */

/* Scoped to .js (set by an inline script in <head>) so that with JavaScript
   disabled or broken, every section stays visible instead of being stuck at
   opacity:0. Progressive enhancement, not a hard dependency. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 21. print */

@media print {
  .header, .footer, .ph-note, .hero__scroll, .btn { display: none; }
  body { background: #fff; color: #000; }
}