/* =========================================================
   PHOTO MIRROR — design tokens
   Recolored to a crisp-white & baby-blue theme. Variable names
   are kept from the original palette so the rest of this file
   (and script.js) didn't need to change — only what each token
   now points to.
   ========================================================= */
:root{
  --walnut-950:#14202b;   /* deep neutral navy-charcoal, used for dark sections/text */
  --walnut-900:#1c2e3d;
  --walnut-800:#24394b;
  --walnut-700:#3a5568;
  --oak-500:#6b7c88;      /* secondary blue-gray text */
  --oak-300:#b8c9d1;
  --brass-400:#89cff0;    /* single accent — buttons, links, highlights (baby blue) */
  --brass-300:#c3e8fb;
  --brass-600:#5fb0d9;
  --paper-100:#ffffff;    /* page background — crisp white */
  --paper-200:#f5f9fb;    /* subtle pale blue-white panels */
  --sage-600:#14202b;
  --sage-700:#0d161e;
  --ink:#1c2b36;
  --ink-soft:#5f7480;

  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius:2px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper-100);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

::selection{ background:var(--brass-400); color:var(--walnut-950); }

:focus-visible{
  outline:2.5px solid var(--brass-400);
  outline-offset:3px;
}

/* =========================================================
   NAVIGATION HELPERS
   ========================================================= */
.skip-link{
  position:absolute;
  top:-48px;
  left:12px;
  z-index:1000;
  background:var(--brass-400);
  color:var(--walnut-950);
  padding:10px 16px;
  font-weight:600;
  font-size:0.85rem;
  border-radius:var(--radius);
  text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(244,238,226,0.2);
  background:var(--walnut-950);
  color:var(--brass-300);
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:90;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--brass-400); color:var(--walnut-950); }

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:inherit;
}

h2{ font-size:clamp(1.75rem, 1.3rem + 2vw, 2.6rem); line-height:1.1; max-width:36ch; }
h3{ font-size:1.15rem; margin-bottom:8px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass-600);
  margin:0 0 10px;
}
.section-head.light .eyebrow{ color:var(--brass-300); }

p{ margin:0 0 1em; color:var(--ink-soft); }
.section-head p, .hero-sub{ color:var(--ink-soft); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  padding:12px 22px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-brass{
  background:var(--brass-400);
  color:var(--walnut-950);
  border-color:var(--brass-400);
}
.btn-brass:hover{ background:var(--brass-300); border-color:var(--brass-300); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.section-dark .btn-ghost, .hero .btn-ghost, .site-header .btn-ghost{
  color:var(--paper-100);
  border-color:rgba(244,238,226,0.4);
}
.btn-ghost:hover{ background:rgba(0,0,0,0.06); }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover, .site-header .btn-ghost:hover{ background:rgba(244,238,226,0.08); }

.btn-lg{ padding:14px 26px; font-size:0.98rem; }
.btn-block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */

/* Every nav link and pillar-card jumps to an id (#offerings,
   #preserve, #gallery, #contact, etc). Without this, the browser
   scrolls that element flush to the very top of the viewport — right
   behind the sticky header below — cutting off the heading. This
   covers every element with an id in one rule, current or future,
   rather than needing scroll-margin-top added by hand each time. */
[id]{ scroll-margin-top:90px; }

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(22,15,10,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(244,238,226,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--paper-100);
  flex-shrink:0;
}
.brand-mark{ color:var(--brass-400); display:flex; align-items:center; }
.brand-logo{ height:34px; width:auto; display:none; }
.brand-logo.is-loaded{ display:block; }
.brand-fallback{ display:flex; }
.brand-word{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-0.01em;
}
.brand-amp{ color:var(--brass-400); font-style:italic; padding:0 2px; }

.main-nav{
  display:flex;
  gap:28px;
  flex:1;
  justify-content:center;
}
.main-nav a{
  color:rgba(244,238,226,0.82);
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  position:relative;
  padding:6px 0;
}
.main-nav a:hover{ color:var(--paper-100); }
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  background:var(--brass-400);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.is-active{ color:var(--paper-100); }
.main-nav a.is-active::after{ transform:scaleX(1); background:var(--brass-300); }
.main-nav a[aria-current="page"]{ color:var(--paper-100); }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--brass-300); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ padding:10px 18px; font-size:0.85rem; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:var(--paper-100);
  border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(217,116,143,0.18), transparent 60%),
    linear-gradient(180deg, var(--walnut-950), var(--walnut-900));
  color:var(--paper-100);
  padding:110px 0 84px;
}
.hero-inner{ position:relative; z-index:2; }
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%, -50%);
  object-fit:cover;
  /* dimmed and slightly desaturated so it reads as a subtle motion
     backdrop, never competing with the headline/buttons in front */
  filter:brightness(0.75) saturate(0.85);
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  /* same tint as the still hero background, laid over the video so
     text contrast is identical whether or not the video loads */
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(217,116,143,0.16), transparent 60%),
    linear-gradient(180deg, rgba(20,32,43,0.55), rgba(28,46,61,0.72));
}
@media (prefers-reduced-motion: reduce){
  .hero-video-wrap{ display:none; }
}
.hero-inner-centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.hero-inner-centered .eyebrow{ color:var(--brass-300); }

