/* ==========================================================================
   PAGE-LEVEL BLOCKS
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88svh, 940px);
  padding-block: var(--s-9) var(--s-8);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: var(--hero-img-opacity);
}

/* Vignette that anchors the text and hides the image edges */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(242,245,248,.55) 0%, rgba(242,245,248,.28) 40%, var(--c-bg) 96%),
    linear-gradient(90deg, var(--c-bg) 12%, rgba(242,245,248,.55) 58%, transparent 100%);
}

.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 780px; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.hero__title em {
  font-style: normal;
  color: var(--c-amber);
  /* Machined underline that sits below the amber word */
  background-image: linear-gradient(var(--c-amber), var(--c-amber));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

.hero__lead { font-size: var(--fs-lead); max-width: 56ch; margin-bottom: var(--s-6); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }

/* Floating spec chip over the hero */
.hero__chip {
  position: absolute;
  right: var(--gutter);
  bottom: 18%;
  display: none;
  padding: var(--s-4) var(--s-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.hero__chip-num {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
}
.hero__chip-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-amber-text);
  margin-top: 6px;
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.hero__cue-track {
  width: 1px; height: 42px;
  background: var(--a-ink-12);
  position: relative;
  overflow: hidden;
}
.hero__cue-track::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--c-amber);
  animation: cue-run 2.2s var(--ease-in-out) infinite;
}
@keyframes cue-run {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.pagehead {
  position: relative;
  padding-block: var(--s-8) var(--s-7);
  overflow: hidden;
  border-bottom: 1px solid var(--a-ink-08);
}
.pagehead__title { font-size: var(--fs-h1); text-transform: uppercase; margin-bottom: var(--s-4); }
.pagehead__lead { max-width: 62ch; }

/* ==========================================================================
   GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  grid-auto-rows: 1fr;                 /* equal-height cards */
}

/* ==========================================================================
   SPLIT — sticky media beside scrolling content
   ========================================================================== */
.split { display: grid; gap: var(--s-7); align-items: start; }

.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--a-ink-08);
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__panels { display: grid; gap: var(--s-4); }

.panel {
  padding: var(--s-5);
  background: var(--a-ink-04);
  border: 1px solid var(--a-ink-08);
  border-left: 2px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.panel[data-active="true"] {
  background: var(--a-ink-06);
  border-left-color: var(--c-amber);
}
.panel__title { display: flex; align-items: center; gap: var(--s-3); font-size: 1.05rem; margin-bottom: var(--s-2); }
.panel__num { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-amber-text); }
.panel__text { font-size: var(--fs-sm); }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.process { position: relative; display: grid; gap: var(--s-6); padding-left: 68px; }

.step { position: relative; }
.step__dot {
  position: absolute;
  left: -68px;
  top: 0;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  background: var(--c-surface);
  border: 1px solid var(--a-ink-12);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--c-amber);
  font-size: 1.1rem;
  box-shadow: var(--sh-1);
}
.step__title { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.step__text { font-size: var(--fs-sm); max-width: 58ch; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
/* True masonry via CSS columns. The shop's photos range from 2:1 panoramic
   to near-square, so fixed-ratio tiles would crop the subject out of half of
   them. Columns let every image keep its own proportions. */
.gallery {
  column-count: 1;
  column-gap: var(--s-3);
}
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--s-3);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--a-ink-08);
  background: var(--c-surface);
  cursor: pointer;
  padding: 0;
}
.gallery__item[hidden] { display: none; }
.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  opacity: 1;
}
.gallery__item:hover img { transform: scale(1.06); opacity: 1; }
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color var(--dur-base) var(--ease-out);
}
.gallery__item:hover::after { border-color: var(--a-amber-35); }

