/* ==========================================================================
   Elevate architecture + design: site styles
   Loaded by index.html and thanks.html.

   HOW THIS FILE IS ORGANIZED
   The page is built phone-first. Each part starts with its phone styles, then the
   @media blocks inside it add tablet and desktop changes. To change one part of the
   page, find its section below and change only that section.

   Screen sizes used by the @media blocks:
     600px   small tablets: two team cards, form fields side by side
     760px   tablets: philosophy in two columns, roomier panels
     900px   desktop: sheets with annotations, hero beside its art, floating logo
     1100px  wide desktop: roomier menu spacing (the menu shows in the header from 760px up; phones keep the button)
     1200px  wide desktop: four team cards at a time

   CONTENTS
     1. Brand tokens (colors, fonts)
     2. Base (page background, text, headings, buttons)
     3. Layout (the sheet, panels and gutters)
     4. Header, logo and menu
     5. Hero
     6. Sheet annotations (numbers and titles)
     7. Section content: philosophy, services, process, form
     8. Team: cards, carousel and bio popup
     9. Footer
    10. Thank-you page
    11. Visitors without JavaScript (tab fallback)
    12. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Brand tokens: change colors and fonts here and the whole site follows
   ========================================================================== */
:root {
  --ink: #1f1f1f;          /* headings, buttons, strong text */
  --body: #4a4a4a;         /* paragraph text */
  --rule: #d8d8d8;         /* light divider lines */
  --rail: #e2e2e2;         /* the gray panels */
  --red: #b2222e;          /* accent */
  --blue: #4f6f99;         /* keyboard focus outline */

  --bg: #f3f3f2;           /* paper behind the grid */
  --grid: #e2e2e2;         /* grid-paper lines */
  --sheet: #fff;           /* white sheets */
  --sheet-line: #d3d2d3;   /* hairline around each sheet */

  --frame: "Futura PT", Futura, "Jost", "Century Gothic", sans-serif;
  --content: "Minion 3", "Minion Pro", "Crimson Pro", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hand: "Architects Daughter", "Bradley Hand", "Segoe Print", cursive;   /* the notes on the grid paper */

  /* The faint lift that makes each sheet look like paper resting on the grid */
  --sheet-shadow: 0 1px 2px rgba(31, 31, 31, .06), 0 6px 14px -10px rgba(31, 31, 31, .10);

  /* Panels are slightly see-through so the grid shows faintly behind them */
  --panel-white: rgba(255, 255, 255, .55);
  --panel-gray: rgba(226, 226, 226, .55);

  /* Space between a panel's edge and its content */
  --inset: 20px;
}

@media (min-width: 600px) {
  :root { --inset: 32px; }
}

@media (min-width: 900px) {
  :root { --inset: 56px; }
}


/* ==========================================================================
   2. Base
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* The grid paper: two sets of thin lines, 16px apart */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--body);
  font: 17px/1.55 var(--content);
}

a {
  color: inherit;
}

/* Headings share one voice */
h1,
h2,
h3 {
  font-family: var(--frame);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}

h1 {
  text-wrap: balance;
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing: .12em;
  line-height: 1.15;
}

h2 {
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: .16em;
  line-height: 1.2;
}

h3 {
  font-size: 13px;
  letter-spacing: .18em;
}

/* Small uppercase label */
.lab {
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

/* The line of disciplines at the top of the home panel: each word opens that discipline's projects (js/site.js, section 7) */
.disc-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.disc-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (hover: hover) {
  .disc-link:hover {
    color: var(--red);
  }
}

/* Phones: the line of disciplines is centered */
@media (max-width: 759px) {
  .hero .lab {
    text-align: center;
  }
}

/* Buttons (some are <label>s so they can switch tabs without JavaScript) */
.btn {
  display: inline-block;
  font-family: var(--frame);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--red);
  color: #fff;
  padding: 15px 24px;
  border: 0;
  cursor: pointer;
}

.btn.ghost {
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
}


/* ==========================================================================
   3. Layout: the sheet, panels and gutters
   ========================================================================== */

/* The sheet holds the header and all the panels, with grid paper showing around it */
.site-sheet {
  width: calc(100% - 20px);
  margin: 0 auto 16px;   /* the same 16px gutter as between panels; the footer's label sits in it */
}

@media (min-width: 900px) {
  .site-sheet {
    width: min(calc(100% - 48px), 1428px);
    margin-bottom: 16px;
    /* a tight shadow, about 12px, down the left and right edges of the sheet. To remove, delete this line. */
    box-shadow: -12px 0 12px -10px rgba(31, 31, 31, .18), 12px 0 12px -10px rgba(31, 31, 31, .18);
  }
}

/* A 60% white layer sits behind the whole sheet (header, panels and the gutters between them), so the
   grid paper is paler everywhere and the panels sit on top of it. All devices. It was 30%. To remove, delete this block. */
.site-sheet {
  background: rgba(255, 255, 255, .6);
}

/* Centered column of content */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The panels stack with a 16px gutter where the grid paper shows through */
.sheets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Every section is a panel: a see-through white sheet with a hairline and a faint shadow */
section.pg {
  position: relative;
  padding: 40px 0;
  background: transparent;   /* was var(--panel-white), 55% white; the sheet behind now carries the white */
  border: 1px solid var(--sheet-line);
  box-shadow: var(--sheet-shadow);
}

/* Gray panels alternate with white ones down the page (hero white, Work gray, Services white, Studio gray,
   Start here white, Process gray). For all white (tried before), use var(--panel-white) here. */
section.pg.rail {
  background: var(--panel-gray);
}

/* Phones: the panels have no fill of their own (they were 69% white); the 60% white sheet behind them carries it,
   and the thin outline stays. To bring back the 69% white panels on phones, put rgba(255, 255, 255, .69) back here. */
@media (max-width: 759px) {
  .hero.pg,
  section.pg,
  section.pg.rail {
    background: transparent;
  }
}

section.pg > .wrap {
  max-width: none;
  padding: 0 var(--inset);
}

section.pg h2 {
  margin-top: 10px;
}

/* Services and Start here: the heading sits 25px higher (margin -15px instead of 10px) and the panel is
   tighter, with 16px less room under the content. Studio and Process are strips and keep their own spacing. */
#services h2,
#consult h2 {
  margin-top: -15px;
}

#services,
#consult {
  padding-bottom: 24px;
}

@media (min-width: 760px) {
  #services,
  #consult {
    padding-bottom: 36px;
  }
}

.intro {
  max-width: 36em;
  margin: 16px 0 40px;
}

@media (min-width: 760px) {
  section.pg {
    padding: 52px 0;
  }
}


/* ==========================================================================
   4. Header, logo and menu
   ========================================================================== */

/* The header stays at the top while you scroll, as frosted glass */
header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: -10px 0 18px -14px rgba(31, 31, 31, .08),
    10px 0 18px -14px rgba(31, 31, 31, .08);
}

/* Phones: a soft shadow drops from the bottom of the header, so the page slides under it */
@media (max-width: 759px) {
  header {
    box-shadow: 0 6px 14px -4px rgba(31, 31, 31, .22),
      -10px 0 18px -14px rgba(31, 31, 31, .08),
      10px 0 18px -14px rgba(31, 31, 31, .08);
  }
}

