/* =========================================================
   Peterson Remodeling
   1. Fonts          6. Split feature (Home + About)
   2. Tokens         7. Slideshow
   3. Base           8. Sections + Services
   4. Header + nav   9. Portfolio + lightbox
   5. Buttons       10. Contact
                    11. Footer, scrollbar, motion
   ========================================================= */


/* ---------- 1. Fonts ----------
   Fraunces (headings): a soft, 1970s-style serif with the logo's vintage warmth.
   Figtree (body): clean and friendly, easy to read at small sizes.
   Both are variable fonts, so one file covers every weight. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}


/* ---------- 2. Tokens ---------- */

:root {
  --paper:        #fffdee;   /* page background */
  --butter:       #f9e8a2;   /* fills, highlights */
  --rust:         #76290b;   /* text, lines, primary */
  --slate:        #bfcbd1;   /* panels, footer */
  --rust-deep:    #5c1f07;
  --butter-soft:  #fcf3cb;
  --butter-light: #fdf8e1;   /* alternate section background */
  --line: rgba(118, 41, 11, .22);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.65rem;

  --wrap: 1760px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header-h: 88px;
  --section: clamp(4rem, 9vw, 7.5rem);

  /* Home + About split: photo column | slate panel column.
     The header uses the same columns so the nav centres over the panel. */
  --split: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (min-width: 761px) and (max-width: 960px) {
  :root { --split: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --header-h: 68px; }
}


/* ---------- 3. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--rust);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; max-width: 62ch; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  line-height: 1.1;
  letter-spacing: -.01em;
}

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

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: .6rem 1rem;
  background: var(--butter);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Lock the page behind open menus and the lightbox */
html.is-locked { overflow: hidden; }


/* ---------- 4. Header + nav ---------- */

/* Solid cream by default, so it can never show through on any phone.
   While the hero is behind it (class added by the script) it blends into the hero. */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--split);
  align-items: center;
  padding-right: var(--gutter);
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}
/* only blends in when scripts are running, so a script problem can never leave it see-through */
.js .site-header.over-hero { background: transparent; box-shadow: none; }
@media (min-width: 761px) {
  .site-header {
    container-type: inline-size;   /* lets the logo measure the header width */
    transition: background-color .25s ease, box-shadow .25s ease;
  }
}

/* sits on the same left edge as the content in every section */
.brand {
  justify-self: start;
  margin-left: var(--gutter);
  line-height: 0;
}
@supports (width: 1cqw) {
  @media (min-width: 761px) {
    /* 100cqw is the header minus its right padding, so add that padding back */
    .brand { margin-left: max(var(--gutter), calc((100cqw + var(--gutter) - var(--wrap)) / 2 + var(--gutter))); }
  }
}

.brand img { width: 58px; height: auto; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
.site-nav { justify-self: center; }
.site-nav a {
  display: inline-block;
  padding-block: .35rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(var(--rust), var(--rust)) 0 100% / 0 1px no-repeat;
  transition: background-size .2s ease;
}
.site-nav a:hover,
.site-nav a.is-current { background-size: 100% 1px; }

.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr auto;
    padding-right: calc(var(--gutter) - .5rem);
  }
  .brand { margin-left: var(--gutter); position: relative; z-index: 2; }
  .js .site-header.over-hero { background: var(--slate); }
  .brand img { width: 48px; }

  /* hamburger */
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rust);
    cursor: pointer;
  }
  .bars { position: relative; display: block; width: 24px; height: 16px; }
  .bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
  }
  .bars span:nth-child(1) { top: 0; }
  .bars span:nth-child(2) { top: 7px; }
  .bars span:nth-child(3) { top: 14px; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* full-screen menu */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    justify-self: stretch;    /* fill the screen, not just the centre */
    align-self: stretch;
    display: grid;
    place-items: center;
    background: var(--paper);
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .site-nav.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease;
  }
  .site-nav ul { flex-direction: column; gap: 1.75rem; text-align: center; }
  .site-nav a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 9vw, 1rem);
    font-weight: 600;
    font-variation-settings: "SOFT" 100;
    letter-spacing: -.01em;
    text-transform: none;
    background-size: 0 2px;
  }
  .site-nav a:hover,
  .site-nav a.is-current { background-size: 100% 2px; }
}


