/* ============================================================
   Zephyr rebuild — pixel-accurate desktop stylesheet
   Geometry is transcribed from the original engine's generated
   CSS: a fixed 1200px canvas (.cv) per section, every element
   absolutely positioned. Section bg colors run full-bleed.
   Coordinate comments give the original x/y/w/h.
   ============================================================ */

@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/perfectlynineties-thin.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/perfectlynineties-thinitalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;             /* the accent variant: <em> inside headings */
}
@font-face {
  font-family: "Sweet Sans Pro";
  src: url("fonts/sweetsansproregular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

:root {
  /* After Dark colorway, folded in verbatim from the kit's colorways/ round.
     The variable ROLES are unchanged (--slate is still the primary text colour);
     the palette is inverted, so --slate is light and --sage is the darkest. */
  --slate:   #efe9dd;                  /* primary text            */
  --cream:   #f4efe4;                  /* light text / light bg   */
  --powder:  #c9a24e;                  /* nav + footer bar        */
  --paleblue:#2c2622;                  /* services panel, buttons */
  --linen:   #1c1815;                  /* about bg                */
  --butter:  #b98a34;                  /* cta bg                  */
  --sage:    #17130f;                  /* footer bg               */

  /* titles + headings: Perfectly Nineties Thin (Thin Italic covers <em> accents) */
  --font-display: "Perfectly Nineties", Georgia, serif;
  /* subheadings, nav, buttons: Sweet Sans Pro */
  --font-sub: "Sweet Sans Pro", "Avenir Next", "Helvetica Neue", sans-serif;
  /* paragraphs: DM Sans (unchanged from the original) */
  --font-body: "DM Sans", sans-serif;

  /* space between the viewport edge and the 1200px canvas (0 at 1200w).
     Elements the original "locked" to a screen edge offset themselves by
     this, so they hug the edge instead of the canvas on wide screens. */
  --gutter: max(0px, calc((100vw - 1200px) / 2));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-width: 1200px;       /* desktop layout only, for now */
  background: var(--cream);
  color: var(--slate);
  font-family: var(--font-body);
}

img { display: block; }

/* every section: full-bleed bg, fixed height, clipped 1200px canvas */
.sec { position: relative; overflow: hidden; }
.cv  { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.sec, .cv { height: var(--h); }

/* photos keep their frame; cover-crop like the original */
.ph { position: absolute; object-fit: cover; }

/* ---------- shared text styles (the engine's st-d-* classes) ---------- */
.t-title {
  font-family: var(--font-display); font-weight: 200;
  font-size: 60px; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;
}
.t-heading {
  font-family: var(--font-display); font-weight: 200;
  font-size: 50px; line-height: 1.1; letter-spacing: .01em;
}
.t-subheading {
  font-family: var(--font-sub); font-weight: 400;
  font-size: 13px; line-height: 1.6; letter-spacing: .18em;
  text-transform: uppercase;
}
.t-paragraph { font-size: 15px; line-height: 1.8; }
.t-title, .t-heading, .t-subheading, .t-paragraph { position: absolute; }

/* ---------- buttons ---------- */
.btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: var(--paleblue);
  text-decoration: none;
  transition: background .5s;
}
.btn span {
  font-family: var(--font-sub);
  font-size: 12px; letter-spacing: .18em; line-height: 1.8;
  text-transform: uppercase;
  color: var(--slate);
  transition: color .5s;
}
.btn:hover { background: var(--powder); }
.btn:hover span { color: var(--cream); }

/* ================= MENU ================= */
.menu {
  --h: 84px;
  position: sticky; top: 0; z-index: 50;
  background: var(--powder);
}
.menu-logo {                            /* x20 y28 w304 h29, locked left */
  position: absolute; left: calc(20px - var(--gutter)); top: 22px; width: 304px;
  font-size: 32px; color: var(--cream); text-decoration: none;
}
.menu-link {
  position: absolute; top: 32px; height: 23px;
  font-family: var(--font-sub);
  font-size: 12px; letter-spacing: .18em; line-height: 1.9;
  text-transform: uppercase; text-align: center;
  color: var(--cream); text-decoration: none;
  transition: color .3s;
}
.menu-link:hover { color: var(--slate); }
/* the link cluster is a flex group locked to the right screen edge —
   no per-link canvas positions, so font metrics can never overlap them */
.menu-links {
  position: absolute; top: 0; bottom: 0;
  right: calc(22px - var(--gutter));
  display: flex; align-items: center; gap: 32px;
}
.menu-links .menu-link { position: static; top: auto; height: auto; width: auto; white-space: nowrap; }
.menu-links .menu-btn { position: static; width: auto; height: 50px; padding: 0 26px; white-space: nowrap; }

/* ================= HEADER / HERO (editorial split) =================
   Chosen from hero-variants 01: enormous stacked type on cream at left
   (with an inline photo chip), full-height arched photo at right with a
   hanging caption plate, destination ticker along the bottom. Breaks from
   the fixed 1200px .cv canvas: this section is its own responsive grid.
   All classes are eh- prefixed to stay clear of the other sections. */
.eh-hero {
  position: relative; min-height: calc(100vh - 84px);
  display: grid; grid-template-columns: 54% 46%;
  background: var(--cream); overflow: hidden;
}
.eh-left {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 50px 4vw 130px 6vw;
}
/* vertical eyebrow running up the far left edge */
.eh-spine {
  position: absolute; left: 1.6vw; bottom: 150px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--powder); white-space: nowrap;
}
.eh-stack { font-family: var(--font-display); font-weight: 200; line-height: .96; }
.eh-row {
  display: block; text-transform: uppercase;
  font-size: clamp(58px, 6.8vw, 96px); letter-spacing: .015em;
  opacity: 0; transform: translateY(28px);
  animation: eh-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.eh-row:nth-child(1) { animation-delay: .10s; }
.eh-row:nth-child(2) { animation-delay: .22s; }
.eh-row:nth-child(3) { animation-delay: .34s; }
.eh-row:nth-child(4) { animation-delay: .46s; }
.eh-stack em { font-style: italic; text-transform: none; font-size: .92em; letter-spacing: 0; }
/* the inline photo chip set into the headline */
.eh-chip {
  display: inline-block; vertical-align: baseline;
  width: 1.9em; height: .78em; margin: 0 .08em;
  border-radius: 999px; overflow: hidden; position: relative; top: .06em;
}
.eh-chip img,
.eh-chip video { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.15); transition: transform .8s ease; }
.eh-stack:hover .eh-chip img,
.eh-stack:hover .eh-chip video { transform: scale(1); }
@keyframes eh-rise { to { opacity: 1; transform: none; } }

.eh-dek {
  margin-top: 30px; max-width: 400px; font-size: 15px; line-height: 1.8;
  opacity: 0; animation: eh-rise .9s .62s cubic-bezier(.2,.7,.2,1) forwards;
}
.eh-actions {
  margin-top: 32px; display: flex; align-items: center; gap: 28px;
  opacity: 0; animation: eh-rise .9s .74s cubic-bezier(.2,.7,.2,1) forwards;
}
/* static flex button (the shared .btn is position:absolute, unusable here) */
.eh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 38px; background: var(--paleblue); text-decoration: none;
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); transition: background .5s, color .5s;
}
.eh-btn:hover { background: var(--powder); color: var(--cream); }
.eh-ghost {
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
  border-bottom: 1px solid var(--powder); padding-bottom: 6px;
}

