/* ==========================================================================
   KATARI JYOTHSNA - urban.css
   --------------------------------------------------------------------------
   The set pieces that define the current design direction and that no other
   stylesheet owns: the full-bleed hero with its glass card, the ticker band,
   gradient buttons and rules, numbered service cards, the sticky booking
   bar and the floating WhatsApp button.

   Loaded AFTER components.css and pages.css so it can refine them, and
   BEFORE responsive.css so breakpoints still win.
   ========================================================================== */

/* ==========================================================================
   1. TYPE - Fraunces wants configuring, not just loading
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.display, .script, .serif {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1, h2, .display { font-weight: 400; letter-spacing: -0.022em; line-height: 1.02; }
h3, h4, h5, h6   { font-weight: 500; letter-spacing: -0.012em; }

/* The italic word inside a headline, painted with the brand gradient */
.script,
.grad-text {
  font-style: italic;
  font-weight: 400;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text--upright { font-style: normal; }

/* A ghosted word - outline only. Used sparingly in the hero. */
.ghost-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.75);
  opacity: .9;
}
.section .ghost-text,
.cta-band .ghost-text { -webkit-text-stroke-color: var(--line-strong); }

/* Eyebrow: a short gradient rule then letterspaced caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: clamp(1.75rem, 4vw, 3.25rem);
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 1;
}
.eyebrow--center::after {
  content: "";
  width: clamp(1.75rem, 4vw, 3.25rem);
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

/* Mono micro-label */
.mono {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   2. PATTERNED GROUND
   ========================================================================== */
.section--pattern { position: relative; isolation: isolate; }
.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pattern);
  background-size: 120px 120px;
  opacity: var(--pattern-opacity);
  pointer-events: none;
}

/* ==========================================================================
   3. BUTTONS - the gradient pill is the primary action everywhere
   ========================================================================== */