.hero-title-brand{
  font-size:clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  font-weight:600;
}
.brand-amp-inline{
  font-style:italic;
  font-weight:450;
  color:var(--brass-300);
}
.hero-tagline{
  font-family:var(--font-mono);
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(244,238,226,0.75);
  margin:18px 0 0;
}
.hero-sub-centered{
  color:rgba(244,238,226,0.72);
  max-width:46ch;
  margin:20px auto 34px;
  text-align:center;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.hero-cta-centered{ justify-content:center; margin-bottom:0; }

.audience-toggle{
  display:inline-flex;
  gap:8px;
  padding:5px;
  margin-bottom:22px;
  border:1px solid rgba(244,238,226,0.18);
  border-radius:999px;
  background:rgba(244,238,226,0.05);
}
.audience-toggle .chip{
  border:none;
  color:rgba(244,238,226,0.75);
}
.audience-toggle .chip:hover{ color:var(--paper-100); }
.audience-toggle .chip.is-active{
  background:var(--brass-400);
  color:var(--paper-100);
}

/* =========================================================
   FOUR PILLARS
   ========================================================= */
.pillars{ padding-top:64px; }
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.pillar-card{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:32px 26px;
  border:1px solid rgba(29,29,31,0.1);
  border-radius:14px;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pillar-card:hover{
  border-color:var(--brass-400);
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,0.06);
}
.pillar-icon{
  width:46px; height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--paper-200);
  color:var(--brass-400);
  margin-bottom:20px;
}
.pillar-icon svg{ width:24px; height:24px; }
.pillar-eyebrow{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass-600);
  margin:0 0 8px;
}
.pillar-card h3{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-0.01em;
  margin:0 0 10px;
  color:var(--ink);
}
.pillar-tags{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.55;
}

/* =========================================================
   PILLAR BANNERS + STUB SECTIONS
   Reusable pattern: a banner (eyebrow/heading/note) marking the
   start of a pillar's zone, followed by that pillar's content.
   ========================================================= */
.pillar-banner{
  padding:56px 0 24px;
  background:var(--paper-200);
  border-top:1px solid rgba(29,29,31,0.08);
}
.pillar-banner h2{ max-width:34ch; }
.pillar-banner-note{ max-width:78ch; margin-top:14px; }

/* The two transitions in/out of the Preserve banner weren't covered
   by the .section + .section rule (one side is a .pillar-banner, not
   a .section) — same double-gap issue, plus the banner's background
   is only a hair different from white, so the color change alone
   wasn't reading as a section boundary. Added an explicit divider
   line to both. */
