/* ==========================================================================
   Mayo — Concept C
   Reference: cedarsprings.net. Photography-maximal, near-monochrome chrome,
   lowercase display voice, full-bleed project carousel. No prices anywhere.
   ========================================================================== */

:root {
  --white: #ffffff;
  --near: #f7f7f5;
  --ink: #16181a;
  --ink-2: #3a4046;
  --muted: #6b7278;
  --hair: rgba(22, 24, 26, 0.16);
  --hair-soft: rgba(22, 24, 26, 0.08);

  /* The one colour, taken from the brand kit so this stays Mayo */
  --slate: #5b6d7e;

  --display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --ui: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1400px;
  --gutter: clamp(1.15rem, 4vw, 3.75rem);
  --navh: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink-2);
  font-family: var(--ui); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 300;
  line-height: 1.02; letter-spacing: -0.028em;
  color: var(--ink); margin: 0; text-transform: lowercase;
}
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: #fff; padding: .85rem 1.25rem; }
.skip:focus { left: 0; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 56ch; }

.d-xl { font-size: clamp(2.6rem, 8.2vw, 7.5rem); }
.d-l  { font-size: clamp(2.2rem, 6.2vw, 5.25rem); }
.d-m  { font-size: clamp(1.75rem, 3.8vw, 3.25rem); }
.d-s  { font-size: clamp(1.35rem, 2.2vw, 2rem); }

.label {
  font-family: var(--ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.lede { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: var(--ink-2); line-height: 1.68; }

.section { padding-block: clamp(4rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--near { background: var(--near); }
.section--ink { background: var(--ink); color: #cfd4d8; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink .label { color: #8d959c; }
.section--ink .lede { color: #b9c0c6; }

/* ---------- The reference's link: label, hairline rule, arrow ---------- */
.arrowlink {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--ui); font-size: 1rem; font-weight: 500;
  text-decoration: none; color: var(--ink); min-height: 44px;
}
.arrowlink::before {
  content: ""; width: 1px; height: 26px; background: var(--hair);
  order: 1; transition: background .3s var(--ease);
}
.arrowlink svg { order: 2; transition: transform .35s var(--ease); }
.arrowlink:hover svg { transform: translateX(6px); }
.arrowlink--light { color: var(--white); }
.arrowlink--light::before { background: rgba(255,255,255,.4); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--ui); font-size: .9375rem; font-weight: 600;
  padding: 1rem 1.9rem; min-height: 50px;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink);
  text-decoration: none; transition: background .28s var(--ease), color .28s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   Header — sits over the hero, no background until scrolled
   ========================================================================== */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--navh); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-height: 44px; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name {
  font-family: var(--display); font-size: 1.4rem; font-weight: 300;
  letter-spacing: .16em; line-height: 1; color: var(--white);
  text-transform: uppercase;
}
.brand__sub { font-family: var(--ui); font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.86); display: block; margin-top: 3px; }

/* Chrome and hero copy sit directly on photography, which can be bright anywhere.
   A soft shadow keeps them legible without darkening the image further. */
.masthead:not(.is-stuck):not(.masthead--solid) .brand, .masthead:not(.is-stuck):not(.masthead--solid) .arrowlink, .hero h1, .hero__sub, .hero__actions .arrowlink, .slide h3, .slide__text, .slide__body .label, .slide__meta, .band h2 { text-shadow: 0 1px 14px rgba(8, 10, 12, .38); }

.masthead__end { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.masthead .arrowlink { color: var(--white); }
.masthead .arrowlink::before { background: rgba(255,255,255,.45); }

/* Scrolled state flips the bar to white */
.masthead.is-stuck { background: rgba(255,255,255,.95); border-bottom-color: var(--hair-soft); }
@supports (backdrop-filter: blur(8px)) { .masthead.is-stuck { backdrop-filter: blur(12px); } }
.masthead.is-stuck .brand__name { color: var(--ink); }
.masthead.is-stuck .brand__sub { color: var(--muted); }
.masthead.is-stuck .arrowlink { color: var(--ink); }
.masthead.is-stuck .arrowlink::before { background: var(--hair); }
.masthead.is-stuck .menubtn span, .masthead.is-stuck .menubtn span::before, .masthead.is-stuck .menubtn span::after { background: var(--ink); }
/* Interior pages open on white, so the bar starts in the stuck style */
.masthead--solid { position: sticky; background: rgba(255,255,255,.95); border-bottom-color: var(--hair-soft); }
.masthead--solid .brand__name { color: var(--ink); }
.masthead--solid .brand__sub { color: var(--muted); }
.masthead--solid .arrowlink { color: var(--ink); }
.masthead--solid .arrowlink::before { background: var(--hair); }
.masthead--solid .menubtn span, .masthead--solid .menubtn span::before, .masthead--solid .menubtn span::after { background: var(--ink); }

.menubtn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.menubtn span { display: block; width: 22px; height: 1.5px; background: var(--white); position: relative; transition: background .3s var(--ease); }
.menubtn span::before, .menubtn span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--white);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.menubtn span::before { top: -7px; }
.menubtn span::after { top: 7px; }

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--navh) + 2rem) var(--gutter) 3rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.menu.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.menu nav { display: flex; flex-direction: column; gap: .15rem; }
.menu a {
  font-family: var(--display); font-weight: 300; text-transform: lowercase;
  font-size: clamp(2rem, 6vw, 4rem); line-height: 1.14; letter-spacing: -.028em;
  color: var(--white); text-decoration: none; width: fit-content;
  opacity: .62; transition: opacity .3s var(--ease);
}
.menu a:hover, .menu a[aria-current="page"] { opacity: 1; }
.menu nav a { display: flex; align-items: center; min-height: 44px; }
.menu__foot { margin-top: clamp(2rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: .25rem 2.5rem; color: #8d959c; font-size: .9375rem; align-items: center; }
.menu__foot a, .menu__foot span { font-family: var(--ui); font-size: .9375rem; opacity: 1; text-transform: none; letter-spacing: 0; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
body.menu-open, body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,12,14,.42) 0%, rgba(10,12,14,.06) 34%, rgba(10,12,14,.62) 100%);
}
.hero__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(2.25rem, 5vw, 4.5rem);
}
.hero h1 { color: var(--white); max-width: 15ch; }
.hero__sub { color: rgba(255,255,255,.9); max-width: 46ch; margin-top: 1.25rem; }
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ==========================================================================
   Statement block
   ========================================================================== */