/* ---------- 5. Buttons + links ---------- */

.btn {
  display: inline-block;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 10px;
  background: var(--butter);
  color: var(--rust);
  font: 500 var(--step-0)/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--rust); color: var(--paper); }

/* same growing underline as the nav */
.text-link {
  padding-block: .35rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--rust), var(--rust)) 0 100% / 0 1px no-repeat;
  transition: background-size .2s ease;
}
.text-link:hover { background-size: 100% 1px; }


/* ---------- 6. Split feature: photo + butter block | slate panel ----------
   Home and About. The photo runs to the bottom of the screen. */

.feature {
  display: grid;
  grid-template-columns: var(--split);
  padding-right: var(--gutter);
}
.feature-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4.5vw, 4.75rem);
  background: var(--slate);
}
.panel-inner { width: 100%; }

.feature-media {
  display: flex;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
/* --photo-w: photo width; --peek: how far the butter block shows on the left */
.feature {
  --photo-w: clamp(260px, 29vw, 540px);
  --peek: calc(var(--photo-w) * .25);
}
.feature-photo {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: var(--photo-w);
}
/* butter block peeking out on the left */
.feature-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(1.5rem, 3vw, 2.25rem);
  bottom: 0;
  left: calc(-1 * var(--peek));
  width: calc(var(--peek) * 2);
  background: var(--butter);
  border-radius: 6px 0 0 6px;
}
/* the photo floats as a card: rounded on all sides, with space below */
.feature-photo > img,
.slides {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.feature-photo > img { object-fit: cover; }


/* Home: fills the screen, sits under the header so the nav is on the panel */
.hero {
  margin-top: calc(-1 * var(--header-h));
  min-height: 600px;
  min-height: max(600px, 100svh);
}
.hero .feature-media { padding-top: calc(var(--header-h) - 1.5rem); }
.hero .feature-panel { padding-top: calc(var(--header-h) + 1.5rem); }
.hero .panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img { width: 100%; max-width: clamp(320px, 28vw, 520px); }
.hero .lede {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
  max-width: 34ch;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  line-height: 1.55;
  text-align: start;
}
.hero-actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.1rem;
}

