/* ==========================================================================
   Deej's Designs — site styles
   Palette "Sunset Thread" · Fredoka / Nunito / Caveat · mobile-first
   Breakpoints: 600px (tablet), 900px (desktop), 1200px (wide)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --bg: #FFFBF5;
  --bg-card: #FFF4E9;
  --coral: #F26B4E;
  --coral-hover: #DA5A3E;
  --teal: #2F9C92;
  --teal-hover: #257F77;
  --text: #33271F;
  --muted: #6B5B4F;
  --shadow: rgba(51, 39, 31, 0.12);
  --white: #FFFFFF;

  --font-heading: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', -apple-system, sans-serif;
  --font-script: 'Caveat', cursive;

  --radius: 14px;
  --radius-lg: 22px;
  --photo-shadow: 0 6px 16px var(--shadow);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --section-pad: clamp(3rem, 2rem + 4vw, 5.5rem);

  --container: 1240px;
  --header-h: 72px;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  /* Warm base color + a very faint paper grain (tiny inline SVG noise, no extra file) */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.31 0 0 0 0 0.2 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

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

img {
  height: auto;
}

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

a {
  color: inherit;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--teal-hover);
}

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

::selection {
  background: var(--coral);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 200;
  background: var(--text);
  color: var(--white);
  padding: var(--space-1) var(--space-2);
  border-radius: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-1);
  color: var(--white);
}

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

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  text-wrap: balance;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
}

h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  font-weight: 600;
}

p {
  max-width: 65ch;
}

.accent {
  color: var(--coral);
}

.script {
  font-family: var(--font-script);
  font-weight: 600;
  color: var(--teal-hover);
  line-height: 1.1;
}

