/* ============================================================
   Service Works Plus main stylesheet
   Obeys notes/design-direction.md. Reusable across all pages:
   header, footer, buttons, pair, cards, forms are shared components.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--text-inverse);
  padding: var(--s-3) var(--s-5);
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  /* Reveal elements must be fully visible when motion is reduced */
  .motion-ok .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Layout primitives ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section + .section {
  border-top: 1px solid var(--line);
}

/* ---- Typography helpers ---- */
.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

.lede {
  font-size: var(--fs-body-lg);
  max-width: 65ch;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.text-secondary {
  color: var(--text-secondary);
}

/* Visible marker for unverified facts, staging only */
.needs-input {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  background: #fff3e6;
  color: var(--accent-deep);
  border: 1px dashed var(--accent-deep);
  border-radius: var(--radius);
  padding: 1px 6px;
  white-space: nowrap;
}

.dark .needs-input {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Primary: accent bg + ink text. Never white on orange (2.4:1). */
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-primary:hover {
  background: #d57624;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(232, 132, 45, 0.22);
}

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

.btn-secondary:hover {
  background: var(--ink);
  color: var(--text-inverse);
}

/* Dark band overrides for primary button: .dark a sets color: accent (higher
   specificity than .btn-primary), which would produce orange-on-orange. Pin
   ink text so the button stays readable and white-on-orange stays banned. */
.dark .btn-primary,
.dark .btn-primary:hover {
  color: var(--ink);
}

.dark .btn-secondary {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}

.dark .btn-secondary:hover {
  background: var(--text-inverse);
  color: var(--ink);
}

/* ---- Dark bands ---- */
.dark {
  background: var(--ink);
  color: var(--text-inverse);
}

.dark a {
  color: var(--accent);
}

.dark a:hover {
  color: var(--text-inverse);
}

.dark :focus-visible {
  outline-color: var(--accent);
}

/* ---- Header (shared component) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--text-inverse);
  margin-right: auto;
}

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

/* .dark a (0,1,1) would otherwise override .brand (0,1,0), turning "Service Works"
   orange. Raise specificity so the lockup is white text + orange "Plus" as designed. */
.dark .brand {
  color: var(--text-inverse);
}

/* On hover the brand anchor turns white, but .brand-name .plus (0,2,0) keeps "Plus"
   orange via a static rule that beats inheritance. Override it so the full lockup
   responds as one unit. */
.brand:hover .plus {
  color: inherit;
}

/* Softened badge treatment: no hard border, gentle radius, faint ring
   so the baked-in logo background blends into the dark band */
.brand-badge {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(246, 245, 242, 0.07);
}

.brand-name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-name .plus {
  color: var(--accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.site-nav a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text-inverse);
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color var(--transition);
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav a.nav-phone {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

/* Nav CTA: must keep ink-on-orange (white on orange is banned).
   Specificity override needed because .site-nav a sets inverse text. */
.site-nav a.btn-primary {
  color: var(--ink);
  padding: 0 var(--s-4);
  min-height: 40px;
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-nav a.btn-primary:hover {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: var(--s-4) var(--gutter) var(--s-6);
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line-dark);
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
  }
  .site-nav a.btn-primary {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-5);
    min-height: var(--tap-min);
    border-bottom: 1px solid var(--ink);
    justify-content: center;
  }
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--section-pad);
}

.hero .label {
  color: var(--accent-deep);
  display: block;
  margin-bottom: var(--s-5);
}

.hero h1 {
  font-size: var(--fs-display);
  max-width: 14ch;
}

.hero .lede {
  margin-top: var(--s-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.hero--tight {
  padding-block: var(--s-7) var(--s-4);
}

/* ---- Before/After pair (core proof unit, §5) ---- */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  max-width: calc(var(--photo-max) * 2 + var(--s-4));
}

.pair-item {
  position: relative;
  max-width: var(--photo-max);
}

.pair-item img,
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.3s ease-out;
}

.card:hover .card-media img {
  transform: scale(1.03);
}

.pair-tag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--text-inverse);
}

.pair-tag.after {
  background: var(--accent);
  color: var(--ink);
}