.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-3) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-text);
  text-align: left;
  background: linear-gradient(to top, rgba(255,255,255,.95) 30%, rgba(255,255,255,0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(12,17,22,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82svh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  transform: scale(.96);
  transition: transform var(--dur-base) var(--ease-spring);
}
.lightbox[data-open="true"] .lightbox__img { transform: scale(1); }
/* The lightbox stays a DARK viewer in both themes — a bright scrim washes out
   the photograph it is supposed to showcase. Because the surrounding site is
   light, its own text and controls cannot inherit the page's ink tokens or
   they would vanish against the scrim. They are set light explicitly here. */
.lightbox__cap {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: #E7EBEF;                       /* 12.1:1 on the scrim */
  text-align: center;
}
.lightbox__nav,
.lightbox .modal__close {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: #F2F5F7;
}
.lightbox__nav:hover,
.lightbox .modal__close:hover { background: rgba(255,255,255,.20); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }
.lightbox__nav svg { width: 22px; height: 22px; }

/* Focus ring must read against the dark scrim, not the light page. */
.lightbox :focus-visible {
  box-shadow: 0 0 0 2px rgba(12,17,22,.9), 0 0 0 4px var(--c-amber);
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.ctaband {
  position: relative;
  padding-block: var(--s-9);
  overflow: hidden;
  border-block: 1px solid var(--a-ink-08);
  background:
    radial-gradient(ellipse 60% 120% at 50% 100%, rgba(232,88,13,.10), transparent 70%),
    var(--c-surface);
}
.ctaband__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.ctaband__title { font-size: var(--fs-h2); text-transform: uppercase; margin-bottom: var(--s-4); }
.ctaband__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.ctaband__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.ctaband__phone:hover { color: var(--c-amber-text); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; gap: var(--s-7); align-items: start; }

.infocard {
  padding: var(--s-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .infocard { background: var(--c-surface); }
}

.infolist { display: grid; gap: var(--s-4); }
.infolist__row { display: flex; gap: var(--s-3); align-items: flex-start; }
.infolist__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--a-amber-10);
  border: 1px solid var(--a-amber-20);
  color: var(--c-amber);
}
.infolist__icon svg { width: 19px; height: 19px; }
.infolist__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.infolist__value { color: var(--c-text); font-size: var(--fs-sm); text-decoration: none; }
a.infolist__value:hover { color: var(--c-amber-text); }

/* Hours table */
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-table th, .hours-table td { padding: 9px 0; text-align: left; }
.hours-table th { font-weight: 400; color: var(--c-text-muted); }
.hours-table td { text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }
.hours-table tr { border-bottom: 1px solid var(--a-ink-06); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table tr[data-today="true"] th { color: var(--c-amber-text); font-weight: 600; }
.hours-table tr[data-today="true"] td { color: var(--c-amber-text); }
.hours-table td[data-closed="true"] { color: var(--c-text-muted); }

/* Map */
.mapframe {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--a-ink-08);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  filter: grayscale(.35) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease-out);
}
.mapframe:hover { filter: none; }
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   SPEC / DATA TABLE (capabilities)
   ========================================================================== */
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--a-ink-08); border-radius: var(--r-lg); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 540px; }
.spec-table th, .spec-table td { padding: var(--s-4); text-align: left; }
.spec-table thead th {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: var(--a-ink-04);
  border-bottom: 1px solid var(--a-ink-12);
}
.spec-table tbody tr { border-bottom: 1px solid var(--a-ink-06); }
.spec-table tbody tr:last-child { border-bottom: 0; }
.spec-table tbody th { font-weight: 500; color: var(--c-text); }
.spec-table td { color: var(--c-text-soft); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   VERIFY FLAG — visible marker on any unconfirmed content
   ========================================================================== */
[data-unverified="true"] { position: relative; }

.verify-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A4B00;
  background: rgba(232,88,13,.08);
  border: 1px dashed rgba(232,88,13,.42);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: var(--a-ink-04);
  border: 1px solid var(--a-ink-08);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 60px;
  padding: var(--s-4) var(--s-5);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
}
.faq__q:hover { color: var(--c-amber-text); }
.faq__icon { width: 18px; height: 18px; flex: none; color: var(--c-amber); transition: transform var(--dur-base) var(--ease-out); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 var(--s-5) var(--s-5); font-size: var(--fs-sm); }

/* ==========================================================================
   404 / THANK YOU
   ========================================================================== */
.centerpage {
  display: grid;
  place-items: center;
  min-height: 68svh;
  text-align: center;
  padding-block: var(--s-9);
}
.centerpage__code {
  font-family: var(--f-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 800;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px var(--a-ink-20);
  margin-bottom: var(--s-5);
}
.centerpage__icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--a-amber-10);
  border: 1px solid var(--a-amber-20);
  color: var(--c-amber);
}
.centerpage__icon svg { width: 42px; height: 42px; }