/* ============================================================================
   shore.css — shared styling for the 2026 redesign pages
   SG-015. Ruling: docs/DECISIONS.md §9.

   WHAT THIS IS
   The design tokens and the components that appear on five or more of the ten
   approved mockups. Measured, not guessed: 586 distinct selectors across the
   delivery, 118 of them shared. All twelve tokens were byte-identical in all
   ten mockups, so there was nothing to reconcile.

   WHAT THIS IS NOT
   - Not a build artifact. Hand-written, served static, no bundler, no Tailwind
     config. `SG-010` is untouched.
   - Not page-specific CSS. A page's own rules stay in that page's <style>
     block, where the mockup delivered them. Branches build one page each, and
     keeping their CSS apart is what stops six staged branches colliding in one
     file.
   - Not the navigation. Header, dropdowns and mobile menu are styled by
     js/navbar.js so the nav works on the old Tailwind pages too.
   - Not the footer. js/footer.js keeps its Tailwind footer; no footer design
     was delivered (`SG-016`).

   LOADED BY: the redesign pages only. The original Tailwind pages must
   not load this file — the element rules below would restyle them.

   REQUIRES: Montserrat (700-900) and Inter (400-700) linked in the page <head>.
   ============================================================================ */

/* ===== TOKENS ===== */
:root{
  --navy:#0A2647; --navy-deep:#071A33; --blue:#1B4F91; --teal:#0FA3A3; --lime:#B7E600;
  --cream:#FAF9F5; --ink:#14212E; --ink-soft:#4B5A68; --line:#E3E3DC; --card:#FFFFFF;
  --radius:16px; --header-h:76px;
}

/* ===== BASE =====
   No padding-top on body: the fixed-header offset belongs to whichever nav is
   live, and js/navbar.js already appends its own spacer. Setting it here too
   would double the gap. */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter', sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:-0.01em; color:var(--navy);}
a{color:inherit; text-decoration:none;}
section{padding:84px 0;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.eyebrow{font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; display:inline-block;}

/* ===== ICONS =====
   Sized in em so an icon follows its parent's font-size. Sprite is injected by
   js/icons.js; reference a symbol with <svg class="icon"><use href="#icon-x"/></svg>. */
.icon{width:1em; height:1em; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}

/* ===== BUTTONS AND LINKS =====
   text-decoration:none is carried here because every button in the delivery is
   an <a>; only the Automation mockup had remembered it. */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.95rem; padding:15px 30px; border-radius:999px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; border:none; cursor:pointer;}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,38,71,0.25);}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff;}
.btn-lime{background:var(--lime); color:var(--navy-deep);}
.btn-lime:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(183,230,0,0.35);}
.link-arrow{font-weight:700; color:var(--teal); font-size:0.88rem; display:inline-flex; align-items:center; gap:5px;}
.link-arrow:hover{text-decoration:underline;}

