/* ===========================================================
   INDUSTRIES: /industries/ and /websites-for/<slug>/. 2026-10-21.
   Built from site.css pieces (pg-hero, pg-sec, pg-card, sx-rows,
   pg-split); only the industry-specific layout lives here.
   =========================================================== */

/* hero: copy beside the trade photo on desktop, photo under it on phones */
.ind-hero__in{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
.ind-hero--img .ind-hero__in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.ind-hero .h1{font-size:clamp(2.1rem,4.4vw,3.7rem);max-width:18ch}
.ind-hero__media{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -36px rgba(0,0,0,.75)}
.ind-hero__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ind-hero .herocta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:860px){
  .ind-hero--img .ind-hero__in{grid-template-columns:1fr}
  .ind-hero .herocta .btn{flex:1 1 100%;justify-content:center}
}

/* intro prose and its pull quote */
.ind-prose{max-width:760px;margin-inline:auto}
.ind-prose p{font-size:clamp(1.02rem,1.25vw,1.12rem);line-height:1.75;color:#3E4651}
.ind-prose p + p{margin-top:1.15em}
.ind-quote{margin:clamp(30px,4vw,44px) 0 0;padding:6px 0 6px clamp(18px,2.4vw,28px);border-left:4px solid var(--gold);
  font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.25;letter-spacing:-.015em;color:var(--green);text-wrap:balance}

/* three problem cards across */
@media (min-width:900px){ .ind-grid3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* the full-bleed image band with a rounded frame inside it */
.ind-band__fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(31,58,42,.1),0 40px 80px -40px rgba(31,58,42,.6)}
.ind-band__fig img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
@media (max-width:760px){ .ind-band__fig img{aspect-ratio:4/3} }
/* pages without a featured demo: the photo sits across the green/cream seam */
.ind-band--split{background:linear-gradient(180deg,var(--green) 0 50%,#F4EEE2 50% 100%);padding:0}
.ind-band--split .ind-band__fig{box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}

/* local SEO: photo beside the text */
.ind-split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
@media (max-width:860px){ .ind-split{grid-template-columns:1fr} }
.ind-photo{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(31,58,42,.1),0 40px 80px -40px rgba(31,58,42,.6)}
.ind-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
@media (max-width:860px){ .ind-photo img{aspect-ratio:4/3} }
.ind-ls .h2{font-size:clamp(1.85rem,3.6vw,2.8rem);line-height:1.06;margin-bottom:20px;color:var(--green);text-wrap:balance}
.ind-ls__txt{max-width:640px}
.ind-ls__txt p{color:#3E4651;line-height:1.72}
.ind-ls__txt p + p{margin-top:1em}
.pg-sec--deep.ind-ls .h2,.pg-sec--green.ind-ls .h2{color:#fff}
.pg-sec--deep.ind-ls p,.pg-sec--green.ind-ls p{color:rgba(238,241,234,.8)}

/* featured demo on a dark band */
.ind-demo .pg-head .h2{color:#fff}
.ind-demo .pg-shot{box-shadow:0 40px 80px -36px rgba(0,0,0,.7)}

/* the inline final CTA, kept as a light band so it never stacks on the dusk */
.ind-cta .wrap{text-align:center}
.ind-cta .h2{margin:0 auto;max-width:22ch;font-size:clamp(1.85rem,4vw,3rem);line-height:1.06;color:var(--green);text-wrap:balance}
.ind-cta .lede{margin:18px auto 0;max-width:62ch;color:var(--slate)}
.ind-cta .cta__row{margin-top:28px}
@media (max-width:760px){
  .ind-cta .wrap{text-align:left}
  .ind-cta .h2,.ind-cta .lede{margin-inline:0}
  .ind-cta .cta__row{justify-content:flex-start}
}

/* hub hero */
.ind-hubhero .h1{max-width:none}
.ind-hubhero .lede{max-width:60ch}
.ind-hubhero__p{margin-top:16px;max-width:64ch;color:rgba(255,255,255,.72);line-height:1.7}

/* hub: one card per trade */
.ind-hub__h{margin-bottom:clamp(26px,3.4vw,44px);color:var(--green)}
.ind-hub{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .ind-hub{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .ind-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
.ind-hub__card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 0 0 1px rgba(31,58,42,.08),0 24px 50px -32px rgba(31,58,42,.45);transition:transform 200ms cubic-bezier(.2,.7,.3,1),box-shadow 200ms ease}
.ind-hub__card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(200,151,58,.35),0 30px 60px -30px rgba(31,58,42,.45)}
.ind-hub__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ind-hub__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.ind-hub__t{font-family:var(--head);font-weight:700;font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.2;letter-spacing:-.01em;color:var(--green)}
.ind-hub__go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-family:var(--head);font-weight:700;font-size:.84rem;color:#8A6618}
.ind-hub__go svg{width:14px;height:14px;transition:transform 180ms ease}
.ind-hub__card:hover .ind-hub__go svg{transform:translateX(3px)}
.ind-hub__foot{margin-top:clamp(28px,3.4vw,44px);text-align:center;color:var(--slate)}
.ind-hub__foot a{color:var(--green);font-weight:600;text-underline-offset:3px}
@media (max-width:760px){ .ind-hub__foot{text-align:left} }