/* StyleShades design system values (claude.ai/artifact/RCdEkjUJEyzvsbV71biSJW, project/audit.md).
   Loaded after each page's own <style>, so these win. Delete the <link> to get the old values back. */

:root {
  --terra-deep:   #C43A2A;
  --terra-deeper: #A93022;
  --sand-deep:    #9A7650;
  --ink-inverse-muted: rgba(253, 250, 244, 0.68);
  --focus: #C43A2A;
  --radius-btn: 10px;
}

/* ─── Focus ring on everything interactive ─── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ─── Buttons: one type style, 10px corners, 48px tall (40px nav) ─── */
.btn-primary, .btn-ghost, .cf-btn, .work-cta-btn, .mobile-menu .mobile-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 36px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.btn-primary, .btn-ghost, .cf-btn, .work-cta-btn, .mobile-menu .mobile-cta,
.nav-cta, .gallery-filter-btn, .card-btn { border-radius: var(--radius-btn); }
.nav-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 24px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  /* Sentence case ("Get a free quote") so it stays on one line on phones */
  letter-spacing: 0.01em; text-transform: none; text-decoration: none; white-space: nowrap;
}
.cf-btn { display: flex; width: 100%; }

/* Filled buttons use terra-deep (white text 5.1:1); terra stays for large accents */
.btn-primary { background: var(--terra-deep); }
.btn-primary:hover { background: var(--terra-deeper); }

/* Raised buttons (after aios.fr): soft top-to-bottom gradient, a shadow in the button's own
   colour and a thin light line along the top edge. Hover deepens, grows the shadow, lifts 1px. */
