/* The hero, shared by the homepage and the industry pages: one screen with a backdrop, the headline and the
   glass planner to type into. The markup comes from scripts/industries/build.mjs, the behaviour from hero.js.
   Each page sets its backdrop with --hero-day and --hero-night (the homepage on <html>, an industry page on
   its .stage). Night styles are in theme-dark.css. */
/* --h1 is the headline size; --gap the space between the headline block and the bar. */
.stage{--h1:min(clamp(38px,4.8vw,80px),10.4vw);--gap:clamp(24px,2.4vw,36px);
  position:relative;isolation:isolate;overflow:hidden;min-height:max(640px,100svh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(80px,10vh,110px)) 0 clamp(80px,10vh,110px);
  transition:padding .7s cubic-bezier(.16,1,.3,1)}
/* The sky: washes of green and white over faint columns. The pointer warps it (see the script). */
.sky{position:absolute;inset:-40px;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
.sky-in{position:absolute;inset:0;background:#EEF1EA var(--hero-day) center/cover no-repeat}
/* a soft pool of light behind the headline and the bar, so the words always read */
.sky-in::after{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 46% at 50% 46%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%)}
/* a copy of the sky, warped, seen only through a small soft circle around the pointer */
.sky-lens{opacity:0;filter:url(#sky-warp);transition:opacity .5s;
  -webkit-mask-image:radial-gradient(circle 90px at var(--mx,50%) var(--my,50%),#000 25%,transparent 100%);
  mask-image:radial-gradient(circle 90px at var(--mx,50%) var(--my,50%),#000 25%,transparent 100%)}
.sky.warp .sky-lens{opacity:1}
.hero{position:absolute;left:0;right:0;bottom:100%;padding:0 16px var(--gap);
  text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
/* Searching, and while the plan is up: the headline steps aside, the bar rises to just under the nav,
   and the loader takes the middle of the screen. */
.stage.focus{padding-top:calc(env(safe-area-inset-top,0px) + clamp(88px,11vh,120px));padding-bottom:clamp(24px,4vh,48px)}
/* While planning, the page steps back to just the logo and the work: the section links, Sign in and
   Get Started fade out (Get a free audit sits in the plan), and on wide screens the panel rises to the top,
   level with the logo beside it. */
.nav,.hdr-end{transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}
.stage.planned{justify-content:flex-start}
body.planning .hdr{pointer-events:none}
body.planning .logo{pointer-events:auto}
body.planning .nav,body.planning .hdr-end{opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
@media(min-width:1180px){.stage.focus{padding-top:calc(env(safe-area-inset-top,0px) + clamp(16px,1.8vw,28px))}}
.stage.focus .hero{opacity:0;transform:translateY(-16px);pointer-events:none}
.stage.focus .hp-load{flex-grow:1;justify-content:center;margin-top:0;padding-bottom:clamp(24px,6vh,64px)}
.hero h1{
  font-family:"Figtree",var(--sans);font-size:var(--h1);font-weight:500;letter-spacing:-.045em;line-height:1;max-width:none}
/* two lines on wide screens, each half on one line; on phones it wraps evenly */
.hero h1{text-wrap:balance}
@media(min-width:900px){.hero h1 .ln{display:block;white-space:nowrap}}
/* the industry heroes' first line turns over through what we run (hero.js): the next phrase rises in as the last
   one lifts away, both stacked in one cell so the line never jumps */
.hero h1 .rot{display:grid;justify-items:center}
.hero h1 .rot + .ln{display:block}
.rot-w{grid-area:1 / 1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .55s ease}
.rot-w.rot-in{transform:translateY(.42em);opacity:0;filter:blur(6px)}
.rot-w.rot-out{transform:translateY(-.42em);opacity:0;filter:blur(6px)}
/* sits evenly between the headline and the bar: this margin plus the space under the headline's letters
   matches --gap below it */
.hero-sub{font-family:"Figtree",var(--sans);margin-top:clamp(16px,1.4vw,22px);font-size:clamp(16px,1.3vw,21px);line-height:1.45;letter-spacing:-.01em;color:var(--fg-dim);max-width:40ch;text-wrap:balance}
@media(min-width:700px){.hero-sub{max-width:none}}

/* ---------------- the planner: one pane of glass set into the sky ---------------- */
/* The bar is the thing centred on the screen; the headline hangs above it, out of the flow. */
.hp-wrap{position:relative;z-index:2;width:100%;display:flex;justify-content:center;padding:0 16px}
/* Liquid glass: thin and clear rather than frosted white, a bright rim that catches light at the
   corners, a sheen across the top, and light pooling inside the bottom edge like thick glass. */
/* The whole planner, typed words and plan included, is set in Figtree like the headline. */
.hp{position:relative;isolation:isolate;width:min(780px,100%);text-align:left;font-family:"Figtree",var(--sans);
  padding:8px;border-radius:30px;
  background:
    radial-gradient(90% 60% at 50% 120%, rgba(255,255,255,.38), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.42) 55%, rgba(255,255,255,.52));
  backdrop-filter:blur(10px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(10px) saturate(1.9) brightness(1.07);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(255,255,255,.55),
    inset 0 -14px 24px -16px rgba(255,255,255,.9),
    inset 0 10px 22px -18px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 1px rgba(11,42,32,.06),
    0 0 0 1px rgba(11,42,32,.10),
    0 28px 60px -26px rgba(18,61,38,.45),
    0 2px 10px -4px rgba(18,61,38,.12);
  transition:box-shadow .3s}
/* the rim: a gradient border that is brightest at the top left and bottom right */
.hp::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.18) 62%, rgba(255,255,255,.4) 82%, rgba(255,255,255,.9) 100%);
  -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 sheen: a soft curved highlight across the upper half */
.hp::after{content:"";position:absolute;left:6%;right:6%;top:2px;height:48%;max-height:46px;border-radius:30px 30px 50% 50% / 30px 30px 100% 100%;
  pointer-events:none;z-index:1;background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0))}
.hp:focus-within{box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(255,255,255,.55),
    inset 0 -14px 24px -16px rgba(255,255,255,.9),
    inset 0 10px 22px -18px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 4px rgba(11,15,13,.05),
    0 0 0 1px rgba(11,15,13,.18),
    0 28px 60px -26px rgba(18,61,38,.5),
    0 2px 10px -4px rgba(18,61,38,.12)}
.hp>*{position:relative;z-index:3}
.hp-field{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 20px;border-radius:24px}
.hp-field textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;color:var(--fg);
  font:inherit;font-size:clamp(17px,1.3vw,20px);line-height:1.4;letter-spacing:-.01em;padding:12px 0;height:3.2em;max-height:8em}
.hp-field textarea::placeholder{color:#6E7571}
/* submit: a small glass bead with a return arrow; it fills with green once there is something to send */
.hp-go{flex:none;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--fg-dim);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px rgba(255,255,255,.6),0 0 0 1px rgba(11,42,32,.08),0 4px 10px -6px rgba(11,42,32,.3);
  transition:color .25s,background .25s,box-shadow .25s,transform .15s}
.hp-go:hover{color:var(--fg)}
.hp-go:active{transform:scale(.94)}
.hp-go:disabled{cursor:progress}
/* with something to send, the bead turns green with the shine (shine.css) */
.hp-go svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp-err{margin:10px 12px 4px;font-size:14px;color:var(--bad)}
.hp-err[hidden]{display:none}

/* working: a band of light runs across the glass while the plan is drawn up */
.hp.busy .hp-field{background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:hp-shim 1.3s linear infinite}
@keyframes hp-shim{from{background-position:120% 0}to{background-position:-120% 0}}

/* the plan, inside the same pane */
.hp-ask[hidden],.hp-out[hidden]{display:none}
.hp-out{padding:clamp(12px,1.4vw,20px) clamp(12px,1.4vw,20px) clamp(8px,1vw,12px)}
.hp-you{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--fg-faint)}
.hp-you span{flex:none}
.hp-you q{color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hp-head{margin-top:8px;font-family:"Figtree",var(--sans);font-size:clamp(21px,1.8vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.15;text-wrap:balance;outline:0}
.hp-svcs{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.hp-svcs li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;font-size:13px;letter-spacing:-.005em;
  color:#A3A3AB;background:rgba(255,255,255,.4);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.hp-svcs li svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the panel stays neutral glass: what we would build shows in ink, what we would not stays faint */
.hp-svcs li.on{color:var(--fg);background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,15,13,.16)}
.hp-steps{list-style:none;counter-reset:hp;margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px}
.hp-steps li{counter-increment:hp;display:grid;grid-template-columns:26px 1fr;gap:2px 12px;padding:12px 14px 12px 12px;border-radius:16px;
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.045)}
.hp-steps li::before{content:counter(hp);grid-row:1 / span 2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;color:var(--fg);background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,15,13,.14)}
.hp-steps b{font-weight:500;font-size:clamp(15px,1.05vw,16px);letter-spacing:-.01em;align-self:center}
.hp-steps p{font-size:clamp(13.5px,.95vw,14.5px);line-height:1.45;color:var(--fg-dim)}
.hp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.hp-book{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:12px 20px;line-height:1;color:#fff;
  font-size:15px;font-weight:500;letter-spacing:-.01em;background:linear-gradient(180deg,#2A2F2C,#0E1210);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -14px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hp-book:hover{transform:translateY(-2px)}
.hp-book svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hp-book:hover svg{transform:translateX(3px)}
.hp-again{border:0;background:transparent;font-size:14px;color:var(--fg-dim);padding:8px 2px;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s}
.hp-again:hover{color:var(--fg);border-color:var(--fg)}
/* the plan builds in: headline, then the services light up, then each step */
.hp-out.show .hp-you,.hp-out.show .hp-head,.hp-out.show .hp-svcs,.hp-out.show .hp-foot{animation:hp-rise .6s cubic-bezier(.16,1,.3,1) both}
.hp-out.show .hp-head{animation-delay:.06s}
.hp-out.show .hp-svcs{animation-delay:.14s}
.hp-out.show .hp-steps li{animation:hp-rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.24s + var(--i) * .08s)}
.hp-out.show .hp-foot{animation-delay:calc(.3s + var(--n) * .08s)}
@keyframes hp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the loader: the mark in characters, and what we are doing in words under it */
.hp-load{display:flex;flex:0 1 auto;flex-direction:column;align-items:center;margin-top:clamp(20px,3vh,40px);animation:hp-fade .5s ease both;
  transition:flex-grow .7s cubic-bezier(.16,1,.3,1)}
.hp-load[hidden]{display:none}
.hp-load.out{animation:hp-fade-out .35s ease both}
.hp-ascii{display:block;width:min(340px,72vw);height:auto}
.hp-load-t{margin-top:clamp(10px,1.4vh,18px);font-family:"Figtree",var(--sans);font-size:clamp(18px,1.5vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--brand);
  min-height:1.3em;transition:opacity .25s}
.hp-load-t.swap{opacity:0}
@keyframes hp-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hp-fade-out{to{opacity:0;transform:translateY(-6px)}}
@media(max-width:560px){
  .hp{border-radius:26px;padding:6px}
  .hp-field{padding-left:16px}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* an industry's own photo as the backdrop: a softer veil so the ink headline reads over a busier picture */
.stage.photo .sky-in{background-color:#E9ECEA}
.stage.photo .sky-in::after{background:radial-gradient(62% 52% at 50% 46%,rgba(250,250,249,.84),rgba(250,250,249,.4) 78%),
  linear-gradient(180deg,rgba(250,250,249,.55),rgba(250,250,249,.22))}
html[data-theme="dark"] .stage.photo .sky-in::after{background:radial-gradient(62% 52% at 50% 46%,rgba(11,15,13,.8),rgba(11,15,13,.5) 78%),
  linear-gradient(180deg,rgba(11,15,13,.62),rgba(11,15,13,.38))}

/* on the industry pages the header sits on this light hero by day, so it is ink; at night it stays light */
html:not([data-theme="dark"]) body.ind.sky-page .logo{color:#0B0B0C}
html:not([data-theme="dark"]) body.ind.sky-page .nav>a,html:not([data-theme="dark"]) body.ind.sky-page .nav-dd-t{color:#767680}
html:not([data-theme="dark"]) body.ind.sky-page .nav>a:hover,html:not([data-theme="dark"]) body.ind.sky-page .nav-dd-t:hover,
html:not([data-theme="dark"]) body.ind.sky-page .nav-dd:hover .nav-dd-t,html:not([data-theme="dark"]) body.ind.sky-page .nav-dd-t[aria-current]{color:#0B0B0C}
html:not([data-theme="dark"]) body.ind.sky-page .nav>a::after,html:not([data-theme="dark"]) body.ind.sky-page .nav-dd-t::after{background:#0B0B0C}
html:not([data-theme="dark"]) body.ind.sky-page .hdr-sign{color:#0B0B0C;background:rgba(11,42,32,.055)}
html:not([data-theme="dark"]) body.ind.sky-page .hdr-sign:hover{background:rgba(11,42,32,.09)}