.lead {
  font-size: clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
  color: var(--muted);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

.section {
  padding-block: var(--section-pad);
}

.section--alt {
  background: var(--bg-card);
}

.section-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

.section-head p {
  margin: var(--space-2) auto 0;
}

.section-head .script {
  display: block;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  margin-bottom: 0.25rem;
}

.page-head {
  text-align: center;
  padding-block: var(--section-pad) var(--space-4);
}

.page-head p {
  margin: var(--space-2) auto 0;
}

/* ---------- "Stitch" divider ---------- */
.stitch {
  border: 0;
  height: 2px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  background: repeating-linear-gradient(
    90deg,
    var(--coral) 0 12px,
    transparent 12px 22px
  );
  opacity: 0.75;
}

.stitch--teal {
  background: repeating-linear-gradient(
    90deg,
    var(--teal) 0 12px,
    transparent 12px 22px
  );
}

/* ---------- Buttons ----------
   Text is set at 19px+ bold so white-on-coral/teal meets WCAG "large text" contrast. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(242, 107, 78, 0.3);
}

.btn--primary:hover,
.btn--primary:active {
  background: var(--coral-hover);
  color: var(--white);
}

.btn--secondary {
  background: transparent;
  color: var(--teal-hover);
  border-color: var(--teal);
}

.btn--secondary:hover,
.btn--secondary:active {
  background: var(--teal-hover);
  border-color: var(--teal-hover);
  color: var(--white);
}

.btn--light {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(51, 39, 31, 0.18);
}

.btn--light:hover,
.btn--light:active {
  background: var(--white);
  color: var(--coral-hover);
}

.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--teal-hover);
  text-decoration: none;
}

.text-link span {
  transition: transform 0.2s ease;
}

.text-link:hover {
  color: var(--coral-hover);
}

.text-link:hover span {
  transform: translateX(4px);
}

/* ---------- Photos ---------- */
.photo {
  border-radius: var(--radius);
  box-shadow: var(--photo-shadow);
  background: var(--bg-card);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 245, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 2px dashed rgba(242, 107, 78, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: var(--header-h);
  gap: var(--space-2);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

.logo:hover {
  color: var(--text);
}

.logo-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--coral);
}

.logo-word {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
}

.nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.nav-list a {
  display: block;
  padding: 0.4rem 0.1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: color 0.2s ease;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  /* One centered dash per tile; "round" fits a whole number of tiles to the link's width,
     so the last dash never gets cut short (links are all different widths) */
  background: linear-gradient(90deg, transparent 20%, currentColor 20% 80%, transparent 80%) left center / 10px 2px round;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav-list a:hover {
  color: var(--teal-hover);
}

.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-list a[aria-current="page"] {
  color: var(--coral-hover);
}

.nav-toggle {
  display: none;
}

/* Mobile nav (only collapses when JS is running; without JS the links simply wrap) */
@media (max-width: 599px) {
  .js .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
  }

  .js .nav-toggle:hover {
    background: var(--bg-card);
  }

  .nav-toggle-bar {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: var(--text);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 2px dashed rgba(242, 107, 78, 0.45);
    box-shadow: 0 12px 20px var(--shadow);
    padding: var(--space-1) clamp(1rem, 0.5rem + 2.5vw, 2rem) var(--space-3);
    display: none;
  }

  .js .nav-open .site-nav {
    display: block;
    animation: menu-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .js .nav-list a::after {
    display: none;
  }

  .js .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .js .nav-list a {
    padding: 0.8rem 0.25rem;
    font-size: 1.25rem;
    border-bottom: 1px dashed rgba(51, 39, 31, 0.15);
  }

  .js .nav-list li:last-child a {
    border-bottom: 0;
  }

  .js .nav-list a[aria-current="page"] {
    border-bottom-color: rgba(51, 39, 31, 0.15);
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section-pad);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero-text h1 {
  margin-bottom: var(--space-1);
}

.hero-tagline {
  font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
  margin-bottom: var(--space-3);
}

.hero-text .lead {
  margin-bottom: var(--space-4);
}

.hero-collage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  padding: clamp(1rem, 0.5rem + 2vw, 1.75rem);
  padding-bottom: calc(clamp(1rem, 0.5rem + 2vw, 1.75rem) + 1.5rem);
}

.hero-collage::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2% 6%;
  background: var(--bg-card);
  border: 2px dashed rgba(47, 156, 146, 0.45);
  border-radius: 32px;
  z-index: -1;
}

.hero-collage .photo:nth-child(1) {
  transform: rotate(-2deg);
}

.hero-collage .photo:nth-child(2) {
  transform: translateY(1.5rem) rotate(1.5deg);
}

.hero-collage .photo:nth-child(3) {
  transform: rotate(1.5deg);
}

.hero-collage .photo:nth-child(4) {
  transform: translateY(1.5rem) rotate(-1.5deg);
}

.hero-note {
  position: absolute;
  right: 6%;
  bottom: -0.6rem;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--coral-hover);
  transform: rotate(-4deg);
}

/* ---------- How it works ---------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}

.step {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  box-shadow: 0 4px 14px var(--shadow);
  border: 2px dashed rgba(242, 107, 78, 0.25);
  text-align: center;
}

/* Icon in a soft circle with a small numbered "sticker" on its corner */
.step-badge {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #FDE7DE;
  color: var(--coral-hover);
  margin-bottom: var(--space-2);
  box-shadow: 0 0 0 6px var(--bg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-badge svg {
  width: 2rem;
  height: 2rem;
}

.step:hover .step-badge {
  transform: rotate(-8deg) scale(1.06);
}

.step-num {
  position: absolute;
  top: -0.2rem;
  right: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--bg);
}

.step:nth-child(even) .step-badge {
  background: #E2EEE7;
  color: var(--teal-hover);
}

.step:nth-child(even) .step-num {
  background: var(--teal);
}

.step:nth-child(even) {
  border-color: rgba(47, 156, 146, 0.28);
}

.step h3 {
  margin-bottom: var(--space-1);
}

.step p {
  color: var(--muted);
  margin-inline: auto;
}

/* ---------- Gallery grids ---------- */
.gallery-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.75rem);
}