/* Desktop: the landscape photo runs behind the header, so it is more see-through with only a hint of blur */
@media (min-width: 900px) {
  header {
    /* White behind the logo (left) and the menu (right), clearer in the middle where the photo shows through */
    background: linear-gradient(to right,
      rgba(255, 255, 255, .85) 0%,
      rgba(255, 255, 255, .72) 22%,
      rgba(255, 255, 255, .45) 40%,
      rgba(255, 255, 255, .45) 50%,
      rgba(255, 255, 255, .72) 58%,
      rgba(255, 255, 255, .88) 100%);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border-bottom: 1px solid rgba(31, 31, 31, .14);
    /* the same soft drop as on phones, so the page slides under the menu */
    box-shadow: 0 6px 14px -4px rgba(31, 31, 31, .22),
      -10px 0 18px -14px rgba(31, 31, 31, .08),
      10px 0 18px -14px rgba(31, 31, 31, .08);
  }
}

/* While the phone menu is open, the header turns nearly solid so the links are easy to read */
header.nav-open {
  background: rgba(255, 255, 255, .96);
}

header .wrap {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 14px;
}

@media (min-width: 900px) {
  header .wrap {
    gap: 16px;
    min-height: 96px;
    padding: 10px 56px;
  }
}

@media (min-width: 760px) {
  header .wrap {
    flex-wrap: nowrap;
  }
}

/* --- Logo and wordmark --- */
.wm {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--frame);
  font-size: 20px;
  letter-spacing: .36em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

/* The same logo (img/header-logo.png) at every size; from 900px up it floats over the header (below) */
.wm img {
  display: block;
  height: 56px;
  width: auto;
  border: 0;
}

.wm small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .2em;
}

header .wm small {
  text-transform: none;
}

@media (min-width: 600px) {
  .wm small { font-size: 12px; }
}

/* Phones: ELEVATE and the tagline under it are centered on each other */
@media (max-width: 759px) {
  .wm > span {
    text-align: center;
  }
}

/* The tagline words that fade in and out are desktop only */
.cycle {
  display: none;
}

@media (min-width: 900px) {
  .wm {
    font-size: 32px;
  }

  /* The logo floats over the header: taller than the bar, shifted left of the frame.
     The negative top/bottom margins keep the bar and menu their normal height, and the
     negative right margin pulls the wordmark in next to the logo. Adjust the numbers here. */
  header .wm img {
    position: relative;
    top: 5px;
    left: -70px;
    height: 100px;
    margin: -27px -80px -27px 0;
    border: 0;
  }

  /* The ELEVATE text sits 20px left of its natural spot */
  header .wm > span {
    position: relative;
    left: -20px;
  }

  /* ELEVATE is letter-spaced by js/site.js so it ends where the tagline ends */
  .wm-name {
    display: inline-block;
    white-space: nowrap;
  }

  header .wm small {
    width: max-content;
    white-space: nowrap;
  }

  /* Tagline: "architecture + design", then interiors, planning and explore fade in and out,
     and it settles on build. Only "+ build" takes up room, so the tagline is always as wide
     as it is when it ends on build. */
  .cycle {
    display: inline-block;
    position: relative;
  }

  .cycle span {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    animation: cycle-word 8s ease-in-out both;
  }

  .cycle span:nth-child(1) { animation-delay: 4.8s; }
  .cycle span:nth-child(2) { animation-delay: 12.8s; }
  .cycle span:nth-child(3) { animation-delay: 20.8s; }

  .cycle span:last-child {
    position: static;
    animation: cycle-last 3.2s ease-in-out 28.8s both;
  }
}

@keyframes cycle-word {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cycle-last {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Menu --- */

/* The three-line button that opens the menu on phones and tablets */
.nav-toggle {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* On phones and tablets the menu drops down under the header when opened */
nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 4px 0 8px;
}

header.nav-open nav {
  display: flex;
}

nav label {
  padding: 12px 4px;
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

/* The link for the section you are looking at gets a red underline (set by js/site.js) */
nav label.on {
  border-bottom-color: var(--red);
}

/* "Request a consultation" is a red outlined box */
nav label.cta {
  margin-top: 8px;
  padding: 10px;
  text-align: center;
  letter-spacing: .1em;
  color: var(--red);
  border: 1px solid var(--red);
}

nav label.cta:hover {
  background: var(--red);
  color: #fff;
}

/* Phone menu (below 760px): the three lines turn into an X and the menu opens as a full-screen drafting sheet
   with big numbered links that slide in one after another. To go back to the plain dropdown, delete this block. */
@media (max-width: 759px) {
  .nav-toggle span {
    transition: transform .3s ease, opacity .2s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html.js nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - 100%);
    padding: 12px 28px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
      linear-gradient(rgba(31, 31, 31, .05) 1px, transparent 1px) 0 0 / 100% 32px,
      linear-gradient(90deg, rgba(31, 31, 31, .05) 1px, transparent 1px) 0 0 / 32px 100%,
      #fff;
    border-top: 1px solid rgba(31, 31, 31, .14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }

  html.js header.nav-open nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;
  }

  /* Home is not in the phone menu (the logo goes home); the three links are centered tracing-paper panels */
  html.js nav label[for="t-home"]:not(.cta) {
    display: none;
  }

  html.js nav label:not(.cta) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(64px, 11dvh, 96px);
    padding: 0 10px;
    font-size: 26px;
    letter-spacing: .14em;
    border: 0;
    background: rgba(0, 0, 0, .10);
    opacity: 0;
    transition: opacity .4s ease, background 120ms ease;
  }

  html.js nav label:not(.cta):active {
    background: rgba(0, 0, 0, .20);
  }

  /* Auto margins above the first panel and above the button share the spare height, so the panels sit centered between header and button */
  html.js nav label[for="t-studio"] {
    order: 1;
    margin-top: auto;
  }

  html.js nav label[for="t-services"] {
    order: 2;
  }

  html.js nav label[for="t-process"] {
    order: 3;
  }

  html.js nav label.cta {
    order: 4;
  }

  html.js nav label[for="t-services"],
  html.js nav label[for="t-process"] {
    margin-top: clamp(16px, 4.5dvh, 40px);
  }

  html.js nav label.cta {
    margin-top: auto;
    padding: 16px 10px;
    font-size: 12px;
    opacity: 0;
    transition: opacity .4s ease, background .2s ease, color .2s ease;
  }

  html.js header.nav-open nav label {
    opacity: 1;
  }

  html.js header.nav-open nav label[for="t-studio"] { transition-delay: .08s, 0s; }
  html.js header.nav-open nav label[for="t-services"] { transition-delay: .16s, 0s; }
  html.js header.nav-open nav label[for="t-process"] { transition-delay: .24s, 0s; }
  html.js header.nav-open nav label.cta { transition-delay: .32s, 0s, 0s, 0s; }
}

@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .nav-toggle span,
  html.js nav,
  html.js nav label {
    transition: none !important;
  }
}

