/* Industry pages: the skeleton every industry shares. It has no look of its own: each css/ind/<slug>.css sets the
   tokens (colours, --i-font, --i-r) and the decoration, so a restaurant reads like a menu and a gym like a poster.
   Everything is centred. */
body.ind{--i-font:var(--ar-body);--i-w:700;--i-r:16px;--i-h1:clamp(40px,6.4vw,84px);background:var(--bg);color:var(--fg)}
.ind :is(h1,h2,h3){font-family:var(--i-font),var(--font-body);font-weight:var(--i-w);letter-spacing:0}

/* hero: the industry's drawing behind or above, the words centred */
.ih{position:relative;min-height:min(94svh,940px);display:grid;place-items:center;padding:calc(var(--hd-h) + clamp(40px,7vh,80px)) 20px clamp(56px,8vh,96px);overflow:hidden;isolation:isolate;text-align:center}
.ih-art{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none}
.ih-art .art{width:min(1120px,96vw);height:auto;max-height:88%;overflow:visible}
.ih-copy{position:relative;max-width:900px;display:grid;justify-items:center;gap:18px}
.ih h1{font-size:var(--i-h1);line-height:1.15}
.ih-lead{font-size:clamp(17px,1.5vw,21px);color:var(--muted);max-width:50ch}
.ih-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.ih:not(.live) .art *{animation-play-state:paused!important}
body.ind .ih{background-color:var(--bg);grid-template-rows:auto auto}
.ih.stack .ih-art{grid-row:1}
.ih-copy,.ih-caps{grid-row:2;grid-column:1}

/* ===== The story (same idea and beats as the homepage): the scene starts drained, the Sky Peak mark falls onto it,
   life spreads out from where it lands, then the headline types in. js/ind.js drives it with the scroll. ===== */
.ih-dead,.ih-flash,.ih-beam,.ih-caps,.ih-cue,.ih .summit{display:none}
.hero-story{position:relative}
.hero-story.is-story{height:400vh}
.hero-story.is-story > .ih{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.is-story .ih-dead{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) sepia(.28) brightness(.74) contrast(.92);backdrop-filter:grayscale(1) sepia(.28) brightness(.74) contrast(.92);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.is-story .ih-flash{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.is-story .ih-beam{display:block;position:absolute;top:0;left:0;z-index:2;width:28px;height:0;opacity:0;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.4) 40%,#fff 49% 51%,rgba(255,255,255,.4) 60%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%)}
.is-story .ih .summit{display:block;position:absolute;z-index:3;width:58px;height:58px;translate:-50% -112%;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.is-story .ih-copy{position:relative;z-index:2;opacity:0}
.is-story .ih-caps{display:grid;position:relative;z-index:2;place-items:center;pointer-events:none;text-align:center}
.ih-caps > div{grid-area:1/1;max-width:min(900px,92vw);padding-inline:12px;opacity:0;will-change:transform,opacity}
.ih-caps h2{font-size:clamp(30px,4.6vw,62px);line-height:1.25}
.ih-caps p{font-size:clamp(16px,1.6vw,21px);margin-top:10px;font-weight:600;color:var(--secondary-fg)}
.ih-caps .dead{opacity:1}
.is-story .ih-cue{display:flex;position:absolute;left:50%;bottom:clamp(16px,3.5vh,36px);translate:-50% 0;z-index:3;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  font:600 14px var(--font-body);color:var(--fg)}
.ih-cue span{padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid var(--border)}
.ih-cue i{width:22px;height:34px;border-radius:12px;border:2px solid currentColor;position:relative;opacity:.75}
.ih-cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;animation:ihCue 1.6s var(--ease-out) infinite}
@keyframes ihCue{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
/* the story frame is exactly one screen: keep the words and the drawing inside it on phones */
@media (max-width:700px){
  .hero-story.is-story > .ih{padding:calc(var(--hd-h) + 12px) 16px 20px}
  .is-story .ih.stack .ih-art .art{height:min(26svh,230px);width:auto;max-width:88vw}
  .is-story .ih-lead{font-size:15px}
  .is-story .ih-copy{gap:12px}
  .is-story .ih-ctas .btn{min-height:46px}
}

/* ===== Section motion, as on the homepage: titles rise word by word out of a blur, service icons draw themselves,
   cards rise in, the Sky Peak tile flips in ===== */
.js .sx-head h2 .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);
  transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out),filter 700ms var(--ease-out);transition-delay:calc(var(--i) * 70ms)}