.section + .pillar-banner{
  padding-top:32px;
  border-top:1px solid rgba(29,29,31,0.12);
}
.pillar-banner + .section{
  padding-top:52px;
  border-top:1px solid rgba(29,29,31,0.12);
}

/* =========================================================
   OFFERINGS (tabbed Capture / Create / Print)
   ========================================================= */
.offerings-section{ padding-bottom:44px; }

.offer-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.offer-card{
  display:block;
  width:100%;
  text-align:left;
  background:var(--paper-100);
  border:1px solid rgba(29,29,31,0.1);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  font-family:inherit;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.offer-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(0,0,0,0.08);
  border-color:var(--brass-400);
}
.offer-thumb{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
}
.offer-thumb-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.offer-card-body{ padding:16px 18px 18px; }
.offer-card h4{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  margin:0 0 4px;
  color:var(--ink);
}
.offer-card-blurb{
  font-size:0.84rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}

/* =========================================================
   DETAIL MODAL — the "sub-page" opened by an offer card
   ========================================================= */
.detail-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
}
.detail-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.detail-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}
.detail-modal-panel{
  position:relative;
  width:min(1600px, 90vw);
  height:min(900px, 85vh);   /* together, at least ~75% of the viewport area */
  display:flex;
  flex-direction:row;      /* image | text, side by side — image gets the larger share */
  overflow:hidden;
  background:var(--paper-100);
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,0.3);
}
.detail-modal-close{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:none;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.detail-modal-media{
  flex:1 1 auto;           /* left — picture/video, takes the leftover width */
  background:var(--paper-200);
  position:relative;
  overflow:hidden;
}
.detail-media-stage{ position:absolute; inset:0; }
.detail-modal-media img,
.detail-modal-media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* ‹ › arrows for stepping through a title's photos/videos. Hidden
   automatically (via the [hidden] attribute, set in script.js) when
   there's only one item to show. */
.detail-media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.detail-media-nav:hover{ background:rgba(0,0,0,0.7); }
.detail-media-nav[hidden]{ display:none; }
.detail-media-prev{ left:16px; }
.detail-media-next{ right:16px; }
.detail-media-counter{
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  margin:0;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
}
.detail-media-counter[hidden]{ display:none; }

.detail-modal-body{
  flex:0 0 clamp(300px, 30%, 420px);  /* right — description; wide enough that
                                         headings don't wrap awkwardly */
  padding:36px 34px;
  display:flex;
  flex-direction:column;   /* scrollable text on top, CTA pinned below */
  min-width:0;
}
/* Only this part scrolls, so the Enquire button below never scrolls
   out of view no matter how long the description or thumbnail list. */
.detail-modal-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
}
.detail-modal-body h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1.2;
  margin:4px 0 12px;
  color:var(--ink);
  text-wrap:balance;       /* keeps short headings from leaving one orphan word */
}
.detail-modal-body p{
  color:var(--ink-soft);
  line-height:1.6;
  overflow-wrap:break-word; /* long words wrap instead of overflowing */
}
#detailCta{
  flex:0 0 auto;
  margin-top:20px;
  text-align:center;
}
.detail-gallery{ margin-top:18px; }
.detail-gallery-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-600);
  margin:0 0 10px;
}
.detail-gallery-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
.detail-gallery-strip .gmedia-thumb{
  flex:0 0 72px;
  width:72px;
  aspect-ratio:1;
  border:2px solid transparent;
  transition:border-color .2s var(--ease), opacity .2s var(--ease);
  opacity:0.65;
}
/* marks which thumbnail is currently showing in the big view */
.detail-gallery-strip .gmedia-thumb.is-active{
  border-color:var(--brass-400);
  opacity:1;
}
.detail-gallery-strip .gmedia-thumb:hover{ opacity:1; }