/* About: fills the screen below the header */
.about-feature {
  min-height: 560px;
  min-height: max(560px, calc(100svh - var(--header-h)));
}
.about-copy { max-width: 34rem; }
.about-copy .about-title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.about-copy h3 { margin-bottom: 1.1rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.about-copy p { line-height: 1.65; }
.about-copy p + p { margin-top: 1rem; }
.about-copy p + h3 { margin-top: clamp(4.2rem, 4vw, 2.75rem); }

/* Desktop home + About: the photo side mirrors the slate panel. Photo + butter block
   together are as wide as the panel and run the full height of the screen,
   sitting toward the panel with a snug gap between.
   100cqw here is the hero minus its right gutter, so with the 1.4fr | 1fr split
   the panel is 100cqw / 2.4 and the photo column is 1.4 times that.
   On very wide screens the logo moves in from the edge, so the group is
   capped to stay clear of it. The photo is 4/5 of the group; the butter
   block peeks out the other 1/5. */
@media (min-width: 961px) {
  .hero,
  .about-feature {
    container-type: inline-size;
    --hero-gap: clamp(4rem, 3vw + 2.5rem, 6.5rem);
    --panel-w: calc(100cqw / 2.4);
    --logo-right: calc(max(var(--gutter), (100cqw + var(--gutter) - var(--wrap)) / 2 + var(--gutter)) + 58px);
    --group-w: min(var(--panel-w), var(--panel-w) * 1.4 - var(--hero-gap) - var(--logo-right) - 1.5rem);
  }
  .hero .feature-media,
  .about-feature .feature-media {
    justify-content: flex-end;
    padding-block: 0;
    padding-left: 0;
    padding-right: var(--hero-gap);
  }
  .hero .feature-photo,
  .about-feature .feature-photo {
    --photo-w: calc(var(--group-w) * .8);
    --peek: calc(var(--photo-w) * .25);
    margin-left: var(--peek);
    flex: none;
  }
  /* flush with the top and bottom of the section, like the panel */
  .hero .slides,
  .about-feature .feature-photo > img { border-radius: 0; }
  .hero .feature-photo::before,
  .about-feature .feature-photo::before {
    top: 0;
    border-radius: 0;
  }
  /* About photo fills the column at any height, cropping instead of stretching */
  .about-feature .feature-photo > img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* Small laptops: wider photo, and the photo + block are centred together */
@media (min-width: 961px) and (max-width: 1280px) {
  .feature { --photo-w: clamp(330px, 30vw + 70px, 380px); }
  .feature-photo { margin-left: var(--peek); }
}
/* Tablets: half-and-half columns, wider photo, slimmer block */
@media (min-width: 761px) and (max-width: 960px) {
  .feature {
    --photo-w: clamp(250px, 36vw, 340px);
    --peek: calc(var(--photo-w) * .16);
  }
  .feature-panel { padding-inline: clamp(1.5rem, 3.5vw, 2.5rem); }
  .feature-media { padding-inline: 1.25rem; }
  .feature-photo { margin-left: var(--peek); }
  .hero .feature-media { padding-top: calc(var(--header-h) + .5rem); }
}

/* Phones: panel on top, photo fills the rest of the screen */
@media (max-width: 760px) {
  .feature {
    display: flex;
    flex-direction: column;
    padding-right: 0;
  }
  .feature-panel { padding: 2.75rem var(--gutter); }
  .feature-media {
    order: 2;                 /* photo below the panel */
    flex: 1 0 auto;
    padding: 2.5rem var(--gutter);
    background-color: var(--slate);
  }
  .feature-photo {
    width: min(78%, 420px);
    min-height: 450px;
    /* nudge right by half the butter block's overhang so the pair looks centred */
    transform: translateX(6.5%);
  }
  .feature-photo::before { left: -13%; width: 50%; }

  .hero { min-height: 100svh; background: var(--slate); }
  .hero .feature-panel { padding-top: calc(var(--header-h) + 1.25rem); }
  .hero .feature-media { padding-top: 2.25rem; }
  .hero-logo img { max-width: 320px; }

  .about-feature { min-height: calc(100svh - var(--header-h)); }
  .about-copy { margin-inline: auto; }

  .hero .lede { margin-left: 25px;}
}


/* ---------- 7. Slideshow ----------
   Each photo fades in over the last with a slow, slight zoom-out. */

.slides { position: relative; background: var(--butter-soft); }
.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0s linear 1.2s, transform 0s linear 1.2s;
}
.slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.2s ease, transform 5s cubic-bezier(.25, .6, .3, 1);
}
.slide.is-prev { z-index: 1; opacity: 1; transform: scale(1); transition: none; }

.slide-bar {
  position: absolute;
  z-index: 3;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  pointer-events: none;
}
.slide-cap {
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--paper);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  transition: opacity .35s ease;
}
.slide-cap.is-changing { opacity: 0; }
.slide-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--rust);
  opacity: .85;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .15s ease;
}
.slide-pause:hover { opacity: 1; }
.slide-pause svg { width: .8rem; height: .8rem; fill: currentColor; }
.slide-pause .i-play,
.slide-pause[aria-pressed="true"] .i-pause { display: none; }
.slide-pause[aria-pressed="true"] .i-play { display: block; }
.slide-pause[hidden] { display: none; }


/* ---------- 8. Sections + Services ---------- */

.section { padding-block: var(--section); }
.section-alt { background: var(--butter-light); }

.section-head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head h2,
.about-title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }

/* Phones: each section fills at least one screen */
@media (max-width: 760px) {
  .page-section {
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Services: two matching cards, names centred and set large in the heading font */
.catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.catalog-col {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  text-align: center;
}
.catalog-col header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}
.catalog-col header::after {           /* short rule under the heading */
  content: "";
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rust);
}
.catalog-col h3 { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); }
.catalog ul { list-style: none; margin: 0; padding: 0; }
.catalog li {
  padding-block: clamp(.8rem, 1.6vw, 1.1rem);
}
.catalog li:first-child { border-top: 0; }
.catalog .name {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05rem + .8vw, 1.25rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
  line-height: 1.2;
}

