/* Page-scoped tokens and body styling. Scoping under body.industries-page so this CSS cannot leak onto the persistent Header/Footer or other routes when Next.js mounts/unmounts the stylesheet on client-side navigation. */ body.industries-page{ --teal:#0080a8; --teal-deep:#005d7a; --teal-soft:#e3f3f8; --orange:#f38020; --orange-soft:#fff1e1; --ink:#0e1f29; --ink-soft:#3b515c; --muted:#6b7d86; --line:#e3e8eb; --bg:#fbfcfc; --white:#ffffff; --paper:#f6f8f9; --warm:#fffaf3; font-family:var(--font-sans), 'Inter', system-ui, sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; } /* (removed) global * / html / a resets — handled by public/styles.css */ /* (removed) .nav / .nav-inner / .logo / .nav-links / .nav-cta — these legacy classes collide with the persistent Header in src/components/layout/Header.tsx which uses .nav / .nav__inner / .nav__link instead. */ /* All rules below are scoped under body.industries-page (CSS nesting). Without this, generic class names (.hero, .btn-primary, .section, .case, .label) leak onto the persistent Header and other routes after client-side navigation. */ body.industries-page { /* Breadcrumb */ .crumb{max-width:1280px;margin:0 auto;padding:24px 32px 0;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em} .crumb a:hover{color:var(--teal)} .crumb .sep{margin:0 10px;opacity:.5} /* HERO — soft warm gradient distinct from public sector */ .hero{position:relative;max-width:1280px;margin:0 auto;padding:130px 32px 80px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;position:relative;z-index:2} .hero-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;margin-bottom:28px;display:flex;align-items:center;gap:12px} .hero-tag::before{content:'';width:36px;height:1px;background:var(--orange)} .hero h1{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.05;letter-spacing:-.025em;margin-bottom:32px;color:var(--ink)} .hero h1 em{font-style:italic;color:var(--teal);font-weight:400} .hero h1 .underline{position:relative;display:inline-block} .hero h1 .underline::after{content:'';position:absolute;left:0;right:0;bottom:.05em;height:.25em;background:var(--orange-soft);z-index:-1} .hero-lede{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:560px;margin-bottom:36px} .hero-cta{display:flex;gap:16px;align-items:center} .btn{padding:15px 30px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .2s, box-shadow .2s;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none} .btn-primary{background:var(--ink);color:var(--white)} .btn.btn-primary{background:#ED8E39 !important;color:#fff !important} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,31,41,.18)} .btn-ghost{color:var(--ink);border:1.5px solid var(--line);background:var(--white)} .btn-ghost:hover{border-color:var(--ink)} /* Hero ornament — embryo / cell-grade visualisation */ .hero-art{position:relative;height:480px} .micro-card{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:radial-gradient(circle at 30% 30%, var(--warm), var(--white) 60%, var(--paper))} .micro-circle{position:absolute;border-radius:50%;border:2px dashed rgba(0,128,168,.3)} .micro-circle.c1{width:280px;height:280px;top:50%;left:50%;transform:translate(-50%,-50%);animation:slowspin 20s linear infinite} .micro-circle.c2{width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(243,128,32,.35);animation:slowspin 14s linear infinite reverse} .micro-circle.c3{width:120px;height:120px;top:50%;left:50%;transform:translate(-50%,-50%);border-style:solid;border-color:var(--teal)} @keyframes slowspin{to{transform:translate(-50%,-50%) rotate(360deg)}} .micro-cell{position:absolute;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 35%, rgba(0,128,168,.5), rgba(0,93,122,.85));box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 4px 14px rgba(0,128,168,.25)} .micro-cell.cc1{top:42%;left:43%} .micro-cell.cc2{top:48%;left:54%} .micro-cell.cc3{top:54%;left:46%} .micro-cell.cc4{top:50%;left:38%;width:36px;height:36px} .micro-grade{position:absolute;top:24px;left:24px;font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.14em;background:var(--white);border:1px solid var(--line);padding:8px 12px;border-radius:4px} .micro-grade .v{color:var(--teal);font-weight:600;margin-left:8px} .micro-stamp{position:absolute;bottom:24px;right:24px;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.18em;border:1px solid var(--line);padding:8px 14px;border-radius:4px;background:var(--white)} .micro-seal{position:absolute;top:24px;right:24px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-soft)} .micro-line{position:absolute;left:50%;top:50%;width:140px;height:1px;background:linear-gradient(90deg, var(--orange), transparent);transform-origin:left center} .micro-line.ml1{transform:translateY(-50%) rotate(35deg)} .micro-line.ml2{transform:translateY(-50%) rotate(155deg)} /* Sections base */ .section{padding:76px 0;position:relative} .section-inner{max-width:1280px;margin:0 auto;padding:0 32px} .section-tag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--orange);text-transform:uppercase;margin-bottom:12px} .section-title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,52px);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px;max-width:880px} .section-title em{font-style:italic;color:var(--teal)} .section-lede{font-size:18px;color:var(--ink-soft);max-width:680px;margin-bottom:40px;line-height:1.55} /* shift section */ .shift-section{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .shift-col h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;margin-bottom:24px} .shift-col h3.before{color:var(--muted)} .shift-col h3.now{color:var(--teal)} .shift-list{list-style:none} .shift-list li{padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:16px;line-height:1.55;display:flex;gap:16px;align-items:flex-start} .shift-list li:last-child{border-bottom:none} .shift-list .num{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:24px;padding-top:4px} .shift-col.now .shift-list li{color:var(--ink)} /* use cases */ .uc-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px} .uc{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:32px;transition:transform .25s, box-shadow .25s, border-color .25s;display:flex;flex-direction:column} .uc:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 18px 40px rgba(0,128,168,.08)} .uc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--orange);text-transform:uppercase;margin-bottom:18px} .uc h4{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-.01em;margin-bottom:14px;color:var(--ink)} .uc p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:24px;flex-grow:1} .uc-impact{display:flex;gap:18px;padding-top:20px;border-top:1px solid var(--line)} .uc-impact .item{flex:1} .uc-impact .v{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--teal);letter-spacing:-.01em} .uc-impact .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px} /* case studies */ .proof-section{background:linear-gradient(180deg, var(--white), var(--warm))} .cases{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px} .case{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:36px;position:relative;overflow:hidden;transition:transform .25s, box-shadow .25s} .case:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(14,31,41,.08)} .case::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--orange), var(--teal))} .case-co{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px} .case h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;color:var(--teal-deep);margin-bottom:14px;line-height:1.3} .sector{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed var(--line)} .label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-top:16px;margin-bottom:8px} .case p{font-size:14.5px;color:var(--ink-soft);line-height:1.55} .impact{margin-top:20px;padding:16px;background:var(--orange-soft);border-radius:10px;font-size:14px;color:var(--ink);line-height:1.5} .impact strong{color:#a04500} /* differentiators */ .dl-row{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start} .dl-list{list-style:none} .dl-list li{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)} .dl-list li:last-child{border-bottom:none} .ck{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} .dl-list h5{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:6px;color:var(--ink)} .dl-list p{color:var(--ink-soft);font-size:15px;line-height:1.55} .pull-quote{background:linear-gradient(135deg, var(--warm), var(--white));border-radius:20px;padding:40px;border:1px solid var(--line);position:sticky;top:100px} .pull-quote .q{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--ink);margin-bottom:24px} .pull-quote .who{font-size:13px;color:var(--ink-soft);font-weight:500} .pull-quote .role{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:4px} /* CTA */ .cta-section{background:var(--paper);color:var(--ink);padding:100px 0} .cta-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center} .cta-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)} .cta-section h2 em{color:var(--orange);font-style:italic} .cta-section p{color:var(--ink-soft);font-size:17px;margin-top:20px;line-height:1.55;max-width:480px} .cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .cta-actions .btn{width:100%;justify-content:center;padding:18px 30px} .cta-actions .btn-primary{background:#ED8E39 !important;color:#fff !important} .cta-actions .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .cta-actions .btn-ghost:hover{border-color:var(--ink)} /* (removed) raw "footer { ... }" + "footer span" — collides with persistent