/* right: the arch */
.eh-right { position: relative; padding: 34px 34px 34px 0; }
.eh-arch {
  position: relative; height: calc(100vh - 84px - 68px); min-height: 520px;
  border-radius: 999px 999px 0 0; overflow: hidden; background: var(--powder);
}
.eh-arch img,
.eh-arch video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: eh-drift 18s ease-in-out infinite alternate;
}
@keyframes eh-drift { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.06) translateY(-2.5%); } }
/* caption plate hanging over the arch (sibling of .eh-arch so the
   arch's overflow clipping can't cut it off) */
.eh-plate {
  position: absolute; left: -22px; bottom: 118px; z-index: 3;
  background: var(--butter); padding: 22px 28px; max-width: 250px;
  box-shadow: 0 20px 50px rgba(74,85,96,.18);
}
.eh-plate-n { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: 26px; line-height: 1.15; }
.eh-plate-s { margin-top: 8px; font-family: var(--font-sub); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--powder); }

/* bottom ticker */
.eh-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
  background: var(--slate); overflow: hidden; display: flex; align-items: center;
}
.eh-track { display: flex; white-space: nowrap; animation: eh-slide 30s linear infinite; }
.eh-track span {
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--cream); padding: 0 34px;
}
.eh-track span::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 68px; vertical-align: -1px; background: var(--powder); -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2012%2012"%3E%3Cpath%20d="M6%200%20C6.6%203.4%208.6%205.4%2012%206%20C8.6%206.6%206.6%208.6%206%2012%20C5.4%208.6%203.4%206.6%200%206%20C3.4%205.4%205.4%203.4%206%200%20Z"/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2012%2012"%3E%3Cpath%20d="M6%200%20C6.6%203.4%208.6%205.4%2012%206%20C8.6%206.6%206.6%208.6%206%2012%20C5.4%208.6%203.4%206.6%200%206%20C3.4%205.4%205.4%203.4%206%200%20Z"/%3E%3C/svg%3E') center / contain no-repeat; }
@keyframes eh-slide { to { transform: translateX(-50%); } }

/* ================= INTRO (gallery wall) =================
   Chosen from intro-variants 05: the trip photos hang as framed works in
   a museum room ("The anticipation collection"), each with a butter
   plaque; the intro copy is the wall text panel. All classes ig- prefixed;
   entrance motion rides the shared .fade-in observer. */
.intro { --h: 900px;
  scroll-margin-top: 84px;   /* the hero's #intro anchor lands under the sticky menu */
  background: linear-gradient(180deg, #f3f6f7 0%, var(--linen) 30%); }

/* wainscot rail along the bottom, like a museum room */
.ig-rail { position: absolute; left: calc(0px - var(--gutter)); right: calc(0px - var(--gutter));
  top: 812px; height: 2px; background: #d5dee6; }
.ig-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #e1e8ee; }

.ig-eyebrow { left: 0; top: 74px; width: 1200px; text-align: center; letter-spacing: .22em; }
.ig-heading { left: 230px; top: 112px; width: 740px; text-align: center; font-size: 44px; }

/* scroll-in stagger on top of the shared .fade-in observer */
.intro .fade-in { transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.intro .fade-in.is-visible { transform: none; }
.intro .ig-p1 { transition-delay: .15s; }
.intro .ig-p2 { transition-delay: .3s; }
.intro .ig-leaner { transition-delay: .45s; }

/* wall text (the museum intro panel) */
.ig-walltext { position: absolute; left: 96px; top: 330px; width: 300px; }
.ig-wt-head { font-family: var(--font-sub); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-top: 1px solid var(--slate); padding-top: 16px; margin-bottom: 16px; }
.ig-walltext p + p { font-size: 13.5px; line-height: 1.8; text-align: justify; margin-top: 14px; }
.ig-walltext .ig-wt-head + p { margin-top: 0; font-size: 13.5px; line-height: 1.8; text-align: justify; }
.ig-cta { position: absolute; left: 96px; top: 764px; text-decoration: none; color: var(--slate);
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--slate); padding-bottom: 8px; }
.ig-cta:hover { color: var(--powder); border-color: var(--powder); transition: color .4s, border-color .4s; }

/* the hung frames */
.ig-piece { position: absolute; z-index: 2; }
.ig-frame { position: relative; background: #fff; padding: 16px;
  border: 10px solid var(--slate); outline: 1px solid #22304a;
  box-shadow: 0 22px 44px rgba(74,85,96,.22);
  transition: transform .5s ease, box-shadow .5s ease; }
.ig-frame img,
.ig-frame video { display: block; object-fit: cover; width: 100%; height: 100%;
  filter: brightness(.96); transition: filter .5s; }
/* picture-light glow, brightens on hover */
.ig-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,243,218,.28), transparent 55%); opacity: .5; transition: opacity .5s; }
.ig-piece:hover .ig-frame { transform: translateY(-6px) scale(1.015); box-shadow: 0 34px 60px rgba(74,85,96,.3); }
.ig-piece:hover .ig-frame img,
.ig-piece:hover .ig-frame video { filter: brightness(1.03); }
.ig-piece:hover .ig-frame::after { opacity: 1; }

/* hanging wire */
.ig-wire { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120px; background: #ccd6de; }

.ig-p1 { left: 472px; top: 270px; }
.ig-p1 .ig-frame { width: 300px; height: 400px; }
.ig-p2 { left: 836px; top: 296px; }
.ig-p2 .ig-frame { width: 264px; height: 330px; }

/* brass plaque */
.ig-plaque { margin: 22px auto 0; width: max-content; max-width: 100%;
  background: var(--butter); border: 1px solid #e2d6ad; padding: 9px 18px; text-align: center;
  box-shadow: 0 4px 10px rgba(74,85,96,.08); }
.ig-plaque-title { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: 17px; line-height: 1.3; }
.ig-plaque-medium { font-family: var(--font-sub); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8b8467; margin-top: 3px; }

/* small third work leaning against the wall on the rail */
.ig-leaner { position: absolute; z-index: 1; left: 1062px; top: 716px; width: 104px; height: 82px;
  background: #fff; padding: 8px; border: 6px solid var(--slate);
  box-shadow: 0 14px 24px rgba(74,85,96,.2);
  transform: rotate(-3deg); transform-origin: bottom left; }
.ig-leaner img,
.ig-leaner video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the leaner keeps its tilt through the fade-in transform reset */
.intro .ig-leaner { transform: rotate(-3deg) translateY(14px); }
.intro .ig-leaner.is-visible { transform: rotate(-3deg); }
.intro .ig-leaner.is-visible:hover { transform: rotate(-1deg); }

/* ================= SERVICES (editorial index) =================
   Chosen from services-variants 03: the section as a magazine table of
   contents — three oversized ruled rows in huge display type. Hovering a
   row inverts it to slate while a small framed photo trails the cursor
   (script.js). Breaks from the fixed 1200px .cv canvas: flow layout,
   content height, vw-clamped type so rows still fit at the 1200px body
   minimum. All classes ei- prefixed; entrance motion rides the shared
   .fade-in observer. */
.ei-services { background: var(--cream); padding-top: 68px; }
.ei-head { text-align: center; padding-bottom: 44px; }
.ei-eyebrow { font-family: var(--font-sub); font-size: 14px; letter-spacing: .18em;
              text-transform: uppercase; }
.ei-note { font-family: var(--font-display); font-weight: 200; font-style: italic;
           font-size: 24px; margin-top: 12px; }

.ei-row { display: flex; align-items: center; gap: 44px;
          padding: 44px clamp(40px, 6.7vw, 96px);
          border-top: 1px solid var(--slate);
          text-decoration: none; color: var(--slate);
          transition: background .35s ease, color .35s ease; }
.ei-row:hover { background: var(--slate); color: var(--cream); }
.ei-no { font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
         text-transform: uppercase; width: 72px; flex: none; }
.ei-h { font-family: var(--font-display); font-weight: 200;
        font-size: clamp(48px, 4.6vw, 66px); line-height: 1; letter-spacing: .01em;
        flex: 1; white-space: nowrap; }
.ei-h em { font-style: italic; }
.ei-p { font-size: 14px; line-height: 1.8; width: 300px; flex: none; opacity: .75; }
.ei-arrow { flex: none; width: 47px; height: 16px; stroke: currentColor; fill: none;
            stroke-width: 1.2; transform: translateX(-12px); opacity: 0;
            transition: transform .35s ease, opacity .35s ease; }
.ei-row:hover .ei-arrow { transform: translateX(0); opacity: 1; }

.ei-tail { display: flex; justify-content: center; padding: 40px 0 72px;
           border-top: 1px solid var(--slate); }
/* static flex button (the shared .btn is position:absolute, unusable here) */
.ei-btn { display: inline-flex; align-items: center; justify-content: center;
          width: 195px; height: 50px; background: var(--paleblue); text-decoration: none;
          font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
          text-transform: uppercase; color: var(--slate); transition: background .5s, color .5s; }
.ei-btn:hover { background: var(--powder); color: var(--cream); }

/* the framed photo that trails the cursor over the rows (script.js);
   z-index stays under the sticky menu's 50 */
.ei-chaser { position: fixed; left: 0; top: 0; width: 264px; height: 352px;
             pointer-events: none; z-index: 10; opacity: 0;
             transition: opacity .3s ease; will-change: transform; }
.ei-chaser.is-on { opacity: 1; }
.ei-chaser .ei-frame { position: absolute; inset: 0; background: var(--cream);
                       box-shadow: 0 18px 44px rgba(74,85,96,.35); }
.ei-chaser img,
.ei-chaser video { position: absolute; inset: 10px 10px 34px; width: calc(100% - 20px);
                 height: calc(100% - 44px); object-fit: cover; opacity: 0;
                 transition: opacity .35s ease; }
.ei-chaser img.is-active,
.ei-chaser video.is-active { opacity: 1; }
.ei-caption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center;
              font-family: var(--font-sub); font-size: 10px; letter-spacing: .18em;
              text-transform: uppercase; color: var(--powder); }