/* Tablets and wide screens (760px up): the menu sits in the header and the button goes away.
   Phones (below 760px) keep the button and the dropdown. 760 to 1099px use tighter spacing so it all fits. */
@media (min-width: 760px) {
  .nav-toggle {
    display: none;
  }

  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 0;
    white-space: nowrap;
  }

  nav label {
    font-size: 10px;
    letter-spacing: .06em;
  }

  nav label.cta {
    letter-spacing: .04em;
  }

  nav label {
    padding: 4px 0;
  }

  nav label.cta {
    margin-top: 0;
    padding: 8px 12px;
    text-align: left;
  }
}

@media (min-width: 1100px) {
  nav {
    gap: 22px;
  }

  nav label {
    font-size: 11px;
    letter-spacing: .18em;
  }

  nav label.cta {
    letter-spacing: .1em;
  }
}


/* ==========================================================================
   5. Hero
   ========================================================================== */

/* Phones: text first, then the art, stacked */
.hero {
  display: grid;
  gap: 28px;
  padding: 36px var(--inset) 32px;
  background: transparent;   /* was var(--sheet), solid white; now like the other panels, the sheet behind carries the white */
  border-bottom: 1px solid var(--sheet-line);
  box-shadow: 0 12px 32px -8px rgba(31, 31, 31, .08),
    -10px 0 18px -14px rgba(31, 31, 31, .08),
    10px 0 18px -14px rgba(31, 31, 31, .08);
}

.hero h1 {
  margin-top: 18px;
}

.hero p {
  max-width: 34em;
  margin: 20px 0 26px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-art {
  justify-self: center;
  height: min(42vh, 340px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Desktop: text on the left, art on the right */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
    padding: 52px var(--inset) 48px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-art {
    justify-self: end;
    height: min(49vh, 420px);
    max-width: 28vw;
  }
}


/* ==========================================================================
   6. Sheet annotations: the small number and title around each panel
   Set in index.html with data-no="01" and data-title="Our philosophy".
   ========================================================================== */

/* Title: floats on the grid paper in the gutter above its panel */
section.pg::after {
  content: attr(data-title);
  content: attr(data-title) / "";
  position: absolute;
  top: -16px;
  left: 6px;            /* a hair in from the pencil line */
  font: 13px/16px var(--hand);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a7a7a;
  pointer-events: none;
}

/* Number: a light drawing note just outside the right edge (desktop only; phones have no room) */
section.pg::before {
  content: attr(data-no);
  content: attr(data-no) / "";
  display: none;
  position: absolute;
  top: 24px;
  right: -19px;         /* just outside the right edge, inside the 22px the pencil lines run out (the left margin holds the ruler) */
  text-align: right;
  font: 13px/16px var(--hand);
  color: #8a8a8a;
  pointer-events: none;
}

@media (min-width: 900px) {
  section.pg::before {
    display: block;
  }
}

/* The hero (the first white sheet, desktop only) gets the same notes: "Who we are" and 01 */
@media (min-width: 900px) {
  .hero {
    position: relative;
  }

  .hero::after {
    content: attr(data-title);
    content: attr(data-title) / "";
    position: absolute;
    top: -16px;
    left: 6px;
    font: 13px/16px var(--hand);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7a7a7a;
    pointer-events: none;
  }

  .hero-text::before {
    content: attr(data-no);
    content: attr(data-no) / "";
    position: absolute;
    top: 24px;
    right: -19px;
    text-align: right;
    font: 13px/16px var(--hand);
    color: #8a8a8a;
    pointer-events: none;
  }
}


/* --- Drafting lines (a trial; remove class="draft" from <main> in index.html to turn it off) ---
   Four pencil lines along each panel's edges that run past its corners and fade out, so the panels
   look placed inside lines drawn first. Where they cross at the corners they make a small +.
   Trial history: a stronger version (50% dark, lines running to the window edge) felt like too much; the lines are now 48% (were 38%). */
@media (min-width: 900px) {
  .draft .hero,
  .draft .landscape {
    position: relative;
  }

  .draft section.pg > .wrap::before,
  .draft .hero::before,
  .draft .landscape::before {
    --line: rgba(31, 31, 31, .48);
    --out-x: 22px;        /* how far the lines run out past the left and right edges */
    --out-y: 14px;        /* how far they run past the top and bottom (the gutter is 16px) */
    content: "";
    position: absolute;
    z-index: 3;
    inset: calc(var(--out-y) * -1 - 1px) calc(var(--out-x) * -1 - 1px);
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(to right, transparent, var(--line) var(--out-x), var(--line) calc(100% - var(--out-x)), transparent),
      linear-gradient(to right, transparent, var(--line) var(--out-x), var(--line) calc(100% - var(--out-x)), transparent),
      linear-gradient(to bottom, transparent, var(--line) var(--out-y), var(--line) calc(100% - var(--out-y)), transparent),
      linear-gradient(to bottom, transparent, var(--line) var(--out-y), var(--line) calc(100% - var(--out-y)), transparent);
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position:
      0 var(--out-y),
      0 calc(100% - var(--out-y) - 1px),
      var(--out-x) 0,
      calc(100% - var(--out-x) - 1px) 0;
  }
}


/* --- Doodle on the grid paper (desktop only) ---
   A pencil sketch drawn on the grid paper, peeking out from behind the bottom-right corner of the last
   card (Process). It sits under the cards (z-index -1) and is multiplied into the grid, so the paper
   disappears and only the pencil shows, faintly through the see-through card. About three quarters of
   it hangs outside the card and runs off the window edge, so the page is told not to scroll sideways. */
@media (min-width: 900px) {
  body {
    overflow-x: clip;
  }

  #process > .wrap::after {
    --sketch: clamp(640px, 66vw, 960px);   /* width of the whole picture, paper margins included */
    content: "";
    position: absolute;
    z-index: -1;
    width: var(--sketch);
    aspect-ratio: 3 / 2;
    right: calc(var(--sketch) / -2);
    bottom: calc(var(--sketch) * -.04);   /* the drawing ends just above the footer, nothing hidden behind it */
    background: url("../img/draft-sketch.webp") center / 100% 100% no-repeat;
    mix-blend-mode: multiply;
    opacity: .54;   /* was .9 before fading it by 40% */
    pointer-events: none;
  }
}


/* --- Drafting ruler (desktop only) ---
   A faint pencil ruler down the left margin of the grid paper, outside the sheet. Ticks sit on real page
   pixels from the top of the page: pale blue every 10px, light graphite every 50px, graphite every 300px,
   with the number written at each 300px mark. The margin is only 24px wide at 1440px, so the numbers are
   small and sit just under their tick. Nothing in the layout moves: the ruler is drawn behind the page. */
@media (min-width: 900px) {
  body {
    position: relative;
    --ruler-w: calc((100% - min(100% - 48px, 1428px)) / 2);   /* the paper margin left of the sheet */
    --ruler-graphite: rgba(74, 74, 72, .4);   /* was .5 */
  }

  body::before,
  body::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: var(--ruler-w);
    pointer-events: none;
  }

  body::before {
    bottom: 0;
    background-repeat: repeat-y;
    background-position: right 2px top 0;
    background-image:
      /* ticks are 2px thick (they were 1px) and the graphite is a little lighter (.5 and .26 before) */
      linear-gradient(to bottom, var(--ruler-graphite) 0, var(--ruler-graphite) 2px, transparent 2px),
      linear-gradient(to bottom, rgba(74, 74, 72, .22) 0, rgba(74, 74, 72, .22) 2px, transparent 2px),
      linear-gradient(to bottom, rgba(110, 150, 195, .3) 0, rgba(110, 150, 195, .3) 1px, transparent 1px);
    background-size: 14px 300px, 9px 50px, 5px 10px;
  }

  /* The numbers: one 300px line each, moved up so each number sits just under its tick.
     The list is longer than any page; the box clips it at the bottom of the page. */
  body::after {
    height: calc(100% + 142px);
    transform: translateY(-142px);
    overflow: hidden;
    box-sizing: border-box;
    padding-right: 2px;
    font: 10px/300px var(--hand);
    color: rgba(74, 74, 72, .6);
    text-align: right;
    white-space: pre;
    content: "0\A 300\A 600\A 900\A 1200\A 1500\A 1800\A 2100\A 2400\A 2700\A 3000\A 3300\A 3600\A 3900\A 4200\A 4500\A 4800\A 5100\A 5400\A 5700\A 6000\A 6300\A 6600\A 6900\A 7200\A 7500\A 7800\A 8100\A 8400\A 8700\A 9000\A 9300\A 9600\A 9900\A 10200\A 10500\A 10800\A 11100\A 11400\A 11700\A 12000";
  }
}


