/* ============================================================
   Imperia Technologies — Polish overlay (scoped under .polished)
   Layers on top of site.css. Each block is annotated with its
   reason — these are the "premium polish" moves, nothing else.
   ============================================================ */

/* ---------- Tokens added for polish ---------- */
.polished {
  --ease-deep: cubic-bezier(0.22, 1, 0.36, 1);
  --rule: 1px solid var(--ink-100);
  --rule-strong: 1px solid var(--ink-200);
  --hover-tint: rgba(147, 233, 190, 0.06); /* mint @ 6% — for whisper hovers */
  /* Fill the gaps in site.css's ink ramp so polished references resolve */
  --ink-300: #BFBFBF;
  --ink-600: #4D4D4D;
}

/* ===========================================================
   1 ·  HERO
   - Cinematic vertical-vignette overlay (was: diagonal slab)
   - Letter-reveal on IMPERIA wordmark
   - Mint dot before the eyebrow
   - Refined scroll cue at bottom-center
   - Ghost button: mint underline draws on hover
   - Primary button: shadow softened so it stops shouting
   =========================================================== */

.polished .hero__overlay {
  background:
    /* vignette pulling focus to the copy */
    radial-gradient(ellipse 110% 90% at 28% 55%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%),
    /* readability floor */
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%);
}

/* Mint dot eyebrow (opt-in: .eyebrow.has-dot) */
.polished .eyebrow.has-dot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.polished .eyebrow.has-dot::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand-mint);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(147,233,190,0.6);
  animation: dotPulse 2400ms ease-out infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(147,233,190,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(147,233,190,0); }
  100% { box-shadow: 0 0 0 0   rgba(147,233,190,0); }
}

/* Letter reveal on wordmark — wrapped in .ltr spans by JS or static markup */
.polished .hero__brand-mark { overflow: hidden; display: inline-block; line-height: 1.05; }
.polished .hero__brand-mark .ltr {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: ltrUp 900ms var(--ease-deep) forwards;
}
.polished .hero__brand-mark .ltr:nth-child(1) { animation-delay: 100ms; }
.polished .hero__brand-mark .ltr:nth-child(2) { animation-delay: 160ms; }
.polished .hero__brand-mark .ltr:nth-child(3) { animation-delay: 220ms; }
.polished .hero__brand-mark .ltr:nth-child(4) { animation-delay: 280ms; }
.polished .hero__brand-mark .ltr:nth-child(5) { animation-delay: 340ms; }
.polished .hero__brand-mark .ltr:nth-child(6) { animation-delay: 400ms; }
.polished .hero__brand-mark .ltr:nth-child(7) { animation-delay: 460ms; }
@keyframes ltrUp { to { transform: none; opacity: 1; } }

/* Hero brand sub: fade up after wordmark */
.polished .hero__brand-sub {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 800ms var(--ease-deep) 600ms forwards;
}
.polished .hero__eyebrow,
.polished .hero__headline,
.polished .hero__sub,
.polished .hero__cta {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 900ms var(--ease-deep) forwards;
}
.polished .hero__eyebrow  { animation-delay: 200ms; }
.polished .hero__headline { animation-delay: 800ms; }
.polished .hero__sub      { animation-delay: 950ms; }
.polished .hero__cta      { animation-delay: 1100ms; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Scroll cue */
.polished .hero__scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.75);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 700ms var(--ease-deep) 1400ms forwards;
  pointer-events: none;
}
.polished .hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
  animation: scrollLine 2400ms ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  25%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Ghost-inverse button polish — mint underline behind label */
.polished .btn--inverse {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.polished .btn--inverse::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-deep);
}
.polished .btn--inverse:hover { border-color: rgba(255,255,255,0.55); }
.polished .btn--inverse:hover::after { transform: scaleX(1); }

/* Primary button — shadow toned down */
.polished .btn--primary {
  box-shadow: 0 6px 18px rgba(75,203,141,0.14),
              inset 0 1px 0 rgba(255,255,255,0.35);
  transition: background 200ms var(--ease-out),
              box-shadow 240ms var(--ease-out),
              transform 240ms var(--ease-out);
}
.polished .btn--primary:hover {
  box-shadow: 0 10px 28px rgba(75,203,141,0.22),
              inset 0 1px 0 rgba(255,255,255,0.4);
}


/* ===========================================================
   2 ·  HEADER  /  NAV
   - Transparent over hero; solid + frosted after scroll
   - Animated underline (sliding hairline) on links
   - Refined CTA pill
   =========================================================== */

.polished .header {
  border-bottom: 1px solid transparent;
  transition: border-color 280ms var(--ease-out);
}
/* The original .header is position: sticky and takes layout space, which
   pushes the hero down — defeating the floating-over-hero effect. Force any
   header that opts into the scroll-state behavior to position: fixed so the
   hero starts at the top with the header overlapping it. */