.gallery-grid .photo {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-grid li:hover .photo {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(51, 39, 31, 0.16);
}

.teaser-grid {
  grid-template-columns: repeat(2, 1fr);
}

.teaser-more {
  max-width: none;
  text-align: center;
  margin-top: var(--space-4);
}

/* ---------- CTA band ---------- */
.cta-band {
  padding-block: var(--section-pad);
}

.cta-card {
  position: relative;
  background: var(--coral);
  color: var(--white);
  border-radius: 28px;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  text-align: center;
  box-shadow: 0 10px 28px rgba(242, 107, 78, 0.3);
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  pointer-events: none;
}

.cta-card h2 {
  color: var(--white);
  margin-bottom: var(--space-1);
}

.cta-card p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 auto var(--space-4);
}

.cta-card .script {
  color: var(--white);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  display: block;
  margin-bottom: 0.25rem;
}

.cta-card--teal {
  background: var(--teal-hover);
  box-shadow: 0 10px 28px rgba(37, 127, 119, 0.28);
}

.cta-card .btn {
  position: relative;
}

/* ---------- About ---------- */
.about-inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.about-photo-wrap {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
  width: calc(100% - 2rem);
}

.about-photo-wrap .photo {
  aspect-ratio: 4 / 5;
  transform: rotate(-2deg);
}

.about-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 2px dashed rgba(242, 107, 78, 0.5);
  border-radius: 20px;
  transform: rotate(2deg);
}

.about-text h1 {
  margin-bottom: var(--space-1);
}

.about-text .script {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  margin-bottom: var(--space-3);
}

.about-text p + p {
  margin-top: var(--space-2);
}

.signoff {
  font-family: var(--font-script);
  font-size: 2rem;
  font-weight: 600;
  color: var(--coral-hover);
  margin-top: var(--space-3);
}

.values {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.value {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  box-shadow: 0 4px 14px var(--shadow);
}

.value-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(47, 156, 146, 0.14);
  color: var(--teal-hover);
  margin-bottom: var(--space-2);
}

.value:nth-child(2) .value-icon {
  background: rgba(242, 107, 78, 0.14);
  color: var(--coral-hover);
}

.value-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.value h3 {
  margin-bottom: var(--space-1);
}

.value p {
  color: var(--muted);
  margin-inline: auto;
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--section-pad);
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}

.form-card {
  background: var(--white);
  box-shadow: 0 8px 24px var(--shadow);
  border: 2px dashed rgba(242, 107, 78, 0.3);
}

.form-field {
  margin-bottom: var(--space-3);
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.form-field .optional,
.form-help {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #E8D9CA;
  border-radius: 12px;
  background: var(--bg);
  font-size: 1.0625rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-field textarea {
  min-height: 170px;
  resize: vertical;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: #D9C3AE;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(47, 156, 146, 0.18);
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #D9583B;
  background: #FFF8F6;
}

.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
  border-color: #D9583B;
  box-shadow: 0 0 0 4px rgba(217, 88, 59, 0.18);
}

.field-error {
  margin-top: 0.45rem;
  color: #9A2F18;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Honeypot: a real checkbox, hidden from people but still visible to bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-help {
  margin-top: 0.5rem;
}

.form-submit {
  width: 100%;
}

.form-status {
  margin-top: var(--space-2);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-weight: 600;
}

.form-status--error {
  background: #FDECE8;
  color: #9A2F18;
  border: 1px solid #F5C3B6;
}

.form-success:focus {
  outline: none;
}

.form-success {
  text-align: center;
  padding-block: var(--space-4);
  animation: pop-in 0.45s ease both;
}

.form-success-icon {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  margin-bottom: var(--space-3);
}

.form-success-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

.form-success h2 {
  margin-bottom: var(--space-1);
}

.form-success .script {
  font-size: 1.8rem;
  color: var(--coral-hover);
  margin-top: var(--space-2);
}

.form-success p {
  margin-inline: auto;
}

.contact-info h2 {
  font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  margin-bottom: var(--space-3);
}

.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.contact-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.contact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--coral-hover);
  box-shadow: 0 2px 8px var(--shadow);
}

.contact-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.contact-list .label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list a {
  font-weight: 700;
  word-break: break-word;
}

