/* ─────────────────────────────────────────────────────────────
   DAMN GOOD INTERIORS — Main Stylesheet
   Canvas reference: 1440px
   ───────────────────────────────────────────────────────────── */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Tusker Grotesk';
  src: url('../fonts/TuskerGrotesk-7700Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'N27';
  src: url('../fonts/N27-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Inter, self-hosted (SIL Open Font License) — was loaded from fonts.googleapis.com,
   which put a render-blocking third-party round trip (~806ms) on the critical path
   while the other two faces were already local. One variable file covers 400/500/700,
   which is why font-weight is a range rather than three separate faces. The unicode-range
   split matches Google's own subsetting: latin-ext is only fetched if the page actually
   uses a character in it. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Brand tokens ──────────────────────────────────────────── */
:root {
  --eggplant:      #520026;
  --hot-pink:      #F362DB;
  --golden-yellow: #FFC412;
  --peach:         #FFE3BB;
  --ivory:         #FFFCEB;
  --turquoise:     #1ED9D2;

  --font-headline: 'Tusker Grotesk', 'Impact', sans-serif;
  --font-label:    'N27', 'Helvetica Neue', sans-serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;
}

/* ── Body ──────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--eggplant);
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   padding: 10px 80px | logo: 157×66 | btn: pink 4px radius
   ══════════════════════════════════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 80px;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}

.site-nav--overlay { background: transparent; }
.site-nav--overlay.is-scrolled {
  background: var(--ivory);
  border-bottom-color: rgba(82, 0, 38, 0.12);
}

.site-nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 42px;
  height: 28px;
  padding: 0;
  justify-content: center;
}
.site-nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--hot-pink);
  transition: background 0.3s;
}
.site-nav--overlay.is-scrolled .site-nav__hamburger span { background: var(--eggplant); }

/* Non-overlay pages — hamburger is dark */
.site-nav:not(.site-nav--overlay) .site-nav__hamburger span { background: var(--eggplant); }

.site-nav__logo { width: 157px; height: 66px; object-fit: contain; }

/* Logo swaps ivory → pink once the ivory scroll-bar appears, so it stays
   visible against the bar (the ivory logo would otherwise disappear). Both
   imgs preload, so the swap is instant with no flicker. */
.site-nav__logo--pink { display: none; }
.site-nav--overlay.is-scrolled .site-nav__logo--ivory { display: none; }
.site-nav--overlay.is-scrolled .site-nav__logo--pink { display: block; }

/* Nav CTA — hot pink, hard offset shadow, N27 17px, eggplant text.
   The border/shadow color is a variable so contexts that sit on a dark
   field (the drawer, 404.html) can flip it to ivory with one line, and so
   the responsive rules below only have to change offsets, not colors. */
.btn--nav-cta {
  --cta-ink: var(--eggplant);
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border: 2px solid var(--cta-ink);
  box-shadow: -6px 6px 0px var(--cta-ink);
  border-radius: 0;
  padding: 14px 24px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tap-target floor for the site's primary conversion action. The type shrinks
     at both mobile breakpoints, which dragged the button to 43px and then 38px
     against a 48px minimum. Set here rather than by re-padding each breakpoint:
     one rule, and any future type change can't quietly drop it back under.
     Desktop already computed to 49px, so this is a no-op there. */
  min-height: 48px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn--nav-cta:hover {
  box-shadow: -3px 3px 0px var(--cta-ink);
  transform: translate(-3px, 3px);
}

/* Mobile nav drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--eggplant);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 3rem 2.5rem;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer.is-open { transform: translateX(0); }

/* Instagram handle, sitting just under the portal links.

   ⚠ It was first pinned to the drawer's bottom edge with `margin-top: auto`.
   Do not do that: the cookie consent bar is `position: fixed; bottom: 0;
   z-index: 9999` and the drawer is only z-index 200, so on a first visit the
   bar covered the handle completely — measured 50px of overlap at 390px wide,
   and elementFromPoint returned the consent button, meaning the handle was not
   even tappable. It flows in the normal stack instead, well clear of the bar.

   Body font, not Tusker: it is a footnote, not a nav item, and it must not
   read as a seventh menu entry. */
.nav-drawer__social {
  margin-top: 2rem;
  align-self: flex-end;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255, 252, 235, 0.75);
  transition: color 0.2s;
}
.nav-drawer__social:hover { color: var(--hot-pink); }

/* Portal links are a secondary group, split off by a rule under Order Pizza. */
.nav-drawer__portals {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(255, 252, 235, 0.3);
}
.nav-drawer__close {
  align-self: flex-end;
  font-size: 1.5rem;
  color: var(--ivory);
  margin-bottom: 2rem;
}
.nav-drawer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-drawer__links a {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 8vw, 4rem);
  color: var(--ivory);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
/* Hover colors cycle yellow / cyan / pink, 3 at a time (also covers Order Pizza as item 7) */
.nav-drawer__links a:nth-child(3n+1):hover { color: var(--golden-yellow); }
.nav-drawer__links a:nth-child(3n+2):hover { color: var(--turquoise); }
.nav-drawer__links a:nth-child(3n):hover { color: var(--hot-pink); }

/* Order Pizza — hover swaps the text to "GOTCHA!" with cycling letter colors.

   ⚠ iOS REPAINT BUG, reported twice and fixed here 2026-08-04. On iPhone
   (Chrome and Safari — both WebKit) the drawer showed what looked like a
   "white dashed line" above GOTCHA!. It was not a line and not a border:
   there is exactly ONE border in the whole drawer and it sits below this
   link. It was the faded-out "Order Pizza" text left half-painted — the
   glyph tops survived, clipped mid-stroke, in the strip where "Order Pizza"
   (231px) is wider than "GOTCHA!" (155px). Two overlapping text layers
   cross-fading via opacity is the trigger; WebKit repainted only the union
   of the new text's box, not the old one's.

   The fix is `translateZ(0)` on both texts, which forces each into its own
   compositing layer so the whole box is repainted rather than patched.
   `backface-visibility: hidden` is the older Safari spelling of the same
   hint; harmless where it isn't needed. There is a second, independent
   guard in js/main.js (the link no longer navigates to "#", which was
   causing a scroll + repaint on tap).

   Do NOT "simplify" these two declarations away — they look like dead
   micro-optimisations and they are not. Verified on desktop Chrome as a
   no-op; the real check is an iPhone. */
.nav-drawer__pizza { position: relative; display: block; }
.pizza-text {
  display: block;
  transition: opacity 0.2s;
  /* will-change names the property that actually animates and is the modern,
     explicit way to ask for a layer — translateZ(0) alone reported back as a
     flattened 2D matrix here, so it is kept only as the legacy fallback. */
  will-change: opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pizza-text--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
}
.nav-drawer__pizza:hover .pizza-text--default { opacity: 0; }
.nav-drawer__pizza:hover .pizza-text--hover { opacity: 1; }
.pizza-text--hover .letter--yellow { color: var(--golden-yellow); }
.pizza-text--hover .letter--cyan { color: var(--turquoise); }
.pizza-text--hover .letter--pink { color: var(--hot-pink); }

/* ══════════════════════════════════════════════════════════════
   HERO
   Height: 695px | Headline: Tusker 86px centered max-w 700px
   Vertical texts: N27 16px letter-spacing 4px white
   ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 695px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 68.75%),
    linear-gradient(90deg, rgba(82,0,38,0.40) 0%, rgba(82,0,38,0.40) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
}

.hero__headline {
  font-family: var(--font-headline);
  font-size: clamp(42px, 5.97vw, 86px);
  line-height: 1.058;
  letter-spacing: -2px;
  color: var(--ivory);
  text-transform: uppercase;
  font-weight: 700;
}

/* NOTE: the hero deliberately carries NO service/locality subhead. One was tried
   under the H1 and pulled — "Based in Denver, CO" already runs up the right flank,
   so a Denver line under the headline said it twice, and the studio works out of
   state (KY, FL) which a Denver-only hero misrepresents. The service keywords live
   in .tagline-section__eyebrow on residential and hospitality instead, and in the
   .copy-block heading on the homepage. */

.hero__vert {
  position: absolute;
  top: 50%;
  z-index: 2;
  font-family: var(--font-label);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.hero__vert--left {
  left: 82px;
  transform: translateY(-50%) rotate(-90deg);
}
.hero__vert--right {
  right: 82px;
  transform: translateY(-50%) rotate(90deg);
}

.hero__scroll {
  position: absolute;
  bottom: -41px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__scroll img { width: 82px; height: 82px; }
.hero__scroll-arrow {
  position: absolute;
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--hot-pink);
  line-height: 1;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   VIDEO SECTION
   Overlaps hero bottom — no ivory gap
   Inner: eggplant bg, rounded-10px, padding 60px, gap 40px
   Video: 690px tall rounded-10px
   CTA bar: gap 100px, text #FFC412, btn pink, lines above/below
   ══════════════════════════════════════════════════════════════ */
.video-section {
  background: transparent;
  padding: 0 60px;
  margin-top: -60px;
  position: relative;
  z-index: 1;
}
.video-section__inner {
  background: var(--eggplant);
  border-radius: 10px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.video-section__media {
  position: relative;
  height: 690px;
  border-radius: 10px;
  overflow: hidden;
}
.video-section__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-section__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.video-section__play img { width: 220px; height: 220px; }

.cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6.94vw, 100px);
  padding: 28px 0;
}
.cta-bar__text {
  font-family: var(--font-label);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--golden-yellow);
  line-height: 14px;
}
.btn--cta-bar {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border-radius: 4px;
  padding: 24px 50px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}
.btn--cta-bar:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   SERVICES / ARE YOU LOOKING FOR
   padding: 120px 80px 122px | headline: Tusker 65px
   Cards: 649px tall, gap 40px
   Labels: N27 40px — residential #520026, hospitality #FFFCEB
   ══════════════════════════════════════════════════════════════ */
.services-section {
  background: var(--ivory);
  padding: 120px 80px 122px;
  position: relative;
}

/* Jackalope wrapper: inset-0 with overflow:hidden clips deer at section boundary */
.services-section__deer-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.4;
}
/* Deer image: positioned at Figma exact percentages within section.
   Delivered as a background-image rather than an <img> so it is never requested
   at all below 900px, where .services-section__deer-wrap is display:none — an
   <img src> inside a display:none ancestor still gets downloaded (it was costing
   every mobile visitor 1.1MB for something they never see). background-size:
   contain + background-position: top center are the exact equivalents of the
   object-fit / object-position pair this used to carry. */
.services-section__deer {
  position: absolute;
  left: 19.75%;
  top: 64.99%;
  width: 33.4%;
  height: 64.76%;
  background-image: url('../images/deer-silhouette.webp');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
}

.services-section__inner {
  position: relative;
}

.services-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(36px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  margin-bottom: 20px;
}

.service-cards {
  display: flex;
  gap: 40px;
  height: 649px;
  position: relative;
}

.service-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: block;
}
/* Card bg: solid brand color — matches Figma base */
.service-card--residential { background: var(--golden-yellow); }
.service-card--hospitality { background: var(--turquoise); }

/* Photo: sits on top of solid color at 30% opacity (Figma tint look),
   transitions to full color on hover */
.service-card__photo {
  position: absolute;
  inset: 0;
}
.service-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.3;
  transition: opacity 1s ease;
}
.service-card:hover .service-card__photo img { opacity: 1; }

/* Icon: centered, fades out as photo reveals */
.service-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 112px;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.service-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.service-card:hover .service-card__icon { opacity: 0; }

