/* Inner-page hero "Frame" (owner's choice, 5 Oct 2026): the hero is one quiet glass panel, like a product card on a keynote page,
   lit from one point on its border. A white-hot streak of light travels along the top edge,
   left to right, and fades as it rounds the corner.
   One stylesheet for every page that uses <section class="hero-ledger"> except Services and the Blog, which have
   their own; every rule lives under .hero-ledger.
   The panel's drawing lives in one decorative element: .fr-frame > .fr-glass > .fr-wash, .fr-edge > .fr-streak */

/* ---- the panel: the hero itself, centred and padded; its glass is drawn by .fr-frame ---- */
.hero-ledger{
  color-scheme:dark; /* forced dark modes would invert the headline gradient */
  --fr-ease:cubic-bezier(0.22,1,0.36,1);
  --fr-radius:30px;
  --fr-cycle:6.6s;   /* one pass every 6.6s: 3.6s of travel, then a rest */
  --fr-loop:2.5s;    /* the loop waits for the entrance to finish */
  --fr-run:40%;      /* streak length, as a share of the panel width (about 14% of the perimeter) */
  --fr-from:-10%;    /* translateX of the streak, in its own widths: centre at -4% of the panel ... */
  --fr-to:265%;      /* ... to 106%, just round the right corner */
  --fr-rest:125%;    /* still pictures: the light sits on the top centre */
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:min(82%,1240px);margin:clamp(18px,3vh,30px) auto clamp(40px,7vh,80px);
  min-height:min(calc(100svh - 280px),600px);
  padding:clamp(36px,5.4vh,56px) clamp(28px,4vw,64px) clamp(38px,5.8vh,60px);
  border-radius:var(--fr-radius)
}
.hero-ledger::before{display:none}
.hero-ledger .mega-type,.hero-ledger .lh-rule,.hero-ledger .shot-stack{display:none}
/* city pages wrap the copy in a two-column split with screenshots: one centred column here */
.hero-ledger .hero-split,.hero-ledger .hero-copy{display:contents}