.statement { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .statement { grid-template-columns: 1.05fr .95fr; align-items: start; } }

/* ==========================================================================
   Site walk — Evan's vertical video. On wide screens the portrait plate rises out of
   the hero like a print laid over it; its white mat disappears into the white ground
   below, so only the half over the photograph reads as a frame. Copy sits bottom
   aligned beside it, entirely on white. Phones stack, with no overlap.
   ========================================================================== */
.walk { position: relative; z-index: 3; padding-top: clamp(3.5rem, 9vw, 5rem); }
.walk__in { display: grid; gap: clamp(1.5rem, 5vw, 2.25rem); grid-template-areas: "head" "plate" "body"; }
.walk__head { grid-area: head; display: grid; gap: 1.1rem; }
.walk__body { grid-area: body; display: grid; gap: 1.5rem; justify-items: start; max-width: 34rem; }
.walk__body .lede { margin: 0; }
.walk__len { display: inline-block; margin-left: .7rem; padding-left: .7rem; border-left: 1px solid var(--hair); color: var(--ink-2); }

.walk__plate { grid-area: plate; margin: 0; justify-self: start; width: min(100%, calc(74svh * 9 / 16 + 12px)); }
.walk__frame { position: relative; background: var(--white); padding: 6px; }
.walk__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }

/* Lower scrim so the controls read on bright sky and white siding */
.walk__frame::after {
  content: ""; position: absolute; inset: auto 6px 6px 6px; height: 34%;
  background: linear-gradient(to bottom, rgba(10,12,14,0), rgba(10,12,14,.55));
  pointer-events: none; transition: opacity .4s var(--ease);
}

.walk__start {
  /* Covers the whole plate so a tap anywhere on the video starts it; the label sits at the foot */
  position: absolute; z-index: 2; inset: 6px;
  display: flex; align-items: flex-end; gap: .85rem;
  padding: 1.25rem 1.35rem 1.4rem; text-align: left;
  font-family: var(--ui); font-size: .9375rem; font-weight: 600; line-height: 46px; color: var(--white);
  text-shadow: 0 1px 10px rgba(8,10,12,.4);
}
.walk__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(255,255,255,.55); transition: background .3s var(--ease), color .3s var(--ease);
}
.walk__start:hover .walk__icon, .walk__start:focus-visible .walk__icon { background: var(--white); color: var(--ink); text-shadow: none; }
.walk__start:focus-visible { outline: none; }
.walk__start:focus-visible .walk__icon { outline: 2px solid var(--white); outline-offset: 3px; }