/* Label: always visible above photo */
.service-card__label {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.service-card__name {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.service-card--residential .service-card__name { color: var(--eggplant); }
.service-card--hospitality .service-card__name { color: var(--ivory); }
.service-card:hover .service-card__name { color: var(--ivory); }

/* ══════════════════════════════════════════════════════════════
   COPY BLOCK — shared long-form prose layout
   Headline left, body right, same geometry as .location-section__inner
   on the contact page, so the site has one prose layout rather than
   three. Used on the homepage (short version) and /about (long version).
   ══════════════════════════════════════════════════════════════ */
.copy-block {
  display: flex;
  gap: clamp(24px, 9.1vw, 131px);
  max-width: 1280px;
  width: 100%;
}
.copy-block__headline {
  flex: 1;
  min-width: 0;
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.copy-block__body {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.copy-block__body p:not(:last-child) { margin-bottom: 24px; }
/* The positioning statement. Set apart with the 4px eggplant rule the site
   already uses elsewhere rather than in display caps — it runs 60 words,
   which is too long to survive uppercase Tusker. */
.copy-block__pullquote {
  border-left: 4px solid var(--eggplant);
  padding-left: 20px;
  font-size: 19px;
  line-height: 31px;
}

/* ══════════════════════════════════════════════════════════════
   REVIEWS — social proof band above the guide form
   Ivory, between the golden press bar above and the eggplant guide
   block below, so the three bands alternate rather than run together.
   Three quotes across on desktop, stacked on mobile.
   ══════════════════════════════════════════════════════════════ */
.reviews-section {
  background: var(--ivory);
  padding: clamp(64px, 8.33vw, 120px) 80px;
  display: flex;
  justify-content: center;
}
.reviews-section__inner {
  max-width: 1280px;
  width: 100%;
}
.reviews-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(36px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
/* Rating and count as plain text linking out to the source profiles —
   the schema equivalent lives on Google's and Houzz's side, not ours. */
.reviews-section__rating {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-label);
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
}
.reviews-section__rating a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}
.reviews-section__rating a:hover { color: var(--hot-pink); }

.reviews-section__list {
  display: flex;
  gap: clamp(24px, 3.3vw, 44px);
  margin-top: clamp(40px, 5vw, 72px);
  list-style: none;
  padding: 0;
}
.review {
  flex: 1;
  min-width: 0;
  border-top: 4px solid var(--eggplant);
  padding-top: 24px;
}
.review__quote {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.review__source {
  margin-top: 18px;
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
}

/* About instance is its own full-width ivory band above the team. */
.about-intro {
  background: var(--ivory);
  padding: clamp(64px, 8.33vw, 120px) 80px;
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   HOME — intro band above the service cards
   Different shape from .copy-block on purpose: one full-width
   headline across the top, then the two paragraphs side by side
   beneath it. Short copy reads better wide and shallow than it
   does poured down one narrow column.
   ══════════════════════════════════════════════════════════════ */
.intro-band {
  background: var(--ivory);
  padding: clamp(64px, 8.33vw, 120px) 80px 0;
  display: flex;
  justify-content: center;
}
.intro-band__inner {
  max-width: 1280px;
  width: 100%;
}
/* Same type as .services-section__headline ("Are You Looking For") below it —
   identical clamp, so the two read as one size down the page. Broken onto two
   centred lines by an explicit <br> rather than left to wrap, so the break
   always lands after "in" instead of moving around with the viewport. */
.intro-band__headline {
  font-family: var(--font-headline);
  font-size: clamp(36px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.intro-band__cols {
  display: flex;
  gap: clamp(24px, 4.7vw, 64px);
}
.intro-band__cols p {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}


/* Polygon corner overlays — ivory triangles, positioned within .services-section__inner */
.card-poly {
  position: absolute;
  width: 287.5px;
  height: 197px;
  pointer-events: none;
  z-index: 10;
  display: block;
  transition: opacity 1s ease;
}
/* top=92px = bottom of headline; card row starts ~112px down */
.card-poly--tl { left: -23px; top: 92px; }
.card-poly--tr { left: 50%; top: 92px; }
.card-poly--bl { left: calc(50% - 287.5px); top: 584px; transform: rotate(180deg); }
.card-poly--br { right: -23px; top: 584px; transform: rotate(180deg); }

/* On residential hover: fade corner overlays in sync with photo */
.services-section__inner:has(.service-card--residential:hover) .card-poly--tl,
.services-section__inner:has(.service-card--residential:hover) .card-poly--bl { opacity: 0; }

/* On hospitality hover: fade corner overlays in sync with photo */
.services-section__inner:has(.service-card--hospitality:hover) .card-poly--tr,
.services-section__inner:has(.service-card--hospitality:hover) .card-poly--br { opacity: 0; }

/* Per-card corner overlays — the mobile counterpart to .card-poly above.
   Hidden by default so DESKTOP IS UNTOUCHED: above 900px the four original
   .card-poly siblings still do the work, exactly as before. Turned on inside
   the 900px block near the bottom of this file. */
.service-card__poly {
  display: none;
  position: absolute;
  width: 132px;
  height: 90px;
  pointer-events: none;
  z-index: 1;                 /* over the photo, under the icon (2) + label (3) */
  transition: opacity 1s ease;
}
.service-card__poly--tl { top: 0; left: 0; }
.service-card__poly--br { bottom: 0; right: 0; transform: rotate(180deg); }
/* Fade out with the photo reveal, same as .card-poly and .team-card__poly */
.service-card:hover .service-card__poly { opacity: 0; }

/* Ethos row — two equal columns matching Figma flex-1 layout */
.ethos-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  padding-top: 106px;
}
.ethos-row__left {
  flex: 1;
  min-width: 0;
}
.ethos-row__label {
  font-family: var(--font-label);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--eggplant);
  line-height: 14px;
}
.ethos-row__right {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.ethos-row__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}

/* ══════════════════════════════════════════════════════════════
   PRESS BAR / AS FEATURED IN
   bg: #FFC412, height: 135px
   ══════════════════════════════════════════════════════════════ */
.press-bar {
  background: var(--golden-yellow);
  height: 135px;
}
.press-bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 80px;
  gap: 40px;
}
.press-bar__label {
  font-family: var(--font-label);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--eggplant);
  white-space: nowrap;
  line-height: 14px;
  flex-shrink: 0;
}
.press-bar__divider {
  width: 1px;
  height: 48px;
  background: var(--eggplant);
  opacity: 0.3;
  flex-shrink: 0;
}
.press-bar__logos {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
/* Duration is a fallback only. The two marquees carry very different amounts of
   content — the five press logos are a 320px set, the eleven client logos are
   1532px — so one shared duration meant one shared LAP TIME, not one shared
   speed: 18px/s here against 85px/s on /hospitality, nearly 5x apart. normaliseMarquees()
   in main.js measures each set and rewrites this duration to hold a constant
   px/sec. Change the speed there, not here. */
.press-bar__track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}
/* Honour a reduced-motion preference: park the marquee rather than looping it
   forever. The logos stay legible, and the modal still carries the credits. */
@media (prefers-reduced-motion: reduce) {
  .press-bar__track { animation: none; }
}
.press-bar__set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
/* The "As Featured In" bar is a <button>. Strip the UA chrome so it renders
   exactly as the old <div> did, then put the affordance back as a hover/focus
   state rather than a border. */
.press-bar__trigger {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.press-bar__cue {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}
.press-bar__trigger:hover .press-bar__cue { transform: translate(2px, -2px); }
.press-bar__trigger:hover .press-bar__label { opacity: 0.7; }
.press-bar__trigger:focus-visible {
  outline: 3px solid var(--eggplant);
  outline-offset: -6px;
}

.press-bar__logo {
  height: 44px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0);
  flex-shrink: 0;
}

/* "Our Clients" variant — dark bg for client logos that are white/light-colored
   source art (built for a dark backdrop on the live site, not yellow) */
.press-bar--clients {
  background: var(--eggplant);
}
.press-bar--clients .press-bar__label {
  color: var(--peach);
}
.press-bar--clients .press-bar__divider {
  background: var(--peach);
}
.press-bar--clients .press-bar__logo {
  display: inline-block;
  flex-shrink: 0;
  height: 68px;
  width: auto;
  max-width: none;
  filter: none;
  background-color: var(--peach);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.press-bar__logo--ace                { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-ace.png); mask-image: url(../images/logo-client-ace.png); }
.press-bar__logo--boychick           { aspect-ratio: 1 / 1;       -webkit-mask-image: url(../images/logo-client-boychick.png); mask-image: url(../images/logo-client-boychick.png); }
.press-bar__logo--eatya-pizza        { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-eatya-pizza.png); mask-image: url(../images/logo-client-eatya-pizza.png); }
.press-bar__logo--flying-lady        { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-flying-lady.png); mask-image: url(../images/logo-client-flying-lady.png); }
.press-bar__logo--liberty-collective { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-liberty-collective.png); mask-image: url(../images/logo-client-liberty-collective.png); }
.press-bar--clients .press-bar__logo--mama-lolitas { aspect-ratio: 509 / 503; height: 96px; -webkit-mask-image: url(../images/logo-client-mama-lolitas.png); mask-image: url(../images/logo-client-mama-lolitas.png); }
.press-bar__logo--the-regional       { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-the-regional.png); mask-image: url(../images/logo-client-the-regional.png); }
.press-bar__logo--rooted             { aspect-ratio: 509 / 503;   -webkit-mask-image: url(../images/logo-client-rooted.png); mask-image: url(../images/logo-client-rooted.png); }
.press-bar--clients .press-bar__logo--supper-club { aspect-ratio: 273 / 96; height: 40px; -webkit-mask-image: url(../images/logo-client-supper-club.png); mask-image: url(../images/logo-client-supper-club.png); }
.press-bar__logo--the-barn           { aspect-ratio: 1 / 1;       -webkit-mask-image: url(../images/logo-client-the-barn.png); mask-image: url(../images/logo-client-the-barn.png); }
.press-bar__logo--pig-tiger          { aspect-ratio: 1 / 1;       -webkit-mask-image: url(../images/logo-client-pig-tiger.png); mask-image: url(../images/logo-client-pig-tiger.png); }

/* ══════════════════════════════════════════════════════════════
   GUIDE / LEAD MAGNET  — exact Figma: node 149:168
   Section: px-80px py-155px, mb-(-62px) so ideology overlaps
   Inner: flex gap-60px items-center max-w-1280px
   Book col: flex-1 overflow-hidden px-46px — book image 673×865px
   Form col: w-610px fixed
   ══════════════════════════════════════════════════════════════ */
.guide-section {
  background: var(--eggplant);
  padding: 155px 80px;
  margin-bottom: -62px;
  position: relative;
  overflow: hidden;
}

/* Texture overlay at 20% opacity */
.guide-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.guide-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
  display: block;
}

.guide-section__inner {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Subtract arc: absolute within inner, left:0 top:330px, 602×370px */
.guide-section__subtract {
  position: absolute;
  left: 0;
  top: 330px;
  width: 602px;
  height: 370px;
  pointer-events: none;
}
.guide-section__subtract img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Book column: flex-1, clips book image that overflows */
.guide-section__book {
  flex: 1;
  min-width: 0;
  overflow: visible;
  padding: 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Book wrap: keeps book at exact Figma dimensions. This is the badge's
   containing block (not .guide-section__book) — the book column is a fluid
   flex:1 box that squeezes narrower than this 673px image on real-world
   viewports between ~900px and ~1440px, so the image ends up centered and
   overflowing its own column. Anchoring the badge here instead, in percent,
   means it tracks the actual book artwork at every size instead of a
   flex column that doesn't share the book's aspect ratio. */
.guide-section__book-wrap {
  width: 673px;
  height: 865px;
  flex-shrink: 0;
  position: relative;
}
.guide-section__book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge: absolute within book-wrap — left 62.11%/top 5.9% of the 673×865
   book art (was 418px/51px of 673×865), so it lands on the same spot on
   the book cover at every viewport instead of drifting with the flex
   column's width. Percent width/height against the box's fixed aspect
   ratio preserves the 183.712px circle proportionally at any size. */
.guide-section__badge {
  position: absolute;
  left: 62.11%;
  top: 5.9%;
  width: 27.3%;
  height: 21.24%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
}
.guide-section__badge-circle {
  position: absolute;
  inset: 0;
  width: 150px;
  height: 150px;
  margin: auto;
  display: block;
}
.guide-section__badge-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-label);
  font-size: 19.868px;
  line-height: 23.455px;
  letter-spacing: 1.88px;
  text-transform: uppercase;
  color: var(--eggplant);
  text-align: center;
}

/* Form column: fixed 610px */
.guide-section__form-col {
  flex-shrink: 0;
  width: 610px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-section__headline {
  font-family: var(--font-headline);
  font-size: 65px;
  line-height: 72px;
  letter-spacing: -2px;
  color: var(--peach);
  text-transform: uppercase;
  font-weight: 700;
  width: 610px;
}
.guide-section__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--peach);
  width: 610px;
}