.pair-caption {
  margin-top: var(--s-3);
  max-width: 65ch;
}

@media (max-width: 560px) {
  .pair {
    grid-template-columns: 1fr;
  }
}

/* ---- Services index (ruled list, never icon cards, anti-pattern 2) ---- */
.services-list {
  list-style: none;
  padding: 0;
  margin-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.services-list li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.services-list h3 {
  font-size: var(--fs-h3);
}

.services-list p {
  color: var(--text-secondary);
  max-width: 55ch;
}

.services-list .service-link {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

@media (max-width: 640px) {
  .services-list li {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* ---- Project cards ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-media {
  max-width: var(--photo-max);
}

.card-media img {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.card-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.card-body .label {
  color: var(--accent-deep);
  font-size: 0.75rem;
}

.card-body p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
    max-width: var(--photo-max);
  }
}

/* ---- FAQ ---- */
.faq {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
  max-width: 760px;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  font-size: var(--fs-h3);
  font-weight: 600;
  padding: var(--s-5) var(--s-7) var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  min-height: var(--tap-min);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent-deep);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .faq-answer {
  padding-bottom: var(--s-5);
  max-width: 65ch;
  color: var(--text-secondary);
}

/* ---- Contact form ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.form-field label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  width: 100%;
}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border: 2px solid var(--accent-deep);
  padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}

.form-field .field-hint {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.form-field .field-error {
  font-size: var(--fs-caption);
  color: var(--error);
  display: none;
}

.form-field.invalid input,
.form-field.invalid textarea {
  border-color: var(--error);
}

.form-field.invalid .field-error {
  display: block;
}

.upload-zone {
  border: 1px dashed var(--text-secondary);
  border-radius: var(--radius);
  padding: var(--s-5);
  background: var(--surface);
}

.upload-zone input {
  min-height: auto;
  border: 0;
  padding: 0;
  background: none;
}

/* Honeypot: hidden from humans, present for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  color: var(--accent-deep);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}

.form-notice.show {
  display: block;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Confirmation panel shown after a successful submission */
.form-success {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  padding: var(--s-6);
}

.form-success .label {
  color: var(--success);
  display: block;
  margin-bottom: var(--s-3);
}

.form-success p {
  margin-top: var(--s-3);
  max-width: 55ch;
}

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

/* ---- CTA band ---- */
.cta-band .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
}

@media (max-width: 720px) {
  .cta-band .container {
    grid-template-columns: 1fr;
  }
}

.cta-band h2 {
  max-width: 18ch;
}

.cta-band p {
  margin-top: var(--s-3);
  color: var(--text-inverse);
  opacity: 0.85;
  max-width: 50ch;
}

/* ---- Footer (shared component) ---- */
.site-footer {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--s-8) var(--s-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-7);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.site-footer .label {
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-4);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.site-footer a {
  color: var(--text-inverse);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent);
}

.footer-tagline {
  margin-top: var(--s-3);
  opacity: 0.85;
  max-width: 40ch;
}

.footer-legal {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  opacity: 0.7;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
}

/* Studio credit: understated, inherits the muted legal-line tone */
.footer-legal .kona-credit a {
  color: var(--text-inverse);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}

.footer-legal .kona-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- Hero contact line ---- */
.hero-contact {
  margin-top: var(--s-4);
}

/* ---- About section ---- */
.about-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.about-grid .section-head p + p {
  margin-top: var(--s-3);
}

.fact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.fact-card > .label {
  color: var(--accent-deep);
  display: block;
  margin-bottom: var(--s-4);
}

.fact-card dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.fact-card dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.fact-card dd {
  margin: var(--s-1) 0 0;
}

/* ---- Direct contact list (quote section) ---- */
.contact-direct {
  margin: var(--s-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
}

.contact-direct .label {
  color: var(--text-secondary);
}

.contact-direct dd {
  margin: var(--s-1) 0 0;
}

/* ---- Clickable project cards ---- */
a.card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform 0.22s ease-out, box-shadow 0.22s ease-out;
}

a.card-link:hover {
  color: inherit;
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 28, 30, 0.06);
}