.also {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 10px;
  background: var(--slate);
}
.also img { width: auto; height: clamp(56px, 6vw, 80px); }
.also h3 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); }
.also p {
  max-width: 52ch;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 3px solid var(--rust);
  font-size: var(--step-1);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .catalog { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .also { grid-template-columns: auto 1fr; }
  .also p {
    grid-column: 1 / -1;
    max-width: none;
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1.5px solid rgba(118, 41, 11, .3);
  }
}
@media (max-width: 760px) {
  .catalog li { padding-block: .75rem; }
}
@media (max-width: 520px) {
  .also { column-gap: 1rem; }
  .also img { height: 48px; }
  .also p { font-size: var(--step-0); 
  }
}


/* ---------- 9. Portfolio + lightbox ---------- */

.portfolio-group + .portfolio-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.portfolio-group > h3 {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem);
}

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(.9rem, 1.6vw, 1.5rem);
}
.gallery button {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
}
.gallery button:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; border-radius: 10px; }
.gallery .thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* Photo count tag, top right */
.gallery .count {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--rust);
  font-size: .8rem;
  font-weight: 600;
}

/* Job details sit underneath each photo as a short caption, on every screen */
.gallery .thumb { overflow: visible; border-radius: 0; }
.gallery .frame {
  display: block;
  overflow: hidden;          /* keeps the hover zoom inside the photo's rounded corners */
  border-radius: 8px;
}
.gallery .details {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .1rem 0;
  color: var(--rust);
  text-align: left;
}
.gallery .title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.gallery .loc {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.gallery .loc svg { flex: none; width: .8rem; height: .8rem; fill: currentColor; }

/* Mouse: the photo zooms gently on hover */
@media (hover: hover) {
  .gallery button:hover img,
  .gallery button:focus-visible img { transform: scale(1.04); }
}
@media (max-width: 760px) {
  .gallery .details { padding-top: .6rem; gap: .15rem; }
  .gallery .title { font-size: .9rem; }
  .gallery .loc { font-size: .66rem; }
  .gallery .count { top: .5rem; right: .5rem; padding: .2rem .5rem; font-size: .7rem; }
}

@media (min-width: 961px) and (max-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* Lightbox: a full-screen strip of photos that slides sideways.
   The frame never changes size, so nothing jumps while a photo loads. */
.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
}
.lightbox[open] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.lightbox:focus,
.lightbox:focus-visible { outline: none; }
.lightbox::backdrop { background: rgba(59, 62, 63, .93); }
.lightbox.no-modal { z-index: 100; background: rgba(59, 62, 63, .96); }

.lb-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 5.5rem .5rem;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lb-slide img,
.lb-slide video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
/* Small spinner while a photo is still on its way (rarely seen, since photos are fetched ahead) */
.lb-slide { position: relative; }
.lb-slide.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 3px solid rgba(255, 253, 238, .25);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: lb-spin .8s linear infinite;
  animation-delay: .15s;   /* nothing flashes if the photo is already there */
  opacity: 0;
}
@keyframes lb-spin { from { opacity: 1; transform: rotate(0); } to { opacity: 1; transform: rotate(360deg); } }

.lb-caption {
  max-width: none;
  padding: .75rem 1rem 1.5rem;
  font-size: var(--step-0);
  font-weight: 600;
  text-align: center;
}
/* Before / During / After tag in the viewer caption */
.lb-stage {
  display: table;
  margin: 0 auto .5rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--rust);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lb-stage[hidden] { display: none; }
.lightbox .counter { display: block; margin-top: .2rem; font-size: var(--step--1); font-weight: 400; opacity: .85; }

.lightbox .nav-btn {
  position: fixed;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--butter-light);
  color: var(--rust);
  font: 400 1.6rem/1 var(--font-body);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}
.lightbox .prev { left: 1rem; }
.lightbox .next { right: 1rem; }
.lightbox .nav-btn[hidden] { display: none; }
.lightbox .close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: .7rem 1.1rem;
  border: 1px solid var(--rust-deep);
  border-radius: 10px;
  background: var(--butter-light);
  color: var(--rust);
  font: 600 var(--step--1)/1 var(--font-body);
  cursor: pointer;
}

/* Phones: no arrows, just swipe */
@media (max-width: 760px) {
  .lightbox .nav-btn { display: none; }
  .lb-slide { padding: 4rem .75rem .25rem; }
}