/* =========================================================
   MOBILE "CALL OR MESSAGE" POPUP
   Opened on phones only, by any [data-call-cta] button. Sits at
   the bottom of the screen where a thumb can reach it.
   ========================================================= */
.call-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:none;
}
.call-modal.is-open{ display:block; }
.call-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}
.call-modal-panel{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  background:var(--paper-100);
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,0.3);
}
.call-modal-panel h3{
  font-family:var(--font-display);
  font-size:1.35rem;
  margin:0 0 6px;
  color:var(--ink);
}
.call-modal-panel > p{
  margin:0 0 20px;
  font-size:0.9rem;
  color:var(--ink-soft);
}
.call-modal-panel .btn{ margin-bottom:10px; }
.call-modal-cancel{
  display:block;
  width:100%;
  margin-top:6px;
  padding:10px;
  border:none;
  background:none;
  font-family:inherit;
  font-size:0.9rem;
  color:var(--ink-soft);
  cursor:pointer;
}

/* =========================================================
   APPLY MODAL — "Work With Us" application form, opened from
   the header button next to "Request a Quote"
   ========================================================= */
.apply-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
}
.apply-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.apply-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}
.apply-modal-panel{
  position:relative;
  width:min(560px, 92vw);
  max-height:88vh;
  overflow-y:auto;
  background:var(--paper-100);
  border-radius:20px;
  padding:40px 36px 32px;
  box-shadow:0 30px 60px rgba(0,0,0,0.3);
}
.apply-modal-panel h3{
  font-family:var(--font-display);
  font-size:1.7rem;
  margin:4px 0 10px;
  color:var(--ink);
}
.apply-modal-panel .section-note{ margin-bottom:26px; }
.apply-modal-close{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(0,0,0,0.08);
  color:var(--ink);
  border:none;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.apply-modal-close:hover{ background:rgba(0,0,0,0.14); }

/* the apply form lives on a plain white panel (not a .section), so
   it needs its own light-mode input styling — same look the
   .section:not(.section-dark) override gives the Contact form */
.apply-form input[type=text],
.apply-form input[type=tel],
.apply-form input[type=email],
.apply-form input[type=url],
.apply-form select,
.apply-form textarea{
  background:#fff;
  border-color:rgba(28,20,13,0.16);
  color:var(--ink);
}
.apply-form .field label{ color:var(--ink-soft); }

@media (max-width:760px){
  .apply-modal-panel{ padding:32px 22px 26px; }
}

/* marquee strip */
.strip{
  background:var(--brass-400);
  color:var(--walnut-950);
  overflow:hidden;
  white-space:nowrap;
  padding:10px 0;
}
.strip-track{
  display:inline-flex;
  gap:14px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.06em;
  animation:scroll-strip 32s linear infinite;
}
@keyframes scroll-strip{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.section{ padding:88px 0; }
/* Two full sections stacked back-to-back (no color change between
   them) were doubling to ~176px of dead space with no visual cue
   that a new section had started. Trim the gap and add a thin
   divider line so the boundary itself is visible, not just implied
   by whitespace. */
.section + .section{
  padding-top:44px;
  border-top:1px solid rgba(29,29,31,0.1);
}

/* Three specific gaps reduced further (~30% below the general fix
   above) — scoped by id so Border Designs→Sizes and Sizes→Services
   keep the standard spacing. Split across both sides of each gap
   rather than squeezing one side, so nothing sits flush against
   its section's edge. */
#on-location{ padding-bottom:68px; }
#offerings{ padding-top:24px; }
#services{ padding-bottom:68px; }
#gallery{ padding-top:24px; padding-bottom:68px; }
#trusted-by{ padding-top:24px; }

.section-dark{
  background:linear-gradient(180deg, var(--walnut-950), var(--walnut-900));
  color:var(--paper-100);
}
.section-dark h2{ color:var(--paper-100); }
.section-dark .section-note{ color:rgba(244,238,226,0.6); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.section-note{
  max-width:44ch;
  font-size:0.95rem;
  margin:0;
}

/* =========================================================
   BORDER DESIGN FILTERS + CAROUSEL
   ========================================================= */
.filter-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.chip{
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  padding:9px 16px;
  border-radius:999px;
  border:1.5px solid var(--walnut-700);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{ border-color:var(--brass-600); }
.chip.is-active{
  background:var(--walnut-950);
  border-color:var(--walnut-950);
  color:var(--brass-300);
}

.carousel-wrap{ position:relative; }
.carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 4px 20px;
  scrollbar-width:thin;
  scrollbar-color:var(--oak-500) transparent;
}
.carousel::-webkit-scrollbar{ height:6px; }
.carousel::-webkit-scrollbar-thumb{ background:var(--oak-500); border-radius:4px; }

.design-card{
  flex:0 0 240px;
  scroll-snap-align:start;
  background:var(--paper-200);
  border:1px solid rgba(28,20,13,0.08);
  padding:16px;
  border-radius:var(--radius);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.design-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(28,20,13,0.12); }

.swatch{
  aspect-ratio:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border-radius:1px;
}
.swatch-art{
  width:100%;
  height:100%;
}
.swatch-photo-wrap{
  position:relative;
  padding:0;
  overflow:hidden;
}
.swatch-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.swatch-photo-wrap .swatch{
  position:absolute;
  inset:0;
  margin-bottom:0;
}

.design-card h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 4px;
}
.design-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:0.82rem;
  color:var(--ink-soft);
}
.design-meta .price{
  font-family:var(--font-mono);
  color:var(--ink);
  font-weight:500;
}

.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--walnut-700);
  background:var(--paper-100);
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s var(--ease);
  z-index:2;
}
.car-btn:hover{ background:var(--brass-400); border-color:var(--brass-400); }
.car-prev{ left:-21px; }
.car-next{ right:-21px; }
@media (max-width:640px){ .car-btn{ display:none; } }