.guide-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.guide-form input {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.3px;
  color: var(--ivory);
  background: transparent;
  border: 2px solid rgba(255, 252, 235, 0.5);
  border-radius: 2px;
  padding: 22px 20px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.guide-form input::placeholder { color: rgba(255, 227, 187, 0.6); }
.guide-form input:focus { border-color: rgba(255, 252, 235, 0.9); }
/* Both injected by main.js only when a submit actually fails; see
   formErrorState(). Not red — red reads as muddy on both the eggplant guide
   panel and the golden contact panel, and each section already has an accent
   that carries small type legibly. Peach here, eggplant on contact. */
.contact-form__error {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--eggplant);
  font-weight: 600;
  margin-top: 4px;
}
.contact-form__error a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.contact-form__error a:hover { color: var(--hot-pink); }

.guide-form__error {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--peach);
  margin-top: -4px;
}
.guide-form__error a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.guide-form__error a:hover { color: var(--hot-pink); }

.btn--guide-submit {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border-radius: 2px;
  border: none;
  width: 212px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn--guide-submit:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   WARM BLANKET VIBES IDEOLOGY
   bg: #F362DB + texture 20% opacity
   eyebrow: N27 22px #520026 letter-spacing 3px
   headline: Tusker 65px #FFFCEB
   button: 198×52px, bg #F362DB, border-2 #520026, drop-shadow -6px 6px #520026
   ══════════════════════════════════════════════════════════════ */
.ideology-section {
  position: relative;
  z-index: 1;
  background: var(--hot-pink);
  padding: 116px 80px;
  margin: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ideology-section__bg {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  pointer-events: none;
}
.ideology-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ideology-section__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.ideology-section__eyebrow {
  font-family: var(--font-label);
  font-size: 22px;
  line-height: 68px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eggplant);
}
.ideology-section__headline {
  font-family: var(--font-headline);
  font-size: 65px;
  line-height: 72px;
  letter-spacing: -2px;
  color: var(--ivory);
  text-transform: uppercase;
  font-weight: 700;
}
.btn--ideology {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border: 2px solid var(--eggplant);
  box-shadow: -6px 6px 0px var(--eggplant);
  width: 198px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn--ideology:hover {
  box-shadow: -3px 3px 0px var(--eggplant);
  transform: translate(-3px, 3px);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   bg: #FFFCEB
   nav: Tusker 25px, line-height 72px, flex even
   bottom row: email | logo center | copyright
   DAAAAMN: Tusker large watermark
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--ivory);
  padding: 60px 80px 0;
  overflow: hidden; /* clips DAAAAMN at bottom only */
}
.site-footer__nav {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}
.site-footer__nav a {
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 72px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  flex: 1;
  text-align: center;
  transition: color 0.2s;
}
.site-footer__nav a:hover { color: var(--hot-pink); }

/* Mobile-only scroll affordance for the footer nav — see the 900px block near
   the bottom of this file. Hidden here so DESKTOP IS UNTOUCHED: it must not
   become a sixth flex item competing with the five flex:1 links. */
.site-footer__nav-arrow { display: none; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0 0;
  min-height: 72px;
  position: relative;
  margin-bottom: 60px;
}
/* RIGHT slot of the footer bottom row as of 2026-08-05 — the two slots were
   swapped that day (hello@ left, @damngood right), and only the HTML source
   order moved: both slots are styled identically, so nothing here changed.
   Named __handle and NOT __social:
   `.site-footer__social` is already taken by the dead 3-column "inner page
   footer" block further down (its markup — __top/__nav-col/__copyright — is on
   ZERO pages), and that block sets `display: flex; flex-direction: column`,
   which wins on source order and would break this inline link above 900px. */
.site-footer__handle {
  font-family: var(--font-headline);
  /* Fluid, because the badge is centred and absolute: the usable room each side
     is (row - badge)/2, and at 15px the email is 307px against only 288px of
     room at 1024px wide — the badge visibly ate the "H" of HELLO@. This is not
     new (the email used to sit on the LEFT and collided there the same way);
     it only became obvious once both slots were links of similar length.
     Below 900px the fixed sizes further down take over. */
  font-size: clamp(10px, 1.13vw, 15px);
  line-height: 1;
  color: var(--eggplant);
  text-transform: uppercase;
}
.site-footer__handle:hover { color: var(--hot-pink); }
.site-footer__logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100px;
  display: block;
  z-index: 1;
}
.site-footer__logo-link img {
  width: 288px;
  height: 122px;
  object-fit: contain;
  display: block;
}
/* LEFT slot of the footer bottom row as of 2026-08-05 (see __handle above —
   the two were swapped that day). This slot has been four things: a copyright,
   then "©2022 Damn Good Interiors", then the hello@ mailto on the right
   (Eli 2026-08-04 — putting the email back on every page, since removing it
   from the footer had taken it off the whole site bar two body CTAs), now the
   same mailto on the left.
   Both slots are links now, so they share styling with .site-footer__handle. */
.site-footer__email {
  font-family: var(--font-headline);
  /* Fluid, because the badge is centred and absolute: the usable room each side
     is (row - badge)/2, and at 15px the email is 307px against only 288px of
     room at 1024px wide — the badge visibly ate the "H" of HELLO@. This is not
     new (the email used to sit on the LEFT and collided there the same way);
     it only became obvious once both slots were links of similar length.
     Below 900px the fixed sizes further down take over. */
  font-size: clamp(10px, 1.13vw, 15px);
  line-height: 1;
  color: var(--eggplant);
  text-transform: uppercase;
}
.site-footer__email:hover { color: var(--hot-pink); }
.site-footer__daaaamn {
  font-family: var(--font-headline);
  font-size: clamp(5rem, 21vw, 28rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--eggplant);
  text-transform: uppercase;
  text-align: center;
  opacity: 1;
  font-weight: 700;
  margin: 0 -80px;
  white-space: nowrap;
  /* show full top, clip at bottom via parent overflow:hidden */
  padding-top: 12px;
  margin-bottom: -0.22em;
}

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — 04 Tagline ("Bold Designs that make you go DAAAMN")
   ══════════════════════════════════════════════════════════════ */
.tagline-section {
  background: var(--ivory);
  padding: clamp(60px, 8.33vw, 120px) 80px 0;
  display: flex;
  justify-content: center;
}
.tagline-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.tagline-section__eyebrow {
  width: 100%;
  text-align: center;
  font-family: var(--font-label);
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--eggplant);
}
.tagline-section__headline {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
.tagline-section__daaaamn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.tagline-section__daaaamn {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(4rem, 16.6vw, 15rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--eggplant);
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — ICP accordion + image
   ══════════════════════════════════════════════════════════════ */
.icp-section {
  border-top: 4px solid var(--eggplant);
  border-bottom: 4px solid var(--eggplant);
  background: var(--ivory);
  position: relative;
  z-index: 2;
}
.icp-section__row {
  display: flex;
  align-items: stretch;
}
.icp-section__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.icp-section__photo-col {
  flex: 1;
  min-width: 0;
  position: relative;
  border-left: 4px solid var(--eggplant);
}
.icp-section__photo-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icp {
  border-bottom: 4px solid var(--eggplant);
  width: 100%;
}
.icp:last-child { border-bottom: none; }
.icp__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  gap: 20px;
}
.icp__summary::-webkit-details-marker { display: none; }
.icp__title {
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.icp__icon {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--eggplant);
  flex-shrink: 0;
}
.icp__icon--minus { display: none; }
.icp[open] .icp__icon--plus { display: none; }
.icp[open] .icp__icon--minus { display: block; }
.icp__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
  padding: 0 50px 30px;
}

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — Philosophy statement (repurposed press-bar bg)
   ══════════════════════════════════════════════════════════════ */