.polished .header[data-header-scroll] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
/* Add space below the fixed header on interior pages (the page-hero starts
   under the fixed header otherwise). Home page hero is dark + full-bleed so
   it ignores this and the header floats over it. */
.polished main > .page-hero:first-child {
  padding-top: calc(96px + 64px);
}
.polished .header::before {
  background: rgba(255,255,255,0);
  transition: background 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out);
}
.polished .header.is-scrolled {
  border-bottom-color: var(--ink-100);
}
.polished .header.is-scrolled::before {
  background: rgba(255,255,255,0.82);
}

/* "Floating" state — over dark hero. Inverts text. */
.polished .header.header--floating .header__nav a,
.polished .header.header--floating .header__dropdown-btn { color: rgba(255,255,255,0.92); }
.polished .header.header--floating .header__phone { color: var(--paper); }
.polished .header.header--floating .header__brand img { filter: brightness(0) invert(1); }
.polished .header.header--floating .btn--primary {
  background: var(--paper);
  color: var(--ink-900);
  box-shadow: none;
}
.polished .header.header--floating .btn--primary:hover {
  background: var(--brand-mint);
  box-shadow: 0 8px 20px rgba(75,203,141,0.25);
}
.polished .header.header--floating .header__menu-btn { color: var(--paper); }

/* Animated underline */
.polished .header__nav > a,
.polished .header__dropdown-btn {
  position: relative;
  border-bottom: 0 !important;
  padding-bottom: 4px;
}
.polished .header__nav > a::after,
.polished .header__dropdown-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-mint);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-deep);
}
.polished .header__nav > a:hover::after,
.polished .header__dropdown-btn:hover::after,
.polished .header__nav > a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Dropdown menu — refined */
.polished .header__dropdown-menu {
  border-radius: 8px;
  padding: 6px;
  min-width: 260px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 24px 60px rgba(26,26,26,0.12);
}
.polished .header__dropdown.is-open .header__dropdown-menu a {
  opacity: 0;
  transform: translateY(-4px);
  animation: dropIn 320ms var(--ease-deep) forwards;
}
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(1) { animation-delay: 40ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(2) { animation-delay: 80ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(3) { animation-delay: 120ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(4) { animation-delay: 160ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(5) { animation-delay: 200ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(6) { animation-delay: 240ms; }
.polished .header__dropdown.is-open .header__dropdown-menu a:nth-child(7) { animation-delay: 280ms; }
@keyframes dropIn { to { opacity: 1; transform: none; } }

.polished .header__dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 6px;
  transition: background 160ms var(--ease-out), padding-left 200ms var(--ease-out);
  /* Force dark text on the dropdown's own white panel, even when the parent
     header is floating (which sets .header__nav a to white). Without this,
     the dropdown items render white on white at the top of the home page. */
  color: var(--ink-700);
}
.polished .header.header--floating .header__dropdown-menu a { color: var(--ink-700); }
.polished .header__dropdown-menu a:hover { color: var(--ink-900); }
.polished .header__dropdown-menu a::after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  color: var(--brand-mint-700);
  font-size: 0.875rem;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.polished .header__dropdown-menu a:hover { background: var(--brand-mint-50); padding-left: 18px; }
.polished .header__dropdown-menu a:hover::after { opacity: 1; transform: none; }


/* ===========================================================
   3 ·  SERVICE CARDS — editorial grid
   - Replace separated cards with a unified hairline grid (no gap)
   - Each card: index, serif title, hairline that grows on hover,
     animated "EXPLORE →" with a line-arrow
   - Mint wash on hover instead of lift/shadow
   =========================================================== */

.polished .service-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-200);
  border-left: 1px solid var(--ink-200);
}

.polished .service-card--editorial {
  position: relative;
  padding: 36px 32px 32px;
  border-right: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  background: var(--paper);
  border-radius: 0;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transition: background 360ms var(--ease-out);
}
.polished .service-card--editorial:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink-200);
  background: var(--brand-mint-50);
}

.polished .service-card__index {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-400);
  margin: 0 0 28px;
  transition: color 240ms var(--ease-out);
}
.polished .service-card--editorial:hover .service-card__index { color: var(--brand-mint-700); }

.polished .service-card--editorial .service-card__title {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink-900);
}
.polished .service-card--editorial .service-card__desc {
  font-size: 0.9375rem;
  color: var(--ink-500);
  margin: 14px 0 0;
  max-width: 32ch;
}

/* Hairline that grows on hover (under desc) */
.polished .service-card__rule {
  width: 24px;
  height: 1px;
  background: var(--ink-200);
  margin: 18px 0 0;
  transition: width 480ms var(--ease-deep), background 240ms var(--ease-out);
}
.polished .service-card--editorial:hover .service-card__rule {
  width: 64px;
  background: var(--brand-mint-700);
}