/* --- Landscape sketch under the page (desktop only) ---
   A pencil drawing (img/sketches/sketch-5-overlay.webp: blue pencil and graphite on a transparent background (made from
   elevate-sketch-overlay.png, kept in the same folder); the earlier drawings sketch-1 to -4 are there too, to swap back)
   lying on the grid paper, from the very top of the page. It is drawn behind everything, below the ruler,
   and shows faintly through the see-through panels. It is as wide as the window, so it never adds a
   sideways scroll, and it lies on the page, so it scrolls with it. */
@media (min-width: 900px) {
  html::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1673 / 940;   /* sketch 1 is 1683 / 935; sketches 2 and 3 are 1675 / 939; sketch 4 is 1674 / 940; sketch 5 is 1673 / 940 */
    background: url("../img/sketches/sketch-5-overlay.webp") center / 100% 100% no-repeat;
    opacity: .6;   /* was .7 (15% lighter); before that 1 (full); .15 and .35 were nearly invisible behind the panels */
    pointer-events: none;
  }
}


/* --- Graphite linework behind the page (phones) ---
   img/sketches/mobile-linework.png is the architectural sketch with its own paper and grid taken out (pencil
   lines only, on a transparent background), so the page's grid is the only grid. It is a fixed layer, drawn with
   position: fixed (iOS Safari does not handle background-attachment: fixed), so it stays still while the page
   scrolls. The drawing is heavier toward the edges and quiet in the middle. It never takes touches.
   Change opacity to make it stronger or fainter. To remove it, delete this block. */
@media (max-width: 759px) {
  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../img/sketches/mobile-linework.png") center top / cover no-repeat;
    opacity: .5;
    pointer-events: none;
  }
}


/* ==========================================================================
   7. Section content
   ========================================================================== */

/* --- Philosophy --- */
.phil {
  display: grid;
  gap: 28px;
  align-items: start;
}

.phil h2 {
  margin-bottom: 28px;
}

.phil blockquote {
  margin: 0;
  padding-left: 24px;
  border-left: 5px solid var(--red);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
}

.phil p {
  margin: 0 0 18px;
}

@media (min-width: 760px) {
  .phil {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
  }
}

/* --- Landscape ("Rooted in this place", desktop only) ---
   Replaces the philosophy section from 900px up. The photo starts at the very top of the sheet and
   runs behind the see-through header; the text and the three pickers sit below the header.
   The panel is 317px tall at the top of the page (97px header + 220px) and shrinks to 222px (97px + 125px)
   as you scroll: js/site.js sets --ls-h from the scroll position. The photo keeps its full size and the
   bottom edge moves up over it, so it crops instead of scaling.
   Four slides (photo + heading + text) take turns: the next one slides in from the right, out from behind
   the pickers, over the one before it. The three pickers are fixed (waterfall, stone, river). The slides' content lives in js/site.js; the markup here is only the first screen before it runs.
   Below 900px this is hidden and the philosophy section above stays. */
.landscape {
  display: none;
}

@media (min-width: 900px) {
  html {
    overflow-anchor: none;   /* the panel changes height above the content; stop the browser "correcting" the scroll */
  }

  #philosophy {
    display: none;
  }

  .landscape {
    --header-h: 97px;                                  /* the header's height; the photo is pulled up by this much */
    --ls-open: calc(var(--header-h) + 220px);          /* height at the top of the page */
    --ls-closed: calc(var(--header-h) + 125px);        /* height once scrolled */
    --picks-w: 25.6%;          /* width of the three pickers together */
    display: block;
    position: relative;
    height: var(--ls-h, var(--ls-open));
    margin-top: calc(var(--header-h) * -1);
    background: #2a2a28;
    box-shadow: var(--sheet-shadow);
  }

  /* The window the slides move in. It is as tall as the panel and clips the slides. */
  .ls-stage {
    position: absolute;
    inset: 0;
    isolation: isolate;
    overflow: hidden;   /* the next slide waits off to the right until it slides in */
  }

  /* One slide = photograph + shading + heading and text, so they travel together.
     It keeps the full open height; the stage clips its bottom as the panel shrinks. */
  .ls-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ls-open);
    background-color: #2a2a28;
    background-image: var(--img);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  }

  /* The first screen, before js/site.js has set each photo (the script then sets --img and --pos itself).
     A photo named in a custom property is found from this file, hence the ../ */
  .ls-slide { --img: url("../img/ozark-forest.webp"); }
  .ls-pick:nth-child(1) { --img: url("../img/ozark-water.webp"); --pos: 76% 50%; }
  .ls-pick:nth-child(2) { --img: url("../img/ozark-stone.webp"); --pos: 72% 50%; }
  .ls-pick:nth-child(3) { --img: url("../img/demo-explore.jpg"); --pos: 50% 30%; }   /* DEMO: was ozark-river.webp, 58% 50% */

  /* The next slide starts off to the right, behind the pickers, and slides in over the one before it */
  .ls-slide.enter { transform: translateX(100%); }

  /* Dark charcoal on the left, fully clear by 65% of the way across the photo (48% of the sheet) */
  .ls-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
      rgba(28, 28, 28, .75) 0%,
      rgba(28, 28, 28, .42) 24%,
      rgba(28, 28, 28, 0) 48%);
    pointer-events: none;
  }

  /* Text: centered in the space under the header (122px tall), with the red bar from the philosophy section.
     At 220px under the header it sits 49px down; at 125px it sits about 2px down. */
  .ls-copy {
    position: absolute;
    left: var(--inset);
    top: calc(var(--header-h) + (var(--ls-h, var(--ls-open)) - var(--header-h) - 122px) / 2);
    height: 122px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ls-copy h2 {
    margin: 0;               /* font, size and letter-spacing come from the site's h2 style (Futura) */
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  }

  .ls-copy blockquote {
    max-width: 17em;
    margin: 14px 0 0;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.35;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  }

  /* The three pickers: narrow vertical photos with thin white separators */
  .ls-picks {
    position: absolute;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: var(--picks-w);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: #fff;
    border-left: 2px solid #fff;
  }

  .ls-pick {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #2a2a28;
    cursor: pointer;
    font: inherit;
  }

  /* Each picker is a narrow slice of its photo (--img and --pos are set per picker by js/site.js).
     It keeps its full 220px height and the panel clips it, like the slides. */
  .ls-pick::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--ls-open) - var(--header-h));
    background-image: var(--img);
    background-position: var(--pos, 50% 50%);
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .5s ease;
  }

  .ls-pick:hover::before {
    transform: scale(1.03);
  }

  /* Restrained shading at the bottom so the label reads */
  .ls-pick::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(18, 18, 18, .85), rgba(18, 18, 18, 0));
    pointer-events: none;
  }

  /* The words on the pickers are hidden for now (still read aloud by screen readers).
     To bring them back, ask Claude: the old label styles were white serif caps, 18px, with a thin underline, bottom-centered. */
  .ls-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The picker for the photo on screen gets a thin white line along its bottom edge */
  .ls-pick[aria-pressed="true"]::after {
    box-shadow: inset 0 -3px 0 #fff;
  }

  .ls-pick:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
    box-shadow: inset 0 0 0 5px var(--blue);
  }

  /* DEMO: water ripple when the Philosophy picker is clicked. To remove: delete this block
     and the rippleDemo parts in js/site.js. */
  .ls-ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: ls-ripple 1.6s ease-out forwards;
  }

  @keyframes ls-ripple {
    0%   { transform: scale(.2); opacity: .9; }
    100% { transform: scale(14); opacity: 0; }
  }
}