/* scroll-in stagger on top of the shared .fade-in observer; the rows carry
   their hover transitions alongside so the stagger can't delay the invert */
.ei-services .fade-in { transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.ei-services .fade-in.is-visible { transform: none; }
.ei-services .ei-row.fade-in { transition: opacity .7s ease, transform .7s ease,
                                           background .35s ease, color .35s ease; }
.ei-services .ei-row.fade-in:nth-child(2) { transition: opacity .7s ease .12s, transform .7s ease .12s,
                                                        background .35s ease, color .35s ease; }
.ei-services .ei-row.fade-in:nth-child(3) { transition: opacity .7s ease .24s, transform .7s ease .24s,
                                                        background .35s ease, color .35s ease; }

/* generic ruled line (survives the services redesign: the packages.html
   process rows still position it via z-process-*) */
.rule { position: absolute; height: 1px; background: var(--slate);
        left: 386px; width: 429px; }

/* ================= ABOUT (interview spread) =================
   Chosen from meet-stephanie-variants 01: a "Zephyr Journal" profile
   spread — masthead rules, oversized title, italic pull quote, drop cap,
   two columns beside a portrait that crossfades on hover. Breaks from the
   fixed 1200px .cv canvas: flow layout, content height. All classes iv-
   prefixed; entrance motion rides the shared .fade-in observer. */

/* original trIn: fadeIn, 0.5s, on scroll into view (shared; script.js) */
.fade-in { opacity: 0; transition: opacity .5s ease; }
.fade-in.is-visible { opacity: 1; }

.iv-about { background: var(--linen); padding: 72px 20px 88px; }
/* max-width, not width: .iv-about pads 20px each side, so a hard 1200px child
   needs a 1240px viewport and overflowed the PAGE by up to 20px between 1200
   and 1239. Capped instead, it fills the padded box below 1240 and still
   renders at exactly 1200px centred above it, so wide desktop is unchanged. */
.iv-spread { max-width: 1200px; margin: 0 auto; }

.iv-masthead { text-align: center; }
.iv-kicker {
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase;
}
.iv-rules {
  margin-top: 14px; padding: 8px 0;
  border-top: 1px solid var(--slate); border-bottom: 1px solid var(--slate);
}
.iv-rules span {
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--powder);
}

.iv-title {
  font-family: var(--font-display); font-weight: 200;
  font-size: 84px; line-height: 1; letter-spacing: .01em;
  text-align: center; margin: 26px 0 6px;
}
.iv-title em { font-style: italic; }
.iv-deck {
  text-align: center; font-family: var(--font-sub); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--powder);
}

.iv-grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 48px;
  margin-top: 36px; align-items: start;
}
.iv-portrait { position: relative; }
.iv-frame { position: relative; width: 340px; height: 440px; overflow: hidden; }
.iv-frame img,
.iv-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: opacity .6s ease;
}
.iv-frame .iv-alt { opacity: 0; }
.iv-portrait:hover .iv-alt { opacity: 1; }
.iv-portrait figcaption {
  margin-top: 12px; font-family: var(--font-sub); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--powder);
}

.iv-pull {
  font-family: var(--font-display); font-weight: 200; font-style: italic;
  font-size: 33px; line-height: 1.3; letter-spacing: .01em;
  border-left: 1px solid var(--slate); padding-left: 28px;
}
.iv-byline {
  margin: 22px 0 20px; font-family: var(--font-sub); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
.iv-cols { column-count: 2; column-gap: 42px; column-rule: 1px solid #d9e2ea; }
.iv-cols p { font-size: 15px; line-height: 1.85; }
.iv-cols p + p { margin-top: 14px; }
.iv-cols p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 200;
  font-size: 64px; line-height: .82; float: left;
  padding: 8px 12px 0 0;
}

.iv-foot { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
/* static flex button (the shared .btn is position:absolute, unusable here) */
.iv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 207px; height: 50px; background: var(--paleblue); text-decoration: none;
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); transition: background .5s, color .5s;
}
.iv-btn:hover { background: var(--powder); color: var(--cream); }
.iv-continues {
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--powder);
}

