/* ===========================================================
   industry-page.css: web design industry pages (the spokes under
   /services/web-design/). From IndustryPage_Template_Mockup.html.
   Loaded after web-design-hub.css, whose main.wdh rules supply the
   crumb, buttons, steps and closing band; this file adds only the
   template's own slots, scoped to main.ip. Tokens only.
   =========================================================== */

/* hero: H1, intro, Start a project; no visual (the demo block follows) */
.ip .ip-hero { padding: 48px 0 88px; }
.ip .ip-hero h1 { font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: .94; letter-spacing: -.045em; color: var(--gray-deep); max-width: 15ch; margin-bottom: 28px; }
.ip .ip-hero .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--gray); max-width: 60ch; margin-bottom: 34px; }

/* demo block: label, line, framing, clickable still */
.ip .ip-demo { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 88px 0; scroll-margin-top: var(--nav-height); }
.ip .ip-demo .wrap { display: grid; grid-template-columns: .85fr 1.35fr; gap: 56px; align-items: center; }
.ip .ip-demo .lab { display: block; }
.ip .ip-demo .line { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--gray-deep); margin: 16px 0 20px; }
.ip .frame-note { border-left: 2px solid var(--orange-deep); padding: 4px 0 4px 16px; font-size: 15px; line-height: 1.6; }

/* content sections */
.ip .ip-sec { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.ip .ip-sec.alt { background: var(--bone-deep); }
.ip .ip-sec h2 { max-width: 22ch; margin-bottom: 22px; }
.ip .ip-sec .intro { font-size: 18px; line-height: 1.65; margin-bottom: 40px; }

/* needs: four bold-lead items, 2 x 2 */
.ip .needs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gray-deep); }
.ip .needs > div { padding: 30px 44px 34px 0; border-bottom: 1px solid var(--rule); }
.ip .needs > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.ip .needs > div:nth-child(even) { padding-left: 44px; padding-right: 0; }
.ip .needs h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--gray-deep); margin-bottom: 10px; }

/* demo walkthrough: four numbered steps + Open the demo */
.ip .try { list-style: none; counter-reset: t; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gray-deep); margin: 0 0 30px; padding: 0; }
.ip .try li { counter-increment: t; padding: 28px 26px 8px 0; }
.ip .try li + li { padding-left: 26px; border-left: 1px solid var(--rule); }
.ip .try li::before { content: counter(t, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--orange-text); margin-bottom: 14px; }
.ip .try-close { font-weight: 700; color: var(--gray-deep); font-size: 18px; margin-bottom: 22px; }
.ip .wdh-btn.alt { background: var(--gray-deep); color: var(--wdh-chrome-tx); }
.ip .wdh-btn.alt::after { border-color: var(--orange-deep); }

/* capability: two paragraphs, body links */
.ip .cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ip .cat-cols p { font-size: 17px; line-height: 1.7; }
.ip .tl2 { color: var(--gray-deep); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--orange-deep); }
.ip .tl2:hover { color: var(--ink); }

/* How a project starts: the hub's steps, with the CTA under them */
.ip .proc .wdh-btn { margin-top: 36px; }

/* FAQ: native details */
.ip .faq { max-width: 880px; }
.ip .faq details { border-bottom: 1px solid var(--field-line-dark); }
.ip .faq details:first-child { border-top: 1px solid var(--field-line-dark); }
.ip .faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; min-height: 48px; }
.ip .faq summary::-webkit-details-marker { display: none; }
.ip .faq summary h3 { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--gray-deep); }
.ip .faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 22px; color: var(--orange-deep); }
.ip .faq details[open] summary::after { content: '\2212'; }
.ip .faq summary:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.ip .faq details p { padding: 0 44px 22px 0; font-size: 16px; }

@media (max-width: 760px) {
  .ip .ip-hero { padding: 24px 0 60px; }
  .ip .ip-demo .wrap, .ip .cat-cols { grid-template-columns: 1fr; gap: 28px; }
  .ip .ip-demo, .ip .ip-sec { padding: 60px 0; }
  .ip .needs { grid-template-columns: 1fr; }
  .ip .needs > div, .ip .needs > div:nth-child(odd), .ip .needs > div:nth-child(even) { padding: 24px 0; border-right: none; }
  .ip .try { grid-template-columns: 1fr; }
  .ip .try li, .ip .try li + li { padding: 22px 0; border-left: none; border-bottom: 1px solid var(--rule); }
}