/* --- Services --- */
/* Services and process steps both hold five items: one column on phones, then 2, 3 and 5 across */
.service-grid,
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 600px) {
  .service-grid,
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .service-grid,
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .service-grid,
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Each card is a picture tile with its title under a gray bar. The descriptions are hidden for now
   (they are still in index.html: delete the display: none below to bring them back). */
.service-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.12 / 1;
  background: rgba(31, 31, 31, .04);
  border: 1px solid var(--sheet-line);   /* the frame stays put; the pictures slide inside it */
}

/* Whatever is in a frame slides as a "pane": a picture, or a pale tint until the photographs are in */
.svc-pane {
  position: absolute;
  inset: 0;
  transition: transform 450ms cubic-bezier(.22, .61, .36, 1);
}

.svc-pane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The gray bar never moves; the name under it slides in its own window */
.service-bar {
  height: 5px;
  margin-top: 22px;
  background: #6b6b6b;
}

.service-name {
  position: relative;
  overflow: hidden;
  height: 20px;
  margin-top: 18px;
}

.service-card h3 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.service-card {
  cursor: pointer;
}

/* Phones: graphite pencil lines frame each picture and each title, and run a little past the corners (the overdraw).
   Each frame is four thin lines drawn by a box 16px bigger than the thing it frames (the picture is 1.12 wide
   to 1 tall; the title is 34px tall). To remove them, delete this block. */
@media (max-width: 759px) {
  #services .service-card {
    position: relative;
  }

  #services .service-card::before,
  #services .service-card::after {
    --over: 8px;                       /* how far the lines run past the corners */
    --pencil: rgba(58, 58, 56, .3);   /* softer than the old .55, closer to the panel's own tone */
    content: "";
    position: absolute;
    left: calc(-1 * var(--over));
    width: calc(100% + 2 * var(--over));
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(var(--pencil), var(--pencil)),
      linear-gradient(var(--pencil), var(--pencil)),
      linear-gradient(var(--pencil), var(--pencil)),
      linear-gradient(var(--pencil), var(--pencil));
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: 0 var(--over), 0 calc(100% - var(--over) - 1px), var(--over) 0, calc(100% - var(--over) - 1px) 0;
  }

  /* around the picture */
  #services .service-card::before {
    top: -8px;
    height: 0;
    padding-top: calc(100% / 1.12 + 16px);
  }

  /* around the title: no top line, because the picture's bottom line is already there */
  #services .service-card::after {
    bottom: -8px;
    height: 50px;
    background-size: 0 0, 100% 1px, 1px 100%, 1px 100%;
  }

  #services .service-card.is-empty::before,
  #services .service-card.is-empty::after {
    display: none;
  }

  /* Pressed: the picture dims a little, at once, while a finger is on it (no hover on touch screens) */
  #services .service-card:active .service-photo {
    opacity: .72;
  }
}

.service-card.is-empty > * {
  visibility: hidden;
}

/* Projects browser: how many cards show at once (js/site.js reads this): 2 across and 3 down (6) on phones,
   3 across on tablets, 5 from 1100px */
#services .service-grid {
  --svc-cols: 2;
  --svc-rows: 3;
  grid-template-columns: repeat(var(--svc-cols), minmax(0, 1fr));
}

@media (min-width: 760px) {
  #services .service-grid { --svc-cols: 3; --svc-rows: 1; }
}

@media (min-width: 1100px) {
  #services .service-grid { --svc-cols: 5; }
}

@media (min-width: 760px) {
  .svc-nav {
    top: 44px;
  }
}

/* On phones the intro line stops short of the controls in the corner */
@media (max-width: 759px) {
  #services .intro {
    max-width: calc(100% - 150px);
  }
}

/* The arrows, home button and counter sit in the top-right corner of the panel and do not take up room */
.svc-nav {
  position: absolute;
  top: 32px;   /* measured from the panel itself (the panel is the positioned parent; its pencil lines depend on that) */
  right: var(--inset);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 136px;
}

.svc-nav button {
  width: 38px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #5a5856;
  border-radius: 3px 5px 3px 6px / 5px 3px 6px 3px;
  background: transparent;
  font: 20px/1 var(--hand);
  color: #3a3a3a;
  cursor: pointer;
  transform: rotate(-1deg);
}

.svc-nav .svc-home {
  border-radius: 5px 3px 6px 3px / 3px 6px 3px 5px;
  transform: rotate(.6deg);
}

.svc-nav .svc-next {
  border-radius: 4px 6px 3px 5px / 6px 3px 5px 4px;
  transform: rotate(1deg);
}

.svc-nav button:not(:disabled):hover {
  background: rgba(31, 31, 31, .06);
  border-color: var(--ink);
}

.svc-nav button:disabled {
  opacity: .35;
  cursor: default;
}

.svc-nav button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.svc-count {
  flex-basis: 100%;
  text-align: center;
  font: 14px/1 var(--hand);   /* handwritten, like the team counter */
  letter-spacing: .06em;
  color: #6a6a6a;
}