.btn--primary {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  background: var(--grad);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #FFFFFF;
  box-shadow: var(--shadow-glow);
  transition: background-position var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo);
}
.btn--primary::before { display: none; }   /* the gradient slide replaces the wipe */
.btn--primary:hover {
  background-position: 100% 50%;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn--ink {
  --btn-bg: var(--ink-strong);
  --btn-fg: var(--bg);
  --btn-hover-bg: var(--accent);
  --btn-hover-fg: #FFFFFF;
}

.btn--glass {
  --btn-bg: color-mix(in oklab, #FFFFFF 14%, transparent);
  --btn-fg: #FFFFFF;
  --btn-bd: color-mix(in oklab, #FFFFFF 40%, transparent);
  --btn-hover-bg: #FFFFFF;
  --btn-hover-fg: var(--brand-plum-800);
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   4. TICKER BAND - the scrolling strip under the header
   ========================================================================== */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--brand-plum-700);
  color: color-mix(in oklab, #FFF8F4 78%, transparent);
  border-block: 1px solid color-mix(in oklab, #FFF8F4 10%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-block: .85rem;
  white-space: nowrap;
  width: max-content;
  animation: ticker-run 42s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.ticker__item i {
  width: 6px; height: 6px;
  flex: none;
  rotate: 45deg;
  background: var(--brand-magenta-500);
}

/* ==========================================================================
   5. HERO - full-bleed photograph, glass card, corner brackets
   ========================================================================== */
.uhero {
  position: relative;
  min-height: min(100svh, 62rem);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  color: #FFFFFF;
}
.uhero__media { position: absolute; inset: 0; z-index: -2; }
.uhero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Two washes: one for legibility on the left, one to sink the whole frame */
.uhero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(18,4,15,.86) 0%, rgba(18,4,15,.62) 38%, rgba(18,4,15,.18) 68%, rgba(18,4,15,.34) 100%),
    linear-gradient(to top, rgba(18,4,15,.72), rgba(18,4,15,0) 45%);
}

/* Thin corner brackets, inset from the viewport edge */
.uhero__frame {
  position: absolute;
  inset: clamp(1rem, 3vw, 2.6rem);
  z-index: 1;
  pointer-events: none;
  opacity: .45;
}
.uhero__frame span {
  position: absolute;
  width: clamp(2rem, 4vw, 3.5rem);
  height: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(255,255,255,.7);
}
.uhero__frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.uhero__frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.uhero__frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.uhero__frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.uhero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
  /* NO width here. This element also carries .container, and urban.css
     loads after layout.css - declaring a width would beat the container's
     gutters and glue the hero to the left edge. That exact bug has already
     been fixed once on .hero__grid; do not reintroduce it. */
}

/* The glass card that holds the headline */
.uhero__card {
  position: relative;
  max-width: 44rem;
  padding: clamp(1.75rem, 3.6vw, 3rem);
  border-radius: var(--r-xl);
  background: color-mix(in oklab, #12040F 46%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
  overflow: hidden;
}
/* the gradient hairline along the top edge */
.uhero__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
}

.uhero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.35rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}

.uhero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.uhero__title .line { display: block; }
.uhero__title strong { font-weight: 600; }

.uhero__sub {
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: var(--step-0);
  line-height: 1.72;
  color: rgba(255,255,255,.82);
  max-width: 48ch;
}
.uhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* the three little proof thumbnails, bottom right */
.uhero__thumbs {
  display: flex;
  gap: .6rem;
  justify-self: end;
  align-self: end;
}
.uhero__thumb {
  width: clamp(4.5rem, 7vw, 6.2rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.uhero__thumb:nth-child(2) { transform: translateY(.75rem); }
.uhero__thumb:nth-child(3) { transform: translateY(1.5rem); }
.uhero__thumbs:hover .uhero__thumb { transform: translateY(0); }
.uhero__thumb img { width: 100%; height: 100%; object-fit: cover; }

.uhero__scroll {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  writing-mode: vertical-rl;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.uhero__scroll::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: linear-gradient(rgba(255,255,255,.6), transparent);
}

/* Rating stars + pill inside the hero card */
.rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; color: rgba(255,255,255,.86); }
.rating__stars { display: inline-flex; gap: .1rem; color: var(--brand-marigold); }
.rating__stars svg { width: .92rem; height: .92rem; }

.pill--live {
  background: color-mix(in oklab, #FFFFFF 12%, transparent);
  border-color: rgba(255,255,255,.24);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}
.pill--live .pill__dot { color: var(--brand-marigold); }

/* ==========================================================================
   6. NUMBERED SERVICE CARD
   ========================================================================== */
.ucard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              box-shadow var(--dur-slow) var(--ease-out-expo),
              border-color var(--dur-slow) var(--ease-out-expo);
}
.ucard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-l);
  border-color: var(--line-accent);
}
.ucard__media { position: relative; overflow: hidden; }
.ucard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease-out-expo);
}
.ucard:hover .ucard__media img { transform: scale(1.06); }
.ucard__num {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in oklab, #12040F 62%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
}
.ucard__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ucard__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--ink-strong); }
.ucard__text { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.68; }

/* ==========================================================================
   7. PROJECT TILE - photo, scrim, name over the bottom
   ========================================================================== */
.utile {
  position: relative;
  display: block;
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: var(--surface-sunk);
}
.utile__media { position: relative; }
.utile__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease-out-expo);
}
.utile:hover .utile__media img { transform: scale(1.05); }
.utile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}
.utile__meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  color: #FFFFFF;
}
.utile__kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-marigold);
  margin-bottom: .35rem;
}
.utile__kicker i { width: 3px; height: 3px; rotate: 45deg; background: currentColor; }
.utile__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.06;
  color: #FFFFFF;
}
.utile__where {
  margin-top: .3rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ==========================================================================
   8. STATS BAND
   ========================================================================== */
.stats-band {
  background: var(--brand-plum-700);
  color: var(--brand-cream-100);
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.stats-band .stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: baseline;
}
.stats-band .stat__label {
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,248,244,.62);
}

/* ==========================================================================
   9. STICKY BOOKING BAR + FLOATING WHATSAPP
   ========================================================================== */