.contact-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px dashed rgba(47, 156, 146, 0.4);
}

.contact-note .script {
  font-size: 1.6rem;
}

/* ---------- 404 page ---------- */
.not-found {
  text-align: center;
}

.not-found p {
  margin-inline: auto;
}

.not-found-code {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(6rem, 4rem + 10vw, 11rem);
  line-height: 1;
  color: var(--coral);
  text-shadow: 6px 6px 0 rgba(47, 156, 146, 0.25);
  margin-bottom: var(--space-2);
}

.not-found h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
}

.not-found-note {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  margin: var(--space-1) auto var(--space-3);
}

.not-found .lead {
  margin-bottom: var(--space-4);
}

.not-found .btn-row {
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-card);
  padding-block: var(--space-5) var(--space-3);
  font-size: 1rem;
}

.site-footer .stitch {
  margin-bottom: var(--space-5);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
}

.footer-brand .logo-script {
  font-size: 2.3rem;
}

.footer-brand .logo-word {
  font-size: 1.6rem;
}

.footer-tagline {
  margin-top: var(--space-1);
  color: var(--muted);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.footer-links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-contact p + p {
  margin-top: 0.3rem;
}

.social {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-2);
}

.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 2px 8px var(--shadow);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.social a:hover {
  background: var(--teal-hover);
  color: var(--white);
}

.social a:active {
  transform: scale(0.94);
}

.social svg {
  width: 1.3rem;
  height: 1.3rem;
}

.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(51, 39, 31, 0.2);
  color: var(--muted);
  font-size: 0.925rem;
  text-align: center;
}

.footer-bottom p {
  max-width: none;
}