@media (prefers-reduced-motion: reduce) {
  .svc-pane { transition: none; }
}

#services .intro {
  margin: 4px 0 28px;
}

/* --- Process --- */
.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The big light-gray 01, 02, 03... above each step */
.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--frame);
  font-size: 34px;
  color: #c9c9c9;
}

.step-title {
  margin: 4px 0;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .16em;
}

.steps p {
  margin: 0;
  font-size: 16px;
  line-height: 26.35px;   /* the page's 17px text at 1.55, so the lines sit as they always have */
}

/* --- Consultation: contact details beside the form --- */
.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}

.pg-consult h2 {
  margin-bottom: 16px;
}

form {
  display: grid;
  gap: 16px;
}

form label {
  display: grid;
  gap: 6px;
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  font: 17px var(--content);
  color: var(--ink);
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 0;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
}

/* Two fields side by side on wider screens */
.row {
  display: grid;
  gap: 16px;
}

@media (min-width: 600px) {
  .row {
    grid-template-columns: 1fr 1fr;
  }
}

/* The hidden spam-trap field, parked far off screen */
.trap {
  position: absolute;
  left: -9999px;
}


/* ==========================================================================
   8. Team: cards, carousel and bio popup
   js/site.js drives the arrows, the counter and the popup.
   ========================================================================== */

/* The row of cards scrolls sideways; swiping works on touch screens */
.team {
  --cards-visible: 1;
  --team-gap: 16px;
  display: flex;
  gap: var(--team-gap);
  margin-top: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.team::-webkit-scrollbar {
  display: none;
}

/* How many cards fit on screen at once */
@media (min-width: 600px) {
  .team { --cards-visible: 2; --team-gap: 24px; }
}

@media (min-width: 900px) {
  .team { --cards-visible: 3; }
}

@media (min-width: 1200px) {
  .team { --cards-visible: 4; }
}

.team-card {
  flex: 0 0 calc((100% - (var(--cards-visible) - 1) * var(--team-gap)) / var(--cards-visible));
  scroll-snap-align: start;
  padding: 20px;
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  box-shadow: var(--sheet-shadow);
}

.js .team-card {
  cursor: pointer;
}

.team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 16px;
}

.team-role {
  margin: 6px 0 12px;
  color: var(--body);
}

/* The short red rule under each title */
.team-role::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 12px;
  background: var(--red);
}

/* Cards show the first six lines of the bio; the popup shows all of it */
.team-bio {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}

.read-bio {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.read-bio:hover {
  color: var(--red);
}

/* Arrows and counter under the cards */
.team-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  font-family: var(--frame);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ink);
}

.team-nav button {
  width: 36px;
  height: 36px;
  border: 1px solid #8a8885;
  background: #fff;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}

.team-nav button:disabled {
  opacity: .35;
  cursor: default;
}

/* --- Studio as one slim strip (all screen sizes) ---
   The title and a short intro, the team members separated by thin vertical lines, and the arrows and
   counter. From 1200px up they sit side by side (title left, people in the middle, arrows right); below
   that the title and intro sit above the strip and the arrows under it. Two people show at a time on
   phones, three from 600px, four from 768px. The bio text is hidden in the strip;
   "Read bio" (or a click anywhere on a person) opens it in the popup. */
#studio {
  padding: 36px 0 20px;   /* the top matches the other panels' headings; the bottom is tight */
}

#studio > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 36px;   /* the strip's pencil dividers run 24px above the people; this keeps them clear of the intro */
}

@media (min-width: 1200px) {
  #studio > .wrap {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 28px;
  }

  /* The title and intro start at the top of the panel; the people and the arrows stay centered */
  #studio .studio-head {
    align-self: start;
  }
}

/* The strip itself, at every size */
/* The heading sits at the same height as the other panels' headings (38px from the panel's top; 26px on phones) and
   the intro line comes right under it, as in Services. The red rule between them is kept, tightened up. */
#studio .studio-head h2 {
  margin-top: -11px;
}

@media (min-width: 760px) {
  #studio .studio-head h2 {
    margin-top: 1px;
  }
}

.studio-head h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--red);
}

.studio-intro {
  display: block;
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

#studio .team {
  --cards-visible: 2;
  --team-gap: 0px;
  margin-top: 0;
}

/* The strip scrolls, so it can't draw outside itself: it gets 26px of room above and below
   (cancelled by the negative margin) for the dividers to run out into */
#studio .team {
  padding: 26px 0;
  margin: -26px 0;
}

#studio .team-card {
  position: relative;
  min-width: 0;           /* a long word must not make one person's column wider than the others */
  padding: 4px 12px 4px;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Pencil dividers: darker than a border, running a little past the top and bottom of the people
   and fading out at both ends, like the drafting lines around the panels */
#studio .team-card::before {
  --pencil: rgba(31, 31, 31, .5);
  content: "";
  position: absolute;
  left: 0;
  top: -24px;
  bottom: -24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--pencil) 24px, var(--pencil) calc(100% - 24px), transparent);
  pointer-events: none;
}

#studio .team-photo {
  max-width: 137px;   /* three quarters of the old 183px; it shrinks with the screen, down to about 82px */
  margin-bottom: 10px;
}

#studio .team-card h3 {
  min-height: 2.7em;      /* names take two lines, so the titles and rules start level across people */
  font-size: 10.5px;
  letter-spacing: .1em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Titles always take two lines, so the red rules sit level across all four people */
#studio .team-role {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(3 * 1.55em + 10px);   /* titles take up to three lines (two from 1400px, below) */
  margin: 6px 0 0;
  font-size: 9px;
  letter-spacing: .1em;
  overflow-wrap: anywhere;
}

#studio .team-role::after {
  margin-top: 6px;
}

#studio .team-bio {
  display: none;
}

#studio .read-bio {
  margin-top: 8px;
  font-size: 8.5px;
  letter-spacing: .2em;
}

/* Under the strip: arrows either side of the counter. From 1200px: arrows side by side, counter under them */
#studio .team-nav {
  margin-top: -8px;
}

#studio .team-count {
  font: 14px/1 var(--hand);   /* the counter is a handwritten note, like the numbers on the grid */
  letter-spacing: .06em;
  color: #6a6a6a;
}

/* Arrow buttons: pencil-drawn squares, a little off-square, that darken on hover */
#studio .team-nav button {
  width: 38px;
  height: 36px;
  border: 1.5px solid #5a5856;
  border-radius: 3px 5px 3px 6px / 5px 3px 6px 3px;
  background: transparent;
  font: 20px/1 var(--hand);
  color: #3a3a3a;
  transform: rotate(-1deg);
}

#studio .team-nav button + .team-count + button {
  transform: rotate(1deg);
  border-radius: 5px 3px 6px 3px / 3px 6px 3px 5px;
}

#studio .team-nav button:not(:disabled):hover {
  background: rgba(31, 31, 31, .06);
  border-color: var(--ink);
}

/* Wide screens: the titles fit on two lines, so the panel is shorter */
@media (min-width: 1400px) {
  #studio .team-role {
    min-height: calc(2 * 1.55em + 10px);
  }
}