/* ===== SECTION HEADS AND BACKGROUNDS ===== */
.section-head{max-width:680px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.15;}
.section-head p{color:var(--ink-soft); font-size:1.05rem; margin-top:14px;}
.bg-white{background:var(--card);}
.bg-navy{background:linear-gradient(160deg, var(--navy-deep), var(--navy)); color:#fff;}
.bg-navy h2, .bg-navy h3{color:#fff;}
.bg-navy .section-head p{color:rgba(255,255,255,0.72);}
/* The eyebrow is teal by default, which is unreadable on a navy field. SG-022 */
.bg-navy .eyebrow{color:var(--lime);}
.bg-teal{background:#0C8E8E; color:#fff;}
.bg-teal h2, .bg-teal h3{color:#fff;}
.bg-teal .section-head p{color:rgba(255,255,255,0.85);}
/* The eyebrow's default teal is all but invisible on this field. SG-034 */
.bg-teal .eyebrow{color:var(--navy-deep); background:rgba(255,255,255,0.55); padding:4px 12px; border-radius:999px;}
.bg-lime{background:linear-gradient(155deg, #7CA01B, #4F6512); color:#fff;}
.bg-lime .eyebrow{color:#fff; background:rgba(255,255,255,0.22); padding:4px 12px; border-radius:999px;}
/* The eyebrow's white pill is right on the lime field itself, but a white
   .trust-strip floated on it puts a white pill on a white card. SG-034 */
.bg-lime .trust-strip .eyebrow{color:var(--teal); background:none; padding:0;}
.bg-lime h2{color:#fff;}
.bg-lime .section-head p{color:rgba(255,255,255,0.82);}

/* ===== HERO =====
   The centred dark hero shared by the industry pages, Polaris and Strategic
   Advisory. The homepage (left-aligned, video background) and Start a Sprint
   (light background, by ruling in its spec) override this in their own CSS. */
.hero{
  position:relative; overflow:hidden; padding:110px 0 90px; color:#fff;
  background:
    radial-gradient(1000px 520px at 85% -12%, rgba(150,193,30,0.14), transparent 60%),
    radial-gradient(700px 460px at 5% 108%, rgba(103,141,20,0.20), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.hero-inner{max-width:740px; margin:0 auto; text-align:center; position:relative; z-index:2;}

/* Optional per-page hero background image, opt-in via markup (SG-055). Same masked-image
   technique as /community-financial-institutions, but toned to the shared navy/blue hero
   gradient above rather than that page's own page-local blue/cyan scheme. */
.hero-bg{position:absolute; inset:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:0.16;}
.hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(7,26,51,0.45), rgba(10,38,71,0.41) 55%, rgba(27,79,145,0.41));}
.hero-icon-badge{width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:1.6rem; color:var(--lime);}
.hero h1{font-size:clamp(2.1rem, 4.2vw, 3.1rem); line-height:1.14; margin-bottom:22px; color:#fff;}
.hero p.lead{font-size:1.08rem; color:rgba(255,255,255,0.78); max-width:600px; margin:0 auto 34px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,0.5);}
.hero .btn-ghost:hover{background:#fff; color:var(--navy);}
.hero .eyebrow{color:var(--lime);}

/* Emphasis phrase gradient. Named .text-grad (SG-043) so any page can reuse
   it, per the homepage spec's own Appendix B: "same blue gradient text
   treatment as every other page... reuse the shared CSS utility across the
   whole site rather than redefining it per page." .hero h1 span kept as an
   alias so the hero's unclassed span still resolves. */
.hero h1 span, .text-grad{
  background:linear-gradient(135deg, #60A5FA 0%, #2563EB 60%, #1D4ED8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#3B82F6;
}

/* ===== PAIN CARDS — "Common Challenges" ===== */
.pain-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.pain-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;}
.pain-card .icon{font-size:1.5rem; margin-bottom:14px; display:block; color:var(--teal);}
.pain-card h4{font-size:1.02rem; margin-bottom:8px;}
.pain-card p{font-size:0.9rem; color:var(--ink-soft);}

/* ===== USE-CASE CARDS — "How We Can Help", glass on a dark section ===== */
.uc-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.uc-card{background:rgba(255,255,255,0.10); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.22); border-radius:14px; padding:24px 20px;}
.uc-card .uc-icon{font-size:1.25rem; margin-bottom:12px; display:block; color:#fff;}
.uc-card h4{font-size:0.95rem; margin-bottom:8px; color:#fff;}
.uc-card p{font-size:0.85rem; color:rgba(255,255,255,0.82); line-height:1.45;}

/* ===== TRUST STRIP — "Why Shore" stats ===== */
.trust-strip{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:36px 42px; box-shadow:0 24px 50px -30px rgba(10,38,71,0.15);}
.trust-stats{display:flex; gap:38px; flex-wrap:wrap;}
.trust-stats .num{font-family:'Montserrat', sans-serif; font-weight:900; font-size:1.5rem; color:var(--navy); display:block;}
.trust-stats .lbl{font-size:0.78rem; color:var(--ink-soft); font-weight:600;}
.trust-strip .eyebrow{margin-bottom:6px;}
.trust-strip h3{font-size:1.3rem;}

/* ===== THE 4-VEHICLE BLOCK — "Where It Fits" =====
   The one component every spec says to reuse rather than rebuild, and the one
   the mockups had drifted most (five variants). Merged to the superset:
   position:relative for the "This Page" badge, flex-column so a card's link
   stays bottom-aligned when copy lengths differ, and the homepage's hover
   transition. A page that puts this block on a light background restyles the
   card in its own CSS — the Automation page does. */
.vehicle-strip{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.vehicle-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--radius); padding:26px 22px;
  border:1.5px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.12);
  backdrop-filter:blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vehicle-card:hover{transform:translateY(-3px); background:rgba(255,255,255,0.18); box-shadow:0 14px 30px -18px rgba(0,0,0,0.4);}
.vehicle-card h4{font-size:1rem; margin-bottom:8px; color:#fff;}
.vehicle-card p{font-size:0.86rem; color:rgba(255,255,255,0.82);}

/* ===== HOW WE WORK TEASER — the 4-step flow ===== */
.approach-flow{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; margin:36px 0 40px;}
.approach-step{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:11px 20px; font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.85rem; color:#fff;}
.approach-step .num{color:var(--lime); font-weight:900;}
.approach-arrow{color:var(--lime); font-size:1.2rem; padding:0 10px; font-weight:700;}
.center-row{text-align:center;}

/* ===== FINAL CTA ===== */
.final-cta{background:linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--blue)); color:#fff; border-radius:24px; padding:64px 56px; text-align:center; position:relative; overflow:hidden;}
.final-cta::before{content:""; position:absolute; width:500px; height:500px; background:radial-gradient(circle, rgba(183,230,0,0.25), transparent 65%); top:-220px; right:-160px;}
.final-cta h2{color:#fff; font-size:clamp(1.6rem, 3vw, 2.1rem); position:relative;}
.final-cta p{color:rgba(255,255,255,0.75); max-width:520px; margin:14px auto 30px; position:relative;}
.final-cta .btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative;}
.final-cta .btn-ghost{color:#fff; border-color:rgba(255,255,255,0.5);}
.final-cta .btn-ghost:hover{background:#fff; color:var(--navy);}

/* ===== RESPONSIVE =====
   The delivery's breakpoints are 980 (nav collapse, owned by js/navbar.js),
   860 and 560. */
@media (max-width: 860px){
  .pain-grid, .uc-grid, .vehicle-strip{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .pain-grid, .uc-grid, .vehicle-strip{grid-template-columns:1fr;}
  section{padding:56px 0;}
  .final-cta{padding:44px 26px;}
}