/* ---------- Floating "Get Quote" button ---------- */
.quote-fab {
  position: fixed;
  right: calc(clamp(1rem, 0.5rem + 1.5vw, 1.75rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 0.5rem + 1.5vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.7rem 1.35rem 0.7rem 1.15rem;
  border-radius: 999px;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(218, 90, 62, 0.4), 0 2px 6px rgba(51, 39, 31, 0.15);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.quote-fab svg {
  width: 1.35rem;
  height: 1.35rem;
}

.quote-fab:hover {
  background: var(--coral-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(218, 90, 62, 0.45), 0 2px 6px rgba(51, 39, 31, 0.15);
}

.quote-fab:active {
  transform: scale(0.97);
}

.quote-fab:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

/* Leave room so the floating button never covers the footer's last line */
.quote-fab + .site-footer {
  padding-bottom: calc(var(--space-3) + 4.5rem);
}

/* ---------- Gallery lightbox ---------- */
.gallery-link {
  display: block;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.gallery-link:focus-visible .photo {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(51, 39, 31, 0.16);
}

html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  border: 0;
  background: transparent;
  color: var(--bg);
}

.lightbox[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.lightbox::backdrop {
  background: rgba(33, 25, 20, 0.9);
}

.lightbox-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.lightbox-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  background: var(--bg-card);
  animation: pop-in 0.3s ease both;
}

.lightbox-count {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: rgba(255, 251, 245, 0.85);
}

.lightbox-btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 251, 245, 0.95);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.lightbox-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lightbox-btn:hover {
  background: var(--coral);
  color: var(--white);
}

.lightbox-btn:active {
  transform: scale(0.94);
}

.lightbox-btn:focus-visible {
  outline-color: var(--bg);
  border-radius: 50%;
}

.lightbox-close {
  position: absolute;
  top: calc(clamp(0.75rem, 0.5rem + 1vw, 1.5rem) + env(safe-area-inset-top, 0px));
  right: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  z-index: 1;
}

@media (max-width: 599px) {
  .lightbox[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .lightbox-img {
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
  }

  .lightbox-prev,
  .lightbox-next {
    position: absolute;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .lightbox-prev {
    left: 1rem;
  }

  .lightbox-next {
    right: 1rem;
  }
}

/* ---------- Seasonal promo bar ----------
   Swap the message in each page's HTML as the seasons change, or delete the block to hide it. */
.promo-bar {
  position: relative;
  background: var(--teal-hover);
  color: var(--white);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.6rem clamp(1rem, 0.5rem + 2.5vw, 2rem) 0.7rem;
}

.promo-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 8px, transparent 8px 14px);
}

/* Circle and text sit side by side, centered on each other even when the text wraps on phones */
.promo-bar p {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

/* Festive gift in a white circle; it shifts between holiday red and green */
.promo-bar-badge {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.15em;
  height: 2.15em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.promo-bar-icon {
  width: 1.35em;
  height: 1.35em;
  color: #D33A2C;
}

@media (prefers-reduced-motion: no-preference) {
  /* The whole circle shakes every 3.5s, and each shake fades the gift between red and green.
     The color cycle is exactly two shakes long (7s) with the same delay, so each fade starts
     and ends with a shake. Change both durations together to keep them in sync. */
  .promo-bar-badge {
    animation: gift-wiggle 3.5s ease-in-out 1s infinite;
  }

  .promo-bar-icon {
    animation: gift-color 7s linear 1s infinite;
  }
}

/* Each shake runs from 58% to 100% of its 3.5s cycle. In the 7s color cycle the two shakes
   cover 29%–50% and 79%–100%, so the color fades across exactly the length of each shake.
   It passes through gold on the way (like a hue wheel) instead of fading straight from red
   to green, which would turn muddy brown halfway. */
@keyframes gift-color {
  0%,
  29% {
    color: #D33A2C;
  }
  39.5% {
    color: #C9851A;
  }
  50%,
  79% {
    color: #1F8A47;
  }
  89.5% {
    color: #C9851A;
  }
  100% {
    color: #D33A2C;
  }
}

@keyframes gift-wiggle {
  0%,
  58%,
  100% {
    transform: none;
  }
  65% {
    transform: translateX(-3px) rotate(-12deg) scale(1.1);
  }
  72% {
    transform: translateX(3px) rotate(10deg) scale(1.1);
  }
  79% {
    transform: translateX(-3px) rotate(-8deg) scale(1.08);
  }
  86% {
    transform: translateX(2px) rotate(6deg) scale(1.04);
  }
  93% {
    transform: translateX(-1px) rotate(-3deg);
  }
}

.promo-bar a {
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.promo-bar a:hover {
  color: #FFE9C7;
}

/* ---------- Hand-drawn doodles beside headings ----------
   Add class="doodled" (sparkles), "doodled doodled--alt" (heart + squiggle) or
   "doodled doodled--star" (star + sparkle) to any h1/h2. Purely decorative. */
main {
  overflow-x: clip; /* doodles near the screen edge never cause sideways scrolling */
}

.doodled {
  position: relative;
  display: inline-block;
}

.doodled::before,
.doodled::after {
  content: "";
  position: absolute;
  background: center / contain no-repeat;
  pointer-events: none;
}

.doodled::before {
  width: 1.9rem;
  height: 1.9rem;
  left: -2.1rem;
  top: -1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23F26B4E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 26H8M20 20l-7-7M26 18V7'/%3E%3C/svg%3E");
}

.doodled::after {
  width: 1.5rem;
  height: 1.5rem;
  right: -2rem;
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%232F9C92' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M16 4c.8 6.4 3.6 9.7 12 12-8.4 2.3-11.2 5.6-12 12-.8-6.4-3.6-9.7-12-12 8.4-2.3 11.2-5.6 12-12z'/%3E%3C/svg%3E");
}

.doodled--alt::before {
  width: 1.5rem;
  height: 1.5rem;
  left: -2rem;
  top: -0.4rem;
  rotate: -14deg;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23F26B4E' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M16 26s-10-6-10-13a5.5 5.5 0 0 1 10-3 5.5 5.5 0 0 1 10 3c0 7-10 13-10 13z'/%3E%3C/svg%3E");
}

.doodled--alt::after {
  width: 2.6rem;
  height: 0.9rem;
  right: -2.9rem;
  top: auto;
  bottom: 0.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='none' stroke='%232F9C92' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 10c3-6 6-6 8.5 0s5.5 6 8.5 0 5.5-6 8.5 0 5.5 6 8.5 0 5.5-6 8 0'/%3E%3C/svg%3E");
}

.doodled--star::before {
  width: 1.6rem;
  height: 1.6rem;
  left: -2rem;
  top: -0.7rem;
  rotate: -12deg;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%232F9C92' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M16 4l3.5 7.2 7.9 1.1-5.7 5.6 1.4 7.9L16 22.1l-7.1 3.7 1.4-7.9-5.7-5.6 7.9-1.1z'/%3E%3C/svg%3E");
}

.doodled--star::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23F26B4E' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M16 4c.8 6.4 3.6 9.7 12 12-8.4 2.3-11.2 5.6-12 12-.8-6.4-3.6-9.7-12-12 8.4-2.3 11.2-5.6 12-12z'/%3E%3C/svg%3E");
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(0.72) rotate(25deg);
  }
}

@keyframes shine-flash {
  0%,
  55%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  68% {
    transform: scale(0.55);
    opacity: 0.35;
  }
  82% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes squiggle-boing {
  0%,
  100% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(0.72, 1.35);
  }
  55% {
    transform: scale(1.12, 0.9);
  }
  75% {
    transform: scale(0.96, 1.05);
  }
}

@media (max-width: 599px) {
  .doodled::before,
  .doodled::after {
    scale: 0.75;
  }

  .doodled::before {
    left: -1.6rem;
  }

  .doodled::after {
    right: -1.5rem;
  }

  .doodled--alt::after {
    right: -2.4rem;
  }
}

/* ---------- Meet the maker (home) ---------- */
.maker {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}

.polaroid {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 360px;
  margin-inline: auto;
  padding: 0.85rem 0.85rem 0;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(51, 39, 31, 0.18);
  rotate: -3deg;
}

/* A strip of washi tape holding the photo up */
.polaroid::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 112px;
  height: 30px;
  translate: -50% 0;
  rotate: 4deg;
  background: repeating-linear-gradient(45deg, rgba(47, 156, 146, 0.42) 0 8px, rgba(47, 156, 146, 0.3) 8px 16px);
  box-shadow: 0 1px 3px rgba(51, 39, 31, 0.1);
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg-card);
}

.polaroid figcaption {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem 0 0.75rem;
}

.maker-text .script {
  display: block;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  margin-bottom: 0.25rem;
}

.maker-text h2 {
  margin-bottom: var(--space-2);
}

.maker-text p {
  margin-inline: auto;
}

.maker-text p + p {
  margin-top: var(--space-2);
}

.maker-text .signoff {
  margin-top: var(--space-2);
}

.maker-text .text-link {
  display: inline-flex;
  margin-top: var(--space-1);
}

/* ---------- Guided quote form (contact) ---------- */
.form-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}

.form-step ~ .form-step {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px dashed rgba(51, 39, 31, 0.12);
}

.form-step-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.form-step-num--teal {
  background: var(--teal);
}

.chip-group {
  border: 0;
  padding: 0;
  min-width: 0;
}

.chip-group legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.6rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  position: relative;
  cursor: pointer;
}