:root {
  --raised-red: linear-gradient(#D44C3B, var(--terra-deep) 55%, var(--terra-deeper));
  --raised-red-hover: linear-gradient(#C94434, #B5331F 55%, #962A1E);
  --raised-red-shadow: 0 6px 16px rgba(196, 58, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --raised-red-shadow-hover: 0 10px 24px rgba(196, 58, 42, 0.42), 0 2px 6px rgba(196, 58, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --raised-light: linear-gradient(#FFFDF8, var(--white) 55%, #EFE6D3);
  --raised-light-shadow: 0 6px 16px rgba(28, 24, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.nav-cta, .cf-btn, .work-cta-btn, .gallery-filter-btn {
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
/* Light buttons on photos and dark bands: the nav button over the hero, the Our Work call to action */
.nav-cta, .work-cta-btn { background: var(--raised-light); box-shadow: var(--raised-light-shadow); }
/* Red buttons: the nav button once scrolled (always on products), Send message, the active filter */
nav.scrolled .nav-cta, #nav.scrolled .nav-cta, body:has(.products-hero) #nav .nav-cta,
.cf-btn, .gallery-filter-btn.active {
  background: var(--raised-red); color: var(--white); box-shadow: var(--raised-red-shadow);
}
.gallery-filter-btn.active { box-shadow: 0 4px 10px rgba(196, 58, 42, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.nav-cta:hover, .cf-btn:hover, .work-cta-btn:hover {
  background: var(--raised-red-hover) !important; color: var(--white) !important;
  box-shadow: var(--raised-red-shadow-hover) !important;
  transform: translateY(-1px);
}
.nav-cta:active, .cf-btn:active, .work-cta-btn:active { transform: none; }
.mobile-menu .mobile-cta:hover { background: var(--terra-deep); }
.gallery-filter-btn { font-size: 13px; }
.work-cta-inner, .contact-form { border-radius: 2px; }
.gallery-filters { border-radius: var(--radius-btn); }

/* ─── Nav: logo left, links centred, quote button (+ hamburger on phones) right ─── */
#nav { display: grid; grid-template-columns: 1fr auto 1fr; }
#nav .nav-links { justify-self: center; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
@media (max-width: 1100px) { #nav .nav-links { gap: 24px; } }
@media (max-width: 900px) {
  #nav { grid-template-columns: 1fr auto; }
  #nav .nav-links { display: none !important; }
  #nav .nav-hamburger { display: flex !important; }
}
#nav { column-gap: 12px; }
/* Small phones: "Get a free quote" plus the hamburger must fit beside the logo */
@media (max-width: 400px) {
  #nav .nav-cta { padding: 0 16px; }
  .nav-actions { gap: 6px; }
}
@media (max-width: 340px) {
  #nav .nav-logo img { height: 36px; }
  #nav .nav-cta { font-size: 13px; padding: 0 12px; }
}

/* ─── Mobile menu: half-width panel under the nav bar, the page dimmed behind ─── */
.mobile-menu {
  top: var(--nav-h, 72px); right: 0; bottom: 0; left: auto;
  width: 50%; min-width: 180px; max-width: 360px;
  z-index: 99;
  align-items: stretch; justify-content: flex-start;
  padding: 16px 24px 32px; overflow-y: auto;
  opacity: 1; transform: translateX(100%);
  box-shadow: 0 0 0 100vmax rgba(28, 24, 20, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mobile-menu.open { transform: none; box-shadow: 0 0 0 100vmax rgba(28, 24, 20, 0.45); }
.mobile-menu a { font-size: 20px; line-height: 1.3; width: 100%; text-align: left; padding: 14px 0; }
.mobile-menu .mobile-cta { display: none; }

.gallery-link { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; }

/* ─── Labels and eyebrows ─── */
.section-label { font-size: 14px; letter-spacing: 0.24em; color: var(--terra-deep); }
.gallery-header .section-label, .testimonials-header .section-label { color: var(--sand); }
.page-hero-label { font-size: 14px; letter-spacing: 0.24em; }
.hero-scroll-hint span { font-size: 12px; letter-spacing: 0.18em; }
.stat-label { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; }
.about-badge-text { font-size: 12px; letter-spacing: 0.18em; line-height: 1.3; }
.contact-detail-label { font-size: 12px; letter-spacing: 0.18em; color: var(--terra-deep); }

/* ─── Type sizes: lead 20, body 18, body-sm 16, caption 14 ─── */
.section-title { font-size: clamp(40px, 5vw, 64px); }
.hero-sub, .testimonials-header p, .contact-tagline, .faq-answer { font-size: 20px; line-height: 1.7; }
.about-feature { font-size: 18px; }
.page-hero-sub { font-size: 16px; }
.step-name, .gallery-item-title { font-size: 26px; line-height: 1.2; }
.gallery-item-sub { font-size: 14px; }
.cf-group label { font-size: 14px; }

/* Lora 300 is not loaded, so it already renders as 400: say so */
.stat-num, .step-number, .about-badge-num, .intro-strip-text, .mobile-menu a { font-weight: 400; }
.stat-num { font-size: 44px; }
@media (max-width: 900px) {
  .intro-strip-stats { flex-wrap: wrap; gap: 24px 32px; }
  .stat-num { font-size: 36px; }
  /* "recreating lifestyle" logo is 530px wide at 120px tall: let it shrink to the column */
  .contact-info img { max-width: 100%; height: auto !important; }
}

/* ─── Form: visible borders, 16px inputs (stops iOS zoom) ─── */
.cf-group input, .cf-group textarea {
  min-height: 48px; font-size: 16px; border-radius: 2px; border-color: var(--sand-deep);
}
.cf-group textarea { min-height: 120px; }
.cf-group input::placeholder, .cf-group textarea::placeholder { color: rgba(28, 24, 20, 0.5); }

/* ─── Footer: readable sizes and contrast ─── */
.footer-brand-desc { font-size: 18px; color: var(--ink-inverse-muted); max-width: 280px; }
.footer-col-title { font-size: 12px; letter-spacing: 0.18em; }
.footer-links a { font-size: 16px; color: var(--ink-inverse-muted); }
.footer-copy, .footer-legal a, .footer-legal span { font-size: 14px !important; color: var(--ink-inverse-muted) !important; }
.footer-social a { width: 40px; height: 40px; color: var(--ink-inverse-muted); border-color: rgba(253, 250, 244, 0.3); }

/* ─── Section rhythm: 120px desktop, 80px under 900px ─── */
.testimonials, .process, .faq { padding-top: 120px; padding-bottom: 120px; }
.partners-section { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 900px) {
  .services, .about, .testimonials, .process, .faq, .contact, .partners-section {
    padding-top: 80px; padding-bottom: 80px;
  }
  section.gallery#gallery { padding-top: 80px; padding-bottom: 80px; }
}