.polished .service-card--editorial .service-card__arrow {
  margin-top: 24px;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color 240ms var(--ease-out), gap 240ms var(--ease-out);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-widest);
}
.polished .service-card--editorial:hover .service-card__arrow {
  color: var(--ink-900);
  gap: 18px;
}
.polished .service-card__arrow .arrow-line {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 320ms var(--ease-deep);
}
.polished .service-card--editorial:hover .service-card__arrow .arrow-line { width: 38px; }
.polished .service-card__arrow .arrow-line::after {
  content: "";
  position: absolute;
  right: 0; top: -2px;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}


/* ===========================================================
   4 ·  WHY IMPERIA — numbered hairline lockup
   - Drop the mint-bg pill icon (too app-like)
   - Replace with a number + hairline that draws on hover
   - Serif headline → matches H2 elsewhere
   =========================================================== */

.polished .why-card--lockup {
  padding: 0;
  position: relative;
}
.polished .why-card--lockup .why-card__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-mint-700);
  margin-bottom: 16px;
}
.polished .why-card--lockup .why-card__rule {
  width: 28px;
  height: 1px;
  background: var(--ink-300);
  margin: 0 0 28px;
  transition: width 600ms var(--ease-deep), background 240ms var(--ease-out);
}
.polished .why-card--lockup:hover .why-card__rule {
  width: 96px;
  background: var(--brand-mint);
}
.polished .why-card--lockup h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.polished .why-card--lockup p { margin: 0; max-width: 28ch; }


/* ===========================================================
   5 ·  PROCESS — connected stepper
   - Horizontal hairline threads through the dots
   - Dot fills mint on reveal (scroll-active)
   - Serif step titles
   =========================================================== */

.polished .steps--connected {
  position: relative;
  /* Hairline thread through the dot row. Rendered as a CSS background so
     screenshot tools that skip pseudo-elements still capture it. The line
     sits at top: 11px (center of the 22px dot) and inset 11px on each side
     so it terminates inside the first and last dots. */
  background-image: linear-gradient(to right, rgba(47, 168, 114, 0.35) 0, rgba(47, 168, 114, 0.35) 100%);
  background-position: 11px 11px;
  background-size: calc(100% - 22px) 1px;
  background-repeat: no-repeat;
}
.polished .step--connected { position: relative; z-index: 1; }
.polished .step--connected .step__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--brand-mint-700);
  position: relative;
  margin-bottom: 24px;
  transition: background-color 480ms var(--ease-deep), border-color 280ms var(--ease-out);
}
.polished .section--mint .step--connected .step__dot { background: var(--paper); border-color: var(--brand-mint-700); }

/* When the stepper is "active" (or each step toggles itself in via JS), fill the dot.
   We transition background (not transform on a pseudo) so screenshot tools that
   skip ::after still render the active state correctly. */
.polished .steps--connected.is-active .step--connected .step__dot {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.polished .steps--connected.is-active .step--connected:nth-child(1) .step__dot { transition-delay: 80ms; }
.polished .steps--connected.is-active .step--connected:nth-child(2) .step__dot { transition-delay: 260ms; }
.polished .steps--connected.is-active .step--connected:nth-child(3) .step__dot { transition-delay: 440ms; }
.polished .steps--connected.is-active .step--connected:nth-child(4) .step__dot { transition-delay: 620ms; }

.polished .step--connected .step__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-500);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.polished .step--connected h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}


/* ===========================================================
   6 ·  TESTIMONIALS — editorial pull quote
   - One quote at a time, large, serif
   - Big mint quotemark
   - Star rating becomes ★★★★★ GOOGLE wordmark
   =========================================================== */