/* =========================================================
   ON LOCATION NOW — currently booked gig carousel
   ========================================================= */
.gig-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 4px 12px;
  scrollbar-width:thin;
  scrollbar-color:var(--oak-500) transparent;
}
.gig-carousel::-webkit-scrollbar{ height:6px; }
.gig-carousel::-webkit-scrollbar-thumb{ background:var(--oak-500); border-radius:4px; }

.gig-card{
  position:relative;
  flex:0 0 min(680px, 88vw);
  scroll-snap-align:start;
  border-radius:20px;
  overflow:hidden;
  min-height:400px;
  display:flex;
  align-items:flex-end;
  /* Neutral base background — shows through if teaserImg is ever
     missing or fails to load, same warm-neutral tone as the rest of
     the site's dark sections. */
  background:linear-gradient(135deg, var(--walnut-950), var(--walnut-800));
}
.gig-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  filter:blur(0px) brightness(0.90);
  display:block;
}
/* Sits above the blurred teaser photo, below the text — a fixed
   neutral scrim (not tied to any photo or accent color) so the
   badge, title and countdown stay legible on every card. Darker on
   the left where the text sits, fading out toward the photo. */
.gig-tint{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(20,32,43,0.94) 0%, rgba(20,32,43,0.78) 45%, rgba(20,25,35,0.12) 100%);
}
.gig-overlay{
  position:relative;
  z-index:1;
  padding:36px 38px 40px;
  color:#fff;
  max-width:560px;
}

/* Contained status pill instead of a bare floating dot — the ring
   pulses inside the badge so it reads as a clear "live" indicator
   rather than an ambiguous blinking mark next to text. */