/* ---------- 10. Contact ----------
   Mirror of the Home/About split: slate panel on the left, heading + form on the right. */

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  padding-left: var(--gutter);
  min-height: 600px;
  min-height: max(600px, calc(100svh - var(--header-h)));
}

.contact-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4.5vw, 4.5rem);
  background: var(--slate);
}
.contact-panel-inner { width: 100%; max-width: 28rem; }

.contact-panel-icons {
  display:flex;
  align-items: center;
  gap: 15px;
}
.contact-lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  font-weight: 500;
  font-variation-settings: "SOFT" 100;
  line-height: 1.3;
}

.contact-list { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
.contact-list > div {
  padding-block: .8rem;
}

.contact-list dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.contact-list dd {
  margin: .1rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.contact-list a {
  text-decoration: none;
  background: linear-gradient(var(--rust), var(--rust)) 0 100% / 0 1px no-repeat;
  transition: background-size .2s ease;
}
.contact-list a:hover { background-size: 100% 1px; }
.contact-alt { font-size: var(--step--1); font-weight: 500; white-space: nowrap; }
.contact-alt a { text-decoration: underline; text-underline-offset: .2em; background: none; }

.contact-panel h2 {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.1rem);
}

.next-title {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem);
}
/* a real sequence, so the steps are numbered */
.next-steps {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  counter-reset: step;
}
.next-steps li {
  position: relative;
  padding-left: 2.6rem;
  line-height: 1.5;
  counter-increment: step;
}
.next-steps li::before {
  content: counter(step);
  position: absolute;
  top: -.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--rust);
  color: var(--paper);
  font-size: .85rem;
  font-weight: 600;
}
.next-steps strong { font-weight: 600; }

.contact-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3.5vw, 3rem) var(--gutter);
}
.contact-main h2 {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
}


.contact-main .form { max-width: 820px; }

.form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 8px;
  background: var(--butter-soft);

}
.field { display: grid; align-content: start; gap: .5rem; }
.field.full { grid-column: 1 / -1; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field label,
.field legend { padding: 0; font-size: var(--step--1); font-weight: 600; }

.form input,
.form textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: var(--rust);
  font: inherit;
}
.form textarea { min-height: 7rem; resize: vertical; }
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--rust); }
.form ::placeholder { color: var(--rust); opacity: .45; }

.choice { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.choice label { position: relative; font-size: var(--step--1); font-weight: 500; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span {
  display: inline-block;
  min-width: 5.5rem;
  padding: .6rem 1.1rem;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.choice span:hover { background: var(--paper); }
.choice input:checked + span { background: var(--rust); color: var(--paper); }
.choice input:focus-visible + span { outline: 3px solid var(--rust); outline-offset: 2px; }

.form-submit {
  grid-column: 1 / -1;
  margin-top: .5rem;
  padding: 1.05rem 1.5rem;
  border: 0.5px solid var(--rust);
  border-radius: 6px;
  background: var(--paper);
  color: var(--rust);
  font: 600 var(--step-0)/1 var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.form-submit:hover { background: var(--rust); color: var(--paper); }
.form-submit:disabled { opacity: .7; cursor: progress; }
.form-status { grid-column: 1 / -1; font-weight: 600; }
.form-status:empty { display: none; }
.hp { position: absolute; left: -9999px; }

.form .field:nth-child(3) { grid-column: 1 / -1; }   /* email gets its own row */

@media (min-width: 761px) and (max-width: 960px) {
  .contact-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .contact-panel { padding-inline: clamp(1.5rem, 3.5vw, 2.5rem); }
}
/* Phones: heading + form first, contact details underneath */
@media (max-width: 760px) {
  .contact-split {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 0;
  }
  .contact-panel { order: 2; padding: 2.75rem var(--gutter); }
  .contact-main { padding: 3rem var(--gutter); align-items: center;}
  .form { grid-template-columns: 1fr; }
}


/* ---------- 11. Footer, scrollbar, motion ---------- */

.site-footer {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--butter-soft);
}
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.site-footer p { max-width: none; font-size: var(--step--1); }
.site-footer a { font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Brand-coloured scrollbar (Chrome, Edge, Safari; Firefox gets the colours) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: rgba(118, 41, 11, .55);
  border: 3px solid var(--paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rust); }
::-webkit-scrollbar-corner { background: var(--paper); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: rgba(118, 41, 11, .55) var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}