/* The real checkbox/radio stays in place (and keyboard-focusable) but invisible */
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 1.05rem;
  border: 2px solid #E8D9CA;
  border-radius: 999px;
  background: var(--bg);
  font-weight: 600;
  line-height: 1.2;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.chip:hover span {
  border-color: #D9C3AE;
}

.chip:active span {
  transform: scale(0.96);
}

.chip input:checked + span {
  background: #FDE7DE;
  border-color: var(--coral);
}

.chip input:checked + span::before {
  content: "✓";
  font-weight: 800;
  color: var(--coral-hover);
}

.chip input:focus-visible + span {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.form-field .input-date {
  max-width: 17rem;
  min-height: 3.2rem;
}

.form-row {
  display: grid;
  gap: 0 var(--space-3);
}

/* ---------- Page transitions & entrance animations ----------
   Everything here is skipped for visitors who prefer reduced motion. */

/* Smooth fade between pages when a nav link is clicked (Chrome, Edge, Safari 18+;
   other browsers simply load the page normally). The banner, header and quote button stay put. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.promo-bar {
  view-transition-name: promo-bar;
}

.quote-fab {
  view-transition-name: quote-fab;
}

::view-transition-old(root) {
  animation: vt-out 0.22s ease both;
}

::view-transition-new(root) {
  animation: vt-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}

@keyframes photo-pop {
  from {
    opacity: 0;
    scale: 0.8;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* On load: headings and text rise in one after another */
  .hero-text > *,
  .page-head > *,
  .about-text > * {
    animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero-text > :nth-child(2),
  .page-head > :nth-child(2),
  .about-text > :nth-child(2) {
    animation-delay: 0.12s;
  }

  .hero-text > :nth-child(3),
  .about-text > :nth-child(3) {
    animation-delay: 0.24s;
  }

  .hero-text > :nth-child(4),
  .about-text > :nth-child(4) {
    animation-delay: 0.36s;
  }

  /* Hero photos pop in with a little bounce */
  .hero-collage::before {
    animation: fade-in 0.8s ease both;
  }

  .hero-collage .photo {
    animation: photo-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .hero-collage .photo:nth-child(1) { animation-delay: 0.2s; }
  .hero-collage .photo:nth-child(2) { animation-delay: 0.32s; }
  .hero-collage .photo:nth-child(3) { animation-delay: 0.44s; }
  .hero-collage .photo:nth-child(4) { animation-delay: 0.56s; }

  .hero-note {
    animation: fade-in 0.6s ease 0.95s both;
  }

  .about-photo-wrap {
    animation: photo-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  }

  .form-card {
    animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
  }

  .contact-info {
    animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
  }

  /* On scroll: sections fade up as they come into view (main.js adds .is-revealed).
     Hidden only while JS is running; .reveal-off is a failsafe that shows everything. */
  .js:not(.reveal-off) :is(.section-head, .steps > li, .gallery-grid > li, .teaser-more, .values > li, .cta-card, .polaroid):not(.is-revealed) {
    opacity: 0;
    translate: 0 28px;
  }

  .js :is(.section-head, .steps > li, .gallery-grid > li, .teaser-more, .values > li, .cta-card, .polaroid) {
    transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Doodles come alive: sparkles, stars and hearts twinkle (offset so they never sync up),
     the "shine" marks flash outward, and the squiggle stretches like a spring */
  .doodled::after {
    animation: twinkle 3.2s ease-in-out infinite;
  }

  .doodled::before {
    transform-origin: 81% 88%; /* the point the shine marks radiate from */
    animation: shine-flash 2.8s ease-in-out infinite;
  }

  .doodled--alt::before,
  .doodled--star::before {
    transform-origin: center;
    animation: twinkle 3.6s ease-in-out 0.9s infinite;
  }

  .doodled--alt::after {
    transform-origin: left center;
    animation: squiggle-boing 2.4s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Confetti ---------- */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-burst var(--dur, 1.4s) cubic-bezier(0.15, 0.6, 0.35, 1) var(--delay, 0s) forwards;
}

.confetti-piece--round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.6);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (min-width: 360px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .values .value:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-3) / 2);
    justify-self: center;
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn-row .btn {
    min-width: 200px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  :root {
    --header-h: 80px;
  }

  .hero-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-6);
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .maker {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-6);
    text-align: left;
  }

  .maker-text p {
    margin-inline: 0;
  }

  .values {
    grid-template-columns: repeat(3, 1fr);
  }

  .values .value:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Center a lone photo on the last row of the 3-column gallery */
  .gallery-grid--full > li:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }

  .teaser-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-inner {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-6);
  }

  .contact-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.3fr;
  }

  .footer-bottom {
    text-align: left;
  }
}

/* "Other ways to reach us" follows along beside the (taller) form, just under the sticky header.
   Only on screens tall enough to show the whole card, so its bottom never gets cut off. */
@media (min-width: 900px) and (min-height: 720px) {
  .contact-info {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 1.125rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}