/* Industry pages (/industries/<slug>/), built by src/templates/industry.mjs.
   Every rule is scoped to body.indp or an indp- class so nothing leaks to other pages. */

/* ---------- hero ---------- */
.indp .page-hero{padding-bottom:clamp(56px,6.5vw,96px)}
.indp .page-title{font-size:clamp(2.6rem,1.3rem + 4.2vw,5rem);max-width:13ch}
@media (min-width:900px){.indp .page-hero-grid.has-aside{grid-template-columns:1.05fr 1fr}}
.indp .page-lede{max-width:560px}

/* a plain browser frame, drawn in CSS */
.indp-frame{background:var(--ink-2);border-radius:16px;padding:0 6px 6px;box-shadow:0 40px 70px -40px rgba(11,13,20,.6)}
.indp-bar{display:flex;align-items:center;gap:14px;height:38px;padding:0 10px}
.indp-dots{display:flex;gap:7px;flex:none}
.indp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26)}
.indp-dots i:first-child{background:var(--yellow)}
.indp-url{flex:0 1 300px;min-width:0;margin-inline:auto;padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.indp-bar:has(.indp-url):not(:has(.tag))::after{content:"";flex:none;width:41px}
.indp-bar .tag{flex:none;margin:0 0 0 auto;padding:3px 10px;font-size:11px}
.indp-frame--plain{padding-top:6px}
.indp-frame--plain .indp-frame-pic{border-radius:11px}
.indp-frame-pic{position:relative;border-radius:6px 6px 11px 11px;overflow:hidden;background:var(--paper-2)}
.indp-frame-pic img,.indp .page-hero-aside .indp-frame-pic img{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:0;object-fit:cover}

.indp-hero-pic{border:1px solid var(--line-light)}
.indp-hero-cap{display:flex;align-items:center;gap:12px;padding:14px 8px 8px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82)}
.indp-hero-cap .tag{margin:0;flex:none}
.indp-hero-cap .tag--ink{background:#fff;color:var(--ink)}

/* ---------- what the business needs ---------- */
.indp-needs{align-items:stretch}
.indp-need{display:flex;flex-direction:column;padding:26px 26px 30px}
.indp-need-n{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--blue);margin-bottom:clamp(28px,3.4vw,56px)}
.indp-need .card-title{font-size:clamp(21px,1.5vw,24px);text-wrap:balance}
@media (min-width:1100px){.indp-needs.cards--4 .card-title{min-height:2.24em}}

/* ---------- what we would build ---------- */
.indp-build{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,64px);border-bottom:1px solid var(--line-light)}
.indp-build>li{border-top:1px solid var(--line-light)}
.indp-build-row{display:grid;grid-template-columns:34px 1fr 44px;gap:0 18px;align-items:start;height:100%;padding:clamp(22px,2.2vw,30px) 0;text-decoration:none}
.indp-build-n{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.06em;line-height:1.9;color:var(--yellow)}
.indp-build-main{display:grid;gap:8px;min-width:0}
.indp-build-name{font-family:var(--display);font-weight:800;font-size:clamp(22px,1.9vw,29px);letter-spacing:-.035em;line-height:1.1;transition:color .2s}
.indp-build-text{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.74);max-width:46ch}
.indp-build-note{font-size:13px;font-weight:650;line-height:1.4;color:var(--yellow)}
.indp-build-go{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s,border-color .2s,transform .35s var(--ease)}
.indp-build-row:focus-visible .indp-build-name{color:var(--yellow)}
.indp-build-row:focus-visible .indp-build-go{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:rotate(-45deg)}
@media (hover:hover){
  .indp-build-row:hover .indp-build-name{color:var(--yellow)}
  .indp-build-row:hover .indp-build-go{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:rotate(-45deg)}
}
.indp-build-foot{margin-top:26px}
@media (max-width:899px){.indp-build{grid-template-columns:1fr}}
@media (max-width:519px){
  .indp-build-row{grid-template-columns:28px 1fr 38px;gap:0 12px}
  .indp-build-go{width:38px;height:38px}
}

/* ---------- the example ---------- */
.indp-case{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4.5vw,72px);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:clamp(20px,2.4vw,32px);padding:clamp(22px,4vw,60px)}
.indp-case-copy .tag{margin-bottom:16px}
.indp-case-name{font-family:var(--display);font-weight:800;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);letter-spacing:-.04em;line-height:1.02}
.indp-case-text{margin-top:18px;font-size:clamp(1.02rem,1rem + .15vw,1.12rem);line-height:1.6;color:var(--ink-3)}
.indp-case-plain{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--yellow);color:var(--ink);font-size:15px;font-weight:600;line-height:1.5}
.indp-case-points{margin-top:22px}
.indp-case-points li{font-size:15.5px}
.indp-go{display:inline-flex;align-items:center;gap:10px;margin-top:28px}
.indp-go .i-arrow{transition:transform .25s var(--ease)}
.indp-go:hover .i-arrow{transform:translateX(4px)}
.indp-shots{min-width:0}
.indp-shot{position:relative}
.indp-shot--main{background:var(--ink)}
.indp-case.has-two .indp-shot--main{width:88%}
.indp-shot--inset{width:50%;margin:-19% 0 0 auto;border:6px solid #fff;border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:0 30px 60px -30px rgba(11,13,20,.55)}
.indp-shot--inset img{display:block;width:100%;height:auto}
.indp-pin{position:absolute;left:12px;top:12px;margin:0;z-index:1;box-shadow:0 6px 18px rgba(11,13,20,.25)}
.indp-none{max-width:760px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px)}
.indp-none p{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--ink-2)}
@media (max-width:999px){
  .indp-case{grid-template-columns:1fr}
  .indp-shots{order:-1}
}
@media (max-width:519px){
  .indp-case.has-two .indp-shot--main{width:92%}
  .indp-shot--inset{width:56%;margin-top:-16%;border-width:4px;border-radius:12px}
  .indp-frame{border-radius:12px;padding:0 4px 4px}
  .indp-bar{height:30px}
  .indp-dots i{width:7px;height:7px}
  .indp-url{font-size:11.5px;padding:2px 10px}
  .indp-bar .tag,.indp-pin{padding:2px 8px;font-size:10px}
  .indp-pin{left:8px;top:8px}
  .indp-frame--plain{padding-top:4px}
}

/* ---------- how a project runs ---------- */
@media (min-width:1000px){.indp-steps--3 .steps{grid-template-columns:repeat(3,1fr)}}

/* ---------- other industries ---------- */
.indp-others-band{border-top:1px solid var(--line)}
.indp-others{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.indp-others a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(11,13,20,.22);background:#fff;font-weight:650;font-size:15.5px;line-height:1.2;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.indp-others a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.indp-others a.indp-others-all{background:var(--ink);border-color:var(--ink);color:#fff}
.indp-others a.indp-others-all:hover{background:var(--blue);border-color:var(--blue)}
@media (max-width:519px){.indp-others a{min-height:44px;padding:0 16px;font-size:14.5px}}

@media (prefers-reduced-motion:reduce){.indp-build-go,.indp-go .i-arrow{transition:none;transform:none!important}}