.walk__bar { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 6px; height: 2px; background: rgba(255,255,255,.25); opacity: 0; transition: opacity .3s var(--ease); }
.walk__fill { display: block; height: 100%; background: var(--white); transform-origin: left; transform: scaleX(0); transition: transform .25s linear; }

.walk__ctrls { position: absolute; z-index: 2; right: 14px; bottom: 16px; display: flex; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.walk__ctrl {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--white); border: 1px solid rgba(255,255,255,.5); background: rgba(10,12,14,.28);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.walk__ctrl:hover { background: var(--white); color: var(--ink); }
.walk__ctrl .i-play, .walk__ctrl .i-muted { display: none; }
.walk.is-paused .walk__ctrl .i-play, .walk__ctrl[aria-pressed="true"] .i-muted { display: block; }
.walk.is-paused .walk__ctrl .i-pause, .walk__ctrl[aria-pressed="true"] .i-sound { display: none; }

/* Sound mode: the start button gives way to the bar and the two controls */
.walk.is-sound .walk__start { opacity: 0; visibility: hidden; }
.walk.is-sound .walk__bar { opacity: 1; }
.walk.is-sound .walk__ctrls { opacity: 1; visibility: visible; }
.walk.is-sound .walk__frame::after { opacity: .7; }
.walk__start { transition: opacity .3s var(--ease), visibility .3s; }

.no-js .walk__start, .no-js .walk__bar, .no-js .walk__ctrls, .no-js .walk__frame::after { display: none; }

/* Phones: one centred column, the plate a touch narrower than the screen so it sits as an object */
@media (max-width: 759px) {
  .walk__in { justify-items: center; text-align: center; }
  .walk__head, .walk__body { justify-items: center; margin-inline: auto; }
  .walk__plate { justify-self: center; width: min(100%, 360px, calc(70svh * 9 / 16 + 12px)); }
}
/* Tablet and up: copy beside the plate, bottom aligned. Only wide screens overlap the hero. */
@media (min-width: 760px) {
  .walk__in { grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; grid-template-areas: "head plate" "body plate"; align-items: end; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 1.5rem; }
  .walk__body { padding-bottom: clamp(.5rem, 2vw, 2rem); }
  .walk__plate { width: clamp(280px, 27vw, 400px); }
}
@media (min-width: 1000px) {
  .walk { padding-top: 0; }
  .walk__plate { margin-top: calc(-1 * clamp(150px, 22vh, 230px)); }
  .walk + .section { padding-top: clamp(4rem, 8vw, 7rem); }
}
@media (max-width: 999px) {
  .walk + .section { padding-top: clamp(3.5rem, 9vw, 5rem); }
}

/* ==========================================================================
   Project carousel — the reference's signature
   ========================================================================== */
.projects { position: relative; background: var(--ink); }
.slides { position: relative; height: clamp(520px, 88svh, 860px); }
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,12,14,.30) 0%, rgba(10,12,14,0) 30%, rgba(10,12,14,.78) 100%);
}
.slide__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(4.5rem, 8vw, 6.5rem); }
.slide__body .label { color: rgba(255,255,255,.8); margin-bottom: .8rem; }
.slide h3 { color: var(--white); margin-bottom: 1rem; }
.slide__text { color: rgba(255,255,255,.86); max-width: 52ch; font-size: 1rem; }

.slide__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem 1.5rem; margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 720px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.25rem;
}
@media (min-width: 700px) { .slide__meta { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.slide__meta dt { font-family: var(--ui); font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: .3rem; }
.slide__meta dd { margin: 0; color: var(--white); font-size: .9375rem; line-height: 1.35; }

/* Controls */
.slidebar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem var(--gutter) 1.4rem;
}
.dots { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
/* 30px of visible rule, but a full 44px hit area around it */
.dot { width: 34px; height: 44px; display: grid; place-items: center; padding: 0; }
.dot i { display: block; width: 26px; height: 1.5px; background: rgba(255,255,255,.42); transition: background .3s var(--ease); }
.dot[aria-selected="true"] i { background: var(--white); }
.arrows { display: flex; align-items: center; gap: .35rem; }
.arrows button { width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); opacity: .75; transition: opacity .25s var(--ease); }
.arrows button:hover { opacity: 1; }

/* No-JS: stack the slides instead of hiding all but one */
.no-js .slides { height: auto; }
.no-js .slide { position: relative; opacity: 1; visibility: visible; height: clamp(460px, 70vh, 720px); }
/* The hidden attribute is JS bookkeeping for the carousel. Without JS it would beat the
   rule above and leave one project on the page, so it is overridden here. */
.no-js .slide[hidden] { display: block; }
.no-js .slidebar { display: none; }

/* Full-size view of the active carousel photo */
.lightbox {
  /* Solid on purpose: at .94 the masthead ghosted through under the close button. */
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 1.75rem); right: clamp(1rem, 3vw, 1.75rem);
  width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); opacity: .8;
  transition: opacity .25s var(--ease);
}
.lightbox__close:hover { opacity: 1; }
.no-js .lightbox { display: none; }