.philosophy-section {
  position: relative;
  overflow: hidden;
  background: var(--golden-yellow);
  padding: clamp(50px, 6.94vw, 100px) 80px;
  display: flex;
  justify-content: center;
}
.philosophy-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.philosophy-section__bg img {
  position: absolute;
  left: 9.69%;
  top: 18.28%;
  width: 42.09%;
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
}
.philosophy-section__inner {
  position: relative;
  display: flex;
  gap: 20px;
  max-width: 1280px;
  width: 100%;
}
.philosophy-section__headline {
  flex: 1;
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.philosophy-section__body {
  flex: 1;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.philosophy-section__closing {
  font-weight: 700;
  font-style: italic;
  margin-top: 30px;
}

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — 3-phase Process (Plan / Personalize / Perfect)
   ══════════════════════════════════════════════════════════════ */
.process-section {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(60px, 6.94vw, 100px);
}
.process-section__title {
  max-width: 1280px;
  width: 100%;
  padding: 10px 80px clamp(70px, 8.33vw, 120px);
  margin-bottom: -44px;
  position: relative;
}
.process-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.process-phase {
  width: 100%;
  padding: clamp(60px, 6.94vw, 100px) 80px;
  display: flex;
  justify-content: center;
  position: sticky;
}
.process-phase--plan {
  background: #111111;
  border-radius: 50px 50px 0 0;
  top: 0;
  z-index: 1;
}
.process-phase--personalize {
  background: var(--turquoise);
  border-radius: 50px 50px 0 0;
  top: 120px;
  z-index: 2;
}
.process-phase--perfect {
  background: var(--hot-pink);
  border-radius: 50px;
  top: 240px;
  z-index: 3;
}
.process-phase__inner {
  max-width: 1280px;
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.process-phase__label {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-transform: uppercase;
}
.process-phase__number {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 500;
}
.process-phase__title {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  font-weight: 700;
  flex: 1;
}
.process-phase--plan .process-phase__label,
.process-phase--plan .process-phase__body { color: var(--peach); }
.process-phase--personalize .process-phase__label,
.process-phase--personalize .process-phase__body,
.process-phase--perfect .process-phase__label,
.process-phase--perfect .process-phase__body { color: var(--eggplant); }
.process-phase__body {
  flex: 1;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
}
.process-phase__body p { margin-bottom: 20px; }
.process-phase__body p:last-child { margin-bottom: 0; }
.process-phase__body ul { list-style: disc; margin: 0 0 20px 27px; }
.process-phase__body ul:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — Portfolio Teaser
   ══════════════════════════════════════════════════════════════ */
.portfolio-teaser {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(70px, 9.03vw, 130px) 80px clamp(60px, 6.94vw, 100px);
}
.portfolio-teaser__inner {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.portfolio-teaser__headline {
  width: 100%;
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 10px;
}
.portfolio-teaser__row {
  display: flex;
  gap: 40px;
  width: 100%;
}
.case-study {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.case-study__image {
  position: relative;
  height: 401px;
  width: 100%;
  overflow: hidden;
}
.case-study__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-study__image--ramshorn img { object-position: 50% 60%; }
.case-study__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: var(--eggplant);
  text-transform: uppercase;
}
.case-study__name {
  flex: 1;
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
}
.case-study__arrow {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 500;
}
.portfolio-teaser__cta {
  padding-top: 40px;
}

/* ══════════════════════════════════════════════════════════════
   RESIDENTIAL — FAQ
   ══════════════════════════════════════════════════════════════ */
.faq-section {
  position: relative;
  background: var(--golden-yellow);
  padding: clamp(60px, 6.94vw, 100px) clamp(40px, 8.33vw, 120px) clamp(100px, 12.5vw, 180px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.faq-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.faq-section__bg img {
  position: absolute;
  left: 1.46%;
  top: 4.74%;
  width: 50.77%;
  max-width: none;
  height: auto;
  opacity: 0.2;
}
.faq-section__container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.faq-section__sidebar {
  width: 445px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 19px;
  color: var(--eggplant);
}
.faq-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  text-transform: uppercase;
  font-weight: 700;
}
.faq-section__note {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
}
.faq-section__list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.faq {
  width: 100%;
  border-bottom: 4px solid var(--eggplant);
}
.faq:first-child {
  border-top: 4px solid var(--eggplant);
}
.faq[open] {
  padding-top: 14px;
  padding-bottom: 44px;
}
.faq__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 23.5px 0;
}
.faq[open] .faq__summary { padding: 20px 0; }
.faq__summary::-webkit-details-marker { display: none; }
.faq__question {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  font-weight: 700;
}
.faq__arrow {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--eggplant);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq[open] .faq__arrow { transform: rotate(180deg); }
.faq__answer {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
  max-width: 691px;
}
.faq-section__note-link {
  text-decoration: underline;
  transition: color 0.2s;
}
.faq-section__note-link:hover { color: var(--hot-pink); }

/* ══════════════════════════════════════════════════════════════
   SHARED UTILITY (inner pages)
   ══════════════════════════════════════════════════════════════ */
.btn--pink-on-dark {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border-radius: 4px;
  padding: 14px 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.btn--pink-on-dark:hover { opacity: 0.85; }

.btn--eggplant-on-ivory {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--eggplant);
  border-radius: 4px;
  padding: 14px 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.btn--eggplant-on-ivory:hover { opacity: 0.85; }

.page-body { padding-top: 86px; }

.container { max-width: 1280px; margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Placeholder helper (keep for inner pages) */
.placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(82, 0, 38, 0.25);
  color: rgba(82, 0, 38, 0.4);
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  aspect-ratio: 16 / 9;
  padding: 1rem;
}
.placeholder-box--dark {
  border-color: rgba(255, 252, 235, 0.25);
  color: rgba(255, 252, 235, 0.5);
}

/* Inner page footer (3-col) */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(82, 0, 38, 0.12);
  margin-bottom: 2rem;
}
.site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer__nav-col a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 252, 235, 0.7);
}
.site-footer__nav-col a:hover { color: var(--ivory); }
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer__copyright {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(82, 0, 38, 0.08);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(82, 0, 38, 0.4);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   VIDEO LIGHTBOX
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   PRESS & AWARDS MODAL
   Opened by the "As Featured In" bar. Built off .video-lightbox's
   shape (fixed inset-0, opacity + pointer-events toggle on .is-open)
   so it opens and closes with the same feel as the other two
   overlays, but on the ivory ground the long-form copy needs.
   ══════════════════════════════════════════════════════════════ */
.press-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(82, 0, 38, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.press-modal.is-open {
  opacity: 1;
  pointer-events: all;
}
.press-modal__close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 2;
  border: 0;
  background: none;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.press-modal__close:hover { color: var(--hot-pink); }
.press-modal__inner {
  background: var(--ivory);
  border-radius: 10px;
  max-width: 760px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(32px, 4.5vw, 60px);
}
.press-modal__title {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 52px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.press-modal__subhead {
  font-family: var(--font-label);
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--eggplant);
  opacity: 0.6;
  margin-bottom: 10px;
}
.press-modal__subhead + .press-modal__list { margin-bottom: 40px; }
.press-modal__list {
  list-style: none;
  padding: 0;
}
/* Placements inside one award year. Deliberately a list, not prose: a visitor
   scanning for "did they win anything for kitchens" should find it without
   reading a sentence. */
.press-credit__wins {
  margin-top: 12px;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.press-credit__wins li { padding-left: 18px; position: relative; }
.press-credit__wins li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 2px;
  background: var(--eggplant);
}
.press-credit__wins b { font-weight: 600; }
.press-credit {
  border-top: 4px solid var(--eggplant);
  padding: 20px 0 28px;
}
.press-credit:last-child { padding-bottom: 0; }
/* Outlet and year share a line: the year is the thing that makes the claim
   checkable, so it sits with the name rather than buried in the description. */
.press-credit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eggplant);
}
.press-credit__meta span {
  font-size: 0.75em;
  letter-spacing: 2px;
  opacity: 0.65;
}
.press-credit__desc {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.press-credit__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}
.press-credit__link:hover { color: var(--hot-pink); }

/* Once the panel is wider than the gap the close button sits in, the ivory ✕
   lands on the ivory panel and disappears. Below 900px the panel fills the
   viewport, so the overlay grows a top gutter to keep the ✕ on the eggplant. */
@media (max-width: 900px) {
  .press-modal { padding: 76px 16px 24px; align-items: flex-start; }
  .press-modal__close { top: 18px; right: 16px; }
}

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.video-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 28px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 2;
}
.video-lightbox__close:hover { opacity: 1; }
.video-lightbox__inner {
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
}
.video-lightbox__video {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   HOSPITALITY — 6-Stage Process List (Planning → Builder Coordination)
   Row: 60px/90px combined padding | Number: Tusker 65px pink
   ⚠ ALL rows are ivory; peach is HOVER ONLY (Eli, 2026-07-15). The original
   Figma had row 2 permanently peach — that was deliberately removed. It got
   re-added in error on 2026-08-05 and removed again the same day. Do not
   reinstate it from a mockup without asking; see CONTEXT.md.
   ══════════════════════════════════════════════════════════════ */
.process-list {
  border-top: 4px solid var(--eggplant);
  border-bottom: 4px solid var(--eggplant);
  background: var(--ivory);
  position: relative;
  z-index: 2;
}
.process-list__row {
  border-bottom: 4px solid var(--eggplant);
  padding: clamp(30px, 4.17vw, 60px) clamp(30px, 6.25vw, 90px);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--ivory);
  transition: background 0.25s ease;
}
.process-list__row:last-child { border-bottom: none; }
/* White by default; peach only on hover */
.process-list__row:hover { background: var(--peach); }
.process-list__left {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.process-list__number {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--hot-pink);
  text-align: right;
  white-space: nowrap;
  text-transform: uppercase;
}
.process-list__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(22px, 2.78vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.5px;
  color: var(--eggplant);
  text-transform: uppercase;
}
.process-list__desc {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
/* Icon + connector are a DESKTOP-ONLY layer. Hidden here so the ≤900px
   rendering stays byte-identical to the pre-redesign mobile view; the
   min-width:901px block below is the only place they are turned on. */
.process-list__icon,
.process-list__link { display: none; }

/* ══════════════════════════════════════════════════════════════
   HOSPITALITY — process list, DESKTOP zig-zag
   Icon and copy alternate sides down the list (odd = icon left,
   even = icon right) and a Z-shaped rule links each stage's icon
   column to the next. Everything here is scoped to ≥901px so the
   mobile stack is untouched.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .process-list__row {
    --pl-pad: clamp(30px, 6.25vw, 90px);
    --pl-gap: 60px;
    /* horizontal centre of each icon column, measured from the row's left
       edge — the connector and the icons both hang off these two numbers */
    --pl-c1: calc(var(--pl-pad) + (100% - 2 * var(--pl-pad) - var(--pl-gap)) / 4);
    --pl-c2: calc(100% - var(--pl-c1));

    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pl-gap);
    align-items: start;
    /* the zig-zag reads as the structure; interior rules would fight it */
    border-bottom: none;
  }
  /* Copy stacks: number + title on one line, paragraph beneath */
  .process-list__left { grid-column: 2; grid-row: 1; align-items: baseline; gap: 14px; }
  .process-list__desc { grid-column: 2; grid-row: 2; margin-top: 18px; }
  .process-list__icon {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    width: clamp(180px, 24vw, 345px);
    height: auto;
  }
  /* Even stages mirror — copy left, icon right */
  .process-list__row:nth-child(even) .process-list__left,
  .process-list__row:nth-child(even) .process-list__desc { grid-column: 1; }
  .process-list__row:nth-child(even) .process-list__icon { grid-column: 2; }

  .process-list__number { font-size: 30px; line-height: 1; letter-spacing: -1px; }
  .process-list__title { flex: 0 1 auto; font-size: 30px; }

  /* ── Connector: down out of this icon column, across, down into the next ── */
  .process-list__link {
    display: block;
    position: absolute;
    left: var(--pl-c1);
    width: calc(var(--pl-c2) - var(--pl-c1));
    top: calc(100% - 55px);
    height: 55px;
    border-left: 2px solid var(--eggplant);
    border-bottom: 2px solid var(--eggplant);
    pointer-events: none;
    /* The connector overhangs into the NEXT row, which is position:relative and
       opaque — without this it gets painted over below the row boundary. */
    z-index: 1;
  }
  .process-list__link::before,
  .process-list__link::after { content: ''; position: absolute; }
  /* second drop, into the next row's icon column */
  .process-list__link::before {
    left: 100%;
    top: 100%;
    height: 42px;
    border-left: 2px solid var(--eggplant);
  }
  /* arrowhead, centred on that 2px line */
  .process-list__link::after {
    left: 100%;
    top: calc(100% + 42px);
    margin-left: -5px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--eggplant);
  }
  /* Even stages run right-to-left: start the drop on the other end */
  .process-list__row:nth-child(even) .process-list__link {
    border-left: none;
    border-right: 2px solid var(--eggplant);
  }
  .process-list__row:nth-child(even) .process-list__link::before,
  .process-list__row:nth-child(even) .process-list__link::after { left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   HOSPITALITY — Portfolio Teaser ("We don't mean to brag, but...")
   2x2 grid of case-study cards, 401px tall images, 40px column gap
   ══════════════════════════════════════════════════════════════ */
.portfolio-teaser {
  background: var(--ivory);
  padding: clamp(70px, 9.03vw, 130px) 80px clamp(60px, 6.94vw, 100px);
  display: flex;
  justify-content: center;
}
.portfolio-teaser__inner {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portfolio-teaser__header {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 30px;
}
.portfolio-teaser__headline {
  flex: 1;
  min-width: 280px;
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.portfolio-teaser__intro {
  flex: 1;
  min-width: 280px;
  max-width: 598px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.portfolio-teaser__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 20px;
}
.portfolio-teaser__card {
  display: block;
  text-decoration: none;
}
.portfolio-teaser__card-img {
  height: 401px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.portfolio-teaser__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.portfolio-teaser__card-img--boychik img {
  object-position: 50% 72%;
}
.portfolio-teaser__card-name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  text-transform: uppercase;
}
.portfolio-teaser__card-name span:first-child {
  flex: 1;
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  color: var(--eggplant);
  font-weight: 700;
}
.portfolio-teaser__card-arrow {
  font-family: var(--font-label);
  font-size: 40px;
  color: var(--eggplant);
  line-height: 38px;
}
.portfolio-teaser__cta {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

/* ══════════════════════════════════════════════════════════════
   HOSPITALITY — "Hospitality Starts from The Heart"
   Eggplant bg, text col + full-bleed photo col
   ══════════════════════════════════════════════════════════════ */
.heart-section {
  background: var(--eggplant);
  padding: clamp(60px, 8.33vw, 120px) 0;
  display: flex;
  justify-content: center;
}
.heart-section__inner {
  max-width: 1280px;
  width: 100%;
  padding: 0 80px;
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.heart-section__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.heart-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--peach);
  text-transform: uppercase;
  font-weight: 700;
}
.heart-section__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--peach);
}
.heart-section__photo-col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
}
.heart-section__photo-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn--pink-peach-text { color: var(--peach); }

/* ══════════════════════════════════════════════════════════════
   ABOUT — TEAM
   padding: 120px 80px 122px | headline: Tusker 65px, max-w 735px
   Cards: 571px tall, gap 40px — Eli/Gillian flex:1, Melissa fixed 400px
   ══════════════════════════════════════════════════════════════ */
.team-section {
  background: var(--ivory);
  padding: 120px 80px 122px;
}
.team-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.team-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  max-width: 735px;
  padding: 10px 0;
  margin-bottom: 20px;
}
.team-section__headline span { color: var(--turquoise); }

.team-cards {
  display: flex;
  gap: 40px;
  height: 571px;
}
.team-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 40px;
}
.team-card--eli { flex: 1; background: var(--hot-pink); }
.team-card--melissa { flex: 1; background: var(--golden-yellow); }
.team-card--gillian { flex: 1; background: var(--turquoise); }

.team-card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  mix-blend-mode: multiply;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-card__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  text-transform: uppercase;
  white-space: nowrap;
}
.team-card--eli .team-card__header { align-items: center; }
.team-card__name {
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
}
/* "Gillian Scheer" is longer than the other names and overflows the fixed-width card at 25px */
.team-card--gillian .team-card__name { font-size: 21px; }
.team-card__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* Names and titles are ivory over the photo on every card */
.team-card__name,
.team-card__title { color: var(--ivory); }

/* Polygon corner accents — ivory triangles anchored to each card's own
   top-left + bottom-right corners (diagonal cut). Static, no hover fade. */
.team-card__poly {
  position: absolute;
  width: 124px;
  height: 85px;
  pointer-events: none;
  z-index: 1;
}
.team-card__poly--tl { top: 0; left: 0; }
.team-card__poly--br { bottom: 0; right: 0; transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════
   ABOUT — IDEOLOGY + STATS (golden-yellow, two-column)
   padding: 120px 80px | left: headline+body+CTA | right: photo+3 stat rows
   ══════════════════════════════════════════════════════════════ */
.about-ideology-section {
  background: var(--golden-yellow);
  padding: 120px 80px;
}
.about-ideology-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.about-ideology-section__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 10px 0;
}
.about-ideology-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.about-ideology-section__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.about-ideology-section__body p:not(:last-child) { margin-bottom: 30px; }