.js .sx-head.seen h2 .w{opacity:1;transform:none;filter:none}
.js .is-list > li.rv{transform:translateY(40px) scale(.97);transition:transform 900ms var(--ease-out) var(--d,0ms),opacity 600ms ease var(--d,0ms)}
.js .is-list > li.rv.in{transform:none}
.js .is-ico svg *{stroke-dasharray:100;stroke-dashoffset:100}
.js .is-list > li.in .is-ico svg *{animation:icoDraw 1100ms var(--ease-out) forwards;animation-delay:calc(var(--d,0ms) + 350ms)}
@keyframes icoDraw{to{stroke-dashoffset:0}}
.c-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--primary);margin-bottom:6px}
.c-mark img{width:40px;height:40px}
.js .c-mark{transform:perspective(400px) rotateY(90deg);opacity:0;transition:transform 900ms var(--ease-out),opacity 300ms ease}
.js .c-mark.seen{transform:none;opacity:1}

/* sections */
.sx{padding:clamp(64px,9vw,120px) 20px}
.sx-in{max-width:1180px;margin:0 auto}
.sx-head{text-align:center;max-width:760px;margin:0 auto clamp(32px,4vw,56px)}
.sx-head h2{font-size:clamp(30px,4vw,52px);line-height:1.2;margin-bottom:10px}
.sx-head p{color:var(--muted);max-width:56ch;margin-inline:auto}

/* clients: the names first (every client the agency gave us), logos where we have them */
.ir-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ir-list li{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:8px 22px;border-radius:var(--i-r);background:var(--card);border:1px solid var(--border);font-weight:700;font-size:17px;line-height:1.3}
.ir-list img{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.ir-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.ir-logos img{width:72px;height:72px;border-radius:50%}

/* services: four, two by two */
.is-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.is-list li{display:grid;justify-items:center;align-content:start;text-align:center;gap:12px;padding:clamp(28px,3vw,44px) clamp(20px,2.6vw,36px);border-radius:var(--i-r);background:var(--card);border:1px solid var(--border)}
.is-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:calc(var(--i-r) * .75);background:var(--primary);color:var(--on-primary)}
.is-ico svg{width:28px;height:28px}
.is-list h3{font-size:clamp(20px,1.9vw,25px);line-height:1.35}
.is-list p{color:var(--muted);max-width:42ch}

/* closing call */
.ic-box{max-width:840px;display:grid;justify-items:center;text-align:center;gap:16px;padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px);border-radius:var(--i-r);background:var(--card);border:1px solid var(--border)}
.ic-goal{display:grid;gap:4px}
.ic-goal span{color:var(--accent);font-weight:700;font-size:14px}
.ic-goal b{font-size:clamp(19px,2vw,24px);line-height:1.5}
.ic h2{font-size:clamp(28px,3.6vw,48px);line-height:1.2}
.ic-box > p:not(.ic-goal){color:var(--muted);max-width:52ch}

/* the other industries */
.im .sx-head{margin-bottom:24px}
.im .sx-head h2{font-size:clamp(24px,2.6vw,34px)}
.im-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.im-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border);color:var(--secondary-fg);font-weight:600;font-size:15px;transition:border-color var(--dur),color var(--dur),background-color var(--dur)}
.im-all{display:table;margin:28px auto 0;font-weight:700;color:var(--fg);text-decoration:underline;text-underline-offset:5px}
@media (hover:hover) and (pointer:fine){ .im-list a:hover{border-color:var(--primary);color:var(--fg)} }

#work .sx-in{max-width:1240px}

@media (max-width:760px){
  .is-list{grid-template-columns:1fr}
  .ir-list{gap:8px}
  .ir-list li{min-height:50px;padding:6px 16px;font-size:16px}
  .ir-list img{width:36px;height:36px}
  .ih-ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .ind .art *{animation:none!important;transition:none!important}
  /* drawings that normally draw themselves in are shown finished */
  .ind .art .bd,.ind .art .ln,.ind .art .line,.ind .art .route-on,.ind .art .ap *{stroke-dashoffset:0!important}
  .ind .art .wn{opacity:.32}
  .ind .art .plane,.ind .art .chair{opacity:1;transform:none}
  .js .sx-head h2 .w,.js .c-mark{opacity:1;transform:none;filter:none;transition:none}
  .js .is-ico svg *{stroke-dashoffset:0;animation:none}
  .js .is-list > li.rv{transform:none}
}