.polished .testimonial--editorial {
  padding: 36px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink-100);
  border-radius: 0;
  gap: 24px;
}
.polished .testimonial--editorial::before {
  content: "\201C";
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.7;
  color: var(--brand-mint);
  font-weight: 400;
  margin-bottom: -8px;
}
.polished .testimonial--editorial .testimonial__quote {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.polished .testimonial--editorial .testimonial__stars {
  color: var(--brand-mint-700);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.polished .testimonial--editorial .testimonial__cite {
  margin-top: auto;
  padding-top: 0;
}
.polished .testimonial--editorial .testimonial__name { font-weight: 500; }
.polished .testimonial--editorial .testimonial__avatar { display: none; }


/* ===========================================================
   7 ·  TWO-UP — scroll-reveal image mask
   - Image starts clipped to a vertical sliver (left edge) and
     widens to fill its frame on scroll-reveal
   - Kenburns slow drift (very subtle)
   - Body copy: stagger reveal (eyebrow, h2, rule, lead, body, cta)
   =========================================================== */

.polished .two-up--reveal img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1400ms var(--ease-deep);
}
.polished .two-up--reveal.is-visible img {
  clip-path: inset(0 0 0 0);
}
.polished .two-up--reveal img.kenburns {
  animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1.0)   translate(0, 0); }
  100% { transform: scale(1.06)  translate(-1%, -1%); }
}
.polished .two-up--reveal .reveal-text > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-deep), transform 700ms var(--ease-deep);
}
.polished .two-up--reveal.is-visible .reveal-text > *  { opacity: 1; transform: none; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(1) { transition-delay: 100ms; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(2) { transition-delay: 200ms; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(3) { transition-delay: 320ms; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(4) { transition-delay: 440ms; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(5) { transition-delay: 560ms; }
.polished .two-up--reveal.is-visible .reveal-text > *:nth-child(6) { transition-delay: 680ms; }


/* ===========================================================
   8 ·  SECTION RHYTHM
   - Optional thin mint rule on the inside top of dark sections
   - Generous left-aligned section titles
   - The "intro paragraph" section becomes a hairline rule + spec
   =========================================================== */

.polished .section--rhythm {
  padding: 120px 0;
}
.polished .section--rhythm + .section--rhythm {
  padding-top: 0;
}
.polished .section-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 40px;
}
.polished .section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-200);
}
.polished .section--dark .section-mark { color: rgba(255,255,255,0.5); }
.polished .section--dark .section-mark::after { background: rgba(255,255,255,0.15); }


/* ===========================================================
   9 ·  FOOTER — refined editorial
   - Large mint "I" monogram top-left
   - Newsletter row gets generous whitespace
   - Link columns: hover reveals mint dash before text
   =========================================================== */

.polished .footer--editorial {
  padding: 96px 0 32px;
  position: relative;
}
.polished .footer--editorial .footer__monogram {
  display: block;
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 7rem;
  letter-spacing: 0.04em;
  color: var(--brand-mint);
  line-height: 0.9;
  margin: 0 0 8px;
}
.polished .footer--editorial .footer__motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  color: rgba(255,255,255,0.72);
  max-width: 32ch;
  margin: 0 0 28px;
  letter-spacing: 0;
}
.polished .footer--editorial h5 {
  color: rgba(255,255,255,0.5);
  font-size: 0.625rem;
}
.polished .footer--editorial ul a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-left: 0;
  border-bottom: 0;
  transition: padding-left 240ms var(--ease-out), color 200ms var(--ease-out);
}
.polished .footer--editorial ul a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--brand-mint);
  margin-right: 0;
  transition: width 240ms var(--ease-out), margin-right 240ms var(--ease-out);
}
.polished .footer--editorial ul a:hover {
  color: var(--brand-mint);
  border-bottom: 0;
  padding-left: 0;
}
.polished .footer--editorial ul a:hover::before {
  width: 14px;
  margin-right: 10px;
}


/* ===========================================================
   10 ·  PAGE / SECTION REVEAL FROM SCROLL
   - Section-level reveal (the existing js-reveals does this on
     section roots already; we add a finer-grained .reveal that
     children can opt into for staggered choreography)
   =========================================================== */

.polished .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--ease-deep), transform 720ms var(--ease-deep);
}
.polished .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.polished .reveal.delay-1 { transition-delay: 100ms; }
.polished .reveal.delay-2 { transition-delay: 200ms; }
.polished .reveal.delay-3 { transition-delay: 320ms; }
.polished .reveal.delay-4 { transition-delay: 440ms; }
.polished .reveal.delay-5 { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .polished .reveal,
  .polished .hero__brand-mark .ltr,
  .polished .hero__eyebrow,
  .polished .hero__headline,
  .polished .hero__sub,
  .polished .hero__cta,
  .polished .hero__brand-sub,
  .polished .two-up--reveal img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    clip-path: none !important;
  }
}


/* ===========================================================
   11 ·  PAGE-HERO (interior pages)
   - Replace flat ink-50 band with a more architectural
     left-aligned spec: thin mint rule + crumbs + serif H1 + lead
   - Subtle gradient floor under the band for transition
   =========================================================== */

.polished .page-hero--polished {
  background: var(--paper);
  padding: 128px 0 88px;
  border-bottom: 1px solid var(--ink-100);
  position: relative;
}
.polished .page-hero--polished::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(246,246,246,0) 0%, var(--ink-50) 100%);
  pointer-events: none;
}
.polished .page-hero--polished .breadcrumb {
  margin-bottom: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-400);
}
.polished .page-hero--polished .breadcrumb::before {
  content: "";
  width: 24px; height: 1px; background: var(--brand-mint);
}
.polished .page-hero--polished h1 {
  max-width: 18ch;
  margin: 16px 0 0;
}
.polished .page-hero--polished .lead {
  margin-top: 28px;
}