.gig-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.28);
  padding:7px 16px 7px 12px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 16px;
}
.gig-badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brass-400);
  box-shadow:0 0 0 0 rgba(137,207,240,0.6);
  animation:gigPulse 2s ease-out infinite;
  flex-shrink:0;
}
@keyframes gigPulse{
  0%{ box-shadow:0 0 0 0 rgba(137,207,240,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(137,207,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(137,207,240,0); }
}
.gig-card h3{
  font-family:var(--font-display);
  color:#fff;
  font-size:clamp(1.4rem, 1.05rem + 1.4vw, 1.9rem);
  margin:0 0 4px;
}
.gig-sub{ opacity:0.82; margin:0 0 20px; font-size:0.92rem; }
.gig-timer{ margin-bottom:20px; }
.gig-wrapped-msg{ margin:0; font-size:0.95rem; opacity:0.9; max-width:36ch; }
.gig-countdown{ display:flex; gap:14px; }
.gig-countdown div{ text-align:center; }
.gig-countdown span{
  display:block;
  font-family:var(--font-mono);
  font-size:1.3rem;
  font-weight:600;
}
.gig-countdown small{
  display:block;
  opacity:0.65;
  font-size:0.62rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* =========================================================
   QUOTE / SIZE CALCULATOR
   ========================================================= */
.quote-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:var(--walnut-800);
  border:1px solid rgba(244,238,226,0.1);
  border-radius:var(--radius);
  overflow:hidden;
}
.quote-form{ padding:44px; }
.quote-result{
  padding:44px;
  background:var(--walnut-900);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-300);
  margin-bottom:8px;
}
.field-row{ display:flex; gap:14px; margin-bottom:20px; }
.field-row .field{ margin-bottom:0; flex:1; }
.field-unit{ flex:0 0 120px; }

input[type=text], input[type=tel], input[type=email], input[type=url], input[type=number], select, textarea{
  width:100%;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:0.95rem;
  border-radius:var(--radius);
  border:1.5px solid rgba(244,238,226,0.16);
  background:rgba(244,238,226,0.05);
  color:var(--paper-100);
}
.section:not(.section-dark) input[type=text],
.section:not(.section-dark) input[type=tel],
.section:not(.section-dark) input[type=email],
.section:not(.section-dark) input[type=url],
.section:not(.section-dark) textarea{
  background:#fff;
  border-color:rgba(28,20,13,0.16);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{ border-color:var(--brass-400); }
select{ cursor:pointer; }
select option{ color:#000; }

.checkfield{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:0.9rem;
  color:rgba(244,238,226,0.85);
  cursor:pointer;
}
.checkfield input{ width:16px; height:16px; accent-color:var(--brass-400); }

.quote-visual{ margin-bottom:22px; }
.quote-frame{
  width:180px;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:padding .25s var(--ease), background-color .3s var(--ease);
  border-radius:1px;
}
.quote-mat{
  width:100%; height:100%;
  background:var(--paper-200);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:padding .25s var(--ease);
}
.quote-art{
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--sage-700), var(--sage-600));
}

.quote-dims{
  font-family:var(--font-mono);
  color:var(--brass-300);
  font-size:0.85rem;
  margin:0 0 6px;
}
.quote-price{ margin:0 0 22px; }
.quote-price span{
  font-family:var(--font-display);
  font-size:2.1rem;
  font-weight:600;
  color:var(--paper-100);
}
.quote-price small{ color:rgba(244,238,226,0.5); font-size:0.8rem; }
.quote-fine{
  font-size:0.76rem;
  color:rgba(244,238,226,0.45);
  margin:14px 0 0;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(28,20,13,0.1);
  border:1px solid rgba(28,20,13,0.1);
}
.service-card{
  background:var(--paper-100);
  padding:36px 30px;
  transition:background-color .2s var(--ease);
}
.service-card:hover{ background:var(--paper-200); }
.service-icon{ width:34px; height:34px; color:var(--brass-600); margin-bottom:18px; }
.service-card p{ font-size:0.92rem; margin:0; }

/* =========================================================
   OUR TEAM (team.html)
   ========================================================= */
.team-hero{ padding-bottom:0; }
.team-hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  line-height:1.1;
  max-width:36ch;
  margin:10px 0 0;
  color:var(--ink);
}
.team-hero-note{ max-width:60ch; margin-top:14px; }