a.card-link:hover h3 {
  color: var(--accent-deep);
}

/* ---- Single photo row (portfolio detail) ---- */
.photo-row {
  max-width: var(--photo-max);
}

.photo-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.photo-row .pair-caption {
  margin-top: var(--s-3);
}

/* ---- Section headers ---- */
.section-head {
  max-width: 760px;
}

.section-head .label {
  color: var(--accent-deep);
  display: block;
  margin-bottom: var(--s-4);
}

.section-head p {
  margin-top: var(--s-4);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ---- Section wash: white background for form/action areas ---- */
.section--wash {
  background: var(--surface);
}

/* ---- Scroll reveal (JS adds .motion-ok to <html> when supported) ---- */
.motion-ok .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.48s ease-out, transform 0.48s ease-out;
}

.motion-ok .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Portfolio page motion refinements ---- */

/* Images cascade in after the section heading */
.motion-ok .project .pair.reveal {
  transition-delay: 0.1s;
}

.motion-ok .project .photo-row.reveal {
  transition-delay: 0.22s;
}

/* Within-pair stagger: right image follows left by 100ms */
.motion-ok .project .pair .pair-item {
  opacity: 0;
  transition: opacity 0.38s ease-out;
}

.motion-ok .project .pair.visible .pair-item {
  opacity: 1;
}

.motion-ok .project .pair.visible .pair-item:nth-child(2) {
  transition-delay: 0.1s;
}

/* Figcaption settles in after images */
.motion-ok .project .pair .pair-caption {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.motion-ok .project .pair.visible .pair-caption {
  opacity: 1;
  transition-delay: 0.24s;
}

/* Portfolio image: border and radius live on the container (enables scale clipping) */
.project .pair-item img {
  border: 0;
  border-radius: 0;
  transition: transform 0.52s ease-out, filter 0.3s ease-out;
}

.project .pair-item:hover img {
  filter: brightness(1.04);
}

/* Pair-tag: 1px lift on hover, tactile without being distracting */
.pair-tag {
  transition: transform var(--transition);
}

.pair-item:hover .pair-tag {
  transform: translateY(-1px);
}

/* Reduced motion: all new pair-item states must be visible immediately */
@media (prefers-reduced-motion: reduce) {
  .motion-ok .project .pair .pair-item,
  .motion-ok .project .pair .pair-caption {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Portfolio photo polish ---- */

/* Container carries the border, radius, and shadow.
   overflow:hidden clips the scale-settle reveal cleanly. */
.project .pair-item {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(26, 28, 30, 0.04),
    0 3px 12px rgba(26, 28, 30, 0.06);
  transition: box-shadow 0.28s ease-out;
}

/* Shadow deepens slightly on hover to reinforce lift */
.project .pair-item:hover {
  box-shadow:
    0 2px 5px rgba(26, 28, 30, 0.06),
    0 6px 20px rgba(26, 28, 30, 0.09);
}

/* Reveal: images settle from a fractional enlargement to natural size,
   giving a composed, photographic quality to the appearance. */
.motion-ok .project .pair .pair-item img,
.motion-ok .project .photo-row .pair-item img {
  transform: scale(1.018);
}

.motion-ok .project .pair.visible .pair-item img,
.motion-ok .project .photo-row.visible .pair-item img {
  transform: scale(1);
}

/* Reduced motion: skip initial scale state on images */
@media (prefers-reduced-motion: reduce) {
  .motion-ok .project .pair .pair-item img,
  .motion-ok .project .photo-row .pair-item img {
    transform: none !important;
  }
}

/* ---- Mobile sticky CTA bar ---- */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 820px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    gap: var(--s-3);
    padding: var(--s-3) var(--gutter);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 -2px 8px rgba(26, 28, 30, 0.12);
    background: var(--ink, #1a1c1e);
  }

  .mobile-cta-bar .btn {
    flex: 1;
    justify-content: center;
  }

  body {
    padding-bottom: calc(var(--s-3) + var(--tap-min) + var(--s-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Photo backdrop — experimental homepage variant
   A fixed photo layer the page content scrolls over. Uses a
   position:fixed ELEMENT (not background-attachment:fixed,
   which is broken/janky on iOS Safari). Light content sits in
   frosted-glass panels so the existing dark ink text is kept.
   ============================================================ */

.page-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}

.page-backdrop .backdrop-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

.page-backdrop .backdrop-img.is-active {
  opacity: 1;
}

/* Gentle darken so panels/bands read cleanly and the gaps between
   panels look intentional. Kept light enough to enjoy the photo. */
.page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 28, 30, 0.20), rgba(26, 28, 30, 0.36));
  pointer-events: none;
}

/* Let the fixed backdrop show through the page */
body.photo-bg {
  background: transparent;
}

/* Content sections become frosted-glass panels (dark text retained) */
.photo-bg main > .section > .container {
  background: rgba(246, 245, 242, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding-block: clamp(var(--s-6), 4vw, var(--s-8));
  box-shadow: 0 12px 40px rgba(26, 28, 30, 0.20);
}

/* Remove the inter-section hairline and the white wash band over photos */
.photo-bg main > .section + .section {
  border-top: 0;
}

.photo-bg main > .section--wash {
  background: transparent;
}

/* Hero: floating text directly on the photo — no panel. A soft dark scrim
   (strongest at the very top, clearing toward the bottom) plus text-shadow
   keep the copy readable while the background photo stays fully visible. */
.photo-bg .hero {
  position: relative;
  color: var(--text-inverse);
}

.photo-bg .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18, 20, 22, 0.55) 0%,
    rgba(18, 20, 22, 0.34) 50%,
    rgba(18, 20, 22, 0.10) 100%);
  pointer-events: none;
}