.btn--about-cta {
  font-family: var(--font-label);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border-radius: 4px;
  padding: 24px 50px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-bottom: 4px solid var(--eggplant);
  border-left: 4px solid var(--eggplant);
  transition: opacity 0.2s;
}
.btn--about-cta:hover { opacity: 0.85; }
/* About ideology CTA: shrink to content width (not full-column) and center it */
.about-ideology-section__col .btn--about-cta { align-self: center; }

.about-ideology-section__photo-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-ideology-section__photo {
  width: 100%;
  height: 922.5px;
  overflow: hidden;
}
.about-ideology-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-stat {
  border-bottom: 4px solid var(--eggplant);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 23.5px 0;
}
.about-stat__number {
  flex: 1;
  min-width: 0;
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.about-stat__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 17px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eggplant);
}

/* Press bar directly below the ideology section — same yellow bg, divided by a border */
.press-bar--divider { border-top: 4px solid var(--eggplant); }

/* ══════════════════════════════════════════════════════════════
   CONTACT — Hero gradient (turquoise tint instead of eggplant)
   ══════════════════════════════════════════════════════════════ */
.hero__gradient--turquoise {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 68.75%),
    linear-gradient(90deg, rgba(30,217,210,0.5) 0%, rgba(30,217,210,0.5) 100%);
}

/* ══════════════════════════════════════════════════════════════
   CONTACT — We're Based in Denver Colorado
   padding: 310px(top) 80px 122px(bottom) | headline+body 2-col, gap 131px
   Horse silhouette decoration: Figma-exact percentages within section
   ══════════════════════════════════════════════════════════════ */
.location-section {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  padding: clamp(100px, 15vw, 216px) 80px clamp(100px, 15vw, 216px);
  display: flex;
  justify-content: center;
}
.location-section__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.location-section__deco img {
  position: absolute;
  left: 23.77%;
  top: -0.52%;
  width: 59.81%;
  height: 144.16%;
  max-width: none;
  object-fit: contain;
  object-position: top;
  display: block;
}
.location-section__inner {
  position: relative;
  display: flex;
  gap: clamp(24px, 9.1vw, 131px);
  max-width: 1280px;
  width: 100%;
}
/* Left column: headline stacked over the social row. Was a bare <h2> as a direct
   flex child of __inner; it is wrapped now so the icons hang off the headline
   rather than becoming a third column. */
.location-section__col {
  flex: 1;
  min-width: 0;
}
.location-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.location-section__body {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}
.location-section__body p:not(:last-child) { margin-bottom: 30px; }
.location-section__closing {
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  text-transform: uppercase;
  font-weight: 700;
}
/* Address links out to Google Maps. No standing underline: at 25px Tusker caps
   the address wraps to four lines on a phone, and a 2px rule under each of them
   reads as a mistake. The ↗ carries the affordance instead, which is the same
   signal .service-card__name and .site-footer__nav already use. */
.location-section__map-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.location-section__map-link:hover {
  color: var(--hot-pink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.location-section__map-link .arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8em;
  transform: translateY(-0.08em);
  margin-left: 4px;
}

.location-section__phone {
  margin-top: 12px;
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 30px;
  text-transform: uppercase;
  font-weight: 700;
}
.location-section__phone a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.location-section__phone a:hover { color: var(--hot-pink); }

/* Social row — eggplant on ivory, 54px boxes, 24px icon grid inside.
   Icons are inline SVG using currentColor, so the eggplant and the hover
   flip to hot pink are both handled here rather than in five separate files. */
.location-section__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
  padding: 0;
}
.location-section__social a {
  display: flex;
  width: 54px;
  height: 54px;
  color: var(--eggplant);
  transition: color 0.25s ease, transform 0.25s ease;
}
.location-section__social svg {
  width: 100%;
  height: 100%;
  display: block;
}
.location-section__social a:hover {
  color: var(--hot-pink);
  transform: translateY(-3px);
}
.location-section__social a:focus-visible {
  outline: 2px solid var(--hot-pink);
  outline-offset: 4px;
  border-radius: 11px;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT — Give Us a Call / General Inquiries
   golden-yellow bg + mix-blend-multiply photo | 2-col: call info + form
   ══════════════════════════════════════════════════════════════ */
.contact-call-section {
  position: relative;
  overflow: hidden;
  background: var(--golden-yellow);
  padding: clamp(60px, 8.33vw, 120px) 80px;
  display: flex;
  justify-content: center;
  scroll-margin-top: 86px;
}
.contact-call-section__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* This asset (unlike the old opaque white-backed photo) is a real
     alpha-transparent PNG already drawn in the target red, so it composites
     straight over the yellow bg — no mix-blend-multiply trick needed. */
}
.contact-call-section__deco img {
  position: absolute;
  left: 6.22%;
  top: 16.13%;
  /* 75% of the original box (46.23%/84.53% = 61.64%/112.7% × 0.75) — this
     asset's full-color photo + red phone + tag reads as a bold foreground
     sticker at full size/opacity. Shrinking it and fading it down (see
     opacity below) pushes it back into the yellow bg the way the flat,
     translucent gnome silhouette did before it. */
  width: 46.23%;
  height: 84.53%;
  max-width: none;
  object-fit: contain;
  object-position: top;
  opacity: 0.45;
  display: block;
}
.contact-call-section__inner {
  position: relative;
  display: flex;
  gap: 40px;
  max-width: 1280px;
  width: 100%;
  align-items: flex-start;
}
.contact-call-section__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 10px 0;
}
.contact-call-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.contact-call-section__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
  max-width: 412px;
}

.contact-form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.contact-field {
  position: relative;
  border: 3px solid var(--eggplant);
  width: 100%;
}
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  padding: 30px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--eggplant);
  outline: none;
}
.contact-field textarea { height: 194px; resize: none; }
.contact-field label {
  position: absolute;
  left: 30px;
  top: 30px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--eggplant);
  pointer-events: none;
  transition: opacity 0.15s;
}
.contact-field__required { color: #EB5757; font-size: 18px; line-height: 1; }
.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label { opacity: 0; }

.btn--about-cta--block {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT — Do You Think You Have What It Takes?
   ivory bg | photo col (750px tall) + text col, both max-w 800px
   ══════════════════════════════════════════════════════════════ */
.contact-apply-section {
  background: var(--ivory);
  display: flex;
  justify-content: center;
}
.contact-apply-section__photo {
  flex: 1;
  max-width: 800px;
  min-width: 0;
  height: clamp(360px, 52.1vw, 750px);
}
.contact-apply-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-apply-section__col {
  flex: 1;
  max-width: 800px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: clamp(40px, 4.86vw, 70px);
}
.contact-apply-section__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
}
.contact-apply-section__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO PAGE — Current Projects teaser + filterable grid
   Rendered from PORTFOLIO_PROJECTS (js/portfolio-data.js) — see
   renderPortfolioGrid() in js/main.js.
   ══════════════════════════════════════════════════════════════ */
.portfolio-current {
  background: var(--ivory);
  padding: clamp(60px, 6.94vw, 100px) 80px;
}
.portfolio-current__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.portfolio-current__eyebrow {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hot-pink);
  margin-bottom: 12px;
}
.portfolio-current__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 3.5vw, 48px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--eggplant);
  font-weight: 700;
  margin-bottom: 40px;
}
.portfolio-current__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.portfolio-section {
  background: var(--ivory);
  padding: 0 80px clamp(60px, 6.94vw, 100px);
}
.portfolio-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(82, 0, 38, 0.15);
  padding-top: clamp(56px, 6vw, 88px);
}
.portfolio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  margin-bottom: 40px;
}
.portfolio-filter-bar__btn {
  font-family: var(--font-headline);
  font-size: 25px;
  line-height: 72px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.portfolio-filter-bar__btn:hover { color: var(--hot-pink); }
.portfolio-filter-bar__btn.is-active {
  color: var(--hot-pink);
}

/* ── Browse-by-space chips (second filter dimension) ────────────
   ⚠ These were outlined Inter pills until 2026-08-13. Eli: "make them the
   same as the main selectable items but smaller" — so they are now the
   category row's rule set at a smaller size: Tusker, uppercase, no box,
   colour alone carrying state. Do not reintroduce a border, a radius or a
   filled active pill; the whole point is that the two rows read as one
   control at two levels, not as two different widgets.

   The hierarchy that motivated the old pills still has to hold, and here it
   comes from size and weight instead of shape: 16px against the category
   row's 25px, and a lighter letter-spacing. The category row stays the
   loudest thing on the page.

   Sizing note: the chips have no padding box any more, so the row's `gap`
   IS the whole visual separation. 28px is the category row's 48px scaled by
   the same 16/25 ratio; drop it much below that and adjacent chips read as
   one string of words. */
.portfolio-space-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: -16px 0 40px;
}
.portfolio-space-bar__btn {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eggplant);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
/* Both of these override the UA sheet's `[hidden]{display:none}`, which loses
   on specificity to the `display:flex`/`display:inline-block` rules above.
   The bar itself hides under Hospitality — residential-only taxonomy. */
.portfolio-space-bar[hidden] { display: none; }
.portfolio-space-bar__btn[hidden] { display: none; }
.portfolio-space-bar__btn:hover { color: var(--hot-pink); }
.portfolio-space-bar__btn.is-active { color: var(--hot-pink); }

.portfolio-grid__empty {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(82, 0, 38, 0.6);
  text-align: center;
  margin: 0 0 32px;
}
/* Shown only in the photo view — "103 photos — kitchens across 10 projects".
   Without it a space chip silently turns 20 project cards into 103 photos
   with nothing saying what you are now looking at. */