/* scroll-in stagger on top of the shared .fade-in observer */
.iv-about .fade-in { transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.iv-about .fade-in.is-visible { transform: none; }
.iv-about .iv-title { transition-delay: .12s; }
.iv-about .iv-deck { transition-delay: .2s; }
.iv-about .iv-portrait { transition-delay: .28s; }
.iv-about .iv-editorial { transition-delay: .36s; }

/* ================= TESTIMONIAL (monument) =================
   Poster-scale centered quote, lines rising in one after another
   as the section scrolls into view. */
.mq-testimonial {
  background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)),
                    url("images/booth-review-bg.webp");
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-attachment: fixed;
  color: var(--cream);
  padding: 130px 24px 140px;
  text-align: center;
}
.mq-eyebrow {
  font-family: var(--font-sub); font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: 44px;
}
.mq-quote {
  margin: 0 auto; max-width: 960px;
  font-family: var(--font-display); font-weight: 200;
  font-size: 54px; line-height: 1.24; letter-spacing: .01em;
}
.mq-line { display: block; }
.mq-quote em { font-style: italic; }
.mq-attrib {
  margin-top: 52px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
}
.mq-rule { width: 90px; height: 1px; background: var(--cream); opacity: .5; }
.mq-who {
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; white-space: nowrap;
}
.mq-testimonial .fade-in {
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.mq-testimonial .fade-in.is-visible { transform: none; }
.mq-line:nth-child(1) { transition-delay: .1s; }
.mq-line:nth-child(2) { transition-delay: .25s; }
.mq-line:nth-child(3) { transition-delay: .4s; }
.mq-line:nth-child(4) { transition-delay: .55s; }
.mq-line:nth-child(5) { transition-delay: .7s; }
.mq-attrib { transition-delay: 1s; }

/* ================= CTA (centered triptych) ================= */
.tp-cta {
  background: var(--butter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 110px 40px 100px; overflow: hidden;
}
.tp-eyebrow {
  font-family: var(--font-sub); font-size: 13px; letter-spacing: .18em;
  line-height: 1.6; text-transform: uppercase; margin-bottom: 20px;
}
.tp-heading {
  font-family: var(--font-display); font-weight: 200;
  font-size: 56px; line-height: 1.1; letter-spacing: .01em; margin-bottom: 44px;
}
.tp-band {
  display: flex; gap: 28px; align-items: flex-start; justify-content: center;
  height: 400px; margin-bottom: 40px;
}
.tp-frame { position: relative; overflow: hidden; }
.tp-frame img,
.tp-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.4,.2,1);
}
.tp-frame:hover { box-shadow: 0 26px 55px rgba(74,85,96,.28); translate: 0 -8px; }
.tp-frame:hover img,
.tp-frame:hover video { transform: scale(1.045); }
.tp-f1 { width: 230px; height: 310px; margin-top: 56px; }
.tp-f2 { width: 280px; height: 400px; }
.tp-f3 { width: 210px; height: 270px; margin-top: 92px; }
.tp-frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 12px;
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream);
  background: linear-gradient(rgba(23,19,15,.4), rgba(23,19,15,1));
  opacity: 0; transition: opacity .4s ease;
}
.tp-frame:hover figcaption { opacity: 1; }
.tp-p { font-size: 15px; line-height: 1.8; max-width: 540px; margin-bottom: 34px; }
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 195px; height: 50px; background: var(--paleblue); text-decoration: none;
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  line-height: 1.8; text-transform: uppercase; color: var(--slate);
}
.tp-btn:hover { background: var(--powder); color: var(--cream); }
/* scroll entrances: rise + fade, frames staggered; hover transitions keep 0 delay */
.tp-cta .fade-in {
  transform: translateY(26px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.3,0,.2,1);
}
.tp-cta .fade-in.is-visible { transform: none; }
.tp-frame.fade-in {
  transition: opacity .8s ease, transform .9s cubic-bezier(.3,0,.2,1),
    box-shadow .45s ease, translate .45s ease;
}
.tp-f2.fade-in { transition-delay: .18s, .18s, 0s, 0s; }
.tp-f3.fade-in { transition-delay: .36s, .36s, 0s, 0s; }
.tp-btn.fade-in {
  transition: opacity .8s ease .2s, transform .9s cubic-bezier(.3,0,.2,1) .2s,
    background .5s ease, color .5s ease;
}

/* ---------- shared components for the inner pages ---------- */
/* generic crossfade gallery (about page hero, contact, destinations) */
.gallery .gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.gallery .gallery-slide.is-active { opacity: 1; }

/* trip-types / carousel arrows (about page) */
.carousel-arrow {
  position: absolute; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 44px; color: var(--slate);
  line-height: 1;
}
.carousel-arrow:hover { color: var(--powder); }