/* How many people show at once: enough that each photo stays between 82px and 137px wide (137px is the biggest
   it gets; it can shrink 40% from there). Narrow side-by-side layouts between 1200 and 1279px show one fewer. */
@media (min-width: 600px) {
  #studio .team { --cards-visible: 4; }
}

@media (min-width: 760px) {
  #studio .team { --cards-visible: 5; }
}

@media (min-width: 1100px) {
  #studio .team { --cards-visible: 6; }
}

@media (min-width: 1200px) {
  #studio .team { --cards-visible: 5; }
}

@media (min-width: 1280px) {
  #studio .team { --cards-visible: 6; }
}

@media (min-width: 1200px) {

  #studio .team-nav::before {
    --pencil: rgba(31, 31, 31, .5);
    content: "";
    position: absolute;
    left: 0;
    top: -24px;
    bottom: -24px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--pencil) 24px, var(--pencil) calc(100% - 24px), transparent);
    pointer-events: none;
  }

  #studio .team-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 10px;
    position: relative;
    align-self: stretch;
    align-content: center;
    padding-left: 12px;
    width: 112px;
  }

  #studio .team-count {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
}


/* The longest name ("Elizabeth Stinnett, AIA") wraps on narrower laptops: keep all four names level */



/* --- Process as one slim strip (wide screens, 1200px and up) ---
   The title and intro on the left, the five steps across with pencil dividers (the same lines as the
   studio strip), and the big numbers in handwriting. Below 1200px the steps keep their grid. */
@media (min-width: 1200px) {
  #process {
    padding: 36px 0;
  }

  #process > .wrap {
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 28px;
  }

  #process h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
  }

  #process .intro {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.5;
  }

  #process .steps {
    grid-column: 2;
    grid-row: 1 / 3;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-self: center;
  }

  #process .steps li {
    position: relative;
    padding: 4px 16px;
  }

  /* Pencil dividers: the same as the studio strip, running a little past the top and bottom */
  #process .steps li::after {
    --pencil: rgba(31, 31, 31, .5);
    content: "";
    position: absolute;
    left: 0;
    top: -24px;
    bottom: -24px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--pencil) 24px, var(--pencil) calc(100% - 24px), transparent);
    pointer-events: none;
  }

  #process .steps li::before {
    font-family: var(--frame);   /* the original number font; the handwritten one was tried and dropped */
    font-size: 36px;
    color: #a1a1a1;              /* 20% darker than the original #c9c9c9 */
  }

  #process .step-title {
    margin: 8px 0 8px;
    font-size: 12px;
  }

  #process .steps p {
    font-size: 14px;
    line-height: 1.45;
  }
}


/* --- Bio popup: a sheet floating over a blurred page --- */
.team-dialog {
  /* Centered on screen. Setting top and left (not bottom) lets the box shrink to fit its content. */
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 32px);
  padding: 0;
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  color: var(--body);
  box-shadow: 0 20px 60px -20px rgba(31, 31, 31, .25);
}

/* Phones: photo above the text. The "open" state is what makes it appear. */
.team-dialog[open] {
  display: grid;
  gap: 24px;
  padding: 24px;
  overflow: auto;
}

.team-dialog::backdrop {
  background: rgba(245, 245, 244, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.team-dialog-photo .team-photo {
  max-width: 280px;
  margin: 0;
}

.team-dialog h3 {
  font-size: 22px;
  letter-spacing: .2em;
  line-height: 1.25;
}

.team-dialog h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 14px;
  background: var(--red);
}

.team-dialog-role {
  margin: 12px 0 24px;
  color: var(--body);
}

.team-dialog-bio p {
  margin: 0 0 16px;
}

.team-dialog-close {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* Tablets and up: photo on the left, text on the right */
@media (min-width: 760px) {
  .team-dialog {
    width: min(900px, calc(100vw - 96px));
    max-height: calc(100vh - 96px);
  }

  .team-dialog[open] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding: 40px;
  }

  .team-dialog-photo .team-photo {
    max-width: none;
  }
}


/* --- Project viewer (opens from a project in Services; built on the bio popup above) ---
   A big picture, a strip of thumbnails (six across, three on phones) and the picture count. */
.project-dialog[open] {
  display: block;
  padding: 0;
  overflow: auto;
}

.project-dialog {
  width: min(980px, calc(100vw - 32px));
}

.pv {
  padding: 20px 20px 16px;
}

.pv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.pv-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: .2em;
  line-height: 1.25;
}

.pv-meta {
  margin: 4px 0 0;
  font-family: var(--frame);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.pv-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.pv-close:focus-visible,
.pv-arrow:focus-visible,
.pv-thumb:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* The big pictures: a pale tint (with its number) until the photographs are in */
.pv-large {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-height: 52vh;
  width: 100%;
  background: rgba(31, 31, 31, .04);
  border: 1px solid var(--sheet-line);
}

.pv-img,
.pv-thumb span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 22px/1 var(--hand);
  color: rgba(31, 31, 31, .35);
}

.pv-img img,
.pv-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The big picture shows the whole image (a nearly square render would lose its roofline if it were cropped to
   the wide frame); the pale frame shows at the sides */
.pv-img img {
  object-fit: contain;
}

.pv-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
}

.pv-strip {
  --per: 3;           /* thumbnails across: 3 on phones, 6 from 600px up */
  --gap: 8px;
  display: flex;
  flex: 1;
  gap: var(--gap);
  min-width: 0;
  padding: 3px;       /* room for the outline on the chosen thumbnail */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pv-strip::-webkit-scrollbar {
  display: none;
}

.pv-thumb {
  position: relative;
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sheet-line);
  background: rgba(31, 31, 31, .04);
  scroll-snap-align: start;
  cursor: pointer;
}

.pv-thumb[aria-current="true"] {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.pv-thumb span {
  font-size: 14px;
}

.pv-arrow {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: none;
  font: 28px/1 var(--frame);
  color: var(--ink);
  cursor: pointer;
}

.pv-arrow:disabled {
  opacity: .25;
  cursor: default;
}

.pv-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-family: var(--frame);
  font-size: 11px;
  letter-spacing: .14em;
  color: #6a6a6a;
}

@media (min-width: 600px) {
  .pv { padding: 28px 32px 22px; }
  .pv-title { font-size: 20px; }
  .pv-strip { --per: 6; }
}


/* ==========================================================================
   9. Footer
   ========================================================================== */
footer {
  position: relative;
  padding: 44px 0;
  color: #c9c9c9;
  font-size: 16px;
  /* The misty hills sit on the footer's charcoal and fade into it at the edges */
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, var(--ink) 0%, rgba(31, 31, 31, 0) 16%, rgba(31, 31, 31, 0) 84%, var(--ink) 100%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(31, 31, 31, 0) 40%, rgba(31, 31, 31, 0) 85%, var(--ink) 100%),
    url("../img/footer-hills.webp");
  background-repeat: no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center bottom;
}

/* Footer content sits just inside the outside edges of the panels above: the brand on the left, the address on the right */
footer .wrap {
  --pad: 12px;   /* a little room between the panels' outside edges and the footer text */
  max-width: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 0 calc(10px + var(--pad));
}

