/* Sarah Seay Photography, shared stylesheet.
   This is the complete site CSS. It was previously split out of index.html,
   which had two <style> blocks: the base styles and the editorial redesign.
   Only the first block was carried over, so the homepage hero mosaic, welcome
   band, manifesto, style showcase, portfolio band, selected work and about
   editorial had no styling and their photos rendered at full width.
   Both blocks are restored here, in their original order. 2026-09-02. */


  :root {
    --paper: #ffffff;
    --paper-deep: #f8f1f2;
    --white: #ffffff;
    --ink: #4d352d;
    --muted: #6f625d;
    --accent: #c98f96;
    --accent-dark: #875861;
    --blush-letter: #b8747f;
    --sage: #7f8b6c;
    --powder: #a8bbc4;
    --powder-pale: #eef3f5;
    --line: #e6dcdc;
    --shadow: 0 18px 50px rgba(106, 81, 71, 0.12);
    --serif: Iowan Old Style, Baskerville, Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  body.no-scroll { overflow: hidden; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 3px solid rgba(201, 143, 150, 0.5); outline-offset: 4px; }

  .skip-link {
    position: fixed; top: 10px; left: 10px; z-index: 200;
    transform: translateY(-160%); padding: 10px 16px;
    background: var(--ink); color: var(--white); text-decoration: none;
  }
  .skip-link:focus { transform: translateY(0); }

  /* ---------- header ---------- */
  header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(230, 220, 220, 0.95);
    backdrop-filter: blur(12px);
  }
  .header-inner {
    position: relative; max-width: 1240px; min-height: 76px;
    margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
  }
  .brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.38rem);
    letter-spacing: 0.01em; line-height: 1.1; text-decoration: none;
  }
  .brand-mark {
    position: relative; width: 60px; height: 60px; overflow: hidden;
    flex: 0 0 60px;
  }
  .brand-mark img {
    position: absolute; width: 170px; max-width: none;
    transform: translate(-55px, -23px); mix-blend-mode: multiply;
    filter: contrast(1.12) saturate(1.08);
  }
  nav { display: flex; align-items: center; gap: 30px; }
  nav a {
    position: relative; padding: 27px 0 24px;
    color: var(--muted); font-size: 0.73rem; font-weight: 650;
    letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase;
  }
  nav a::after {
    position: absolute; right: 0; bottom: 18px; left: 0;
    height: 1px; background: var(--accent); content: '';
    transform: scaleX(0); transition: transform 180ms ease;
  }
  nav a:hover, nav a.active { color: var(--ink); }
  nav a:hover::after, nav a.active::after { transform: scaleX(1); }
  .nav-toggle {
    display: none; border: 0; background: transparent; color: var(--ink);
    cursor: pointer; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .nav-toggle-lines { display: grid; gap: 4px; margin-left: 9px; }
  .nav-toggle-lines i { display: block; width: 19px; height: 1px; background: currentColor; }

  /* ---------- preview banner ---------- */
  .demo-banner {
    background: var(--powder-pale); border-bottom: 1px solid #d7e2e6;
    color: #526b76; padding: 9px 18px; text-align: center;
    font-size: 0.76rem; line-height: 1.45;
  }

  /* ---------- shared layout ---------- */
  main { min-height: 65vh; }
  .wrap { width: min(1184px, calc(100% - 48px)); margin: 0 auto; }
  .section { padding-top: 92px; padding-bottom: 92px; }
  .section-tight { padding-top: 62px; padding-bottom: 62px; }
  .section-rule { border-top: 1px solid var(--line); }
  .eyebrow {
    margin-bottom: 16px; color: var(--accent); font-size: 0.7rem;
    font-weight: 750; letter-spacing: 0.23em; text-transform: uppercase;
  }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; }
  h1 { font-size: clamp(2.75rem, 7vw, 5.9rem); letter-spacing: -0.035em; }
  h2 { margin-bottom: 20px; font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -0.025em; }
  h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
  .lede { max-width: 60ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }
  .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .btn {
    display: inline-flex; min-height: 50px; align-items: center; justify-content: center;
    padding: 13px 24px; border: 1px solid var(--ink); background: transparent;
    color: var(--ink); cursor: pointer; font-size: 0.72rem; font-weight: 750;
    letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }
  .btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
  .btn.solid { background: var(--ink); color: var(--paper); }
  .btn.solid:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
  .btn.light { border-color: rgba(255,255,255,0.7); color: #fff; }
  .btn.light:hover { background: #fff; color: var(--ink); }
  .text-link {
    color: var(--accent-dark); font-size: 0.76rem; font-weight: 750;
    letter-spacing: 0.14em; text-decoration-thickness: 1px;
    text-transform: uppercase; text-underline-offset: 5px;
  }

  /* ---------- hero ---------- */
  .hero {
    position: relative; min-height: min(790px, calc(100svh - 76px));
    overflow: hidden; background: var(--powder-pale);
  }
  .hero-media, .hero-media img, .hero-veil { position: absolute; inset: 0; }
  .hero-media img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0;
    transform: scale(1.015); transition: opacity 1.2s ease, transform 6s ease;
  }
  .hero-media img.on { opacity: 1; transform: scale(1); }
  .hero-veil {
    background:
      linear-gradient(90deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 52%, rgba(255,255,255,0.04) 82%),
      linear-gradient(0deg, rgba(255,255,255,0.38) 0%, transparent 48%);
  }
  .hero-inner {
    position: relative; z-index: 2; min-height: inherit;
    display: flex; align-items: flex-end; padding-top: 90px; padding-bottom: clamp(60px, 10vh, 112px);
  }
  .hero-copy { max-width: 820px; color: var(--ink); }
  .hero-copy .eyebrow { color: var(--accent-dark); }
  .hero-copy h1 { max-width: 760px; }
  .hero-copy p {
    max-width: 55ch; margin: 24px 0 34px;
    color: rgba(77,53,45,0.88); font-size: clamp(1.02rem, 2vw, 1.22rem);
  }
  .booking-pill {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 25px;
    padding: 7px 13px; border: 1px solid rgba(77,53,45,0.48); border-radius: 99px;
    background: rgba(255,255,255,0.48);
    font-size: 0.66rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .booking-pill::before { width: 6px; height: 6px; border-radius: 50%; background: #e6b7bd; content: ''; }
  .hero-copy .btn.light {
    border-color: var(--ink); background: rgba(255,255,255,0.34); color: var(--ink);
  }
  .hero-copy .btn.light:hover { background: var(--ink); color: #fff; }

  /* ---------- trust strip ---------- */
  .trust-strip { border-bottom: 1px solid var(--line); background: var(--white); }
  .trust-inner {
    display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .trust-item { padding: 24px 30px; text-align: center; }
  .trust-item + .trust-item { border-left: 1px solid var(--line); }
  .trust-item strong {
    display: block; margin-bottom: 3px; font-family: var(--serif);
    color: #5f6b52; font-size: 1.08rem; font-weight: 400;
  }
  .trust-item span { color: var(--muted); font-size: 0.78rem; }

  /* ---------- editorial intro ---------- */
  .intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(45px, 8vw, 110px); align-items: start; }
  .intro-copy { padding-top: 8px; }
  .intro-copy p { max-width: 58ch; margin-bottom: 24px; color: var(--muted); font-size: 1.05rem; }

  /* ---------- gallery cards ---------- */
  .section-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 28px; margin-bottom: 38px;
  }
  .section-head h2 { margin-bottom: 0; }
  .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .gcard { display: block; text-decoration: none; }
  .gcard .frame {
    position: relative; overflow: hidden; aspect-ratio: 4 / 5;
    background: var(--paper-deep);
  }
  .gcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; }
  .gcard:hover img { transform: scale(1.035); }
  .gcard .number {
    position: absolute; top: 14px; right: 14px; min-width: 34px;
    padding: 6px 8px; background: rgba(238,243,245,0.92);
    color: #526b76; font-size: 0.7rem; text-align: center;
    backdrop-filter: blur(8px);
  }
  .gcard .meta { padding: 17px 2px 0; }
  .gcard .meta-top { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
  .gcard .count { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
  .gcard .summary { max-width: 34ch; margin-top: 8px; color: var(--muted); font-size: 0.88rem; }

  /* ---------- process ---------- */
  .process-section { background: var(--powder-pale); color: var(--ink); }
  .process-section .eyebrow { color: var(--accent-dark); }
  .process-section .lede { color: var(--muted); }
  .process-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 54px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d7e2e6; }
  .step { padding: 30px 30px 6px 0; }
  .step + .step { padding-left: 30px; border-left: 1px solid #d7e2e6; }
  .step-number { margin-bottom: 42px; color: #68755b; font-size: 0.72rem; letter-spacing: 0.16em; }
  .step h3 { margin-bottom: 13px; color: var(--ink); }
  .step p { color: var(--muted); font-size: 0.9rem; }

  /* ---------- about preview ---------- */
  .about-preview { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 8vw, 100px); align-items: center; }
  .about-image { position: relative; }
  .about-image::after {
    position: absolute; right: -18px; bottom: -18px; z-index: -1;
    width: 55%; height: 42%; background: var(--paper-deep); content: '';
  }
  .about-image .portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
  .about-image img { width: 100%; height: 100%; object-fit: cover; }
  .prose p { max-width: 62ch; margin-bottom: 1.15em; color: var(--muted); }

  /* ---------- CTA ---------- */
  .cta-panel {
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
    padding: clamp(38px, 6vw, 70px); border-left: 8px solid var(--accent);
    background: #f5e6e8; color: var(--ink);
  }
  .cta-panel .eyebrow { color: var(--accent-dark); }
  .cta-panel h2 { max-width: 720px; margin-bottom: 0; }
  .cta-panel .btn { white-space: nowrap; }
  .cta-panel .btn.light { border-color: var(--ink); color: var(--ink); }
  .cta-panel .btn.light:hover { background: var(--ink); color: #fff; }

  /* ---------- masonry ---------- */
  .gallery-title { margin-bottom: 42px; }
  .masonry { columns: 3 300px; column-gap: 18px; }
  .masonry .shot {
    width: 100%; margin-bottom: 18px; padding: 0; border: 0;
    background: var(--paper-deep); cursor: zoom-in; break-inside: avoid;
  }
  .masonry .shot img { width: 100%; transition: opacity 180ms ease; }
  .masonry .shot:hover img { opacity: 0.9; }
  .backlink {
    display: inline-block; margin-bottom: 32px; color: var(--muted);
    font-size: 0.72rem; font-weight: 750; letter-spacing: 0.15em;
    text-decoration: none; text-transform: uppercase;
  }
  .backlink:hover { color: var(--accent-dark); }

  /* ---------- lightbox ---------- */
  .lightbox {
    position: fixed; inset: 0; z-index: 100; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 16, 13, 0.97);
  }
  .lightbox.open { display: flex; }
  .lightbox img { max-width: 91vw; max-height: 86vh; object-fit: contain; }
  .lb-btn {
    position: absolute; padding: 18px; border: 0; background: transparent;
    color: rgba(255,255,255,0.8); cursor: pointer;
    font-family: var(--sans); font-size: 2rem; line-height: 1;
  }
  .lb-btn:hover { color: #fff; }
  .lb-close { top: 8px; right: 12px; }
  .lb-prev { top: 50%; left: 4px; transform: translateY(-50%); }
  .lb-next { top: 50%; right: 4px; transform: translateY(-50%); }
  .lb-count {
    position: absolute; right: 0; bottom: 17px; left: 0;
    color: rgba(255,255,255,0.65); font-size: 0.76rem;
    letter-spacing: 0.12em; text-align: center;
  }

  /* ---------- inner pages and contact ---------- */
  .page-intro { max-width: 770px; margin-bottom: 52px; }
  .two-col { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(42px, 7vw, 92px); align-items: start; }
  .two-col .portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
  .two-col .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .contact-details { display: grid; gap: 12px; margin-top: 30px; }
  .contact-line { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .contact-line .label {
    display: inline-block; width: 110px; color: var(--muted);
    font-size: 0.68rem; font-weight: 750; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .contact-line a { text-decoration-color: var(--line); text-underline-offset: 4px; }
  .contact-line a:hover { text-decoration-color: var(--accent); }
  .inquiry-card { padding: clamp(28px, 5vw, 52px); background: var(--white); box-shadow: var(--shadow); }
  .inquiry-card h3 { margin-bottom: 10px; }
  .inquiry-card > p { margin-bottom: 28px; color: var(--muted); font-size: 0.9rem; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
  .field { display: grid; gap: 7px; }
  .field.full { grid-column: 1 / -1; }
  .field label {
    color: var(--muted); font-size: 0.68rem; font-weight: 750;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .field input, .field select, .field textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 0;
    background: var(--paper); color: var(--ink); padding: 12px 13px;
  }
  .field textarea { min-height: 130px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
  .form-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
  .form-note { color: var(--muted); font-size: 0.75rem; }
  .form-status { min-height: 1.4em; margin-top: 12px; color: var(--accent-dark); font-size: 0.82rem; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); }
  .footer-inner {
    min-height: 176px; display: grid; grid-template-columns: 190px 1fr auto;
    align-items: center; justify-content: space-between;
    gap: 18px; color: var(--muted); font-size: 0.8rem;
  }
  .footer-brand { display: grid; justify-items: start; gap: 2px; }
  .footer-logo {
    width: 158px; height: 158px; object-fit: contain;
    mix-blend-mode: multiply;
  }
  .footer-brand span { font-size: 0.7rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
  .footer-links a { text-decoration: none; }
  .footer-links a:hover { color: var(--accent-dark); }

  @media (max-width: 860px) {
    .section { padding-top: 72px; padding-bottom: 72px; }
    .intro-grid, .about-preview, .two-col { grid-template-columns: 1fr; }
    .intro-grid { gap: 28px; }
    .about-preview { gap: 48px; }
    .about-image { max-width: 540px; }
    .process-head { grid-template-columns: 1fr; gap: 14px; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid .gcard:last-child { grid-column: 1 / -1; width: calc(50% - 12px); }
    .cta-panel { grid-template-columns: 1fr; }
    .cta-panel .btn { justify-self: start; }
  }

  @media (max-width: 720px) {
    .wrap { width: min(100% - 34px, 1184px); }
    .header-inner { min-height: 68px; padding: 0 17px; }
    .brand { max-width: 280px; font-size: 1.08rem; }
    .brand-mark { width: 54px; height: 54px; flex-basis: 54px; }
    .brand-mark img { width: 153px; transform: translate(-49px, -21px); }
    .nav-toggle { display: flex; align-items: center; }
    nav {
      position: absolute; top: 100%; right: 0; left: 0;
      display: none; align-items: stretch; gap: 0;
      padding: 10px 17px 20px; border-bottom: 1px solid var(--line);
      background: var(--paper); box-shadow: 0 14px 30px rgba(49,38,28,0.1);
    }
    header.nav-open nav { display: grid; }
    nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
    nav a:last-child { border-bottom: 0; }
    nav a::after { display: none; }
    .hero { min-height: min(720px, calc(100svh - 68px)); }
    .hero-veil {
      background:
        linear-gradient(0deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.34) 62%, rgba(255,255,255,0.06) 88%);
    }
    .hero-inner { padding-top: 100px; padding-bottom: 52px; }
    .hero-copy { width: 100%; }
    .hero-copy h1 { font-size: clamp(2.7rem, 13.2vw, 4rem); }
    .hero-copy p { margin: 19px 0 27px; }
    .hero-copy .btn-row { align-items: stretch; }
    .hero-copy .btn { flex: 1 1 190px; }
    .trust-inner { grid-template-columns: 1fr; padding: 7px 0; }
    .trust-item { padding: 15px 8px; }
    .trust-item + .trust-item { border-top: 1px solid var(--line); border-left: 0; }
    .section-head { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 27px; }
    .card-grid { grid-template-columns: 1fr; gap: 31px; }
    .card-grid .gcard:last-child { grid-column: auto; width: auto; }
    .gcard .frame { aspect-ratio: 5 / 6; }
    .steps { grid-template-columns: 1fr; }
    .step { padding: 26px 0; }
    .step + .step { padding-left: 0; border-top: 1px solid #d7e2e6; border-left: 0; }
    .step-number { margin-bottom: 18px; }
    .cta-panel { margin-right: -17px; margin-left: -17px; }
    .form-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: auto; }
    .footer-inner {
      grid-template-columns: 1fr; justify-items: center; gap: 16px;
      padding-top: 30px; padding-bottom: 30px; text-align: center;
    }
    .footer-brand { justify-items: center; }
  }

  @media (max-width: 560px) {
    .hero-copy h1 { font-size: clamp(2.65rem, 11.5vw, 3.2rem); }
    .hero-copy .btn-row { display: grid; grid-template-columns: 1fr; }
    .hero-copy .btn { width: 100%; }
    .booking-pill { font-size: 0.61rem; letter-spacing: 0.12em; }
  }

  @media (max-width: 390px) {
    .brand { max-width: 270px; font-size: 1rem; }
    .nav-toggle > span:first-child { display: none; }
    .hero-copy h1 { font-size: 2.75rem; }
    .btn { width: 100%; }
    .form-actions { align-items: stretch; flex-direction: column; }
  }

  .exp-steps { max-width: 760px; }
  .exp-step { border-top: 1px solid var(--line); padding: 32px 0 10px; }
  .exp-step h3 { margin: 8px 0 10px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  }


  :root {
    --paper: #fffdfc;
    --paper-deep: #f8f1f2;
    --white: #ffffff;
    --ink: #4d352d;
    --muted: #75645e;
    --accent: #c98f96;
    --accent-dark: #875861;
    --sage: #7f8b6c;
    --sage-deep: #5f6b52;
    --powder: #a8bbc4;
    --powder-pale: #eef3f5;
    --line: #e6dcdc;
    --shadow: 0 28px 80px rgba(77, 53, 45, 0.16);
  }

  html { overflow-x: clip; }
  body { overflow-x: clip; background: var(--paper); }
  h1, h2, h3 { color: var(--blush-letter); text-wrap: balance; }
  h1 { font-size: clamp(3.2rem, 7.2vw, 6.6rem); }
  h2 { font-size: clamp(2.35rem, 5vw, 4.5rem); }
  .wrap { width: min(1200px, calc(100% - 56px)); }
  .section { padding-top: 112px; padding-bottom: 112px; }
  .eyebrow { color: var(--accent-dark); letter-spacing: 0.28em; }
  .btn { min-height: 54px; padding: 14px 25px; letter-spacing: 0.2em; }

  /* Editorial header inspired by the reference site's split brand and menu. */
  header {
    position: relative;
    background: var(--white);
    border-bottom: 0;
    backdrop-filter: none;
  }
  .header-inner {
    position: relative;
    max-width: none;
    min-height: 154px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(410px, 1.1fr) minmax(650px, 1fr);
    gap: 0;
  }
  .header-inner::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 54%;
    background: var(--paper-deep);
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    content: '';
  }
  .brand {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    padding: 28px clamp(32px, 6vw, 92px);
    gap: 18px;
    font-family: var(--serif);
    font-size: clamp(1.55rem, 2.7vw, 2.85rem);
    font-weight: 400;
    color: var(--blush-letter);
    letter-spacing: -0.015em;
    line-height: 1;
    text-transform: none;
  }
  .brand-mark {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
  }
  .brand-mark img {
    width: 232px;
    transform: translate(-75px, -36px);
  }
  nav {
    position: relative;
    z-index: 2;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 clamp(20px, 4vw, 64px) 24px -28px;
    border-top: 1px solid var(--accent);
    border-left: 1px solid var(--accent);
  }
  nav a {
    min-width: 0;
    padding: 17px 14px;
    border-right: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    color: var(--accent-dark);
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.2em;
    text-align: center;
  }
  nav a::after { display: none; }
  nav a:hover, nav a.active { background: var(--paper-deep); color: var(--ink); }

  /* Image-first opening with an asymmetric portrait rail. */
  .hero {
    min-height: 0;
    overflow: visible;
    background: var(--white);
  }
  .hero-mosaic {
    display: grid;
    grid-template-columns: 0.72fr 1.05fr 1.25fr 1.05fr;
    gap: 10px;
    height: clamp(540px, 48vw, 720px);
    padding: 0 0 42px;
  }
  .hero-tile {
    position: relative;
    overflow: hidden;
    background: var(--paper-deep);
  }
  .hero-tile:nth-child(1), .hero-tile:nth-child(4) { margin-top: 62px; }
  .hero-tile:nth-child(2) { margin-bottom: 34px; }
  .hero-tile img { width: 100%; height: 100%; object-fit: cover; }
  .hero-tile:nth-child(1) img { object-position: 64% center; }
  .hero-tile:nth-child(2) img { object-position: center; }
  .hero-tile:nth-child(3) img { object-position: center; }
  .hero-tile:nth-child(4) img { object-position: 62% center; }
  .hero-statement {
    position: relative;
    z-index: 4;
    width: min(760px, calc(100% - 56px));
    margin: -132px 0 0 clamp(28px, 8vw, 132px);
    padding: clamp(34px, 5vw, 66px);
    border-left: 9px solid var(--accent);
    background: rgba(255, 253, 252, 0.95);
    box-shadow: var(--shadow);
  }
  .hero-statement h1 { max-width: 670px; font-size: clamp(3.1rem, 6.8vw, 6.15rem); }
  .hero-statement > p { max-width: 54ch; margin: 20px 0 29px; color: var(--muted); font-size: 1.06rem; }
  .booking-pill { border-color: rgba(135, 88, 97, 0.42); background: var(--paper-deep); }

  /* Welcome feature. */
  .welcome-section {
    position: relative;
    margin-top: 100px;
    padding: 150px 0 130px;
    background:
      radial-gradient(circle at 88% 18%, rgba(255,255,255,0.7) 0 4px, transparent 5px) 0 0 / 34px 34px,
      var(--paper-deep);
  }
  .welcome-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(52px, 9vw, 130px);
    align-items: center;
  }
  .welcome-word {
    position: absolute;
    top: -95px;
    left: 44%;
    z-index: 3;
    color: var(--blush-letter);
    font-family: var(--serif);
    font-size: clamp(5.5rem, 12vw, 11rem);
    font-style: italic;
    line-height: 0.82;
    letter-spacing: -0.07em;
    pointer-events: none;
  }
  .welcome-portrait {
    position: relative;
    z-index: 2;
    aspect-ratio: 4 / 5;
    margin-left: clamp(0px, 4vw, 52px);
    overflow: hidden;
    background: var(--white);
    box-shadow: 26px 26px 0 var(--powder);
  }
  .welcome-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .welcome-copy { position: relative; z-index: 2; max-width: 570px; padding-top: 38px; }
  .welcome-copy h2 { margin-bottom: 28px; }
  .welcome-copy p { margin-bottom: 25px; color: var(--muted); font-size: 1.06rem; }

  .editorial-manifesto {
    padding: 110px 28px 95px;
    background: var(--white);
    color: var(--blush-letter);
    font-family: var(--serif);
    font-size: clamp(2.45rem, 5.2vw, 5.15rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-align: center;
    text-transform: none;
  }
  .editorial-manifesto span { color: var(--powder); }

  /* Side-by-side collection identities, based only on Sarah's real galleries. */
  .style-showcase { padding: 0 0 112px; }
  .style-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 620px;
  }
  .style-card {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: flex-end;
    padding: clamp(32px, 5vw, 70px);
    color: var(--white);
    text-decoration: none;
  }
  .style-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(55,37,31,0.78), rgba(55,37,31,0.04) 72%);
    content: '';
  }
  .style-card:nth-child(2)::after { background: linear-gradient(0deg, rgba(70,79,59,0.82), rgba(70,79,59,0.06) 74%); }
  .style-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
  .style-card:hover img { transform: scale(1.035); }
  .style-card-copy { position: relative; z-index: 2; max-width: 460px; }
  .style-card-number { display: block; margin-bottom: 28px; font-size: 0.7rem; letter-spacing: 0.24em; }
  .style-card h3 { margin-bottom: 12px; font-size: clamp(2.8rem, 5vw, 5rem); }
  .style-card h3, .portfolio-band h2 { color: var(--white); }
  .style-card p { max-width: 38ch; color: rgba(255,255,255,0.88); }
  .style-link { display: inline-block; margin-top: 24px; border-bottom: 1px solid currentColor; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.2em; text-transform: uppercase; }

  .portfolio-band {
    position: relative;
    min-height: 400px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--accent);
    color: var(--white);
  }
  .portfolio-band::after {
    position: absolute;
    top: -25%;
    right: -5%;
    width: 52%;
    aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,0.34);
    border-radius: 50%;
    content: '';
  }
  .portfolio-band .wrap { position: relative; z-index: 2; padding-top: 78px; padding-bottom: 78px; }
  .portfolio-band .eyebrow { color: var(--white); }
  .portfolio-band h2 { max-width: 720px; }
  .portfolio-band p { max-width: 54ch; margin-bottom: 28px; color: rgba(255,255,255,0.88); }
  .portfolio-band .btn { border-color: var(--white); color: var(--white); }
  .portfolio-band .btn:hover { background: var(--white); color: var(--accent-dark); }

  .selected-section { background: var(--white); }
  .section-head { margin-bottom: 52px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 52px); }
  .gcard .frame { aspect-ratio: 4 / 5; }
  .gcard .number { background: var(--powder-pale); color: #526b76; }
  .gcard .meta { padding-top: 20px; }
  .gcard h3 { font-size: clamp(1.7rem, 3vw, 2.8rem); }

  .process-section { background: var(--powder-pale); }
  .process-head { margin-bottom: 62px; }
  .steps { border-color: rgba(168, 187, 196, 0.72); }
  .step + .step { border-color: rgba(168, 187, 196, 0.72); }
  .step-number { color: var(--sage-deep); }
  .step h3 { color: var(--blush-letter); }

  .about-editorial { position: relative; }
  .about-preview { grid-template-columns: 1.04fr 0.96fr; }
  .about-image::after { right: -32px; bottom: -32px; width: 64%; height: 48%; background: var(--sage); }
  .about-label {
    position: absolute;
    top: 32px;
    left: -34px;
    z-index: 3;
    padding: 18px 12px;
    background: var(--paper-deep);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .cta-panel { border-left-color: var(--accent); background: var(--paper-deep); }
  footer { background: var(--white); }

  @media (max-width: 980px) {
    .header-inner { grid-template-columns: minmax(340px, 0.9fr) minmax(520px, 1fr); }
    .brand { padding-left: 32px; font-size: 1.55rem; }
    nav { margin-right: 20px; }
    .hero-mosaic { grid-template-columns: 0.8fr 1fr 1.25fr; }
    .hero-tile:nth-child(4) { display: none; }
    .welcome-word { left: 40%; }
  }

  @media (max-width: 720px) {
    .wrap { width: min(100% - 34px, 1200px); }
    .section { padding-top: 76px; padding-bottom: 76px; }
    .header-inner {
      min-height: 82px;
      display: flex;
      padding: 0 17px;
    }
    .header-inner::before { width: 78%; clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
    .brand { max-width: calc(100% - 54px); padding: 10px 0; gap: 10px; font-size: 1.2rem; }
    .brand-mark { width: 58px; height: 58px; flex-basis: 58px; }
    .brand-mark img { width: 166px; transform: translate(-54px, -26px); }
    .nav-toggle { position: relative; z-index: 3; margin-left: auto; }
    nav {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      display: none;
      grid-template-columns: 1fr;
      margin: 0;
      padding: 0 17px 18px;
      border: 0;
      background: var(--paper);
      box-shadow: 0 20px 36px rgba(77,53,45,0.12);
    }
    header.nav-open nav { display: grid; }
    nav a { padding: 15px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
    .hero-mosaic {
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      height: 390px;
      padding-bottom: 0;
    }
    .hero-tile:nth-child(1), .hero-tile:nth-child(4) { margin-top: 24px; }
    .hero-tile:nth-child(2) { margin-bottom: 24px; }
    .hero-statement {
      width: calc(100% - 34px);
      margin: -34px 17px 0;
      padding: 34px 24px 38px;
      border-left-width: 6px;
    }
    .hero-statement h1 { font-size: clamp(2.8rem, 13vw, 4.25rem); }
    .hero-statement .btn-row { display: grid; grid-template-columns: 1fr; }
    .hero-statement .btn { width: 100%; }
    .welcome-section { margin-top: 70px; padding: 112px 0 78px; }
    .welcome-grid { grid-template-columns: 1fr; gap: 58px; }
    .welcome-word { top: -70px; left: 0; font-size: clamp(4.6rem, 22vw, 6.2rem); }
    .welcome-portrait { width: calc(100% - 28px); margin-left: 0; box-shadow: 18px 18px 0 var(--powder); }
    .welcome-copy { padding-top: 0; }
    .editorial-manifesto { padding: 82px 20px; font-size: clamp(1.8rem, 9vw, 3rem); }
    .style-showcase { padding-bottom: 76px; }
    .style-split { grid-template-columns: 1fr; min-height: 0; }
    .style-card { min-height: 520px; }
    .portfolio-band { min-height: 430px; }
    .portfolio-band::after { width: 92%; right: -42%; }
    .card-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-preview { grid-template-columns: 1fr; gap: 62px; }
    .about-image { width: calc(100% - 18px); max-width: 560px; }
    .about-label { top: 20px; left: -12px; }
    .about-image::after { right: -18px; bottom: -18px; }
  }

  @media (max-width: 390px) {
    .brand { font-size: 1.08rem; }
    .hero-mosaic { height: 350px; }
    .hero-statement h1 { font-size: 2.85rem; }
    .style-card { min-height: 470px; }
  }