/* ==========================================================================
   Plan block — "design is just the beginning"
   ========================================================================== */
.planblock { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .planblock { grid-template-columns: 1fr 1fr; } }
.planfig { margin: 0; }
.planfig img { width: 100%; }
.planfig figcaption { font-family: var(--ui); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }

/* ==========================================================================
   Full-bleed band
   ========================================================================== */
.band { position: relative; height: clamp(360px, 62vh, 640px); overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
/* Starts earlier and lands darker than it looks like it needs to: the band headline sits
   high in the frame and the photograph behind it can be a bright sky or pale paving. */
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,12,14,0) 22%, rgba(10,12,14,.42) 62%, rgba(10,12,14,.80) 100%); }
.band h2 { color: var(--white); }

/* ==========================================================================
   Scope list
   ========================================================================== */
.scope { border-top: 1px solid var(--hair-soft); }
.scoperow {
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem); border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 820px) { .scoperow { grid-template-columns: .5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; } }
.scoperow h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.scoperow p { color: var(--muted); font-size: .9375rem; margin: 0; }

/* ==========================================================================
   Pair, quote, media
   ========================================================================== */
.pair { display: grid; gap: 1rem; }
@media (min-width: 620px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair figure { margin: 0; }
.pair .tag { display: block; margin-top: .8rem; font-family: var(--ui); font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.pair .tag em { display: block; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: .25rem; font-size: .9375rem; color: var(--ink-2); }

.quote blockquote { margin: 0 0 1.4rem; font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 2.8vw, 2.25rem); line-height: 1.28; letter-spacing: -.02em; color: var(--ink); }
.section--ink .quote blockquote { color: var(--white); }
.quote figcaption { font-family: var(--ui); font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.section--ink .quote figcaption { color: #8d959c; }

/* Missing-media stand-in, same device as concepts A and B */
.shot { position: relative; overflow: hidden; }
.shot__cover {
  position: absolute; inset: 0; background: rgba(22,24,26,.9); color: #eceef0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  padding: clamp(1rem, 2vw, 1.5rem); opacity: 1; transition: opacity .35s var(--ease);
}
.shot:hover .shot__cover, .shot:focus-within .shot__cover { opacity: 0; }
.shot__cover .label { color: #9fb0bd; margin-bottom: .1rem; }
.shot__cover p { font-size: .875rem; line-height: 1.45; margin: 0; }
.shot__hint { font-size: .6875rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(236,238,240,.58); }

/* ==========================================================================
   Form
   ========================================================================== */
.note { font-size: .8125rem; color: var(--muted); }
.formstatus { font-size: .9375rem; padding: .9rem 1rem; border: 1px solid var(--hair); }
.details { display: grid; gap: 1.4rem; }
.details div { display: grid; gap: .2rem; }
.details a { text-decoration: none; border-bottom: 1px solid var(--hair); }
.details a:hover { border-color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--ink); color: #a8b0b6; padding-block: clamp(3rem, 6vw, 5rem) 1.75rem; }
.foot a { color: #eceef0; }
.foot .brand__name { color: var(--white); }
.foot .brand__sub { color: #8d959c; }
.foot__top { display: grid; gap: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.13); }
@media (min-width: 820px) { .foot__top { grid-template-columns: 1.5fr .75fr .75fr; } }
.foot h2 { font-family: var(--ui); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d959c; margin-bottom: 1.1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.foot ul a { text-decoration: none; font-size: .9375rem;
  display: inline-flex; align-items: center; min-height: 44px; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__blurb { max-width: 42ch; font-size: .9375rem; margin-top: 1rem; }
.foot__bot { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; font-size: .875rem; color: #767f86; }
.foot__bot a { text-decoration: none; }
.foot__bot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* Concept banner. Lives INSIDE the fixed masthead so one element owns the top of the
   viewport; a separate bar would sit behind the fixed header and hide the wordmark.
   Delete this block and its markup when a concept is chosen. */
.conceptbar {
  background: var(--ink); color: #eceef0; font-size: .8125rem;
  padding: .55rem var(--gutter); display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  align-items: center; justify-content: center; text-align: center;
}
.conceptbar strong { color: #fff; font-weight: 700; }
.conceptbar a { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   The plan resolves
   Linework traced from the real geometry of aerial-pool-terrace.jpg. The photo
   is object-fit: cover and the SVG is preserveAspectRatio slice, so the two
   crop identically at every size. Swap the photograph and the plan becomes a lie.
   ========================================================================== */
.plan { background: var(--near); }
/* Introduces the carousel below and separates it from the plate. The near ground runs
   straight on from .plan, so the two read as one movement rather than a gap. */
.worklead { background: var(--near); padding-block: clamp(2.75rem, 6vw, 5rem); }
.plate {
  position: relative; margin: 0; overflow: hidden;
  background: var(--near); height: clamp(460px, 82svh, 820px);
}
/* On a phone a full-height plate would slice the plan down to a narrow centre strip,
   so it takes a defined shape instead. Photo and SVG still crop identically. */
@media (max-width: 700px) { .plate { height: auto; aspect-ratio: 4 / 3.4; } }
.plate__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.045);
  transition: opacity 1.5s var(--ease), transform 2.4s var(--ease);
}
.plate.is-resolved .plate__photo { opacity: 1; transform: none; }

.plate__plan { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.3s var(--ease); }
.plate.is-resolved .plate__plan { opacity: .42; }

.plan-line {
  fill: none; stroke: var(--slate); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.plan-line--hair { stroke-width: 1.1; stroke-dasharray: 7 6; opacity: .75; }
.plan-line--bold { stroke-width: 3.2; }
.plate.is-resolved .plan-line { stroke: #ffffff; }
.plan-fill { fill: var(--slate); opacity: .07; transition: opacity 1.2s var(--ease); }
.plate.is-resolved .plan-fill { opacity: 0; }
.plan-hatch { fill: url(#mayoHatch); opacity: .5; transition: opacity 1.2s var(--ease); }
.plate.is-resolved .plan-hatch { opacity: 0; }

.plan-note {
  font-family: var(--ui); font-size: 15px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; fill: var(--slate);
}
.plate.is-resolved .plan-note { fill: #ffffff; }
.plan-note--sm { font-size: 12.5px; letter-spacing: .14em; font-weight: 500; }

.plan-draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.plate.is-drawing .plan-draw { animation: planDraw 1.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes planDraw { to { stroke-dashoffset: 0; } }
.plan-appear { opacity: 0; }
.plate.is-drawing .plan-appear { animation: planAppear .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes planAppear { to { opacity: 1; } }

/* The scrim arrives with the photograph. Before that the drawing sits on clean paper. */
.plate__scrim {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s var(--ease);
  background: linear-gradient(to bottom, rgba(10,12,14,0) 34%, rgba(10,12,14,.74) 100%);
}
.plate.is-resolved .plate__scrim { opacity: 1; }

.plate__say {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(2rem, 4.5vw, 3.75rem);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease) .4s, transform 1s var(--ease) .4s;
}
.plate.is-resolved .plate__say { opacity: 1; transform: none; }
.plate__say .shell { display: block; }
.plate__line {
  display: block; font-family: var(--display); font-weight: 300;
  line-height: 1.02; letter-spacing: -.028em; color: var(--white); text-transform: lowercase;
}

/* ==========================================================================
   Project strip — the thin sideways run, squared off and tight for this concept
   ========================================================================== */
.strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: var(--white); }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 2px solid var(--slate); outline-offset: -2px; }
.strip__track { display: flex; gap: 2px; width: max-content; }
.strip figure { margin: 0; position: relative; flex: none; width: clamp(178px, 19vw, 262px); background: var(--near); }
.strip figure img { display: block; width: 100%; height: clamp(212px, 23vw, 302px); object-fit: cover; }

/* Each square opens full size. The button is the whole tile, so the hit area is the
   photograph itself rather than a small corner control. */
.strip__zoom { display: block; position: relative; width: 100%; padding: 0; margin: 0; cursor: zoom-in; }
.strip__zoom:focus-visible { outline: 2px solid var(--slate); outline-offset: -3px; }
.no-js .strip__zoom { cursor: default; }
/* Icon only, not a text badge: at this tile size a worded label would dominate the photo.
   The dark plate keeps the mark legible on a bright image. Visible at rest so it reads on
   touch too, where there is no hover and no cursor to signal it. */
.strip__view {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--white); background: rgba(10,12,14,.46);
  border: 1px solid rgba(255,255,255,.34); opacity: .9;
  transition: opacity .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.strip__zoom:hover .strip__view, .strip__zoom:focus-visible .strip__view { opacity: 1; background: rgba(10,12,14,.72); border-color: var(--white); }
.no-js .strip__view { display: none; }

/* ==========================================================================
   Design process — six stages, Evan's own stage names
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--hair-soft); }
.step { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); border-bottom: 1px solid var(--hair-soft); }
@media (min-width: 700px) and (max-width: 1079px) {
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step { border-left: 1px solid var(--hair-soft); padding-inline: clamp(1.25rem, 2.4vw, 2rem); }
  .step:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .step:nth-child(2n) { padding-right: 0; }
}
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .step { border-left: 1px solid var(--hair-soft); padding-inline: clamp(1.5rem, 2.4vw, 2.25rem); }
  .step:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .step:nth-child(3n) { padding-right: 0; }
}
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.step__no { font-family: var(--ui); font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.stepicon {
  width: 40px; height: 40px; flex: none; color: var(--slate);
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.step h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin-bottom: .65rem; }
.step p { color: var(--muted); font-size: .9375rem; margin: 0; }

/* ==========================================================================
   Before / after — dragged, not placed side by side
   The range input is the real control: invisible, full bleed over the frame, so
   the drag works by pointer and the arrow keys work by keyboard for free.
   ========================================================================== */
.ba { --pos: 50%; }
.ba__frame { position: relative; overflow: hidden; aspect-ratio: 1400 / 788; background: var(--ink); }
/* 16:9 leaves barely 200px of height on a phone, which is not enough to read a
   before against an after. Both frames crop identically, so the pair stays honest. */
@media (max-width: 620px) { .ba__frame { aspect-ratio: 4 / 3; } }
.ba__frame:focus-within { outline: 2px solid var(--slate); outline-offset: 3px; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--after { clip-path: inset(0 0 0 var(--pos)); }

.ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.92); z-index: 3; pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.96); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 16px rgba(10,12,14,.32);
}
.ba__tag {
  position: absolute; bottom: 1rem; z-index: 2;
  font-family: var(--ui); font-size: .6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--white);
  background: rgba(10,12,14,.58); padding: .4rem .7rem;
}
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; }
.ba__hint {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 4;
  font-family: var(--ui); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.94); padding: .45rem .85rem;
  transition: opacity .5s var(--ease); pointer-events: none;
}
.ba.is-touched .ba__hint { opacity: 0; }
.ba__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; background: none;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; }
.ba__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; }
.ba__cap { font-family: var(--ui); font-size: .875rem; color: var(--muted); margin-top: .9rem; }

/* ==========================================================================
   Google reviews — Mayo's own Elfsight widget, so the reviews stay real and linked
   ========================================================================== */
.reviews { min-height: 240px; }
/* Evan's widget is configured dark in his own Elfsight account, so the section it sits in
   is dark too. It runs directly under the ink block above it, as one continuous field. */
.section--ink + .section--ink { padding-top: 0; }


/* ==========================================================================
   Long-form pages: legal copy and the 404
   These sit on light ground, where the white outline button would vanish.
   ========================================================================== */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.legal__date { font-family: var(--ui); font-size: .875rem; color: var(--muted); margin-top: 1.2rem; }
.prose { font-size: 1rem; }
.prose h2 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 2.5rem 0 .75rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0 0 1.05em; padding-left: 1.15rem; }
.prose li { margin-bottom: .35rem; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose__note { font-size: .875rem; color: var(--muted); }

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* No JS: never strand the plate as linework, and never show a slider that cannot slide. */
.no-js .plate__photo { opacity: 1; transform: none; }
.no-js .plate__plan { opacity: .42; }
.no-js .plate__scrim, .no-js .plate__say { opacity: 1; transform: none; }
.no-js .plan-draw { stroke-dashoffset: 0; }
.no-js .plan-appear { opacity: 1; }
.no-js .ba__range, .no-js .ba__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* The plan skips straight to the resolved photograph rather than drawing itself. */
  .plate__photo { opacity: 1 !important; transform: none !important; }
  .plate__plan { opacity: .42 !important; }
  .plate__scrim { opacity: 1 !important; }
  .plate__say { opacity: 1 !important; transform: none !important; }
  .plan-draw { stroke-dashoffset: 0 !important; }
  .plan-appear { opacity: 1 !important; }
}