@media (min-width: 900px) {
  footer .wrap {
    padding-inline: calc(max(24px, (100% - 1428px) / 2) + var(--pad));
  }
}

/* Small label on the grid paper above the footer, like the ones above each panel, lined up with the sheet's left edge */
footer::before {
  content: "Build on good ideas";
  position: absolute;
  top: -16px;
  left: 16px;
  font: 13px/16px var(--hand);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a7a7a;
  pointer-events: none;
}

@media (min-width: 900px) {
  footer::before {
    left: calc(max(24px, (100% - 1428px) / 2) + 6px);
  }
}

footer .wm {
  color: #fff;
}

footer a {
  text-decoration: none;
}

/* The short red rule under the tagline */
footer .wm small::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--red);
}

.footer-note {
  margin: 14px 0 0;
}

/* Address, phone and email: a thin divider on the left once there is room for two columns */
.footer-contact {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
}

@media (min-width: 700px) {
  .footer-contact {
    text-align: right;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, .28);
  }
}


/* ==========================================================================
   10. Thank-you page (thanks.html)
   ========================================================================== */
.thanks main {
  max-width: 34em;
  margin: 14vh auto;
  padding: 0 20px;
}

.thanks img {
  display: block;
  height: 56px;
  margin-bottom: 24px;
  border: 1px solid var(--rule);
}

.thanks h1 {
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.2;
  letter-spacing: .14em;
  margin-bottom: 16px;
}

.thanks a {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 22px;
  font: 12px var(--frame);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--red);
  color: #fff;
}


/* ==========================================================================
   11. Visitors without JavaScript
   The tabs are radio buttons plus labels, so they work with scripts off: each tab
   shows one page at a time. When scripts run, every section is shown on one
   scrolling page and none of the rules below apply.
   ========================================================================== */

/* Visually hidden radio buttons */
.tabr {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tabr:focus-visible ~ header {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Hide everything, then show the pieces that belong to the chosen tab */
html:not(.js) .pg {
  display: none;
}

html:not(.js) #t-home:checked ~ .sheets .pg-home,
html:not(.js) #t-services:checked ~ .sheets .pg-services,
html:not(.js) #t-process:checked ~ .sheets .pg-process,
html:not(.js) #t-studio:checked ~ .sheets .pg-studio,
html:not(.js) #t-consult:checked ~ .sheets .pg-consult {
  display: block;
}

html:not(.js) #t-home:checked ~ .sheets .hero.pg-home {
  display: grid;
}

/* The chosen tab's menu link gets the red underline */
html:not(.js) #t-home:checked ~ header nav label[for="t-home"],
html:not(.js) #t-services:checked ~ header nav label[for="t-services"],
html:not(.js) #t-process:checked ~ header nav label[for="t-process"],
html:not(.js) #t-studio:checked ~ header nav label[for="t-studio"] {
  border-bottom-color: var(--red);
}

/* Without scripts the menu button cannot open anything, so show the menu itself */
html:not(.js) .nav-toggle {
  display: none;
}

html:not(.js) nav {
  display: flex;
  flex-flow: row wrap;
  gap: 4px 16px;
}

/* The popup and arrows need scripts */
html:not(.js) .read-bio,
html:not(.js) .team-nav {
  display: none;
}


/* ==========================================================================
   12. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pg {
    transition: none;
  }

  .ls-slide,
  .ls-pick::before {
    transition: none;
  }

  /* No fading tagline: just show the ending */
  .cycle span,
  .cycle span:last-child {
    animation: none;
  }

  .cycle span:last-child {
    opacity: 1;
  }
}


/* ==========================================================================
   Phone type (below 760px): slightly smaller and tighter so more fits on the screen.
   Tablets and desktop keep their sizes. To go back, delete this block.
   ========================================================================== */
@media (max-width: 759px) {
  body {
    font-size: 15.5px;
    line-height: 1.5;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 18px; }

  .phil blockquote { font-size: 20px; }
  .team-bio { font-size: 16px; }
  .studio-intro { font-size: 15.5px; }

  .steps li::before { font-size: 28px; }
  .steps p {
    font-size: 15px;
    line-height: 23px;
  }

  footer { font-size: 14.5px; }
}


/* ==========================================================================
   Phone width (below 760px): the sheet and its panels run almost edge to edge (4px of grid paper each side
   instead of 10px) and the text sits 22px in from the panel edge (it was 20px, then 28px).
   To go back, delete this block.
   ========================================================================== */
@media (max-width: 759px) {
  :root { --inset: 22px; }

  .site-sheet {
    width: calc(100% - 8px);
  }
}


/* ==========================================================================
   Phone: the Disciplines panel is tighter. The heading and the arrows sit 12px higher, the intro lines are
   gone, and there is less room around the cards and their titles. To go back, delete this block.
   ========================================================================== */
@media (max-width: 759px) {
  #services {
    padding-top: 28px;
    padding-bottom: 20px;
  }

  #services .svc-nav {
    top: 20px;   /* moves up with the heading */
  }

  /* No subhead on phones: just DISCIPLINES, with the cards starting below the arrows and counter */
  #services .intro {
    display: none;
  }

  #services h2 {
    margin-bottom: 58px;
  }

  /* No gray bar; the title sits right under the picture in its own pencil frame (34px tall) */
  #services .service-bar {
    display: none;
  }

  #services .service-name {
    height: 34px;
    margin-top: 0;
  }

  #services .service-name h3 {
    line-height: 34px;
  }
}


/* Phone: no one-line subheads under the panel headings (Disciplines, Our team, Process). Delete this block to bring them back. */
@media (max-width: 759px) {
  .intro,
  .studio-intro {
    display: none;
  }

  #process h2 {
    margin-bottom: 24px;
  }

  /* Request a consultation: the "Tell us a little about the project..." line goes too; the address and form stay */
  #consult h2 + p {
    display: none;
  }
}


/* ==========================================================================
   Phone (below 760px): Futura text, buttons and pictures are centered; Minion text stays left-aligned.
   The Disciplines arrows move under the heading so the centered heading does not run into them.
   To go back to left-aligned, delete this block.
   ========================================================================== */
@media (max-width: 759px) {
  .sheets h1,
  .sheets h2,
  .sheets h3,
  .sheets .lab,
  .sheets .step-title,
  .sheets .team-role,
  .sheets form label,
  .sheets .steps li::before {
    text-align: center;
  }

  .sheets .hero-actions {
    justify-content: center;
  }

  .sheets form .btn,
  .sheets form button {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* The red bar under Our team is centered with its heading */
  .studio-head h2::after {
    margin-left: auto;
    margin-right: auto;
  }

  /* Team cards: photo, name, role and Read bio centered */
  #studio .team-card {
    text-align: center;
  }

  #studio .team-card img {
    margin-left: auto;
    margin-right: auto;
  }

  /* Disciplines: arrows and counter sit centered under the heading */
  #services .svc-nav {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 20px;
  }

  #services h2 {
    margin-bottom: 18px;
  }
}