.photo-bg .hero > .container {
  position: relative;   /* float above the scrim */
  z-index: 1;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: 0;
}

.photo-bg .hero h1,
.photo-bg .hero .lede {
  color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 14px rgba(0, 0, 0, 0.35);
}

.photo-bg .hero .label {
  color: var(--accent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.photo-bg .hero .hero-contact,
.photo-bg .hero .hero-contact a {
  color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.photo-bg .hero .hero-contact a {
  text-decoration-color: var(--accent);
}

/* Secondary (Call) button: inverse treatment so it reads over the photo */
.photo-bg .hero .btn-secondary {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}

.photo-bg .hero .btn-secondary:hover {
  background: var(--text-inverse);
  color: var(--ink);
}

/* Fallback when backdrop-filter is unsupported: raise panel opacity (content panels only) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .photo-bg main > .section > .container {
    background: rgba(246, 245, 242, 0.97);
  }
}

/* ---- Photo backdrop: mobile tuning ----
   On phones the panels otherwise span edge-to-edge and bury the photo. Inset
   them so the background frames each panel on the sides (not just the gaps
   between), soften the panel rim (opaque behind the text, lighter at the edge
   so the block melts into the photo), and let the exposed photo read brighter. */
@media (max-width: 820px) {
  /* Lighter darken so the framing photo around the panels stays vivid */
  .page-backdrop::after {
    background: linear-gradient(180deg, rgba(26, 28, 30, 0.12), rgba(26, 28, 30, 0.26));
  }

  /* Content panels: inset from the edges, opaque behind the text, softer rim */
  .photo-bg main > .section > .container {
    margin-inline: var(--s-5);     /* clear photo strip down both edges */
    padding-inline: var(--s-4);    /* buy back text width inside the panel */
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    background: radial-gradient(135% 120% at 50% 42%,
      rgba(246, 245, 242, 0.93) 0%,
      rgba(246, 245, 242, 0.90) 58%,
      rgba(246, 245, 242, 0.73) 100%);
  }

  /* Hero stays panel-free; a slightly stronger scrim keeps text legible */
  .photo-bg .hero::before {
    background: linear-gradient(180deg,
      rgba(18, 20, 22, 0.60) 0%,
      rgba(18, 20, 22, 0.40) 50%,
      rgba(18, 20, 22, 0.14) 100%);
  }

  /* Fallback (no backdrop-filter): lean opaque so panel text stays legible */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .photo-bg main > .section > .container {
      background: rgba(246, 245, 242, 0.95);
    }
  }
}