.portfolio-grid__count {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(82, 0, 38, 0.55);
  text-align: center;
  margin: -16px 0 28px;
}
.portfolio-grid__count[hidden] { display: none; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.portfolio-item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--peach);
  cursor: pointer;
}
.portfolio-item--no-image { cursor: default; }
.portfolio-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-item[data-category="hospitality"].portfolio-item--no-image { background: var(--golden-yellow); }
.portfolio-item[data-category="residential"].portfolio-item--no-image { background: var(--turquoise); }
.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 38, 38, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.portfolio-item--no-image .portfolio-item__overlay { opacity: 1; }
.portfolio-item:hover .portfolio-item__overlay { opacity: 1; }
.portfolio-item__name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase;
  color: var(--ivory);
  line-height: 1.1;
}
.portfolio-item__category {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-top: 8px;
  color: var(--turquoise);
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO LIGHTBOX — click a grid item, scroll a 2-col photo grid
   ══════════════════════════════════════════════════════════════ */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.portfolio-lightbox__panel {
  background: var(--ivory);
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.portfolio-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 2px solid var(--eggplant);
  flex-shrink: 0;
}
.portfolio-lightbox__name {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  color: var(--eggplant);
}
.portfolio-lightbox__close {
  font-size: 22px;
  color: var(--eggplant);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.portfolio-lightbox__close:hover { opacity: 1; }
.portfolio-lightbox__grid {
  overflow-y: auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.portfolio-lightbox__grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
/* Opening from a space tile scrolls the gallery to the photo that was
   clicked; this says which one it was. `outline` rather than `border`
   deliberately — a border would change the box and reflow the whole grid
   under the scroll position main.js just computed. */
.portfolio-lightbox__grid img.is-focused {
  outline: 3px solid var(--hot-pink);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   CAREERS PAGE — perks (peach) + apply (golden yellow)
   Matches the About page: 120px/80px section padding, 1280px inner,
   headline clamp(32→65px) uppercase, body 18/30.
   ══════════════════════════════════════════════════════════════ */
.careers-perks {
  background: var(--peach);
  padding: 120px 80px;
}
.careers-perks__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.careers-perks__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.107;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  max-width: 735px;
  margin-bottom: 64px;
}
.careers-perks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.careers-perk {
  border-top: 2px solid var(--eggplant);
  padding-top: 24px;
}
.careers-perk__title {
  font-family: var(--font-headline);
  font-size: clamp(22px, 1.7vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.careers-perk__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
}

/* Apply section (yellow) — text left, image right */
.careers-apply {
  background: var(--golden-yellow);
  padding: 120px 80px;
}
.careers-apply__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 64px;
}
.careers-apply__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.careers-apply__headline {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.51vw, 65px);
  line-height: 1.058;
  letter-spacing: -2px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 24px;
}
.careers-apply__subhead {
  font-family: var(--font-headline);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--eggplant);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.careers-apply__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.3px;
  color: var(--eggplant);
  margin-bottom: 12px;
  max-width: 560px;
}
.careers-apply__social {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  color: var(--eggplant);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.careers-apply__photo {
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.careers-apply__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .careers-perks,
  .careers-apply { padding: 72px 24px; }
  .careers-perks__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .careers-perks__headline { margin-bottom: 48px; }
  .careers-apply__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .careers-apply__photo { min-height: 420px; }
}
@media (max-width: 560px) {
  .careers-perks__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — NAVIGATION (added 2026-07-29)

   The nav was built at the 1440px canvas and never given mobile rules:
   80px of padding a side plus a 157px logo plus the full-size CTA came
   to more than a phone is wide, so "Book a Call" was pushed off-screen
   and dragged the whole document's width with it (about.html measured
   720px of scrollWidth against a 375px viewport).

   The CTA is deliberately NOT hidden on mobile — it is the site's
   primary conversion action and mobile is where most of the traffic is.
   It shrinks instead.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .site-nav { padding: 10px 32px; gap: 16px; }
  .site-nav__logo { width: 128px; height: 54px; }
  .btn--nav-cta {
    font-size: 15px;
    letter-spacing: 1.5px;
    padding: 12px 18px;
    box-shadow: -5px 5px 0px var(--cta-ink);
  }
  .btn--nav-cta:hover { box-shadow: -3px 3px 0px var(--cta-ink); }
}

@media (max-width: 560px) {
  .site-nav { padding: 8px 16px; gap: 10px; }

  /* 44×44 tap target (Apple/WCAG minimum) while the bars stay 32px wide —
     border-box means the padding eats into the box, not out from it. */
  .site-nav__hamburger {
    width: 44px;
    height: 44px;
    padding: 11px 6px;
    gap: 5px;
  }

  .site-nav__logo { width: 96px; height: 40px; }

  .btn--nav-cta {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 11px 12px;
    box-shadow: -4px 4px 0px var(--cta-ink);
  }
  .btn--nav-cta:hover { box-shadow: -2px 2px 0px var(--cta-ink); }

  /* Drawer: 10 links + close button can outrun a short phone, so let it
     scroll rather than clip the portal links off the bottom. */
  .nav-drawer {
    padding: 1.75rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-drawer__close { margin-bottom: 1rem; font-size: 1.75rem; }
  .nav-drawer__portals { margin-top: 1.5rem; padding-top: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — PAGE CONTENT (added 2026-07-29, session 2)

   The nav pass (block above) fixed the bar. This block covers
   everything below it. Before this, style.css had 16 lines of
   responsive CSS and they only touched the careers page — every
   section still ran the 1440px canvas geometry at 375px and was
   silently clipped by `body { overflow-x: hidden }`.

   MEASURED WITH tools/mobile-harness.html at true 375/390/430px
   layout viewports. Do NOT trust resize_window for this — see the
   gotcha note in that file and in CONTEXT.md.

   Gutter scale (matches the nav's 32/16px bar padding):
     ≤900px → 40px      ≤560px → 24px
   ══════════════════════════════════════════════════════════════ */

/* ── Shared: hero ─────────────────────────────────────────────
   The rotated side-labels sit at left/right:82px, which at phone
   widths puts them straight through the centered headline. They
   are brand copy, not decoration, so they move to the edges and
   shrink rather than getting hidden; the headline gets matching
   inner padding so the two can't collide. */
@media (max-width: 900px) {
  .hero { height: 560px; }
  .hero__content { padding: 0 34px; }
  /* rotate() pivots about the element's CENTRE, so on a ~147px-wide label
     `left: 6px` puts the visual edge at 74px — a third of the way across a
     phone, straight through the headline. writing-mode makes the box
     genuinely tall-and-narrow, so left/right mean what they say and the
     labels sit on the bezel. The left one reads bottom-to-top, which is
     vertical-rl turned 180°. */
  .hero__vert {
    font-size: 12px;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
  }
  .hero__vert--left  { left: 6px;  transform: translateY(-50%) rotate(180deg); }
  .hero__vert--right { right: 6px; transform: translateY(-50%); }
  .hero__scroll { width: 64px; height: 64px; bottom: -32px; }
  .hero__scroll img { width: 64px; height: 64px; }
  .hero__scroll-arrow { font-size: 18px; }
}
@media (max-width: 560px) {
  .hero { height: 480px; }
  .hero__vert { font-size: 11px; letter-spacing: 1.5px; }
}

/* ── Shared: video section + CTA bar ──────────────────────────
   cta-bar is text | button | text on one row at a 100px gap; that
   alone was 47px of the homepage's overflow. It stacks instead. */
@media (max-width: 900px) {
  .video-section { padding: 0 24px; margin-top: -40px; }
  .video-section__inner { padding: 28px; gap: 28px; }
  .video-section__media { height: 420px; }
  .video-section__play,
  .video-section__play img { width: 120px; height: 120px; }
  .cta-bar { flex-direction: column; gap: 20px; padding: 8px 0; }
  .btn--cta-bar { padding: 18px 32px; font-size: 15px; letter-spacing: 1.5px; }
}
@media (max-width: 560px) {
  .video-section { padding: 0 16px; }
  .video-section__inner { padding: 20px; gap: 20px; }
  .video-section__media { height: 300px; }
  .video-section__play,
  .video-section__play img { width: 88px; height: 88px; }
  .cta-bar__text { font-size: 13px; letter-spacing: 2px; text-align: center; }
}

/* ── Shared: press bar / client bar ───────────────────────────
   Fixed 135px tall with a 40px-gap row; below 560 the label and
   the marquee stack, so the bar grows instead of squeezing. */
@media (max-width: 900px) {
  .press-bar__inner { padding: 0 40px; gap: 24px; }
}
@media (max-width: 560px) {
  .press-bar { height: auto; }
  .press-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
  }
  .press-bar__label { font-size: 13px; letter-spacing: 2px; }
  .press-bar__divider { width: 100%; height: 1px; }
  /* flex:1 would grow along the COLUMN axis once stacked */
  .press-bar__logos { flex: none; width: 100%; }
  .press-bar__set { gap: 40px; padding-right: 40px; }
  .press-bar__logo { height: 34px; max-width: 100px; }
  .press-bar--clients .press-bar__logo { height: 52px; }
  .press-bar--clients .press-bar__logo--mama-lolitas { height: 72px; }
  .press-bar--clients .press-bar__logo--supper-club { height: 30px; }
}

/* ── Shared: guide / lead magnet ──────────────────────────────
   Book column is a fixed 673×865 image and the form column a
   fixed 610px — 1283px of content. Both go fluid and stack.
   The book column is capped and centered so the book stays a
   reasonable size. The "FREE GUIDE" badge needs no override here
   any more — it's positioned in percent against .guide-section__book-wrap
   (see the desktop rule), so it rides along at the same relative
   spot on the book cover as book-wrap goes fluid below. Padding-top
   is well past 900px's nav height (~75px) so the section doesn't
   start flush under the fixed nav. */
@media (max-width: 900px) {
  /* Bottom padding: the section's -62px margin-bottom (pulls ideology-section
     up to overlap it) was calibrated against desktop's spacious 155px bottom
     padding (93px left over). At 80px it left only ~18px, and the mobile
     breakpoints below shrink it further — 82px keeps a steady 20px of clear
     eggplant between the submit button and the ideology-section box, matching
     the .guide-section__form-col's own 20px rhythm (body copy → first input). */
  .guide-section { padding: 120px 40px 82px; }
  .guide-section__inner { flex-direction: column; gap: 40px; }
  .guide-section__subtract { display: none; }
  .guide-section__book { padding: 0; width: 100%; max-width: 420px; margin: 0 auto; }
  .guide-section__book-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 673 / 865;
  }
  .guide-section__badge-circle { width: 110px; height: 110px; }
  .guide-section__badge-text { font-size: 15px; line-height: 18px; letter-spacing: 1.4px; }
  .guide-section__form-col { width: 100%; }
  .guide-section__headline {
    width: 100%;
    font-size: clamp(34px, 8vw, 52px);
    line-height: 1.1;
  }
  .guide-section__body { width: 100%; }
}
@media (max-width: 560px) {
  /* Top padding clears the fixed nav (~61px here) with real breathing room —
     64px left only ~3px of visible gap, reading as flush/crowded. Bottom
     padding: same 82px as the 900px bucket, for the same 20px-to-ideology
     reason (see that block's comment) — this bucket's old 64px left only
     ~2px of clearance, i.e. the button was nearly touching the pink section. */
  .guide-section { padding: 100px 24px 82px; }
  .guide-form input { padding: 16px; }
  .btn--guide-submit { width: 100%; }
}

/* ── Shared: ideology band ────────────────────────────────────
   Headline is a hard 65px/72px; it needs to be fluid or "WARM
   BLANKET" alone is wider than the phone. */
@media (max-width: 900px) {
  .ideology-section { padding: 72px 40px; margin: 0 24px; }
  .ideology-section__content { gap: 28px; }
  .ideology-section__eyebrow { font-size: 17px; line-height: 1.5; letter-spacing: 2px; }
  .ideology-section__headline { font-size: clamp(34px, 8.6vw, 52px); line-height: 1.1; }
}
@media (max-width: 560px) {
  .ideology-section { padding: 56px 20px; margin: 0 16px; }
}

/* ── Shared: footer ───────────────────────────────────────────
   5 nav links at flex:1 squash to unreadable at phone widths, and
   the badge logo is absolutely positioned 100px BELOW the bottom
   row. Links wrap; the badge becomes a normal centred block at the
   top of the stack. DAAAMN keeps its negative margins in step with
   the gutter so it still bleeds edge to edge. */
@media (max-width: 900px) {
  .site-footer { padding: 48px 40px 0; }

  /* Eli 2026-07-29: the footer keeps its DESKTOP composition on mobile. The
     five nav links stay one row at the full 25px/72px rather than wrapping or
     shrinking, and the row scrolls sideways — 5 x 25px Tusker is ~700px and a
     phone has ~327px, so something has to give and Eli chose the scroll.
     The arrow at the right edge is the affordance; without it a cut-off row
     just looks broken. Scrollbar is hidden because the arrow IS the signal. */
  .site-footer__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0 28px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
  }
  .site-footer__nav::-webkit-scrollbar { display: none; }
  /* flex:1 would divide the row; these need their intrinsic width to overflow */
  .site-footer__nav a { flex: none; white-space: nowrap; }

  /* Sticks to the right edge of the scrollport so it stays put as you swipe.
     The ivory pad stops the last link colliding with it mid-scroll. */
  .site-footer__nav-arrow {
    display: flex;
    align-items: center;
    position: sticky;
    right: 0;
    flex: none;
    align-self: stretch;
    padding-left: 30px;
    padding-right: 2px;
    font-family: var(--font-label);
    font-size: 30px;
    line-height: 1;
    color: var(--hot-pink);
    /* wide fade so the last link dissolves under it instead of being chopped */
    background: linear-gradient(to right, rgba(255,252,235,0) 0%, var(--ivory) 72%);
    /* Same ↗ glyph as the service-card markers. It points NORTH-EAST, so it
       needs +45deg (clockwise) to read as a due-east →. -45deg makes it ↑. */
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* Bottom row stays the desktop 3-part row: email left, badge logo absolutely
     centred and hanging below, copyright right. Only the type shrinks — at
     desktop's 15px the email plus the copyright are ~400px against ~327px of
     room, so they would not share a line. */
  .site-footer__bottom { padding-top: 48px; margin-bottom: 56px; gap: 16px; }
  .site-footer__handle,
  .site-footer__email { font-size: 11px; }
  .site-footer__handle, .site-footer__email { white-space: nowrap; }
  .site-footer__logo-link img { width: 200px; height: auto; }
  .site-footer__logo-link { bottom: -100px; }
  .site-footer__daaaamn { margin: 0 -40px; }
  /* Eli's call: the mid-counter crop was reading as a stray gap of ivory
     background inside the "A" shapes rather than a clean edge — the crop
     needs to land at the bottom of the crossbar instead. The A-count and
     font-size here are JS-driven (see `updateAs()` in js/main.js, which
     sizes the word to fill ~100vw and overwrites textContent AND
     style.fontSize on load/resize — a static CSS font-size or a wrapped
     span for "remove an A" gets silently clobbered by that script, which
     is why the fix for both of those lives in main.js, not here).
     `translateY` in `em` (not px, since the real font-size is fluid/JS-
     computed) shifts the glyph down by ~12% of its own font-size without
     touching `.site-footer`'s own auto-height — so the crop boundary
     itself doesn't move, only the letterform's position relative to it,
     landing the crop at the crossbar instead of the open counter above it. */
  .site-footer__daaaamn { transform: translateY(0.12em); }
}
@media (max-width: 560px) {
  .site-footer { padding: 40px 24px 0; }
  .site-footer__nav { gap: 0 20px; }
  .site-footer__handle,
  .site-footer__email { font-size: 10px; letter-spacing: -0.2px; }
  .site-footer__logo-link img { width: 168px; }
  .site-footer__logo-link { bottom: -85px; }
  .site-footer__daaaamn { margin: 0 -24px; }
}

/* ── index: services + ethos ──────────────────────────────────
   Two 649px-tall cards side by side become a stack. The four
   ivory corner polygons are positioned against that two-up row
   (hardcoded top:92px / top:584px, left:50%) — once the cards
   stack there is no such geometry to hang them on, so they drop
   out below 900px. Restoring them means re-anchoring each poly
   to its own card, the way .team-card__poly already does, which
   needs a markup change (they are siblings of the cards today). */
@media (max-width: 900px) {
  .services-section { padding: 72px 40px 80px; }
  .service-cards { flex-direction: column; height: auto; gap: 24px; }
  /* flex:1 is flex-basis:0%, which is the HEIGHT once this is a column. The
     cards' content is all absolutely positioned, so their min-content height
     is 0 and they collapsed to nothing — the whole services block rendered as
     an empty gap. flex:none hands sizing back to the height below. */
  .service-card { flex: none; height: 380px; }
  .card-poly { display: none; }
  /* ...replaced by the per-card pair added to index.html — same diagonal cut,
     but anchored to each card's own corners so it survives stacking. Mirrors
     .team-card__poly, which already works this way. */
  .service-card__poly { display: block; }
  /* Positioned at 65% down the section, which on a stacked mobile layout is
     directly behind the ethos paragraph rather than in open space. */
  .services-section__deer-wrap { display: none; }
  .ethos-row { flex-direction: column; gap: 16px; padding: 64px 0 0; }
  .copy-block { flex-direction: column; gap: 20px; }
  .about-intro { padding: clamp(48px, 8.33vw, 80px) 40px; }
  .intro-band { padding: clamp(48px, 8.33vw, 80px) 40px 0; }
  .intro-band__cols { flex-direction: column; gap: 20px; }
  .reviews-section { padding: clamp(48px, 8.33vw, 80px) 40px; }
  .reviews-section__list { flex-direction: column; gap: 28px; }
}
@media (max-width: 560px) {
  .services-section { padding: 56px 24px 64px; }
  .service-card { height: 300px; }
  .copy-block__body { font-size: 17px; line-height: 28px; }
  .copy-block__pullquote { padding-left: 16px; font-size: 18px; line-height: 29px; }
  .about-intro { padding: clamp(40px, 8.33vw, 64px) 24px; }
  .intro-band { padding: clamp(40px, 8.33vw, 64px) 24px 0; }
  .intro-band__cols p { font-size: 17px; line-height: 28px; }
  .reviews-section { padding: clamp(40px, 8.33vw, 64px) 24px; }
  .review__quote { font-size: 17px; line-height: 28px; }
  .service-card__label { bottom: 24px; left: 24px; right: 24px; }
  .service-card__name { font-size: 28px; line-height: 28px; }
  .service-card__icon { width: 84px; height: 104px; }
  .ethos-row { padding-top: 48px; }
}

/* ── residential + hospitality: DAAAMN tagline ────────────────
   The live size of this word is set INLINE by fitTaglineDaaamn()
   in js/main.js, which width-matches it to the headline above, so
   these font-size rules only take effect if that script never
   runs. The real 124px overflow was in that function, not here —
   see the Math.min() comment in main.js. The rules below still
   earn their keep as the no-JS fallback, because the base clamp()
   has a 4rem MINIMUM that overshoots a phone on its own. */
@media (max-width: 900px) {
  .tagline-section { padding: 56px 40px 0; }
  .tagline-section__daaaamn { font-size: 11vw; }
}
@media (max-width: 560px) {
  .tagline-section { padding: 44px 24px 0; }
  .tagline-section__daaaamn { font-size: 11.5vw; }
}

/* ── residential: ICP accordion + photo ───────────────────────
   The photo column is position:relative with an inset:0 image, so
   once stacked it collapses to zero height unless given one. */
@media (max-width: 900px) {
  .icp-section__row { flex-direction: column; }
  .icp-section__photo-col {
    border-left: none;
    border-top: 4px solid var(--eggplant);
    height: 320px;
    flex: none;
  }
  .icp__summary { padding: 20px 24px; gap: 12px; }
  .icp__title { font-size: 21px; line-height: 26px; }
  .icp__icon { font-size: 32px; line-height: 30px; }
  .icp__body { padding: 0 24px 24px; }
}

/* ── residential: philosophy band ─────────────────────────────
   The red halftone portrait is desktop-only. It's positioned by fixed
   % offsets against the two-column layout (`.philosophy-section__inner`
   is a row on desktop); once the column stacks it lands mid-paragraph
   with nothing anchoring it, reading as a random floating graphic
   instead of a deliberate design element. Eli's call 2026-07-31. */
@media (max-width: 900px) {
  .philosophy-section { padding: 56px 40px; }
  .philosophy-section__inner { flex-direction: column; gap: 24px; }
  .philosophy-section__bg { display: none; }
}
@media (max-width: 560px) {
  .philosophy-section { padding: 48px 24px; }
}

/* ── residential: 3-phase process ─────────────────────────────
   The sticky stacking is DESKTOP ONLY below. Stacked into one
   column the phases grow to 1067 / 1427 / 617px tall, and a
   sticky box taller than the viewport pins its top and pushes
   its own tail off the bottom of the screen. Measured on a
   667px viewport the last line of each phase only ever reached
   top:621 / 651 / 581 — visible by 16px in the worst case, and
   gone entirely on anything shorter. Static phases read fine as
   three coloured panels; the effect is not worth losing copy to.

   The label/body row also stacks, and every flex child gets
   min-width:0 — without it the bulleted list sets a min-content
   floor no padding can shrink (165px of the residential overflow). */
@media (max-width: 900px) {
  .process-section__title { padding: 10px 40px 64px; }
  .process-phase { padding: 56px 40px; position: static; }
  /* Every phase keeps its rounded top corners (matching desktop), but each
     phase after the first is pulled up by the radius amount (margin-top:
     -28px) so it physically overlaps the flat bottom edge of the phase
     before it. Later siblings paint over earlier ones by default, so the
     rounded corner's cutout now reveals the PREVIOUS phase's color behind
     it instead of the ivory page background — reads as folding over the
     card above, same as the desktop sticky-stack illusion. */
  .process-phase--plan { border-radius: 28px 28px 0 0; }
  .process-phase--personalize { border-radius: 28px 28px 0 0; margin-top: -28px; }
  .process-phase--perfect { border-radius: 28px; margin-top: -28px; }
  .process-phase__inner { flex-direction: column; gap: 24px; }
  .process-phase__label,
  .process-phase__title,
  .process-phase__body { min-width: 0; }
  .process-phase__number { font-size: 30px; line-height: 30px; }
}
@media (max-width: 560px) {
  .process-section__title { padding: 10px 24px 48px; }
  .process-phase { padding: 44px 24px; }
  .process-phase__body ul { margin-left: 20px; }
}

/* ── residential + hospitality: portfolio teaser ──────────────
   Note there are two .portfolio-teaser rule blocks in this file
   (residential's, then hospitality's, which wins on source order);
   these overrides come after both and apply to either. */
@media (max-width: 900px) {
  .portfolio-teaser { padding: 72px 40px 64px; }
  .portfolio-teaser__row { flex-direction: column; gap: 32px; }
  .portfolio-teaser__header { gap: 16px; padding-bottom: 20px; }
  .portfolio-teaser__headline,
  .portfolio-teaser__intro { min-width: 0; }
  .case-study__image { height: 300px; }
  .portfolio-teaser__card-img { height: 300px; }
}
@media (max-width: 700px) {
  .portfolio-teaser__grid { grid-template-columns: 1fr; row-gap: 8px; }
}
@media (max-width: 560px) {
  .portfolio-teaser { padding: 56px 24px 56px; }
  .case-study__image,
  .portfolio-teaser__card-img { height: 240px; }
  .portfolio-teaser__cta { padding-top: 24px; }
}

/* ── residential + hospitality: FAQ ───────────────────────────
   Sidebar is a fixed 445px sticky column; it becomes a normal
   full-width block above the list. */
@media (max-width: 900px) {
  .faq-section { padding: 56px 40px 80px; }
  .faq-section__container { flex-direction: column; gap: 32px; }
  .faq-section__sidebar { width: 100%; position: static; }
  /* Monstera scaled up to fill the yellow field instead of sitting as a
     small top-left accent. `top` is a fixed px (not %) so it stays
     anchored just under the sidebar regardless of how tall the section
     grows as FAQs open — a %-based top would drift down with the
     section's own height and the plant would never read as "big". */
  .faq-section__bg img { left: -30%; top: 90px; width: 150%; }
}
@media (max-width: 560px) {
  .faq-section { padding: 48px 24px 64px; }
  .faq__question { font-size: 15px; letter-spacing: 1.5px; }
  .faq__arrow { font-size: 30px; line-height: 30px; }
  .faq__summary { gap: 12px; }
}

/* ── hospitality: 6-stage process list ────────────────────────*/
@media (max-width: 900px) {
  .process-list__row { flex-direction: column; gap: 16px; padding: 32px 40px; }
  .process-list__left { gap: 14px; }
}
@media (max-width: 560px) {
  .process-list__row { padding: 28px 24px; }
}

/* ── hospitality: "starts from the heart" ─────────────────────
   Photo column is inset:0-absolute like the ICP one, so it also
   needs an explicit height once stacked. */
@media (max-width: 900px) {
  .heart-section { padding: 72px 0; }
  .heart-section__inner { flex-direction: column; padding: 0 40px; gap: 32px; }
  .heart-section__photo-col { height: 340px; flex: none; }
  .heart-section__col { gap: 28px; }
}
@media (max-width: 560px) {
  .heart-section { padding: 56px 0; }
  .heart-section__inner { padding: 0 24px; }
  .heart-section__photo-col { height: 260px; }
}

/* ── portfolio page ───────────────────────────────────────────
   auto-fill minmax(300px, 1fr) can't fit a 300px track inside
   375px minus 160px of gutters, so the track overflowed. The
   gutter fix alone clears it; the single-column rule below 560
   is belt and braces for the narrowest phones. */
@media (max-width: 900px) {
  .portfolio-current { padding: 56px 40px; }
  .portfolio-section { padding: 0 40px 64px; }
  .portfolio-filter-bar { gap: 0 28px; margin-bottom: 28px; }
  .portfolio-filter-bar__btn { font-size: 20px; line-height: 48px; }
  .portfolio-space-bar { margin: -12px 0 28px; gap: 4px 20px; }
  .portfolio-space-bar__btn { font-size: 15px; line-height: 30px; }
  .portfolio-current__headline { margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .portfolio-current { padding: 48px 24px; }
  .portfolio-section { padding: 0 24px 56px; }
  .portfolio-grid,
  .portfolio-current__grid { grid-template-columns: 1fr; gap: 16px; }
  .portfolio-filter-bar { gap: 0 20px; }
  .portfolio-filter-bar__btn { font-size: 18px; line-height: 40px; }
  /* Wrapped, the 10 chips stack several rows deep and eat well over 100px
     above the grid on a 390px phone. One horizontally scrollable row
     instead, and swiping a filter strip is the expected phone gesture.
     `flex: 0 0 auto` is required — in a nowrap flex row the chips would
     otherwise shrink to fit instead of overflowing into the scroller.
     Kept inside the section's 24px gutter rather than bled to the screen
     edges: `body { overflow-x: hidden }` is already masking layout on this
     site, and a negative-margin scroller is the kind of thing it hides.

     ⚠ The chips lost their padding box in the 2026-08-13 restyle, so `gap`
     is now the ONLY thing separating them — it has to be much larger here
     than the 6px the old pills needed, or the strip reads as one run-on
     sentence. Tap target comes from line-height instead. */
  .portfolio-space-bar {
    margin: -8px 0 24px;
    gap: 18px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio-space-bar::-webkit-scrollbar { display: none; }
  .portfolio-space-bar__btn {
    font-size: 14px;
    line-height: 40px;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
  }
  .portfolio-lightbox { padding: 16px 12px; }
  .portfolio-lightbox__grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .portfolio-lightbox__header { padding: 14px 16px; }
  .portfolio-lightbox__name { font-size: 16px; }
}

/* ── about: team cards ────────────────────────────────────────
   Three cards on one 571px row, the middle one pinned to a fixed
   400px — 345px past a 375px viewport, the worst offender on the
   site. Stacked, all three share a fixed aspect ratio (instead of a
   fixed height) so the photo box scales with viewport width.

   This was `aspect-ratio: 1` (square) with cover + top-aligned crop.
   On paper that only clips the bottom ~25% of each photo — plenty of
   margin below the chin. Eli confirmed on a real iPhone that heads
   were still getting cropped, which the desktop browser preview here
   never reproduced. Rather than chase the exact engine discrepancy,
   the box now matches the source photos' own ratio (1536×2048 = 3:4)
   exactly, so `object-fit: cover` has nothing to crop — a correct-by-
   construction fix regardless of what was rounding differently. */
@media (max-width: 900px) {
  .team-section { padding: 72px 40px 80px; }
  .team-cards { flex-direction: column; height: auto; gap: 24px; }
  .team-card { aspect-ratio: 3 / 4; height: auto; padding: 32px; }
}
@media (max-width: 560px) {
  .team-section { padding: 56px 24px 64px; }
  .team-card { padding: 24px; }
}

/* ── about: ideology + stats ──────────────────────────────────*/
@media (max-width: 900px) {
  .about-ideology-section { padding: 72px 40px; }
  .about-ideology-section__inner { flex-direction: column; gap: 40px; }
  .about-ideology-section__photo { height: clamp(320px, 78vw, 560px); }
  .about-ideology-section__col .btn--about-cta { align-self: flex-start; }
}
@media (max-width: 560px) {
  .about-ideology-section { padding: 56px 24px; }
  .about-stat { gap: 12px; padding: 18px 0; }
}

/* ── contact ──────────────────────────────────────────────────
   .btn--about-cta is padding 24px/50px + white-space:nowrap, so
   "Book a Discovery Call" ran 21px over on its own. */
@media (max-width: 900px) {
  .location-section { padding: clamp(88px, 13vw, 128px) 40px clamp(88px, 13vw, 128px); }
  .location-section__inner { flex-direction: column; gap: 24px; }
  /* Stacked, the icons would otherwise sit between the headline and the copy,
     pushing the address and phone further down a page a visitor is on to find
     exactly those two things. `display: contents` dissolves the left column so
     its two children become direct flex items of __inner, which is what makes
     them orderable against .location-section__body. The wrapper is a plain div
     with no semantics, so nothing is lost by removing its box. */
  .location-section__col { display: contents; }
  .location-section__headline { order: 1; }
  .location-section__body { order: 2; }
  .location-section__social { order: 3; }
  /* 48px is the floor for a tap target, so the boxes shrink to that and
     no further, and the gap tightens instead. */
  .location-section__social { gap: 12px; margin-top: 4px; }
  .location-section__social a { width: 48px; height: 48px; }
  /* Round 4: Eli mocked this up in Photoshop. The reference shows the
     horse essentially whole (only the ear-tips and hoof-tips lightly
     cropped) sized to fit within the section's own natural content
     height, overlapping the full text column — not bled through into
     the next section (that "huge scroll window" was the bleed-behind
     technique from round 3, which let the section run on far longer
     than its actual text content needed). Back to a hard crop
     (`overflow:hidden`, both axes, matching desktop's approach) sized
     so `height%` alone (the constraining dimension under
     `object-fit:contain`) renders larger than the section — the
     overshoot at `top`/bottom is what gets clipped. `width` is
     generous (200%) purely so width never becomes the constraining
     dimension instead of height.
     Round 5: the ~3% overshoot above still left the hooves fully
     visible — the halftone canvas (contact-horse-halftone.png) has
     almost no margin below them, so a light trim never reached them.
     Sized up further and biased the extra crop toward the bottom so
     the line now lands mid-cannon (above the fetlock/hoof), while the
     top overshoot stays about the same as before (ear tips only). */
  .location-section__deco img { top: -4%; left: -39%; width: 200%; height: 120%; }
  .contact-call-section { padding: 72px 40px; }
  .contact-call-section__inner { flex-direction: column; gap: 40px; }
  /* Ginny moved off the left edge (where she collided with the headline
     and CTA button) to the right side of the stacked column. `right`
     matches the section's own gutter so her right edge lines up with
     where the text content ends. `top` is pulled up from desktop's
     16.13% so she sits into the gap between the "Book a Call" CTA and
     "General Inquiries" instead of trailing lower, closer to the form. */
  .contact-call-section__deco img { left: auto; right: 40px; top: 6%; width: 64.72%; height: 118.34%; }
  /* "Give us / a Call" was a deliberate desktop two-line break; once the
     columns stack there's plenty of width to match "General Inquiries"
     on one line, so the break is suppressed rather than removed from
     markup (desktop keeps it untouched). */
  .contact-call-section__break { display: none; }
  .contact-apply-section { flex-direction: column; }
  .contact-apply-section__photo,
  .contact-apply-section__col { max-width: none; width: 100%; }
  .contact-field input,
  .contact-field textarea { padding: 22px 20px; }
  .contact-field label { left: 20px; top: 22px; }
  .contact-field textarea { height: 160px; }
}
@media (max-width: 560px) {
  .location-section { padding: clamp(74px, 13vw, 104px) 24px clamp(74px, 13vw, 104px); }
  .contact-call-section { padding: 56px 24px; }
  .contact-call-section__deco img { right: 24px; }
  .btn--about-cta {
    padding: 18px 24px;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: normal;
    text-align: center;
  }
}

/* ── Stacking guard: flex-basis is a HEIGHT once a row becomes a column ──
   Every rule above that flips a flex row to `flex-direction: column` has
   children declared `flex: 1` — i.e. `flex: 1 1 0%`. In a column that 0%
   basis is the child's height, and with no free space to grow into, the
   used height falls back to the child's min-content height.

   For text children that is harmless (the automatic minimum size floors
   them at their content height). For any child whose content is absolutely
   positioned, or whose own height is set in px, it is fatal: the box
   collapses. The homepage's two service cards vanished exactly this way.

   These are the children that need their declared height to win. Grouped
   here rather than scattered so the pattern stays visible. */
@media (max-width: 900px) {
  .service-card,                      /* content is all position:absolute  */
  .team-card,                         /* aspect-ratio:1 below             */
  .icp-section__photo-col,            /* inset:0 image                    */
  .heart-section__photo-col,          /* inset:0 image                    */
  .contact-apply-section__photo,      /* img is height:100% of the box    */
  .about-ideology-section__photo-col,
  .guide-section__book,
  .case-study {
    flex: none;
  }
}

/* ── Tap targets ──────────────────────────────────────────────
   Standalone controls that were sized purely by their glyph and
   ended up well under a finger. Inline links inside body copy
   (.faq-section__note-link, .careers-apply__social) are left as
   they are — padding them out would break the paragraphs they
   sit in, and they are not primary actions. */
@media (max-width: 900px) {
  /* 307×15 on every page — the full-width footer email link */
  /* 44px-ish tap targets — both slots are real links now. */
  .site-footer__handle,
  .site-footer__email { display: inline-block; padding: 12px 0; }

  /* Overlay close buttons: 21×28 and 17×22, both used on phones */
  .video-lightbox__close,
  .portfolio-lightbox__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-lightbox__close { top: 12px; right: 12px; }
}
@media (max-width: 900px) {
  /* standalone link, not inline in a paragraph — give it a real box */
  .careers-apply__social { display: inline-block; padding: 8px 0; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — HEADER ORDER + DRAWER ALIGNMENT
   (Eli 2026-07-29, mobile only)

   DOM order is hamburger → logo → CTA on all 8 pages. Eli wants
   logo → CTA → hamburger on phones. `order` only exists inside
   this query, so above 900px the bar is byte-for-byte unchanged —
   no markup was moved to achieve this, deliberately.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .site-nav__logo-link  { order: 1; }
  .site-nav__cta        { order: 2; }
  .site-nav__hamburger  { order: 3; }

  /* Drawer text right-aligned to match the new bar. */
  .nav-drawer__links { align-items: flex-end; text-align: right; }

  /* The Order Pizza → GOTCHA! swap stacks its two texts absolutely. Anchored
     left:0 they line up only in a left-aligned drawer; right-aligned, the
     replacement text would sit off-register from the word it replaces. */
  .nav-drawer .pizza-text--hover { left: auto; right: 0; }
  .nav-drawer__pizza { text-align: right; }
}

/* ── Footer bottom row: drop email + date on narrow phones ──────────────
   Below 480px there isn't room for the email (left) and copyright (right)
   to breathe next to the centered logo badge and the DAAAAMN watermark —
   Eli's call was to drop both entirely here rather than shrink them further
   or stack them, so the logo + watermark read as clean/uncrowded as the
   desktop version. Above 480px both still show at full string length.

   With email + copyright gone, the row below the nav links is otherwise
   empty until the logo — Eli's ask: match that gap to the one ABOVE the
   nav (`.site-footer`'s own top padding, 40px at this width).

   First pass at this got the wrong lever: it zeroed `.site-footer__bottom`'s
   padding-top and bumped nav's margin-bottom to 40px, but with the
   universal `box-sizing:border-box` reset, padding-top never added to the
   box's rendered height in the first place — `min-height:72px` alone was
   already flooring it regardless of padding, so that edit didn't change the
   visible gap at all (it just made the redundant nav margin bigger).
   The real space-eater is `min-height:72px` — a floor sized for the
   email+copyright row that's now empty, PLUS `.site-footer__logo-link`'s
   `bottom:-85px` (it hangs the badge below its own box, on purpose, so it
   overlaps the top of DAAAAMN — see the z-index fix elsewhere in this
   file). Zeroing min-height collapses the now-empty box entirely; nav's
   margin-bottom reverts to its normal 24px, restored below. Together
   those land the visible nav-to-logo gap within ~2px of the 40px target,
   without disturbing the logo/DAAAAMN overlap (untouched — same offset,
   same overlap amount, just less dead air above it). */
@media (max-width: 480px) {
  .site-footer__handle,
  .site-footer__email { display: none; }
  .site-footer__bottom { padding-top: 0; min-height: 0; }
}

/* ── Cookie consent bar ─────────────────────────────────────────
   Injected by js/analytics.js, only when no choice is stored yet.
   Gates GA4 via Consent Mode v2; Vercel Analytics is cookieless and
   runs regardless. Sits above everything, bottom-anchored. */
.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px 32px;
  background: var(--eggplant);
  border-top: 4px solid var(--hot-pink);
}
.consent-bar__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ivory);
  margin: 0;
  max-width: 62ch;
}
.consent-bar__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.consent-bar__btn {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eggplant);
  background: var(--hot-pink);
  border: none;
  border-radius: 4px;
  padding: 14px 28px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.consent-bar__btn:hover { opacity: 0.85; }
.consent-bar__btn--ghost {
  background: transparent;
  color: var(--ivory);
  box-shadow: inset 0 0 0 2px var(--ivory);
}

@media (max-width: 700px) {
  .consent-bar {
    gap: 16px;
    padding: 16px 20px;
    /* Stack, and keep the buttons reachable one-handed */
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .consent-bar__text { font-size: 14px; }
  .consent-bar__actions { justify-content: center; }
  /* 13px line-height-1 text + 2×14px padding = 41px, just under the 44px
     minimum tap target the nav hamburger already honours. Bump to clear it. */
  .consent-bar__btn { padding: 16px 28px; }
}