/* ---- the mast: one glass capsule, the jump link a lit segment inside it ---- */
.hero-ledger .lh-mast{
  display:inline-flex;align-items:center;gap:14px;max-width:100%;
  margin:0;padding:5px 5px 5px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));
  border:1px solid rgba(241,239,232,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 12px 32px -14px rgba(0,0,0,0.8)
}
.hero-ledger .lh-kicker{gap:10px;font-size:0.66rem;font-weight:600;letter-spacing:0.2em;color:#a6a195}
.hero-ledger .lh-kicker::before{width:6px;height:6px;box-shadow:0 0 10px rgba(255,107,0,0.85)}
.hero-ledger .lh-hair{flex:none;width:1px;height:14px;background:rgba(241,239,232,0.16)}
.hero-ledger .lh-jump{
  gap:6px;min-height:30px;padding:0 13px;border-radius:999px;
  font-size:0.76rem;font-weight:600;letter-spacing:0.01em;color:#ece9e1;
  background:rgba(241,239,232,0.07);border:1px solid rgba(241,239,232,0.1);
  transition:border-color 0.3s var(--fr-ease),color 0.3s var(--fr-ease)
}
.hero-ledger .lh-jump span{color:#ff8a33}
.hero-ledger .lh-jump:hover{color:#fff;border-color:rgba(255,138,51,0.55)}

/* ---- headline: General Sans 600; wrapped (.mega-title .line) or plain, accent or none ---- */
.hero-ledger h1{
  font-family:var(--font-display);font-weight:600;font-style:normal;font-variation-settings:normal;font-synthesis-weight:none;
  font-size:clamp(2.5rem,4.4vw,4.75rem);line-height:1.06;letter-spacing:-0.034em;
  max-width:min(100%,14.5em);margin:clamp(24px,3.4vh,36px) 0 0;text-wrap:balance;color:#f1efe8
}
.hero-ledger h1 .line{display:block;overflow:visible;padding-block:0}
.hero-ledger h1 .line>span{text-wrap:balance}
/* the accent: same sans, lit orange from above */
.hero-ledger h1 .accent{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit}
/* a second sentence after a line break is the subline: a step smaller, on its own rows */
.hero-ledger h1 br+.accent{display:block;font-size:0.76em;letter-spacing:-0.028em;margin-top:0.16em}

/* metallic sheen, white at the top of each row and warm grey at the foot.
   Without JavaScript the text carries it (one tile per row): the .line wrapper,
   or a plain h1 itself; once motion.js splits the words, each word carries its own copy.
   The plain-h1 form has a rule of its own, so a browser without :has() still lights the other two. */
.hero-ledger h1 .line>span,
.hero-ledger h1 .swi{
  background-image:linear-gradient(180deg,#ffffff 6%,#f6f3ec 42%,#c4bdb1 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.hero-ledger h1:not(:has(.line)){
  background-image:linear-gradient(180deg,#c4bdb1 0,#ffffff 10%,#f6f3ec 44%,#c4bdb1 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-size:100% 1.06em;background-repeat:repeat-y
}
.hero-ledger h1 .line>span{background-image:linear-gradient(180deg,#c4bdb1 0,#ffffff 10%,#f6f3ec 44%,#c4bdb1 92%);background-size:100% 1.06em;background-repeat:repeat-y}
.hero-ledger h1 .swi{background-size:100% 100%;background-repeat:no-repeat;padding-bottom:0.06em;margin-bottom:-0.06em}
.hero-ledger h1 .accent,
.hero-ledger h1 .accent .swi{
  background-image:linear-gradient(180deg,#ffb347 4%,#ff8a33 46%,#ff6b00 92%);background-size:100% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.hero-ledger h1 br+.accent{background-size:100% 1.06em;background-repeat:repeat-y}
.hero-ledger h1 .accent .swi{background-size:100% 100%;background-repeat:no-repeat}
.hero-ledger h1:has(.sw),
.hero-ledger h1 .line>span:has(.sw),
.hero-ledger h1 .accent:has(.sw){background-image:none}

/* ---- opening paragraphs: small and quiet; a second one steps back a little ---- */
.hero-ledger .lh-sub{
  margin:clamp(22px,3vh,32px) 0 0;max-width:44em;
  font-size:clamp(0.98rem,1.06vw,1.06rem);line-height:1.62;font-weight:400;color:#9d988d;text-wrap:balance
}
.hero-ledger .lh-sub+.lh-sub{margin-top:12px;font-size:clamp(0.92rem,0.98vw,0.98rem);color:#8f8a80}

/* ---- the fold: a quiet pill ---- */
.hero-ledger .hero-fold{margin:clamp(14px,2vh,20px) 0 0;max-width:min(44em,100%)}
.hero-ledger .hero-fold summary{
  display:inline-flex;align-items:center;gap:10px;padding:4px 4px 4px 14px;
  border:1px solid rgba(241,239,232,0.1);border-radius:999px;background:rgba(241,239,232,0.03);
  font-family:var(--font-display);font-weight:500;font-size:0.82rem;letter-spacing:0.01em;color:#a8a397;
  transition:color 0.3s var(--fr-ease),border-color 0.3s var(--fr-ease)
}
.hero-ledger .hero-fold summary::after{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(241,239,232,0.14);background:rgba(241,239,232,0.04);
  font-size:0.95rem;line-height:1;color:#ff8a33
}
.hero-ledger .hero-fold summary:hover{border-color:rgba(255,138,51,0.45);color:#ece9e1}
.hero-ledger .hero-fold .sec-fold-body{padding-top:12px}
.hero-ledger .hero-fold .lh-sub{margin:0 auto;max-width:44em;font-size:0.92rem;line-height:1.62;color:#8f8a80;text-wrap:balance}

/* ---- buttons like the homepage, facts quiet underneath ---- */
.hero-ledger .lh-shelf{
  display:flex;flex-direction:column;align-items:center;gap:0;width:100%;
  margin-top:clamp(28px,4.2vh,42px);padding:0;border:0
}
.hero-ledger .hero-copy>.lh-ctas{margin-top:clamp(28px,4.2vh,42px)}
.hero-ledger .lh-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
.hero-ledger .btn-hero{
  min-height:50px;padding:0 28px;background:linear-gradient(180deg,#ff8f3a 0%,#ff6b00 100%);color:#1a0d02;
  box-shadow:inset 0 1px 0 rgba(255,232,205,0.55),inset 0 -1px 0 rgba(110,36,0,0.25),0 12px 34px -12px rgba(255,107,0,0.75)
}
.hero-ledger .btn-hero:hover{box-shadow:inset 0 1px 0 rgba(255,232,205,0.6),inset 0 -1px 0 rgba(110,36,0,0.25),0 16px 44px -12px rgba(255,107,0,0.9)}
.hero-ledger .lh-ghost{
  min-height:50px;padding:0 27px;color:var(--ink);border:1px solid rgba(241,239,232,0.16);
  background:linear-gradient(180deg,rgba(241,239,232,0.06),rgba(241,239,232,0.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 10px 30px -14px rgba(0,0,0,0.7)
}
.hero-ledger .lh-ghost:hover{border-color:rgba(255,138,51,0.6);color:#fff}
/* facts: the shelf's list and the city pages' stat cards read the same, as one quiet row */
.hero-ledger .lh-facts,.hero-ledger .stat-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;
  list-style:none;margin:clamp(24px,3.6vh,34px) 0 0;padding:0
}
.hero-ledger .lh-facts li,.hero-ledger .stat{font-size:0.86rem;line-height:1.4;color:#8f8a80}
.hero-ledger .lh-facts b{color:#ece9e1}
.hero-ledger .stat{display:block;min-width:0;padding:0;border:0;border-radius:0;background:none;animation:none}
.hero-ledger .stat b{
  display:inline;margin:0 6px 0 0;font-family:var(--font-display);font-weight:800;font-size:1em;line-height:inherit;
  letter-spacing:0;color:#ece9e1
}
.hero-ledger .stat span{font-size:1em;line-height:inherit;color:inherit}

/* ---- the frame: glass, a hairline border lit from the top centre, a warm glow behind ---- */
.hero-ledger>.fr-frame{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.hero-ledger .fr-frame::before{ /* the warm light behind the panel, at its top edge */
  content:"";position:absolute;left:12%;right:12%;top:-96px;height:230px;
  background:radial-gradient(closest-side,rgba(255,122,26,0.16),rgba(255,107,0,0.062) 46%,rgba(255,107,0,0.018) 76%,rgba(255,107,0,0) 100%)
}
/* glass and edge clip what travels inside them to the panel's rounded shape, so nothing widens the page */
.hero-ledger .fr-glass,.hero-ledger .fr-edge{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.hero-ledger .fr-glass{
  background:
    radial-gradient(48% 150px at 50% 0,rgba(255,138,51,0.055),rgba(255,138,51,0.028) 40%,rgba(255,138,51,0.008) 75%,rgba(255,138,51,0) 100%),
    linear-gradient(180deg,rgba(241,239,232,0.042),rgba(241,239,232,0.022) 46%,rgba(241,239,232,0.016));
  box-shadow:0 60px 120px -70px rgba(0,0,0,0.95)
}
/* the border: a 1px ring (everything but the 1px edge is masked away) */
.hero-ledger .fr-edge{
  padding:1px;
  background:
    radial-gradient(44% 90px at 50% 0,rgba(255,222,190,0.62),rgba(255,166,96,0.2) 52%,rgba(255,140,60,0) 100%),
    linear-gradient(180deg,rgba(241,239,232,0.17),rgba(241,239,232,0.085) 34%,rgba(241,239,232,0.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)
}
/* the travelling light. On the ring it lights only the border, and follows the corner's curve down;
   the wash, inside the glass, is the warm light it spills into the panel. Both move by transform only. */
.hero-ledger .fr-streak,.hero-ledger .fr-wash{
  position:absolute;left:0;top:0;width:var(--fr-run);margin-left:calc(var(--fr-run) / -2);
  transform:translateX(var(--fr-rest))
}
.hero-ledger .fr-streak{
  height:120px;margin-top:-60px;
  background:
    radial-gradient(28% 26% at 64% 50%,#fffdf8 0%,rgba(255,242,226,0.95) 45%,rgba(255,200,150,0) 100%),
    radial-gradient(50% 44% at 52% 50%,#ffc488 0%,rgba(255,150,70,0.6) 46%,rgba(255,122,26,0) 100%)
}
.hero-ledger .fr-wash{
  height:220px;margin-top:-110px;
  background:
    radial-gradient(34% 12px at 62% 50%,rgba(255,240,222,0.75),rgba(255,200,150,0.28) 45%,rgba(255,170,100,0) 100%),
    radial-gradient(48% 50% at 58% 50%,rgba(255,150,70,0.24),rgba(255,130,40,0.13) 28%,rgba(255,122,26,0.05) 52%,rgba(255,107,0,0.016) 76%,rgba(255,107,0,0) 100%)
}

/* ---- motion ---- */
@keyframes fr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fr-fade{from{opacity:0}}
@keyframes fr-bloom{from{opacity:0;transform:scale(0.7,0.5)}}
@keyframes fr-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the light runs the top edge in the first 54% of the cycle, then rests */
@keyframes fr-travel{
  0%{transform:translateX(var(--fr-from))}
  54%,100%{transform:translateX(var(--fr-to))}
}
@keyframes fr-shine{0%{opacity:0}8%{opacity:1}44%{opacity:1}54%,100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  /* the site's own title choreography is replaced by the word rise below */
  html.motion-on .hero-ledger h1#hero-title{animation:none}
  html.motion-on .hero-ledger h1 .line>span{transform:none;animation:none;opacity:1;filter:none}
  html.motion-on .hero-ledger .lh-shelf{animation:none} /* its buttons and facts rise on their own */

  /* before the curtain lifts: everything waits, unlit */
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger :is(.lh-mast,.lh-sub,.hero-fold,.lh-ctas,.lh-facts,.stat-row,.fr-glass,.fr-edge,.fr-streak,.fr-wash),
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger .fr-frame::before{opacity:0;animation:none}

  /* the words rise and sharpen (motion.js wraps them in .sw/.swi) */
  html.motion-on .hero-ledger h1 .swi{
    transition:transform 1.1s var(--fr-ease) var(--swd,0ms),opacity 1.1s var(--fr-ease) var(--swd,0ms),filter 1.25s var(--fr-ease) var(--swd,0ms)
  }
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger h1 .swi,
  html.motion-on .hero-ledger h1:not(.sw-in) .swi{opacity:0;filter:blur(12px);transform:translateY(0.42em)}

  /* the entrance: the glass settles, its border draws left to right, the light behind blooms */
  html.motion-on.si-revealed .hero-ledger .fr-glass{animation:fr-fade 1.2s var(--fr-ease) backwards}
  html.motion-on.si-revealed .hero-ledger .fr-edge{animation:fr-draw 1.2s cubic-bezier(0.45,0.05,0.25,1) 0.1s backwards}
  html.motion-on.si-revealed .hero-ledger .fr-frame::before{animation:fr-bloom 1.6s var(--fr-ease) 0.5s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-mast{animation:fr-rise 0.9s var(--fr-ease) 0.05s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-sub:not(.hero-fold .lh-sub){animation:fr-rise 1s var(--fr-ease) 0.35s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-sub+.lh-sub:not(.hero-fold .lh-sub){animation-delay:0.45s}
  html.motion-on.si-revealed .hero-ledger .hero-fold{animation:fr-rise 1s var(--fr-ease) 0.5s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-ctas{animation:fr-rise 1s var(--fr-ease) 0.6s backwards}
  html.motion-on.si-revealed .hero-ledger :is(.lh-facts,.stat-row){animation:fr-rise 1s var(--fr-ease) 0.8s backwards}

  /* the loop: one pass along the top edge every 6.6s */
  html.motion-on.si-revealed .hero-ledger .fr-streak,
  html.motion-on.si-revealed .hero-ledger .fr-wash{
    animation:fr-travel var(--fr-cycle) linear var(--fr-loop) infinite backwards,fr-shine var(--fr-cycle) linear var(--fr-loop) infinite backwards
  }
  /* off screen the loop rests (hero-frame.js toggles .fr-idle) */
  html.motion-on.si-revealed .hero-ledger.fr-idle .fr-streak,
  html.motion-on.si-revealed .hero-ledger.fr-idle .fr-wash{animation-play-state:paused}
}

/* ---- tablet: the chip rail sits on top ---- */
@media (max-width:1099px) and (min-width:701px){
  .hero-ledger{width:min(92%,900px);min-height:min(calc(100svh - 260px),680px)}
  .hero-ledger h1{font-size:clamp(2.4rem,6vw,3.9rem)}
}

/* ---- phone: the panel takes the width, the copy sits close to the top ---- */
@media (max-width:700px){
  .hero-ledger{
    --fr-radius:24px;--fr-run:56%;--fr-from:-7%;--fr-to:189%;--fr-rest:89%;
    width:auto;min-height:0;justify-content:flex-start;
    margin:6px -2px 28px;padding:18px 14px 22px
  }
  .hero-ledger .lh-mast{flex-direction:column;gap:7px;padding:0;background:none;border:0;box-shadow:none}
  .hero-ledger .lh-hair{display:none}
  .hero-ledger .lh-kicker{font-size:0.6rem;letter-spacing:0.14em}
  .hero-ledger .lh-jump{min-height:32px;padding:0 15px;font-size:0.78rem;
    background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));border-color:rgba(241,239,232,0.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
  .hero-ledger h1{font-size:clamp(1.75rem,8vw,2.3rem);line-height:1.06;margin-top:14px}
  .hero-ledger h1 br+.accent{font-size:0.72em;margin-top:0.18em}
  .hero-ledger .lh-sub{margin-top:14px;font-size:0.93rem;line-height:1.52}
  .hero-ledger .lh-sub+.lh-sub{margin-top:8px;font-size:0.86rem;line-height:1.5}
  .hero-ledger .hero-fold{margin-top:8px}
  .hero-ledger .hero-fold summary{font-size:0.8rem}
  .hero-ledger .lh-shelf,.hero-ledger .hero-copy>.lh-ctas{margin-top:18px}
  .hero-ledger .lh-ctas{width:100%;gap:10px 8px}
  .hero-ledger .lh-ctas .btn-hero,.hero-ledger .lh-ctas .lh-ghost{flex:1 1 auto;justify-content:center;min-height:48px;padding:0 14px;font-size:0.88rem}
  .hero-ledger .lh-facts,.hero-ledger .stat-row{margin-top:20px;gap:6px 20px}
  .hero-ledger .lh-facts li,.hero-ledger .stat{font-size:0.82rem}
  .hero-ledger .fr-frame::before{left:4%;right:4%;top:-56px;height:150px}
  .hero-ledger .fr-streak{height:96px;margin-top:-48px}
}

/* ---- the short hero (Quote, Case studies): no buttons, so the panel hugs its content and the page's tool or list starts sooner ---- */
.hero-ledger.hero-ledger--min{min-height:0;padding-block:clamp(30px,4.6vh,48px) clamp(32px,5vh,52px);margin-bottom:clamp(28px,5vh,56px)}
/* a mast without a jump link (Quote) ends cleanly, with no stray divider */
.hero-ledger .lh-hair:last-child{display:none}
.hero-ledger .lh-mast:not(:has(.lh-jump)){padding-right:16px}
/* an unsplit plain headline keeps its own layer, so phones do not soften it under the site's scroll-driven dim */
.hero-ledger h1:not(:has(.line)):not(:has(.sw)){will-change:transform}
/* long one-sentence headlines sit on balanced rows instead of running edge to edge */
.hero-ledger h1:not(:has(br)){max-width:min(100%,13em)}
/* a place name is never split across two rows */
.hero-ledger h1 .fr-nb{white-space:nowrap}
@media (max-width:1099px) and (min-width:701px){
  .hero-ledger{min-height:min(calc(100svh - 280px),600px)} /* short pages must not become a hollow box on tablets */
}
@media (max-width:700px){
  .hero-ledger{margin-top:12px}
  /* a long kicker wraps as centred, balanced text with its dot attached */
  .hero-ledger .lh-kicker{display:block;max-width:100%;text-align:center;letter-spacing:0.1em;text-wrap:balance}
  .hero-ledger .lh-kicker::before{display:inline-block;vertical-align:0.1em;margin-right:8px}
  /* the facts stack as centred rows on every page, instead of wrapping 2 + 1 on some and 1 + 2 on others */
  .hero-ledger .lh-facts,.hero-ledger .stat-row{flex-direction:column;align-items:center}
}

/* ---- print / save as PDF: backgrounds are dropped, so the headline takes solid colours ---- */
@media print{
  .hero-ledger h1#hero-title,
  .hero-ledger h1 .line>span,
  .hero-ledger h1 .swi,
  .hero-ledger h1 .accent,
  .hero-ledger h1 .accent .swi{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
  .hero-ledger h1 .accent,
  .hero-ledger h1 .accent .swi{color:var(--orange)}
  .hero-ledger>.fr-frame{display:none}
}

/* ---- Windows high contrast: solid text gets backplates, so the rows need more leading ---- */
@media (forced-colors:active){.hero-ledger h1{line-height:1.2}}