.team-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px 24px;
}
.team-card{
  display:block;
  width:100%;
  text-align:center;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  cursor:pointer;
}
.team-photo{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:16px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.team-card:hover .team-photo{
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(0,0,0,0.14);
}
.team-photo-initials{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:600;
  color:rgba(255,255,255,0.85);
}
.team-photo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.team-card h4{
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.98rem;
  margin:0 0 2px;
  color:var(--ink);
}
.team-role{
  font-size:0.82rem;
  color:var(--ink-soft);
  margin:0;
}

/* Reuses .detail-modal-media for the bio popup, with a circular
   initials fallback matching the grid cards instead of a plain
   rectangle, since a person's photo (not a product shot) is the
   subject here. */
.team-modal-initials{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:3.5rem;
  font-weight:600;
  color:rgba(255,255,255,0.85);
}
/* For a person's bio, the text deserves more room than a product
   photo does — flip the 75/25 image-led ratio used for offer cards
   to roughly 40/60, text-led, and left/top align instead of
   centering (a bio reads better starting at the top than floating
   in the vertical middle). */
.team-modal-panel .detail-modal-media{ flex:0 0 40%; }
/* team.html's modal has no .detail-modal-scroll wrapper (it has no
   CTA to pin, so it doesn't need one) — so the scrolling for a long
   bio has to live on the body itself here. */
.team-modal-panel .detail-modal-body{
  flex:0 0 60%;
  justify-content:flex-start;
  overflow-y:auto;
  padding-top:56px;
}

/* =========================================================
   PROCESS
   ========================================================= */
.process-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
}
.process-list li{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:20px;
  border-top:2px solid rgba(244,238,226,0.16);
}
.process-num{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--brass-400);
  font-weight:600;
}
.process-list h3{ color:var(--paper-100); }
.process-list p{ font-size:0.9rem; color:rgba(244,238,226,0.6); margin:0; }

/* =========================================================
   GALLERY — pillar filter, per-title cover cards, media panel
   ========================================================= */
.gtitle-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
  margin-bottom:8px;
}
.gtitle-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
}
.gtitle-cover{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  border:2.5px solid transparent;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.gtitle-card:hover .gtitle-cover{ transform:translateY(-2px); }
.gtitle-card.is-active .gtitle-cover{ border-color:var(--brass-400); }
.gtitle-cover-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.gtitle-name{
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink);
  text-align:center;
}
.gtitle-card.is-active .gtitle-name{ color:var(--brass-400); }

.gallery-media-panel{
  margin-top:36px;
  padding-top:32px;
  border-top:1px solid rgba(29,29,31,0.1);
  scroll-margin-top:90px;   /* clears the 72px sticky header, plus a little air */
}
.gallery-media-panel h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  margin:0 0 20px;
}
.gmedia-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.gmedia-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  border:none;
  border-radius:8px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}
.gmedia-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.gmedia-play{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  color:#fff;
  background:rgba(0,0,0,0.28);
}