/* FAQ accordion (services + resources) */
.faq-list { position: absolute; left: 596px; width: 514px; }
.faq-item { border-bottom: 1px solid var(--line, #b9c2cc); }
.faq-item:first-child { border-top: 1px solid var(--line, #b9c2cc); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; color: var(--slate);
  text-align: left; padding: 19px 0;
}
.faq-x { font-size: 22px; font-weight: 300; transition: transform .3s; }
.faq-item.open .faq-x { transform: rotate(45deg); }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 15px; line-height: 1.8; padding: 0 24px 19px 0; }

/* destinations map pins */
.map-pin { position: absolute; }
.map-pin svg { width: 100%; height: 100%; fill: var(--slate); transition: fill .3s; }
.map-pin:hover svg { fill: var(--clay, #c4764f); }

/* ================= FOOTER ================= */
/* tide line: the page ends at the water's edge (variant 02, static top edge) */
.footer { --h: 420px; background: var(--sage);
          border-top: 2px solid var(--powder); }

.ft-eyebrow { left: 0; top: 64px;  width: 1200px; text-align: center; }
.ft-logo    { left: 0; top: 100px; width: 1200px; font-size: 54px; text-align: center; }
.ft-blurb   { left: 436px; top: 182px; width: 328px;
              font-size: 14px; text-align: center; }

.ft-col { position: absolute; top: 196px; }
.ft-explore { left: 108px; }
.ft-connect { left: 902px; }
.ft-col-h { position: static; margin-bottom: 22px; font-size: 12px; }
.ft-col a {
  display: block; margin-bottom: 14px;
  white-space: nowrap;   /* absolute + shrink-to-fit would wrap at the canvas edge */
  font-family: var(--font-display); font-weight: 200;
  font-size: 23px; line-height: 1.2; letter-spacing: .01em;
  color: var(--slate); text-decoration: none;
  transition: color .3s;
}
.ft-col a:hover { color: var(--powder); }

.ft-soc { position: absolute; left: 0; top: 330px; width: 1200px;
          display: flex; justify-content: center; gap: 28px; }
.ft-soc a svg { width: 19px; height: 19px;
                fill: var(--slate); stroke: var(--slate); transition: opacity .3s; }
.ft-soc a svg .dot, .ft-soc a.no-stroke svg path { stroke: none; }
.ft-soc a:hover svg { opacity: .45; }

/* snapshots left in the sand, slightly askew */

/* ================= FOOTER BAR ================= */
.footer-bar { --h: 48px; background: var(--powder); }
/* named children, not .cv > *: an absolute+top rule on .cv reads as a
   canvas pin to the form editor's stylesheet check (same three elements) */
.footer-bar .bar-copyright, .footer-bar .bar-link {
  position: absolute; top: 13px;
  font-size: 12px; line-height: 1.6;
  color: var(--cream); text-decoration: none;
}
.bar-copyright { left: calc(23px - var(--gutter)); }
.bar-privacy   { left: calc(1007px + var(--gutter)); width: 83px; text-align: right; }
.bar-credit    { left: calc(1114px + var(--gutter)); width: 63px; text-align: right; }
.bar-link:hover { color: var(--slate); }

/* ============================================================
   MOBILE LAYER (≤900px) — additive only. Desktop is untouched:
   everything below lives inside one media query, plus this
   .menu-toggle base rule (the hamburger button exists in the
   HTML but is display:none at desktop widths).

   Model: on mobile no .cv child keeps absolute positioning.
   A blanket rule below flows everything, then each section
   lays its children out deliberately (order, spacing, type
   scale). The inner pages do the same in their own
   css/<page>.css mobile blocks. !important appears only where
   an inline style (from the visual editor) must be overridden.
   ============================================================ */

.menu-toggle { display: none; }

@media (max-width: 900px) {
  body { min-width: 0; overflow-x: hidden; }

  /* ---- unlock the fixed 1200px canvas ---- */
  .sec, .cv { height: auto; }
  .cv { width: auto; }
  /* .sec prefix matters: (0,2,0) so this outranks the page stylesheets'
     single-class geometry rules (.z-* { left/top/width/height }), which
     load after this file */
  .sec .cv > * {
    position: static;
    left: auto; top: auto; right: auto; bottom: auto;
    width: auto; height: auto;
  }
  .cv .ph { width: 100%; height: auto; }
  .cv .btn { position: static; width: 100%; max-width: 340px; height: 50px; align-self: center; }
  .sec .faq-list { position: static; width: auto; }
  .sec .rule { position: static; width: 100%; height: 1px; }

  /* shared mobile type scale (pages re-tune per element where
     their stylesheet declared explicit sizes) */
  .t-title { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.05; }
  .t-heading { font-size: clamp(26px, 7.5vw, 34px); }

  /* ================= MENU: logo bar + hamburger dropdown ================= */
  .menu .cv { padding: 0; }
  .menu .menu-logo {
    position: static; display: block; width: auto;
    padding: 20px 72px 20px 20px; font-size: 26px; line-height: 1.15;
  }
  .menu .menu-toggle {
    display: block; position: absolute; right: 12px; top: 15px;
    width: 44px; height: 44px; padding: 13px 10px;
    background: none; border: 0; cursor: pointer;
  }
  .menu .menu-toggle span { display: block; height: 2px; background: var(--cream); transition: transform .3s, opacity .3s; }
  .menu .menu-toggle span + span { margin-top: 5px; }
  .menu.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu .menu-links { position: static; display: block; }
  .menu .menu-link, .menu .menu-btn { display: none; }
  .menu.is-open .menu-link {
    display: block; position: static; width: auto; height: auto;
    text-align: left; padding: 15px 20px;
    border-top: 1px solid rgba(247,248,245,.28);
  }
  .menu.is-open .menu-btn {
    display: flex; position: static; width: auto; max-width: none;
    margin: 16px 20px 24px;
  }

  /* ================= HERO: single column, arch below the type ================= */
  .eh-hero { grid-template-columns: 1fr; min-height: 0; }
  .eh-left, .eh-right { min-width: 0; }   /* nowrap children must not widen the grid track */
  .eh-left { padding: 46px 22px 8px; }
  .eh-spine {
    position: static; writing-mode: horizontal-tb; transform: none;
    margin-bottom: 20px; font-size: 10px; letter-spacing: .26em; white-space: normal;
  }
  .eh-row { font-size: clamp(38px, 10.5vw, 54px); }
  .eh-dek { margin-top: 22px; max-width: none; }
  .eh-actions { margin-top: 26px; flex-wrap: wrap; gap: 18px 24px; }
  .eh-btn { padding: 16px 30px; }
  .eh-right { padding: 30px 22px 100px; }
  .eh-arch { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .eh-plate { left: 8px; bottom: 130px; padding: 16px 20px; max-width: 210px; }
  .eh-plate-n { font-size: 22px; }
  /* the ticker keeps its absolute perch at the very bottom of the hero;
     .eh-right's bottom padding is its clearance */

  /* ================= INTRO: eyebrow, heading, frames, wall text ================= */
  .intro .cv { display: flex; flex-direction: column; padding: 60px 22px 56px; }
  /* neutralize the visual editor's inline nudges from the desktop pass */
  .intro .cv > *, .intro .ig-frame { transform: none !important; }
  .intro .ig-rail { display: none; }
  .intro .ig-eyebrow { order: 1; text-align: center; letter-spacing: .18em; }
  .intro .ig-heading { order: 2; margin-top: 14px; text-align: center; font-size: clamp(26px, 7.5vw, 34px); }
  .intro .ig-p1 { order: 3; margin: 36px auto 0; }
  .intro .ig-p2 { order: 4; margin: 30px auto 0; }
  .intro .ig-p1 .ig-frame { width: min(300px, 76vw); height: auto; aspect-ratio: 3 / 4; }
  .intro .ig-p2 .ig-frame { width: min(264px, 70vw); height: auto; aspect-ratio: 4 / 5; }
  .intro .ig-walltext { order: 5; margin: 38px auto 0; width: auto; max-width: 420px; }
  .intro .ig-cta { order: 6; margin-top: 30px; align-self: center; }

  /* ================= SERVICES INDEX: stacked editorial rows ================= */
  .ei-services { padding-top: 56px; }
  .ei-head { padding: 0 22px 34px; }
  .ei-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 22px; }
  .ei-no { width: auto; }
  .ei-h { white-space: normal; font-size: clamp(34px, 9vw, 44px); }
  .ei-p { width: auto; }
  .ei-arrow { display: none; }
  .ei-tail { padding: 34px 22px 60px; }
  .ei-btn { width: 100%; max-width: 340px; }
  .ei-chaser { display: none; }   /* cursor-follower is hover-only */

  /* ================= ABOUT SPREAD: single column ================= */
  .iv-about { padding: 56px 22px 64px; }
  .iv-spread { width: auto; }
  .iv-rules span { font-size: 9px; letter-spacing: .16em; }
  .iv-title { font-size: clamp(44px, 12vw, 64px); }
  .iv-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 30px; }
  .iv-frame { width: 100%; height: auto; aspect-ratio: 340 / 440; }
  .iv-pull { font-size: 25px; padding-left: 20px; }
  .iv-cols { column-count: 1; }
  .iv-foot { margin-top: 26px; }
  .iv-btn { width: 100%; max-width: 340px; }

  /* ================= TESTIMONIAL: reflowing quote ================= */
  /* pin the photo to the viewport on mobile: move the bg onto a fixed ::before
     (clip-path clips it to the section), lift content above it, so it stays
     fixed on phones exactly like desktop */
  .mq-testimonial { background-image: none; clip-path: inset(0); padding: 84px 22px 90px; }
  .mq-testimonial::before { content: ""; position: fixed; inset: 0; z-index: 0;
    background: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)),
                url("images/booth-review-bg.webp") center / cover no-repeat; }
  .mq-testimonial > * { position: relative; z-index: 1; }
  .mq-eyebrow { margin-bottom: 34px; }
  .mq-quote { font-size: clamp(28px, 7.6vw, 38px); }
  .mq-line { display: inline; }   /* the five art-directed lines reflow naturally */
  .mq-attrib { margin-top: 40px; flex-direction: column; gap: 14px; }
  .mq-who { white-space: normal; }
  .mq-rule { width: 60px; }

  /* ================= CTA: triptych becomes a staggered column ================= */
  .tp-cta { padding: 72px 22px; }
  .tp-heading { font-size: clamp(30px, 8.5vw, 40px); margin-bottom: 38px; }
  .tp-band { flex-direction: column; align-items: center; height: auto; gap: 24px; margin-bottom: 36px; }
  .tp-f1 { margin-top: 0; align-self: flex-start; margin-left: 6vw; }
  .tp-f3 { margin-top: 0; align-self: flex-end; margin-right: 6vw; }
  .tp-frame figcaption { opacity: 1; }   /* no hover on touch */

  /* ================= FOOTER: centered stack, columns side by side ================= */
  .footer { height: auto !important; min-height: 0 !important; padding: 52px 22px 46px !important; }
  .footer .cv { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; }
  .footer .ft-eyebrow, .footer .ft-logo, .footer .ft-blurb, .footer .ft-soc { grid-column: 1 / -1; text-align: center; }
  .footer .ft-logo { font-size: clamp(32px, 9vw, 40px); margin-top: 10px; }
  .footer .ft-blurb { margin-top: 14px; max-width: 340px; }
  .footer .ft-col { margin-top: 36px; text-align: center; }
  .footer .ft-col a { white-space: normal; font-size: 21px; }
  .footer .ft-soc { position: static; display: flex; margin-top: 36px; }
  /* ================= FOOTER BAR ================= */
  .footer-bar { transform: none !important; }
  .footer-bar .cv { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; padding: 13px 16px; }
  .footer-bar .cv > * { position: static; width: auto; text-align: center; }
}

/* ---------------------------------------------------------------------------
   After Dark colorway — per-element overrides, folded in verbatim from the
   kit's colorways/colorways.css. Selectors are the originals with the
   :root[data-colorway="after-dark"] scope stripped, since the switcher is a
   gallery-only feature and this build ships one palette. The !important flags
   are carried over as-is: they outrank the base rules further up this file,
   which is exactly what they did when the switcher applied them at runtime.
   --------------------------------------------------------------------------- */
.intro { background: linear-gradient(180deg, #201a15 0%, #1c1815 30%) !important; }
.ig-rail { background: #33291c; }
.ig-rail::after { background: #3d301f; }
.ig-frame { background: #201a15; outline-color: #33291c; }
.ig-leaner { background: #201a15; }
.iv-cols { column-rule-color: #33291c; }
body, .eh-hero, .ei-services { background: #17130f !important; }
.eh-ticker { background: #0f0c09 !important; }
.ei-row:hover { background: #c9a24e !important; color: #17130f !important; }
.ig-frame, .ig-leaner, .ei-chaser .ei-frame, .ft-find { background: #201a15 !important; }
.eh-arch { background: #2c2622 !important; }

/* Legibility tune, measured on this build (not part of the verbatim fold above).
   The hero caption plate is --butter, which After Dark turns gold (#b98a34).
   The base rules put --slate on the name and --powder on the sub line, and both
   are golds here: measured 2.57:1 on the 26px name (needs 3.0) and 1.30:1 on the
   10px sub line (needs 4.5), i.e. the sub line is effectively invisible. Inherent
   to the colorway, confirmed against an untouched lorem kit copy on this same
   stylesheet, so it is not a copy-length or content problem. The fix is the
   pairing this colorway already uses for anything sitting ON gold
   (.ei-row:hover): the darkest ink, #17130f. Measures 5.91:1 on both. */
.eh-plate-n, .eh-plate-s { color: #17130f; }

/* After Dark, continued: the colorway round was authored against the HOME page
   only (the intro, ig, eh, ei and ft component families), so the interior
   pages' vocabulary (svc, occ, loc) never got its overrides. Under an INVERTED
   palette every interior section that paints var(--cream) as its background
   renders var(--slate) text on it, and both are light: measured 1.05:1 on the
   packages hero h1, lede, ghost link and stat figures. These carry the
   colorway's OWN decisions onto the hero it already made for .eh-hero (dark
   #17130f ground) and for gold panels (.ei-row:hover -> #17130f on #c9a24e).
   No new colour is introduced. Measured after: h1/lede/ghost 15.3:1, eyebrow
   7.7:1, plate 5.9:1.
   SUPERSEDED 2026-08-05 — do not act on the list that used to be here. This
   comment previously said .svc-packages, .svc-faq, .svc-card and the whole of
   occasion/location/single-service were "still uncovered". They are now all
   covered by the AFTER DARK INTERIOR + CHROME COMPLETION LAYER at the bottom of
   this file, which is later in source order and uses !important, so anything
   you write up here to fix them is dead on arrival. One section agent already
   lost a rule that way. Check the computed style in a browser before adding a
   ground fix anywhere in this file, and put new fixes in the bottom layer.
   The !important flags match the rest of this block and are load-order, not
   taste: css/services.css is linked AFTER style.css, so an equal-specificity
   rule here loses to it without them. */
/* .svc-hero's dark-ground override is GONE as of the fixed-background rework:
   the hero now paints its own photo plus a black overlay in css/services.css, and
   a `background: var(--sage) !important` here silently won that cascade and left
   the section a flat dark block with no image. The reason it needed a ground at
   all (a --cream section under an inverted palette) no longer applies. */
.svc-stat { border-left-color: rgba(201, 162, 78, .35) !important; }
.svc-plate-n, .svc-plate-s { color: var(--sage) !important; }

/* ===========================================================================
   AFTER DARK — INTERIOR + CHROME COMPLETION LAYER
   ---------------------------------------------------------------------------
   The colorway round in the kit was generated from staging/zephyr, which is the
   HOME page, so all 13 of its per-element overrides target home-page families
   (.intro, .ig-*, .eh-*, .ei-*, .ft-find). Nothing was ever authored for the
   interior vocabularies (.svc-*, .occ-*, .loc-*, .spin-*) or for the shared
   chrome, and those were all written against the LIGHT zephyr palette.

   After Dark inverts --slate (text) and --cream to LIGHT while leaving --linen,
   --sage and --paleblue DARK. --cream is overloaded in this kit: it is both
   "light ink on a dark bar" (.menu-link) and "light section ground"
   (.svc-packages). Inverting it correctly for the first breaks the second, so
   every surface that used it as a GROUND now paints light-on-light.

   Measured on this build before this block: 283 failing text elements across
   the five pages, including .menu-link and the whole .footer-bar at 2.09:1 on
   EVERY page, home included.

   No new colour is introduced here. Grounds come from the palette's own darks
   (--linen, --sage, and the #201a15 / #33291c pair the kit's own fold already
   uses for raised panels), and anything sitting ON gold takes #17130f, which is
   the pairing the colorway itself chose in .ei-row:hover.

   !important is load order, not taste: css/{services,occasion,location,
   single-service}.css are linked AFTER style.css, so equal-specificity rules
   here lose to them without it.

   Deliberately NOT touched, because the section agents already measured and
   fixed them: .svc-hero / .svc-stat / .svc-plate-*, .eh-plate-*, .loc-cover
   and .loc-btn, and the .spin-hero accent set.
   =========================================================================== */

/* --- chrome: ink on the gold bars (every page) --- */
.menu-link, .menu-logo { color: #17130f !important; }
.menu-link:hover { color: #3d301f !important; }
.menu .menu-toggle span { background: #17130f !important; }
.footer-bar .bar-copyright, .footer-bar .bar-link { color: #17130f !important; }
.footer-bar .bar-link:hover { color: #3d301f !important; }

/* --- interior section grounds that used --cream as a light backdrop --- */
.svc-packages, .svc-faq,
.occ-night, .loc-events, .spin-numbers { background: var(--linen) !important; }

/* --- raised panels/cards that were #fff or --cream --- */
/* NOT .loc-cov-mat: it is the hero's picture MAT, a deliberate white frame
   around a photo with no text on it. Darkening it fixed nothing measurable and
   destroyed the framed-print concept the kit's own comment describes. The
   location section agent caught that and restored it in location.css; this
   rule stays out of its way. A decorative surface with no text on it is not a
   contrast problem, and a legibility sweep should not touch one. */
/* NOT .occ-book-stat > span: it was in this list and it is not a panel, it is
   the bare LABEL under each stat figure, sitting directly on the .occ-book
   band. That band is handled below as a LIGHT band with #17130f ink, so a
   #201a15 chip here put dark ink on a dark chip and measured 1.07:1 — the two
   halves of this same layer colliding on one element. Pulled from the list;
   with no background of its own it takes the band's ink and measures 15.28:1.
   Caught by the occasion-page section agent measuring the built section. */
.svc-card,
.occ-rail,
.loc-ven-card, .loc-review,
.spin-review {
  background: #201a15 !important;
  border-color: #33291c !important;
}
.loc-ven-item.is-live { background: #201a15 !important; border-color: var(--powder) !important; }
.svc-card.is-featured { background: #0f0c09 !important; border-color: var(--powder) !important; }

/* --- hairlines authored as dark ink for a light page --- */
.svc-card li, .svc-card li:last-child,
.occ-faqs .faq-item, .loc-review, .spin-review,
.svc-faqs .faq-item,
/* single-service's inclusions list: same hardcoded ORIGINAL kit blue
   (rgba(43,58,85,.18)) as .spin-num and .spin-chap-track, so its six row
   dividers composited to rgb(31,30,33) on the --linen ground and measured
   1.06:1, i.e. the list read as one undivided block. Third instance of this
   literal; the other two are noted below. */
.spin-inc-list, .spin-inc-list li { border-color: rgba(239, 233, 221, .14) !important; }
/* .spin-num's rule above the fold hardcoded the ORIGINAL kit blue
   (rgba(43,58,85,.25)), not a variable, so the ground swap on .spin-numbers
   never reached it: measured, it composites to rgb(32,33,37) on the --linen
   ground and the four stat rules read as invisible. Takes the same gold tint
   the block already gave the equivalent band on packages.html (.svc-stat). */
.spin-num { border-left-color: rgba(201, 162, 78, .35) !important; }

/* --- controls whose hover/rest state lands ON --cream (light) --- */
.occ-still-cta:hover { color: #17130f !important; }
.svc-pkg-arrow { background: var(--linen) !important; border-color: #33291c !important; color: var(--slate) !important; }
.spin-marquee-tag { background: var(--powder) !important; color: #17130f !important; }
/* The events CTA paints its own ground from --slate, which the ground swap
   turned CREAM, so the blanket `.spin-btn { color: var(--slate) }` below put
   cream ink on it: measured 1.02:1, the label was invisible at rest. It is the
   third control that lands on light, alongside the tag above. Hover repaints
   the ground gold (--powder), which the same dark ink also clears. */
.spin-events .spin-btn { color: #17130f !important; }
.spin-ticket { background: #201a15 !important; color: var(--slate) !important; }
.spin-ticket:hover { background: #33291c !important; }
/* NOT .svc-slide: it lives INSIDE the light .svc-addons band, so darkening it
   put a dark card under the dark ink the band rule below assigns, taking that
   page from 28 failures to 47. It keeps its own near-slate ground, which is
   light, and reads correctly with the band's dark ink. */

/* --- the lead-form section: shared chrome, present on all five pages ---
   css/patterns.css hardcodes `background: rgba(247,248,245,1)` — the ORIGINAL
   zephyr cream, as a literal, never as a variable. No colorway can reach a
   literal, which is why this section stayed light on every page under After
   Dark while its text inherited the inverted (light) --slate. It is the lead
   form, so it is the one surface on the site where unreadable is unaffordable.
   Ground goes to the palette's own --linen; the inputs' own rules already draw
   their text and underline from --slate, which is correct on a dark ground. */
.sec-contact-form { background: var(--linen) !important; }
.cf-in, .cf-ta { color: var(--slate) !important; }
.cf-in option { background: var(--linen); color: var(--slate); }

/* Buttons that paint the palette's gold need the colorway's on-gold ink. */
.occ-btn, .occ-btn span, .loc-btn, .loc-btn span { color: #17130f !important; }

/* --- light CONTRAST BANDS: keep the band, flip the ink -----------------------
   Two different things were broken and they need opposite fixes, which is why
   the earlier flatten-to-dark rule above stops where it does:

   * `background: var(--cream)` meant "the page's own default ground" under the
     light zephyr palette. After Dark makes the page dark, so those sections
     must FOLLOW the page and go dark. Handled above.
   * `background: var(--slate)` meant "an INVERTED band, dark against a light
     page". After Dark inverts --slate to light, so the band is still doing
     exactly its job: a light band against a dark page. Darkening these would
     flatten the design's light/dark rhythm, which is a redesign, not a fix.
     What is actually wrong is the INK: they set `color: var(--cream)`, and
     both are now light.

   So these keep their light ground and take the colorway's darkest ink, the
   same #17130f it uses for anything sitting on a light or gold surface. The
   descendant wildcard is deliberate: these bands' children inherit or restate
   the same light vars, and enumerating them per section would re-break every
   time an agent builds one. Gold accents inside a light band would be low
   contrast anyway, so folding them into the same ink is correct, not lossy. */
.svc-addons, .svc-addons *,
.spin-film, .spin-film *,
.occ-book, .occ-book *,
.loc-zones, .loc-zones *,
.occ-note, .occ-note *,
.occ-booth-card, .occ-booth-card * { color: #17130f !important; }

/* Buttons are the exception to the wildcard above, and getting this wrong is
   how packages.html went from 28 failures to 47. A button inside a light band
   still paints its OWN dark ground (--paleblue, #2c2622), so the band's dark
   ink lands dark-on-dark at 1.24:1. Anything with its own dark ground keeps
   light ink; only the band's bare text goes dark. Buttons that paint gold are
   already handled above and are not in this list. */
.svc-addons .btn, .svc-addons .btn span, .svc-addons .svc-btn,
.spin-film .btn, .spin-film .btn span, .spin-film .spin-btn,
.occ-book .btn, .occ-book .btn span, .occ-book .occ-btn,
.loc-zones .btn, .loc-zones .btn span, .loc-zones .loc-btn,
.svc-btn, .spin-btn { color: var(--slate) !important; }

/* single-service.html, the chapter player (.spin-film). Three things the ground
   swap above could not reach, all measured in WebKit before writing:

   1. The captions sit on the PHOTO, not on the band, so the `.spin-film *`
      wildcard's #17130f lands dark-on-dark over the caption scrim. They are the
      one child of this band with its own dark ground, so they keep light ink,
      exactly like the buttons two rules up.
   2. The caption scrim was authored as the ORIGINAL kit blue
      (rgba(43,58,85,...)), a literal rather than a variable, so it survived the
      whole fold and painted navy over a warm palette. Same alpha ramp, this
      colorway's darkest ink.
   3. .spin-chap-track is a rgba(247,248,245,.22) hairline drawn for a DARK band;
      on the light ground it is invisible, so the four progress rules read as
      missing. Same treatment .spin-num got: the band's own ink, same alpha. */
.spin-film .spin-stage-caption p { color: var(--slate) !important; }
.spin-film .spin-stage-caption {
  /* Three stops, not the kit's two. Measured against all FOUR of her stills at
     1440 and 390: a two-stop ramp only reaches strength at the very bottom, and
     the caption box's 60px top padding leaves the text sitting in its weak half,
     so 390 still failed at alpha 1.0. These are the lowest stops that clear
     4.5:1 on the 18px mobile caption and 3.0:1 on the 26px desktop one over
     every still, so the photo stays as visible as legibility allows. */
  background: linear-gradient(180deg, rgba(23,19,15,0) 0%, rgba(23,19,15,.60) 38%, rgba(23,19,15,.95) 100%) !important;
}
.spin-film .spin-chap-track { background: rgba(23, 19, 15, .22) !important; }

/* The wildcard above also flattened the chapter player's STATE. The kit dims
   inactive chapters (rgba(247,248,245,.62)) and lights the playing one
   (var(--cream)); forcing every descendant to one ink made all four identical,
   leaving the animated fill bar as the only clue which chapter is on screen.
   Restored with the band's own ink at two alphas. .75 is not cosmetic: it is
   the dimmest step that still clears 4.5:1 on the 12px chapter name (measured
   6.8:1 composited over the --slate ground), so the inactive chapters stay
   properly readable, which the kit's own .62 dim does not manage. */
.spin-film .spin-chap, .spin-film .spin-chap * { color: rgba(23, 19, 15, .75) !important; }
.spin-film .spin-chap.is-live, .spin-film .spin-chap.is-live *,
.spin-film .spin-chap:hover, .spin-film .spin-chap:hover * { color: #17130f !important; }

/* --- hairlines: the hardcoded-literal class, swept once -----------------------
   templates/design-01 hardcodes ~65 ORIGINAL-palette colours as literals rather
   than variables, spread over all six stylesheets. A literal is unreachable by
   any colorway, which is the root cause of this whole layer: four agents each
   found a different subset of the same bug on a different page. Most are
   hairlines, and an invisible hairline is silent, so it survives every gate.

   Swept by MEASUREMENT, not by pattern-matching the literal: a probe rendered
   all five pages and reported every border under 1.20:1 against its OWN
   composited ground. 43 came back, and each falls into exactly one of two cases,
   which is what makes the swap safe:

     rgba(43,58,85,a)    the original NAVY, invisible => it is on a DARK ground
     rgba(247,248,245,a) the original CREAM, invisible => it is on a LIGHT ground

   Alphas are carried over unchanged, so every hairline keeps the weight its
   designer chose; only the hue flips to the side of the palette that can be
   seen. Anything measuring above 1.20 was left alone. */

/* navy on a dark ground -> the palette's light ink, same alpha */
.addon-picks { border-color: rgba(239, 233, 221, .28) !important; }
.svc-inc-item { border-top-color: rgba(239, 233, 221, .22) !important; }
.spin-live { border-top-color: rgba(239, 233, 221, .25) !important; }
.spin-ticket, .spin-ticket.is-live { border-color: rgba(239, 233, 221, .30) !important; }
.loc-ven-item { border-color: rgba(239, 233, 221, .18) !important; }

/* cream on a light ground -> the palette's darkest ink, same alpha */
.svc-slide { border-color: rgba(23, 19, 15, .16) !important; }
.svc-addon-add-i { border-color: rgba(23, 19, 15, .40) !important; }
.svc-carousel-arrow { border-color: rgba(23, 19, 15, .35) !important; }
.loc-ring.r1, .loc-ring.r2, .loc-ring.r3 { border-color: rgba(23, 19, 15, .26) !important; }
.loc-zone { border-top-color: rgba(23, 19, 15, .22) !important; }

/* --- the third case: GOLD grounds ------------------------------------------
   This layer was built from two rules, and a section agent correctly pointed
   out that gold belongs to neither: it is not a --cream ground that should
   follow the page dark, and not a --slate band whose ink merely flips. Gold
   (--powder #c9a24e, --butter #b98a34) is its own surface, and text on it was
   left to whichever agent happened to build that section, which is why the
   same defect kept reappearing one section at a time.

   Swept the same way as the hairlines: a probe found every element painting
   gold across all five pages, then measured every text node composited over
   it. 25 text elements sit on gold; 17 already passed at 5.94 or 7.71 because
   earlier rules reached them, and 8 failed, all in sections not yet written.
   Every passing case had already converged on the same answer, which is the
   pairing the colorway itself chose in .ei-row:hover, so this simply gives the
   remaining gold sections the same ink rather than inventing a treatment.

   Buttons are excluded for the same reason as in the light-band rule: they
   paint their own dark ground and keep light ink. */
.tp-cta, .tp-cta *,
.svc-quote, .svc-quote *,
.spin-reviews, .spin-reviews *,
.occ-quotes-head, .occ-quotes-head * { color: #17130f !important; }

.tp-cta .btn, .tp-cta .btn span,
.svc-quote .btn, .svc-quote .btn span,
.spin-reviews .btn, .spin-reviews .btn span,
.spin-reviews .spin-btn, .svc-quote .svc-btn { color: var(--slate) !important; }

/* The review CARDS are the fourth instance of the same two-halves collision the
   .svc-card note above describes, and the only one where both halves land on
   one element: the dark-card rule paints .spin-review #201a15, then the gold
   band rule assigns #17130f to `.spin-reviews *`, so every quote, name and star
   inside a card measured 1.07:1 and the block read as three empty boxes. The
   band rule is right for text sitting ON the gold (the eyebrow and h2 keep it
   at 5.94:1); it is only wrong inside an element that paints its own dark
   ground. Same answer .spin-ticket already uses, and it measures 15.28:1.
   NOT .loc-review, which takes the dark card without the band ink and is
   already correct. */
.spin-review, .spin-review * { color: var(--slate) !important; }
.spin-review .spin-stars,
.spin-review figcaption span { color: var(--powder) !important; }

/* A dark card inside a gold band takes the band's dark ink and disappears.
   Swept build-wide with a probe for the exact signature (own opaque dark
   ground + gold ancestor + dark text): the section agents had already found
   and fixed .spin-review and the .spin-events CTA at the fix site, and this
   was the only one left. .tp-btn is the home page's CTA button; it is not
   named .btn, which is why the earlier button exception missed it. Same class
   of miss as .svc-btn and .spin-btn, all three now covered. */
.tp-btn, .tp-btn span { color: var(--slate) !important; }

/* Fifth instance of the same collision, and the last one on this page: the CTA
   triptych's captions paint their own dark ground (the gradient scrim over the
   photo) and then take the gold band's #17130f ink from `.tp-cta *`, so every
   caption sat dark-on-dark at the bottom edge and washed out entirely over a
   light photo. They are not named .btn or .tp-btn, which is why the two button
   exceptions above missed them. Same answer as .spin-review and .tp-btn. */
.tp-frame figcaption, .tp-frame figcaption * { color: var(--slate) !important; }

/* Her uploaded logo replaces the text wordmark in the nav. The mark is black on
   transparent and the bar is gold, which is the pairing it was drawn for.
   40px tall is not arbitrary: .menu is 84px and .menu-logo sits at top:22px, so
   (84-40)/2 = 22 centres it exactly with no geometry change. Exported at 3x
   (283x120) because the "PHOTO BOOTH & EVENTS" line is small at this size. */
.menu-logo { top: 15px !important; }
.menu-logo img { height: 54px; width: auto; display: block; }
@media (max-width: 900px) {
  /* the mobile bar makes .menu-logo a static padded block; the mark shrinks
     with it so the hamburger at right:12px is never crowded */
  .menu .menu-logo { top: auto !important; padding: 13px 72px 13px 20px; }
  .menu .menu-logo img { height: 44px; }
}

/* .sec-faq carries the same hardcoded original-cream literal as
   .sec-contact-form (css/patterns.css), unreachable by any colorway. */
.sec-faq { background: var(--linen) !important; }

/* Her logo replaces the footer text wordmark, as it does in the nav. The mark is
   black on transparent and the footer ground is --sage, so invert() flips the
   artwork to cream rather than shipping a second colour variant of her file.
   62px is measured, not chosen: .ft-logo sits at top:102 and .ft-blurb starts at
   184, so the mark has 82px of clear band. The 54px text it replaces bottomed
   out at ~156; 62px lands at 164 and still clears.

   The footer canvas also had to grow. It is a fixed --h:420 with absolutely
   positioned children, sized for the demo's TWO explore links. Five links run
   the column to 447, i.e. 27px past the floor and straight through .ft-soc at
   332, which is why "Paragould" was cut off. Height and the social row move
   together so the design's own spacing is preserved rather than compressed. */
.ft-logo img { display: block; margin: 0 auto; height: 62px; width: auto; filter: invert(1); }
.footer { --h: 560px; }
.ft-soc { top: 470px; }
@media (max-width: 900px) {
  /* the mobile layer makes the footer a flow grid, so nothing is pinned there */
  .footer { --h: auto; }
  .ft-logo img { height: 54px; }
}