/* Supplied artwork, with a local thumb-edge cleanup; original asset retained. */
.static-hero { position:relative; isolation:isolate; min-height: min(900px, 100svh); min-height:max(690px,100svh); overflow:hidden; background:#fcfbf8; display:grid; place-items:center; padding:130px 24px 120px; }
.static-hand { position:absolute; z-index:-1; top:50%; width:50%; height: min(48vw,690px); transform:translateY(-44%); background-image:url('assets/hero-halftone-clean.webp?v=thumb-tip-only'); background-repeat:no-repeat; background-size:200% auto; mix-blend-mode:multiply; pointer-events:none; }
.static-hand-left { left:-6%; background-position:left center; }
.static-hand-right { right:-6%; background-position:right center; opacity:.78; }
.static-hero-content { width:min(530px,48vw); text-align:center; padding-bottom:65px; }
.static-hero-content h1 { margin:0 0 22px; font-family:Outfit,sans-serif; font-size:clamp(48px,5.1vw,80px); font-weight:300; line-height:.99; letter-spacing:-.055em; }
.static-hero-content h1 span { color:#496cbd; }
.static-hero-content p { max-width:470px; margin:0 auto 28px; font-size:18px; line-height:1.65; color:#51575b; text-wrap:pretty; }
.static-hero-content .pill { min-height:56px; padding:0 28px; gap:24px; font-size:16px; }
.static-hero-foot { position:absolute; bottom:34px; left:56px; right:56px; display:flex; justify-content:space-between; gap:24px; font-size:15px; color:#656b70; }
.static-hero-foot a { color:inherit; text-decoration:none; padding:14px 0; }
.static-hero-foot>span { align-self:center; }
@media(max-width:700px) {
 .static-hero { min-height:800px; padding:310px 24px 120px; align-items:start; }
 .static-hand { width:65%; height:300px; top:115px; transform:none; background-size:200% auto; }
 .static-hand-left { left:-8%; }
 .static-hand-right { right:-8%; }
 .static-hero-content { width:100%; padding:0; }
 .static-hero-content h1 { font-size:clamp(47px,12vw,68px); }
 .static-hero-content p { font-size:17px; max-width:340px; }
 .static-hero-content .pill { min-height:54px; padding:0 24px; font-size:16px; }
 .static-hero-foot { left:24px; right:24px; bottom:20px; font-size:13px; flex-wrap:wrap; gap:0 18px; }
}
@media(min-width:701px) and (max-height:750px) { .static-hero { min-height:650px; } }
.static-hand { mask-image:linear-gradient(to bottom,transparent,black 25%,black 78%,transparent),linear-gradient(to right,transparent,black 15%,black 85%,transparent); mask-composite:intersect; }
@media(max-width:700px) { .static-hand { top:80px; } }
/* v2: white canvas and closer framing. */
body:has(.static-hero), body:has(.static-hero) .site-nav, .static-hero { background:#fff; }
.static-hand { filter:grayscale(1) brightness(1.06) contrast(1.08); }
@media(min-width:701px) {
 .static-hand-left { left:0; }
 .static-hand-right { right:0; }
}
@media(max-width:700px) {
 .static-hand-left { left:-4%; }
 .static-hand-right { right:-4%; }
 .static-hand { top:90px; }
}
/* v3: one warm neutral palette across the hero and navigation. */
body:has(.static-hero), body:has(.static-hero) .site-nav, .static-hero { background:#fcfbf8; }
.static-hand { filter:grayscale(1) brightness(1.06) contrast(1.08); }
body:has(.static-hero) .nav-links a,
body:has(.static-hero) .nav-action,
body:has(.static-hero) .menu-toggle { background:#f0eee8; color:#171816; }
body:has(.static-hero) .nav-links a:hover,
body:has(.static-hero) .nav-action:hover,
body:has(.static-hero) .menu-toggle:hover { background:#e7e4dc; }
body:has(.static-hero) .round-icon,
.static-hero-content .pill-dark { background:#20211e; color:#fcfbf8; }
/* Larger branding and controls, scoped to the homepage. */
body:has(.static-hero) .site-nav .brand { font-size:38px; }
body:has(.static-hero) .nav-links a,
body:has(.static-hero) .nav-action { min-height:60px; padding:0 26px; font-size:16px; }
body:has(.static-hero) .round-icon { width:28px; height:28px; font-size:14px; }
@media(max-width:700px) {
 body:has(.static-hero) .site-nav .brand { font-size:32px; }
 body:has(.static-hero) .nav-links a,
 body:has(.static-hero) .nav-action { min-height:54px; padding:0 18px; font-size:15px; }
 body:has(.static-hero) .menu-toggle { width:54px; height:54px; font-size:23px; }
 body:has(.static-hero) .round-icon { width:24px; height:24px; font-size:12px; }
}
/* ivory v2 */
.static-hero-foot{justify-content:flex-end}
.static-hero-action { position:relative;display:inline-flex;justify-content:center;margin-top:40px; }
.static-hero-action>.pill { width:230px;max-width:100%; }
@media(min-width:701px) {
 /* Keep the copy in a separate upper area. Raising a shared copy/artwork
    container would preserve their overlap rather than clear the text. */
 .static-hero {
  --hero-heading-size:clamp(48px,7.25vw,132px);
  --hero-body-size:clamp(20px,1.65vw,26px);
  --hero-copy-height:calc(var(--hero-heading-size) * .99 + 22px + var(--hero-body-size) * 4.8);
  --hero-art-gap:clamp(80px,8.5vw,164px);
  /* Place the CTA centre at the owner's marked height without changing
     the copy/artwork spacing or lifting anything on short viewports. */
  --hero-copy-top:max(calc(clamp(112px,10svh,140px) + clamp(64px,8svh,100px)),calc(74svh - 28px - var(--hero-copy-height) - var(--hero-art-gap)));
  --hero-cta-top:calc(var(--hero-copy-top) + var(--hero-copy-height) + var(--hero-art-gap));
  padding:var(--hero-copy-top) 24px 120px;
  place-items:start center;
  min-height:max(690px,100svh,calc(var(--hero-cta-top) + clamp(125px,11vw,225px) + 64px));
 }
 .static-hero-content { position:static;top:auto;width:min(1600px,calc(100vw - 64px));padding-bottom:0; }
 .static-hero-content h1 { position:relative;top:clamp(-160px,-12svh,-64px);white-space:nowrap;font-size:var(--hero-heading-size); }
 .static-hero-content p { max-width:900px;font-size:var(--hero-body-size);line-height:1.6; }
 /* Anchor the visible fingertips to the CTA, not to viewport percentages.
    Crop away the artwork's empty inner margins without stretching it. */
 .static-hero-action { --hand-gap:40px;position:absolute;top:var(--hero-cta-top);left:calc(50% - 115px);margin-top:0; }
 .static-hero-action .static-hand {
  top:50%;height:auto;width:max(360px,calc(50vw - 115px - var(--hand-gap)));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 78%,transparent);
 }
 .static-hero-action .static-hand-left {
  left:auto;right:calc(100% + var(--hand-gap));aspect-ratio:1048/1520;
  background-size:256.488550% 100%;background-position:left center;
  transform:translateY(-59%);
 }
 .static-hero-action .static-hand-right {
  right:auto;left:calc(100% + var(--hand-gap));aspect-ratio:1082/1520;
  background-size:248.428835% 100%;background-position:right center;
  transform:translateY(-61%);
 }
}
@media(max-width:700px){
 .static-hero{min-height:0;padding:calc(96px + 68vw - 8px) 24px 64px;align-items:start}
 .static-hand{width:64%;height:auto;aspect-ratio:1344/1520;top:72px;background-size:200% 100%;transform:none}
 .static-hand-left{left:-14%}.static-hand-right{right:-14%;opacity:.9}
 .static-hand{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent)}
 .static-hero-content{position:static;padding:0}
 .static-hero-content h1{font-size:clamp(52px,14vw,76px)}
 .static-hero-content p{max-width:400px;font-size:18px;line-height:1.6}
 .static-hero-action{position:static;margin-top:16px}
 .static-hero-content h1 span{display:block}
 .static-hero-foot{position:static;margin-top:28px;justify-content:center;grid-column:1}
 .static-hero{display:block;text-align:center}
}