/* ============================================================
   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 {
  --slate:   #4a4139;                  /* primary text            */
  --cream:   #faf6f0;                  /* light text / light bg   */
  --powder:  #b89b6e;                  /* nav + footer bar        */
  --paleblue:#e8dcc4;                  /* services panel, buttons */
  --linen:   #f2ebe0;                  /* about bg                */
  --butter:  #f6e7c4;                  /* cta bg                  */
  --sage:    #e9e1d3;                  /* 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);
}
/* The wordmark slot carries the client's actual logo, a stacked near-square
   mark (w/h 1.116), so it is sized off HEIGHT and left to find its own width;
   the kit's fixed 304px box was for a text wordmark. The DARK variant is used
   even though the bar is --powder: her logo's own ink measures 3.78:1 on that
   tan where the cream version is 2.45:1, and these strokes are hairline. */
.menu-logo {                            /* x20 y28, locked left */
  position: absolute; left: calc(20px - var(--gutter)); top: 6px;
  display: block; text-decoration: none;
}
.menu-logo img { display: block; height: 72px; width: auto; }
.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, #f5efe4 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: #e0d5c2; }
.ig-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #ece3d4; }

.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 #d8caab;
  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); }
/* Row ordinals come from a CSS counter, never typed: the package rows carry
   data-bc-pkg, so the platform can remove one on any price save and a typed
   sequence would gap (and a cloned row would repeat the template's numeral). */
.ei-index { counter-reset: eirow; }
.ei-row { counter-increment: eirow; }
.ei-no { font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
         text-transform: uppercase; width: 72px; flex: none; }
.ei-no::before { content: "No. " counter(eirow, decimal-leading-zero); }
.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 #e3d8c4; }
.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, .55), rgba(0, 0, 0, .55)),
                    url("images/review-bg-glam-bw.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(transparent, rgba(74,85,96,.55));
  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: 500px; background: var(--sage);   /* 420 before the 5-page footer nav */
          border-top: 2px solid var(--powder); }

.ft-eyebrow { left: 0; top: 64px;  width: 1200px; text-align: center; }
.ft-logo    { position: absolute; left: 0; top: 92px; width: 1200px; text-align: center; }
.ft-logo img { display: inline-block; height: 132px; width: auto; }
/* pushed from 182 to clear the logo mark, which is far taller than the 54px
   text wordmark it replaced; it still sits in the gap between the two nav
   columns (left 108 and left 902), so nothing else moves */
.ft-blurb   { left: 436px; top: 248px; 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: 430px; 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); }
/* The bar's three items lock to the SCREEN edges (23px in), not to the 1200px
   canvas, so the .cv runs full-bleed here and lays them out as one row:
   copyright left, the two links together at the right. The kit positioned them
   absolutely at fixed widths (83px / 63px); this client's contact link is a
   26-character address that is one unbreakable token, so a fixed 63px box
   painted it straight past the right edge of the screen and .sec's overflow
   clipped it mid-address. Flowing the row sizes each item to its own content,
   which keeps the same arrangement at any string length. */
.footer-bar .cv {
  width: auto; margin: 0;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 13px 23px 0;
}
.footer-bar .cv > * {
  position: static; width: auto;
  font-size: 12px; line-height: 1.6;
  color: var(--cream); text-decoration: none;
}
.bar-privacy   { margin-left: auto; text-align: right; }
.bar-credit    { text-align: right; }
.bar-privacy, .bar-credit { white-space: nowrap; }
.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; }
  /* the kit's padding assumed a 26px TEXT wordmark; the logo mark is sized off
     height, so the bar is 14 + 52 + 14 = 80px and the hamburger centres to it */
  .menu .menu-logo {
    position: static; display: block; width: auto;
    padding: 14px 72px 14px 20px;
  }
  .menu .menu-logo img { height: 52px; }
  .menu .menu-toggle {
    display: block; position: absolute; right: 12px; top: 18px;
    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, .55), rgba(0, 0, 0, .55)),
                url("images/review-bg-glam-bw.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; }
  /* the desktop row's right-hand cluster undoes itself on the centered,
     wrapping mobile bar; the address may also break rather than run off */
  .bar-privacy { margin-left: 0; }
  .bar-privacy, .bar-credit { white-space: normal; overflow-wrap: anywhere; }
}