/* Curious Mind — the hero.
 *
 * One painted plate, edge to edge, with the copy typeset over the calm middle
 * of the painting. No carousel: there is nothing to advance, so there are no
 * arrows, no dots and no autoplay to pause.
 *
 * Two things here are load-bearing:
 *   · The band is full-bleed because it is a direct child of <main>, which is
 *     unstyled — so plain width:100% already spans the page. The usual
 *     100vw-plus-negative-margin breakout is wrong here: 100vw counts the
 *     scrollbar, which pushed 15px of horizontal overflow onto every desktop
 *     page.
 *   · The plate is 2304px wide and sits at scale 1 at rest. The drift only ever
 *     grows it, never shrinks it below cover — anything that scaled it down
 *     would show the page behind at the edges.
 */

.hero{
  position:relative;
  width:100%;
  min-height:clamp(540px,74vh,700px);
  display:grid;place-items:center;
  overflow:hidden;isolation:isolate;
  background:var(--paper);
}

/* ---- the painting ---- */
.hero-plate{position:absolute;inset:0;z-index:0}
.hero-plate img{
  width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block;
  transform-origin:50% 50%;
  /* the only ambient motion on the page: 34s, one axis, transform only, so it
     composites on the GPU and never re-rasterizes the image */
  animation:heroDrift 34s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:scale(1) translate3d(0,0,0)}
  to  {transform:scale(1.055) translate3d(-1.1%,0,0)}
}
html[data-theme="dark"] .hero-plate img{filter:brightness(.62) saturate(.86)}

/* the wash that buys the text its contrast back — the painting's middle is
   calm, not empty, so the copy still needs something under it */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(52% 62% at 50% 50%,
      color-mix(in srgb,var(--paper) 56%,transparent) 0%,
      color-mix(in srgb,var(--paper) 26%,transparent) 55%,
      transparent 80%),
    linear-gradient(to bottom,
      color-mix(in srgb,var(--paper) 34%,transparent) 0%,
      transparent 20% 78%,
      color-mix(in srgb,var(--paper) 38%,transparent) 100%);
}
html[data-theme="dark"] .hero-scrim{
  background:
    radial-gradient(56% 66% at 50% 50%,
      color-mix(in srgb,var(--paper) 66%,transparent) 0%,
      color-mix(in srgb,var(--paper) 34%,transparent) 56%,
      transparent 82%),
    linear-gradient(to bottom,
      color-mix(in srgb,var(--paper) 38%,transparent) 0%,
      transparent 24% 72%,
      color-mix(in srgb,var(--paper) 44%,transparent) 100%);
}

/* ---- the copy ---- */
.hero-copy{
  position:relative;z-index:2;text-align:center;
  width:min(620px,88%);padding:40px 0 56px;
}
.hero-copy .eyebrow{margin-bottom:16px}
.hero-copy h1{
  font-size:clamp(42px,5.8vw,78px);line-height:1;letter-spacing:-.03em;font-weight:700;
  margin:0 0 18px;
}
.hero-copy h1 span{display:block}
.hero-copy h1 .l1,.hero-copy h1 .l3{color:var(--violet-deep)}
.hero-copy h1 .l2{color:#3f8b80}
html[data-theme="dark"] .hero-copy h1 .l1,
html[data-theme="dark"] .hero-copy h1 .l3{color:#c8b6e8}
html[data-theme="dark"] .hero-copy h1 .l2{color:#7fc9bb}
.hero-copy p.sub{
  font-size:clamp(15.5px,1.6vw,19px);color:var(--muted);
  max-width:38ch;margin:0 auto 26px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}

/* ---- the slogan pill ---- */
/* the rail that puts the pill on the hero's right edge. left/right:0 with an
   inset gutter rather than a width — 100vw would count the scrollbar and ship
   horizontal overflow on every desktop page. */
.hero-foot{
  position:absolute;z-index:3;bottom:22px;left:0;right:0;
  padding-inline:clamp(16px,3vw,44px);
  display:flex;justify-content:flex-end;pointer-events:none;
}
.hero-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:12px;padding:11px 18px 11px 12px;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-md);max-width:min(420px,70vw);
}
.hero-pill .ph{width:34px;height:34px;border-radius:50%;background:#e8628a;color:#fff;
  display:grid;place-items:center;flex:0 0 auto}
.hero-pill .ph svg{width:17px;height:17px;fill:currentColor;stroke:none}
.hero-pill b{display:block;font-size:14px;font-weight:400;color:var(--ink);line-height:1.25}
.hero-pill > span > span{font-size:12.5px;color:var(--muted)}

/* ---- arrival ----
   hero.js adds .on one frame after load. Everything animates from a transition,
   not a keyframe, so it plays exactly once and holds — nothing here replays. */
.hero .anim{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero.on .anim{opacity:1;transform:none}
.hero.on .eyebrow{transition-delay:.08s}
.hero.on h1{transition-delay:.16s}
.hero.on p.sub{transition-delay:.26s}
.hero.on .hero-cta{transition-delay:.34s}
.hero.on .hero-pill{transition-delay:.46s}

/* ---- phones ----
   The plate stays a background here rather than becoming a block above the
   copy: the painting's middle is calm the whole way down, so a narrow crop of
   it is still a legible ground for text. */
@media(max-width:900px){
  .hero{min-height:clamp(480px,72vh,600px)}
  /* a phone-width crop is only about a third of the plate, so it is pushed left
     of centre to keep the armchair and the lamp in frame instead of bare wall */
  /* 34% horizontally keeps the armchair and lamp in a crop that is only about a
     third of the plate; 40% vertically trades empty rug at the bottom for more
     of the room */
  .hero-plate img{object-position:34% 40%;animation-duration:44s}
  .hero-scrim{background:
    radial-gradient(78% 60% at 50% 46%,
      color-mix(in srgb,var(--paper) 88%,transparent) 0%,
      color-mix(in srgb,var(--paper) 66%,transparent) 56%,
      color-mix(in srgb,var(--paper) 34%,transparent) 100%)}
  .hero-copy{width:min(560px,90%);padding:30px 0 40px}
  /* the rules either side of the eyebrow leave a stray dash hanging off a
     wrapped line — the words carry it on their own at this width */
  .hero-copy .eyebrow i{display:none}
  .hero-copy .eyebrow{gap:0;line-height:1.5}
  .hero-copy h1{font-size:clamp(36px,10.5vw,54px)}
  .hero-copy p.sub{font-size:16px;max-width:34ch;margin-bottom:20px}
  /* the pill goes. At 375px it wraps to three lines, lands on the armchair and
     turns a calm hero into a busy one — and the same slogan is already in the
     header lockup and the footer. */
  .hero-foot{display:none}
}
@media(max-width:420px){
  .hero-copy h1{font-size:clamp(32px,9.4vw,42px)}
  .hero-copy p.sub{font-size:15px;margin-bottom:16px}
}
@media(max-height:760px) and (min-width:901px){
  .hero{min-height:clamp(430px,66vh,540px)}
  .hero-copy{padding:24px 0 40px}
  .hero-copy h1{font-size:clamp(36px,4.6vw,58px)}
  .hero-copy p.sub{margin-bottom:18px;font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .hero-plate img{animation:none}
  .hero .anim{opacity:1;transform:none;transition:none}
}