/* =========================================================
   TRUSTED BY — business logo grid
   ========================================================= */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
}
.logo-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.logo-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:92px;
  padding:10px;
  border:1px solid rgba(29,29,31,0.1);
  border-radius:10px;
  background:var(--paper-200);
  overflow:hidden;
}
.logo-fallback{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.02em;
  text-align:center;
  color:var(--ink-soft);
}
.logo-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.logo-name{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.02em;
  text-align:center;
  color:var(--ink-soft);
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{
  background:var(--sage-700);
  color:var(--paper-100);
  padding:36px 0;
}
.trust-inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  text-align:center;
}
.trust-inner strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--brass-300);
}
.trust-inner span{ font-size:0.82rem; color:rgba(244,238,226,0.75); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:64px;
}
.contact-list{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:18px;
}
.contact-list li{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(28,20,13,0.1);
}
.contact-list strong{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-600);
}
.contact-list em{ font-style:normal; color:#a2977e; font-size:0.82rem; }

.contact-form{
  background:var(--paper-200);
  padding:36px;
  border-radius:var(--radius);
  border:1px solid rgba(28,20,13,0.08);
}
.form-status{
  font-size:0.88rem;
  margin:14px 0 0;
  min-height:1.2em;
  color:var(--sage-700);
  font-weight:600;
}
.form-status.is-error{ color:#a4432c; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--walnut-950);
  color:rgba(244,238,226,0.7);
  padding:64px 0 0;
}
.footer-inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(244,238,226,0.1);
}
.footer-brand .brand-word{ font-size:1.3rem; color:var(--paper-100); }
.footer-brand p{ margin-top:12px; font-size:0.88rem; max-width:26ch; }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-300);
  margin:0 0 4px;
}
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; font-size:0.9rem; color:rgba(244,238,226,0.7); }
.footer-col a:hover{ color:var(--paper-100); }
.footer-col a.social-link{ display:inline-flex; align-items:center; gap:8px; }
.social-icon{ display:block; flex:none; border-radius:4px; }
.footer-bottom{
  padding:22px 0;
  font-size:0.78rem;
  display:flex;
  justify-content:space-between;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .pillars-grid{ grid-template-columns:repeat(2, 1fr); }
  .offer-grid{ grid-template-columns:repeat(2, 1fr); }
  .quote-panel{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
  .process-list{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .logo-grid{ grid-template-columns:repeat(3, 1fr); }
  .team-grid{ grid-template-columns:repeat(3, 1fr); }
  .gtitle-grid{ grid-template-columns:repeat(4, 1fr); }
  .gmedia-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-brass, .header-actions .btn-ghost{ display:none; }
  .site-header.is-open .main-nav{
    display:flex;
    position:absolute;
    top:72px; left:0; right:0;
    background:var(--walnut-950);
    flex-direction:column;
    padding:20px 24px 28px;
    gap:6px;
    border-bottom:1px solid rgba(244,238,226,0.1);
  }
  .site-header.is-open .main-nav a{ padding:10px 0; }
  .site-header.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .section{ padding:64px 0; }
  .section + .section{ padding-top:32px; }
  #on-location{ padding-bottom:48px; }
  #offerings{ padding-top:18px; }
  #services{ padding-bottom:48px; }
  #gallery{ padding-top:18px; padding-bottom:48px; }
  #trusted-by{ padding-top:18px; }
  .pillar-banner{ padding:40px 0 18px; }
  .section + .pillar-banner{ padding-top:22px; }
  .pillar-banner + .section{ padding-top:36px; }
  .offerings-section{ padding-bottom:32px; }
  .pillars-grid{ grid-template-columns:1fr; }
  .offer-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:1fr 1fr; }
  .logo-grid{ grid-template-columns:repeat(2, 1fr); }
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
  .gtitle-grid{ grid-template-columns:repeat(3, 1fr); }
  .gmedia-grid{ grid-template-columns:repeat(2, 1fr); }
  .audience-toggle{ flex-wrap:wrap; justify-content:center; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:6px; }
  .section-head{ flex-direction:column; align-items:flex-start; }

  /* detail modal: back to stacked (image on top, text below) once
     there isn't room for two comfortable side-by-side halves */
  .detail-modal-panel{ flex-direction:column; width:92vw; height:min(680px, 88vh); }
  .detail-modal-media{ flex:0 0 auto; aspect-ratio:16/9; }
  .detail-modal-body{ flex:1 1 auto; padding:24px 22px 28px; min-height:0; }
  /* smaller arrows so they don't cover the photo on a narrow screen */
  .detail-media-nav{ width:36px; height:36px; font-size:1.4rem; }
  .detail-media-prev{ left:10px; }
  .detail-media-next{ right:10px; }
}