.book-bar {
  position: fixed;
  left: 50%;
  bottom: clamp(.75rem, 2vw, 1.25rem);
  translate: -50% 0;
  z-index: 760;
  width: min(calc(100% - 2 * var(--gutter)), 68rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .75rem .75rem clamp(1.1rem, 2.5vw, 1.75rem);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-l);
  transform: translateY(calc(100% + 2rem));
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.book-bar.is-visible { transform: translateY(0); }
.book-bar[hidden] { display: none; }
.book-bar__text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink-strong);
  line-height: 1.2;
}
.book-bar__text span {
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.book-bar__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.book-bar__close {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  flex: none;
}
.book-bar__close:hover { background: var(--surface-sunk); color: var(--ink); }
.book-bar__close svg { width: .85rem; height: .85rem; }

.wa-float {
  position: fixed;
  left: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: clamp(4.75rem, 9vw, 6rem);
  z-index: 750;
  display: grid;
  place-items: center;
  width: 3.2rem; height: 3.2rem;
  border-radius: 50%;
  background: var(--brand-green);
  color: #FFFFFF;
  box-shadow: 0 12px 30px -10px rgba(46,125,91,.8);
  transition: transform var(--dur-base) var(--ease-spring);
}
.wa-float:hover { transform: scale(1.08); color: #FFFFFF; }
.wa-float svg { width: 1.55rem; height: 1.55rem; }

/* Hidden until the visitor is past the hero. On a phone it otherwise lands
   squarely on top of the hero's own call-to-action button. */
.wa-float {
  opacity: 0;
  visibility: hidden;
  transform: scale(.8);
  transition: opacity var(--dur-base) var(--ease-out-quint),
              transform var(--dur-base) var(--ease-spring),
              visibility var(--dur-base);
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
.wa-float.is-visible:hover { transform: scale(1.08); }

/* ==========================================================================
   10. SPLIT SECTION HEAD - headline left, supporting copy right
   ========================================================================== */
.uhead {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.uhead h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.uhead__aside { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.72; max-width: 46ch; }

@media (min-width: 900px) {
  .uhead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .uhero__grid { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 899px) {
  .uhero__thumbs { display: none; }
  .uhero__scroll { display: none; }
  .book-bar__text span { display: none; }
}

/* ==========================================================================
   11. NO TWO STICKY BARS
   header.js injects .mobile-bar on every page. Where a page also carries
   the wider .book-bar, the mobile one would stack on top of it.
   ========================================================================== */
body:has(.book-bar:not([hidden])) .mobile-bar { display: none; }

@media (max-width: 720px) {
  .book-bar {
    border-radius: var(--r-l);
    padding: .7rem;
    gap: .6rem;
  }
  .book-bar__text strong { font-size: .88rem; }
  .book-bar .icon-btn { display: none; }
  .wa-float { width: 2.9rem; height: 2.9rem; bottom: 5.5rem; }
  .wa-float svg { width: 1.35rem; height: 1.35rem; }
}

/* ==========================================================================
   12. CTA TAIL
   The closing CTA band used .section--flush-bottom, which zeroed its bottom
   padding and left the band welded to the top of the footer. It needs air.
   ========================================================================== */
.section--cta-tail {
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

/* ==========================================================================
   13. FOOTER - brought onto the new palette
   ========================================================================== */
/* the ambient blooms were still mixing the old plum + gold */
.site-footer::before {
  background: radial-gradient(circle, rgba(225,29,110,.30), transparent 66%);
}
.site-footer::after {
  background: radial-gradient(circle, rgba(255,107,44,.22), transparent 66%);
}

.footer-cta__eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
}
.footer-cta__line {
  font-weight: 400;
  font-size: clamp(2.1rem, 7.5vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
/* the italic word and the arrow both carry the gradient */
.footer-cta__line em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-cta__line .arrow { color: var(--brand-orange-500); }
.footer-cta__line:hover { color: var(--brand-magenta-200); }

.footer-col h4,
.ig-strip .eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--brand-marigold);
}
.footer-brand .logo__name { font-family: var(--font-display); font-weight: 400; }
.footer-brand .logo__sub  { color: var(--brand-marigold); }
.footer-wordmark { font-weight: 400; -webkit-text-stroke: 1px rgba(255,248,244,.13); }

/* ==========================================================================
   14. MOBILE - this site is sold on a phone, so it has to hold up there
   ========================================================================== */
@media (max-width: 899px) {
  .uhero {
    min-height: auto;
    padding-block: clamp(3rem, 12vw, 5rem) clamp(3.5rem, 14vw, 6rem);
    align-items: flex-start;
  }
  .uhero__card {
    max-width: none;
    padding: 1.35rem 1.25rem 1.6rem;
    border-radius: var(--r-l);
  }
  .uhero__title { font-size: clamp(1.85rem, 7.4vw, 2.6rem); line-height: 1.14; }
  .uhero__sub   { font-size: .95rem; line-height: 1.65; }
  .uhero__meta  { gap: .6rem .9rem; margin-bottom: 1.1rem; }
  .uhero__meta .rating span:last-child { font-size: .72rem; }
  .uhero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .uhero__frame { inset: .75rem; opacity: .3; }
  .uhero__frame span { width: 1.5rem; height: 1.5rem; }

  .ticker__track { padding-block: .65rem; }
  .ticker__item  { font-size: .64rem; letter-spacing: .18em; }

  .uhead { gap: 1rem; }
  .uhead h2 { font-size: clamp(1.85rem, 7vw, 2.6rem); }

  .ucard__body { padding: 1rem 1.05rem 1.15rem; }
  .ucard__title { font-size: 1.15rem; }
  .ucard__text { font-size: .88rem; }

  .utile__name { font-size: 1.4rem; }

  .stats-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .stats-band .stat__num { font-size: 1.9rem; }
  .stats-band .stat__label { font-size: .6rem; letter-spacing: .16em; }

  .footer-cta { padding-bottom: 2.25rem; }
  .footer-cta__line { font-size: clamp(1.75rem, 9vw, 2.6rem); }
  .footer-cta__meta { gap: .5rem 1.1rem; font-size: .78rem; }
  .footer-main { gap: 2rem; }
  .footer-legal { justify-content: flex-start; gap: .6rem 1rem; }
  .footer-wordmark { font-size: clamp(2.6rem, 17vw, 5rem); }

  /* the sticky bar must not swallow the bottom of the page */
  .site-footer { padding-bottom: 5.5rem; }
}

@media (max-width: 520px) {
  .uhero__actions { flex-direction: column; align-items: stretch; }
  .uhero__actions .magnetic { display: block; }
  .uhero__actions .magnetic__inner { display: flex; width: 100%; }
  .book-bar__text strong { font-size: .8rem; line-height: 1.25; }
  .book-bar .btn--sm { padding: .7em 1em; font-size: .62rem; }
  .stats-band__grid { gap: 1.25rem .75rem; }
}

/* ==========================================================================
   15. THE HERO ON A PHONE
   A blurred panel that fills the screen hides the one thing the hero is for:
   the photograph. Below 900px the card stops being a panel and becomes plain
   type over a scrim, and the picture gets room to be seen.
   ========================================================================== */
@media (max-width: 899px) {
  .uhero {
    min-height: 88svh;
    align-items: flex-end;
    padding-block: 0 clamp(2rem, 7vw, 3rem);
  }
  /* a stronger bottom-up wash carries the type instead of the panel */
  .uhero__media::after {
    background:
      linear-gradient(to top, rgba(18,4,15,.94) 0%, rgba(18,4,15,.78) 26%,
                              rgba(18,4,15,.34) 58%, rgba(18,4,15,.42) 100%);
  }
  .uhero__media img { object-position: center 42%; }

  .uhero__card {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
  }
  .uhero__card::before { display: none; }

  .uhero__title {
    font-size: clamp(1.95rem, 8.4vw, 2.75rem);
    line-height: 1.12;
    text-shadow: 0 2px 24px rgba(18,4,15,.6);
  }
  /* let the browser even the rag out instead of five lopsided lines */
  .uhero__title .line { display: inline; }
  .uhero__title { text-wrap: balance; }

  .uhero__sub {
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 16px rgba(18,4,15,.7);
    max-width: 34ch;
  }
  .uhero__meta { margin-bottom: .9rem; }
  .uhero__actions { margin-top: 1.35rem; }
  .uhero__frame { display: none; }
}

/* ==========================================================================
   16. FOOTER WORDMARK
   It was set with a negative top margin against a footer that had no bottom
   padding, so the descenders were sliced off by the end of the page and it
   read as a rendering fault rather than a watermark.
   ========================================================================== */
.footer-wordmark {
  margin-top: 0;
  padding-top: clamp(1rem, 3vw, 2.25rem);
  font-size: clamp(2.6rem, 13vw, 12rem);
  line-height: .9;
  opacity: .9;
}
.site-footer { padding-bottom: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 999px) {
  /* the sticky bar lives down here too - leave it room */
  .site-footer { padding-bottom: 5.5rem; }
}