/* hero-ink.css (11 Nov, ink pass): the hero is option 1 "clean ink" on cream paper.
   Loads after hero-r25.css (text column, credentials, button) and replaces hero-r27.css, which is no longer loaded.
   Laptop (1180 px and up): the canvas fills the hero behind the text block; the drawing sits in the space right of the words.
   Phone and tablet (under 1180 px): the words first, then the drawing as a band under them. */
#hero.h25{background:#F4EFE4;color:#114136;position:relative;display:flex;align-items:center;min-height:var(--hh);overflow:hidden}

/* ---- the drawing ---- */
.hink{position:absolute;inset:0;margin:0;z-index:0;background:#F4EFE4;pointer-events:none}
.hink canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- the text block, restyled for cream paper ---- */
#hero.h25 .h25-side{position:relative;z-index:2;width:100%;max-width:min(640px,calc(46% + var(--edge,48px)));padding:112px 0 56px max(var(--edge,48px),20px);box-sizing:border-box;min-width:0}
#hero.h25 .lbl{color:#114136;margin:0}
#hero.h25 h1{font-size:clamp(40px,3.9vw,52px);line-height:1.1;max-width:none;margin-top:14px;color:#114136;text-wrap:balance}
#hero.h25 h1 em{display:inline;font-style:italic;color:#2E7C63}
#hero.h25 .c-row{margin-top:28px}
#hero.h25 .btn.big{background:#114136;color:#F6F4EE;box-shadow:none;white-space:normal;text-align:left;line-height:1.25;max-width:100%}
#hero.h25 .btn.big:hover{background:#0B2C25}
@media (min-width:1240px){#hero.h25 .c-row .btn.big{white-space:nowrap}}
#hero.h25 a:focus-visible{outline:3px solid #114136;outline-offset:4px}
#hero.h25 .creds{max-width:none}
#hero.h25 .creds li+li::before{background:rgba(17,65,54,.16)}
#hero.h25 .creds b{color:#114136}
#hero.h25 .creds b .st{color:#2E7C63}
#hero.h25 .creds span:not(.st){color:#3F5F54}

/* ---- laptop: four credentials in a row stay inside the column ---- */
@media (min-width:1180px){
  #hero.h25 .creds{column-gap:20px}
  #hero.h25 .creds li+li::before{left:-10px}
}

/* ---- phone and small tablet: text first, then the drawing as a band ---- */
@media (max-width:1179px){
  #hero.h25{display:block;min-height:0}
  #hero.h25 .h25-side{max-width:none;padding:96px var(--edge,24px) 28px}
  #hero.h25 h1{font-size:44px}
  .hink{position:relative;inset:auto;width:100%;aspect-ratio:16/10;margin:0}
  #hero.h25 .c-row{max-width:420px}
  #hero.h25 .creds{margin-top:32px}
}
@media (max-width:899px){.hink{aspect-ratio:4/3}}
@media (max-width:600px){
  #hero.h25 h1{font-size:34px;line-height:1.12}
  #hero.h25 .c-row{max-width:none}
  #hero.h25 .c-row .btn.big{align-self:stretch}
  #hero.h25 .creds{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:20px}
  #hero.h25 .creds li:nth-child(odd)::before{display:none}
  .hink{aspect-ratio:4/5}
}

/* r41: the paper grain and the soft edge shading used to be painted into the canvas on every frame (two full-screen passes at up to 2x pixels: the main cause of the
   stutter on zoom). They are now fixed layers above the canvas, composited by the browser, drawn once. Laptop layout only (set by hero-ink.js). */
.hink .hfx{position:absolute;inset:0;pointer-events:none;display:none}
.hink.hfx-on .hfx{display:block}
.hink .hfx-grain{opacity:.21;background-size:160px 160px;background-repeat:repeat}
.hink canvas{transform:translateZ(0)}