/* ==========================================================
   ASKWNE GHANA LTD — PREMIUM STATIC SITE
   Bootstrap 5.3.8 handles the responsive grid and base UI.
   Local Tailwind-style utilities add utility-first control.
   This stylesheet owns the brand, interactions and mobile UX.
   ========================================================== */
:root {
  --red: #de4132;
  --red-dark: #b72d24;
  --green: #1d8d53;
  --green-dark: #12663d;
  --ink: #0f171c;
  --ink-2: #182229;
  --text: #2e3a41;
  --muted: #6b7880;
  --line: #dce4e0;
  --cream: #f5f1e8;
  --paper: #ffffff;
  --gold: #efb53c;
  --soft-green: #eaf5ef;
  --soft-red: #fff0ee;
  --max: 1240px;
  --shadow-sm: 0 12px 35px rgba(15, 23, 28, .08);
  --shadow: 0 24px 80px rgba(15, 23, 28, .14);
  --shadow-lg: 0 34px 100px rgba(15, 23, 28, .20);
  --radius: 26px;
}

* { box-sizing: border-box; min-width: 0; }
html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; color: var(--text); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.72; overflow-x: hidden; }
body.menu-open, body.search-open, body.modal-open-custom { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { max-width: 100%; font: inherit; }
button { cursor: pointer; }
input, textarea, select { min-width: 0; }
textarea { resize: vertical; }
::selection { background: var(--green); color: #fff; }

.site-container { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; padding-left: 0; padding-right: 0; }
.section-space { padding: clamp(72px, 9vw, 124px) 0; }
.section-dark { color: #fff; background: var(--ink); }
.section-cream { background: var(--cream); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-dark); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: #c9ded4; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #e5f2ec; background: rgba(15,23,28,.46); backdrop-filter: blur(12px); font-size: .67rem; font-weight: 800; letter-spacing: .14em; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 6px rgba(239,181,60,.10); }
.section-intro h2, .inner-hero h1, h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; color: var(--ink); font-weight: 900; margin-bottom: 0; }
.light-intro h2, .section-dark h2, .section-dark h3 { color: #fff; }
.section-intro h2 { font-size: clamp(2.1rem, 4vw, 4.2rem); }
.display-title { font-size: clamp(2.45rem, 5vw, 5rem); }
.lead-copy { font-size: clamp(1.03rem, 1.7vw, 1.18rem); color: #516068; }

/* Header */
.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 1100; }
.top-strip { color: #d8e5df; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.top-strip-text { font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.nav-shell { background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(15,23,28,.08); backdrop-filter: blur(18px); transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled .nav-shell { background: rgba(255,255,255,.98); box-shadow: 0 14px 38px rgba(15,23,28,.09); }
.nav-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-mark { display: block; width: clamp(112px, 13vw, 142px); flex: 0 0 auto; }
.brand-mark img { width: 100%; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.nav-link-premium { position: relative; padding: 12px 13px; border-radius: 999px; color: #2f3a40; font-size: .83rem; font-weight: 850; transition: .2s ease; }
.nav-link-premium::after { position: absolute; right: 13px; bottom: 6px; left: 13px; height: 2px; background: var(--green); content: ""; transform: scaleX(0); transform-origin: right; transition: .22s ease; }
.nav-link-premium:hover, .nav-link-premium.is-active { color: var(--green-dark); background: var(--soft-green); }
.nav-link-premium:hover::after, .nav-link-premium.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta-premium, .mobile-nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 17px; border-radius: 999px; color: #fff; background: var(--ink); font-size: .79rem; font-weight: 900; box-shadow: 0 10px 24px rgba(15,23,28,.16); transition: .22s ease; }
.nav-cta-premium:hover, .mobile-nav-cta:hover { color: #fff; background: var(--green); transform: translateY(-1px); }
.nav-actions { display: none; align-items: center; gap: 8px; }
.nav-search-btn, .menu-toggle-premium { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 13px; }
.nav-search-btn { font-size: 1.5rem; line-height: 1; }
.menu-toggle-premium { padding: 10px; }
.menu-toggle-premium span { display: block; width: 20px; height: 2px; margin: 2px 0; background: var(--ink); border-radius: 2px; transition: .2s ease; }

/* Mobile drawer */
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 1190; background: rgba(4,10,14,.62); opacity: 0; visibility: hidden; transition: .25s ease; }
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-drawer { position: fixed; z-index: 1200; top: 0; right: 0; bottom: 0; width: min(92vw, 420px); padding: 24px 18px 30px; color: #fff; background: linear-gradient(180deg,#0d151b 0%,#15212a 100%); overflow-y: auto; transform: translateX(105%); transition: transform .3s cubic-bezier(.22,.61,.36,1); box-shadow: -24px 0 80px rgba(0,0,0,.24); overscroll-behavior: contain; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-logo { width: 112px; background: #fff; border-radius: 12px; padding: 8px 10px; }
.mobile-logo img { width: 100%; }
.drawer-close, .search-panel-close { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.06); color: #fff; font-size: 1.9rem; line-height: 1; }
.mobile-search-box { display: grid; grid-template-columns: 1fr 48px; gap: 8px; margin-top: 28px; padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.06); }
.mobile-search-box input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; padding: 10px 11px; }
.mobile-search-box input::placeholder { color: #aab6bd; }
.mobile-search-box button { border: 0; border-radius: 11px; color: #0e171c; background: #fff; }
.mobile-search-results, .desktop-search-results { margin-top: 8px; }
.mobile-search-result, .desktop-search-result { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; color: #e4ece8; border-bottom: 1px solid rgba(255,255,255,.08); }
.desktop-search-result { color: var(--ink); border-color: var(--line); }
.search-result-no { font-size: .68rem; font-weight: 900; color: var(--gold); }
.search-result-copy strong { display: block; font-size: .83rem; }
.search-result-copy small { display: block; margin-top: 2px; color: #9eacb4; font-size: .72rem; line-height: 1.4; }
.desktop-search-result .search-result-copy small { color: var(--muted); }
.mobile-nav-links { margin-top: 20px; display: grid; gap: 7px; }
.mobile-nav-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 14px 12px; border: 1px solid transparent; border-radius: 15px; color: #e9f0ed; background: rgba(255,255,255,.04); }
.mobile-nav-item:hover, .mobile-nav-item.is-active { color: #fff; border-color: rgba(49,180,111,.32); background: rgba(29,141,83,.13); }
.mobile-nav-item span { color: #90a1aa; font-size: .67rem; font-weight: 900; }
.mobile-nav-item strong { font-size: .94rem; }
.mobile-nav-item b { color: var(--gold); }
.mobile-nav-cta { margin-top: 8px; width: 100%; justify-content: space-between; background: var(--red); }
.mobile-contact-card { margin-top: 28px; padding: 20px; border: 1px solid rgba(255,255,255,.10); border-radius: 21px; background: rgba(255,255,255,.05); }
.mobile-contact-card .eyebrow { color: #b9d8c8; margin-bottom: 8px; }
.mobile-contact-card h3 { color: #fff; font-size: 1.5rem; }
.mobile-contact-card p { margin-top: 10px; color: #aebbc2; font-size: .87rem; }
.mobile-contact-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 16px; }
.mobile-contact-actions a { padding: 10px 5px; border-radius: 11px; background: #fff; color: var(--ink); text-align: center; font-size: .74rem; font-weight: 900; }

/* Search panel */
.search-panel { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: start center; padding: 12vh 16px 20px; background: rgba(4,10,14,.65); opacity: 0; visibility: hidden; transition: .22s ease; }
.search-panel.open { opacity: 1; visibility: visible; }
.search-panel-inner { width: min(780px,100%); padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.25); transform: translateY(-12px); transition: .25s ease; }
.search-panel.open .search-panel-inner { transform: translateY(0); }
.search-panel-head { display: flex; align-items: center; justify-content: space-between; }
.search-panel-close { color: var(--ink); border-color: var(--line); background: #fff; }
.search-panel-input-wrap { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; margin-top: 16px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 15px; }
.search-panel-input-wrap span { font-size: 1.4rem; color: var(--green-dark); }
.search-panel-input-wrap input { border: 0; outline: 0; padding: 10px 0; width: 100%; }

/* Preloader / progress */
.site-preloader { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; background: var(--ink); transition: opacity .5s ease, visibility .5s ease; }
.site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-card { width: min(88vw,360px); padding: 28px 26px; text-align: center; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.04); }
.preloader-card img { width: min(220px,75%); margin: auto; }
.preloader-card small { display: block; margin-top: 14px; color: #94a2a9; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.preloader-line { display: block; height: 2px; margin-top: 20px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.preloader-line span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--red),var(--gold),var(--green)); animation: preload 1.2s ease-out forwards; }
@keyframes preload { to { width: 100%; } }
.scroll-progress { position: fixed; z-index: 1600; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg,var(--red),var(--gold),var(--green)); pointer-events: none; }

/* Home hero */
.hero-home { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; background: var(--ink); overflow: hidden; isolation: isolate; padding-top: 132px; }
.hero-home::before { position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, rgba(29,141,83,.22), transparent 33%), radial-gradient(circle at 80% 20%, rgba(222,65,50,.17), transparent 28%); content: ""; }
.hero-grid-bg { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, black, transparent); pointer-events: none; }
.hero-container { position: relative; z-index: 2; }
.hero-copy-col { position: relative; z-index: 4; }
.hero-copy { padding: 30px 0 74px; }
.hero-overline { margin: 22px 0 12px; color: #a8c6b7; font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .14em; }
.hero-home h1 { max-width: 760px; color: #fff; font-size: clamp(2.9rem, 5.2vw, 5.6rem); }
.hero-home h1 span { display: inline; color: #dfeae5; }
.hero-lead { max-width: 660px; margin-top: 25px; color: #b4c0c5; font-size: clamp(1rem,1.5vw,1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn-premium { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 18px; border: 1px solid transparent; border-radius: 999px; font-size: .82rem; font-weight: 900; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.btn-premium:hover { transform: translateY(-2px); }
.btn-primary-premium { color: #fff; background: var(--green); box-shadow: 0 13px 30px rgba(29,141,83,.20); }
.btn-primary-premium:hover { color: #fff; background: var(--green-dark); }
.btn-outline-premium { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-outline-premium:hover { color: var(--ink); border-color: var(--green); box-shadow: var(--shadow-sm); }
.btn-light-premium { color: var(--ink); background: #fff; }
.btn-light-premium:hover { color: var(--ink); background: #eaf5ef; }
.hero-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 650px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-proof-grid > div { display: grid; gap: 6px; padding: 17px 10px 0 0; }
.hero-proof-grid strong { color: var(--gold); font-size: .7rem; letter-spacing: .12em; }
.hero-proof-grid span { color: #9caab1; font-size: .76rem; font-weight: 800; }
.hero-visual-col { position: relative; min-height: 620px; }
.hero-visual { position: relative; height: 100%; min-height: 620px; }
.hero-media-stack { position: absolute; top: 6%; right: 1%; width: min(650px,96%); height: 88%; }
.hero-main-media { position: absolute; inset: 4% 8% 7% 2%; margin: 0; overflow: hidden; border-radius: 30px; background: #101a20; box-shadow: var(--shadow-lg); transform: rotate(2deg); }
.hero-main-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-main-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 48%,rgba(8,13,17,.82)); }
.hero-main-media figcaption { position: absolute; right: 24px; bottom: 24px; left: 24px; z-index: 2; }
.hero-main-media figcaption span, .hero-secondary-label { display: block; margin-bottom: 6px; color: var(--gold); font-size: .63rem; font-weight: 900; letter-spacing: .14em; }
.hero-main-media figcaption b { max-width: 380px; display: block; color: #fff; font-size: clamp(1.15rem,2vw,1.7rem); line-height: 1.1; }
.hero-secondary-media { position: absolute; right: -1%; bottom: 0; width: 44%; aspect-ratio: 1.1; margin: 0; overflow: hidden; border: 7px solid var(--ink); border-radius: 24px; background: #111920; box-shadow: var(--shadow); transform: rotate(-6deg); }
.hero-secondary-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-secondary-label { position: absolute; left: 13px; bottom: 8px; z-index: 2; margin: 0; padding: 6px 8px; background: rgba(15,23,28,.72); border-radius: 8px; }
.hero-badge-float { position: absolute; top: 12%; left: 0; z-index: 4; display: grid; gap: 4px; width: 150px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: #fff; background: rgba(14,22,28,.76); backdrop-filter: blur(14px); box-shadow: var(--shadow); transform: rotate(-3deg); }
.hero-badge-float span, .hero-badge-float small { color: #a9b8bf; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-badge-float b { font-size: 1rem; }
.hero-scroll { position: absolute; right: 5%; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; color: #93a4ab; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-scroll b { color: var(--gold); font-size: 1.1rem; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 520px; height: 520px; top: 4%; right: -5%; }
.orbit-two { width: 700px; height: 700px; top: -7%; right: -18%; }

/* Inner heroes */
.inner-hero { padding-top: 164px; padding-bottom: 74px; background: linear-gradient(180deg,#f6f8f7 0%,#fff 100%); border-bottom: 1px solid var(--line); }
.inner-hero-row { min-height: 390px; }
.inner-hero h1 { max-width: 820px; font-size: clamp(3rem,7vw,6.5rem); }
.inner-hero p { max-width: 710px; margin-top: 24px; color: #627078; font-size: clamp(1rem,1.5vw,1.16rem); }
.inner-hero-image { position: relative; width: 100%; aspect-ratio: 1.15; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); }
.inner-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.inner-hero-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 40%,rgba(5,11,15,.55)); }
.inner-hero-tag { position: absolute; left: 18px; bottom: 16px; z-index: 2; padding: 8px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(10,17,22,.58); backdrop-filter: blur(10px); font-size: .62rem; font-weight: 900; letter-spacing: .14em; }

/* Generic feature content */
.credibility-grid, .reasons-grid, .principle-grid, .commercial-grid, .client-grid, .road-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.credibility-card, .reason-card, .principle-card, .commercial-card, .client-card, .road-service-card, .supply-step { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.credibility-card { min-height: 250px; display: flex; flex-direction: column; }
.credibility-card-dark, .about-statement-card, .road-capacity-card { color: #fff; background: var(--ink); border-color: rgba(255,255,255,.08); }
.credibility-card h3, .reason-card h3, .principle-card h3, .commercial-card h3, .client-card h3, .road-service-card h3, .supply-step h3 { margin-top: 52px; font-size: 1.35rem; }
.credibility-card p, .reason-card p, .principle-card p, .commercial-card p, .client-card p, .road-service-card p, .supply-step p { color: #6c7980; font-size: .87rem; }
.credibility-card-dark p { color: #aebbc0; }
.credibility-no, .reason-card > span, .principle-card > span, .commercial-card > span, .client-icon, .road-service-card > span, .supply-step > span { position: absolute; top: 18px; left: 18px; color: var(--green); font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.credibility-card-dark .credibility-no { color: var(--gold); }
.card-arrow { margin-top: auto; color: var(--green); font-weight: 900; text-align: right; }

/* Pathways */
.pathways-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.pathway-card { position: relative; min-height: 530px; overflow: hidden; border-radius: 24px; background: #111b20; box-shadow: 0 18px 60px rgba(0,0,0,.20); }
.pathway-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.pathway-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 24%,rgba(7,12,16,.88) 90%); }
.pathway-card:hover img { transform: scale(1.06); }
.pathway-overlay { position: absolute; right: 22px; bottom: 22px; left: 22px; z-index: 2; }
.pathway-overlay span { color: #b7d6c6; font-size: .65rem; font-weight: 900; letter-spacing: .14em; }
.pathway-overlay h3 { margin-top: 10px; color: #fff; font-size: clamp(1.45rem,2vw,2rem); }
.pathway-overlay p { color: #bcc8cd; font-size: .85rem; }
.pathway-overlay b { color: #fff; font-size: .75rem; }

/* Collage and features */
.collage-media { position: relative; min-height: 560px; }
.collage-main, .collage-small { position: absolute; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }
.collage-main { inset: 0 9% 0 0; width: 88%; height: 100%; }
.collage-small { right: 0; bottom: 0; width: 44%; height: 46%; border: 7px solid var(--cream); }
.collage-stamp { position: absolute; top: 22px; left: 22px; z-index: 3; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(15,23,28,.55); backdrop-filter: blur(10px); text-align: center; font-size: .67rem; font-weight: 900; letter-spacing: .11em; }
.feature-list { display: grid; gap: 4px; margin-top: 25px; }
.feature-list > div { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); }
.feature-list span { color: var(--green); font-size: .67rem; font-weight: 900; }
.feature-list b { font-size: .95rem; }
.feature-list p { grid-column: 2; margin: 0; color: var(--muted); font-size: .82rem; }

/* Split feature */
.split-feature-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.split-feature-image { min-height: 560px; }
.split-feature-image img { width: 100%; height: 100%; object-fit: cover; }
.split-feature-copy { padding: clamp(30px,5vw,70px); display: flex; flex-direction: column; justify-content: center; }
.split-feature-copy h2 { font-size: clamp(2.2rem,4.2vw,4.3rem); }
.split-feature-copy p { margin-top: 18px; color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 28px; }
.mini-stats > div { padding: 15px; border: 1px solid var(--line); border-radius: 15px; }
.mini-stats strong { display: block; color: var(--green); font-size: .67rem; }
.mini-stats span { display: block; margin-top: 6px; color: #536168; font-size: .75rem; font-weight: 850; }
.asterisk-note { color: #76838a; font-size: .73rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--green-dark); font-size: .8rem; font-weight: 900; }

/* Dark sections */
.road-image-wrap { overflow: hidden; border-radius: 28px; box-shadow: var(--shadow-lg); }
.road-image-wrap img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.road-engagement { display: grid; grid-template-columns: 12px 1fr; gap: 13px; margin: 28px 0; padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(255,255,255,.04); }
.status-dot { display: inline-block; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #60d18d; box-shadow: 0 0 0 8px rgba(96,209,141,.10); }
.road-engagement b, .appointment-note b { color: #fff; }
.road-engagement p, .appointment-note p { margin: 5px 0 0; color: #9dadb5; font-size: .79rem; }

/* Inner page grids */
.about-statement-card, .supply-quote-card, .road-capacity-card, .appointment-aside { padding: 30px; border-radius: 24px; box-shadow: var(--shadow-lg); }
.about-statement-card h3, .supply-quote-card h3, .road-capacity-card h3, .appointment-aside h3 { color: #fff; font-size: 2rem; }
.about-statement-card p { color: #aebbc1; }
.statement-line, .capacity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.10); }
.statement-line b, .capacity-row b { color: #ecf5f0; font-size: .79rem; }
.statement-line span { color: #77d69c; font-weight: 900; }
.principle-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.principle-card { min-height: 220px; background: rgba(255,255,255,.8); }
.process-list { margin-top: 24px; }
.process-list > div { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.process-list span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--ink); font-size: .65rem; font-weight: 900; }
.process-list b { font-size: .95rem; }
.process-list p { margin: 4px 0 0; color: var(--muted); font-size: .81rem; }
.large-rounded-image { width: 100%; aspect-ratio: 1.05; object-fit: cover; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); }

/* Bitumen page */
.supply-promise-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 28px; }
.supply-promise-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.supply-promise-grid span { color: var(--green); font-size: .65rem; font-weight: 900; }
.supply-promise-grid b { display: block; margin-top: 26px; font-size: .9rem; }
.supply-promise-grid p { margin: 6px 0 0; color: var(--muted); font-size: .77rem; }
.supply-quote-card { color: #fff; background: linear-gradient(150deg,#152329,#0c1419); }
.supply-quote-card .eyebrow { color: #bcdacc; }
.supply-quote-card p { color: #a9b6bd; }
.quote-field { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.10); }
.quote-field > span { color: var(--gold); font-size: .67rem; font-weight: 900; }
.quote-field b { display: block; color: #fff; font-size: .85rem; }
.quote-field small { display: block; margin-top: 4px; color: #93a3aa; font-size: .72rem; }
.commercial-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.commercial-card { min-height: 260px; }
.commercial-card.featured { color: #fff; background: var(--green); border-color: var(--green); }
.commercial-card.featured p, .commercial-card.featured h3 { color: #fff; }
.commercial-card.featured > span { color: #d6f0e2; }
.clean-check-list { display: grid; gap: 10px; padding: 0; margin: 24px 0 0; list-style: none; }
.clean-check-list li { position: relative; padding-left: 24px; color: #526068; font-size: .87rem; font-weight: 750; }
.clean-check-list li::before { position: absolute; top: 9px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--green); content: ""; }
.supply-process-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.supply-step { min-height: 200px; }

/* Building page */
.land-to-build-card { display: grid; gap: 5px; padding: 22px; border-radius: 24px; color: #fff; background: var(--ink); box-shadow: var(--shadow-lg); }
.land-card-step { display: grid; grid-template-columns: 46px 1fr; gap: 15px; padding: 15px; border-radius: 16px; transition: .2s ease; }
.land-card-step.active, .land-card-step:hover { background: rgba(255,255,255,.06); }
.land-card-step > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--green); color: #fff; font-size: .65rem; font-weight: 900; }
.land-card-step b { color: #fff; }
.land-card-step p { margin: 4px 0 0; color: #a6b3ba; font-size: .76rem; }
.client-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.client-card { min-height: 245px; }
.client-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--green); }
.payment-meter { margin-top: 30px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.payment-meter > div:first-child { display:flex; justify-content:space-between; gap:10px; font-weight: 900; }
.payment-meter b { color: var(--green-dark); }
.meter { height: 12px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: #e6ece8; }
.meter span { display:block; height:100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),var(--gold),var(--green)); }
.payment-foot { display:flex; justify-content:space-between; gap:10px; margin-top: 8px; color: var(--muted); font-size:.68rem; }
.prep-card { display:grid; gap:8px; padding:22px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.prep-card > div { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; padding:12px; border-radius:14px; background:#f5f8f6; }
.prep-card span { color:var(--green); font-size:.67rem; font-weight:900; }

/* Road page */
.road-capacity-card .eyebrow { color:#c2d8cb; }
.capacity-row span { color:#a9b6bc; font-size:.78rem; }
.capacity-row b { color:#fff; }
.road-service-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.road-service-card { min-height: 225px; }
.road-story-image { position:relative; overflow:hidden; border-radius:26px; box-shadow:var(--shadow); }
.road-story-image img { width:100%; aspect-ratio:1.16; object-fit:cover; }
.road-story-image span { position:absolute; left:16px; bottom:16px; padding:7px 9px; border-radius:999px; color:#fff; background:rgba(10,16,20,.62); backdrop-filter:blur(8px); font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.quote-highlight { display:grid; grid-template-columns:50px 1fr; gap:15px; margin:25px 0; padding:18px; border-left:3px solid var(--green); background:var(--soft-green); border-radius:0 15px 15px 0; }
.quote-highlight span { color:var(--green); font-size:3rem; line-height:.7; }
.quote-highlight p { margin:0; color:#46555d; font-weight:700; }

/* Gallery */
.masonry-gallery { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows:180px; gap:12px; }
.gallery-card { position:relative; min-width:0; overflow:hidden; padding:0; border:0; border-radius:20px; background:#10181d; text-align:left; }
.gallery-card.gallery-wide { grid-column: span 2; }
.gallery-card.gallery-tall { grid-row: span 2; }
.gallery-card img { width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.gallery-card::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 40%,rgba(6,12,16,.72)); }
.gallery-card span { position:absolute; right:14px; bottom:12px; left:14px; z-index:2; color:#fff; font-size:.71rem; font-weight:900; letter-spacing:.06em; }
.gallery-card:hover img { transform:scale(1.06); }
.gallery-modal { position:fixed; inset:0; z-index:1700; display:grid; place-items:center; padding:22px; background:rgba(3,8,11,.86); opacity:0; visibility:hidden; transition:.2s ease; }
.gallery-modal.open { opacity:1; visibility:visible; }
.gallery-modal-inner { position:relative; width:min(1100px,100%); }
.gallery-modal img { width:100%; max-height:78svh; object-fit:contain; border-radius:20px; background:#091015; }
.gallery-modal-caption { margin-top:10px; color:#dbe5e0; text-align:center; font-size:.8rem; }
.gallery-modal-close { position:absolute; top:-12px; right:-12px; z-index:2; width:44px; height:44px; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; background:#131e24; font-size:1.7rem; }

/* Appointment */
.appointment-form { padding: 24px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-sm); }
.appointment-form label { display:block; margin-bottom:7px; color:#29353b; font-size:.75rem; font-weight:900; }
.appointment-form input, .appointment-form textarea, .appointment-form select { width:100%; border:1px solid #d6e0db; border-radius:13px; outline:none; background:#fbfcfb; padding:12px 13px; color:var(--ink); font-size:.85rem; transition:.2s ease; }
.appointment-form input:focus, .appointment-form textarea:focus, .appointment-form select:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(29,141,83,.10); background:#fff; }
.appointment-actions { display:flex; flex-wrap:wrap; gap:10px; }
.form-status { min-height:24px; margin:10px 0 0; color:var(--green-dark); font-size:.75rem; font-weight:800; }
.appointment-aside { color:#fff; background:linear-gradient(160deg,#15242b,#0e171c); }
.appointment-aside .eyebrow { color:#c1dacc; }
.direct-channel { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:15px 0; border-top:1px solid rgba(255,255,255,.10); }
.direct-channel > span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--gold); }
.direct-channel b { color:#fff; font-size:.84rem; }
.direct-channel small { display:block; margin-top:3px; color:#a3b1b7; font-size:.72rem; }
.direct-channel > b { color:var(--gold); }
.appointment-note { display:grid; grid-template-columns:13px 1fr; gap:11px; margin-top:18px; padding:15px; border-radius:15px; background:rgba(255,255,255,.05); }

/* Final CTA + Footer */
.final-cta-card { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:36px; border-radius:28px; color:#fff; background:linear-gradient(130deg,var(--ink),#1a2a32); box-shadow:var(--shadow-lg); }
.final-cta-card h2 { color:#fff; font-size:clamp(2rem,4.4vw,4rem); }
.final-cta-card p { margin:10px 0 0; color:#abb8be; }
.final-cta-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.site-footer { color:#d4ded9; background:#0a1115; border-top:1px solid rgba(255,255,255,.08); }
.footer-logo { width:min(155px,58%); padding:10px; border-radius:12px; background:#fff; }
.footer-lead { max-width:560px; color:#95a5ac; font-size:.86rem; }
.footer-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.footer-badges span { padding:7px 9px; border:1px solid rgba(255,255,255,.10); border-radius:999px; color:#a6b5bc; font-size:.63rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.footer-label { display:block; margin-bottom:15px; color:#7e9199; font-size:.63rem; font-weight:900; letter-spacing:.13em; }
.footer-links { display:grid; gap:9px; }
.footer-links a { color:#d6e0dc; font-size:.76rem; font-weight:750; }
.footer-links a:hover { color:#72d298; }
.footer-location { color:#9daeb5; font-size:.76rem; }
.footer-book { display:inline-flex; align-items:center; gap:10px; margin-top:10px; color:#fff; font-size:.75rem; font-weight:900; }
.footer-book span { color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; color:#697a82; border-top:1px solid rgba(255,255,255,.08); font-size:.65rem; }
.mobile-quick-bar { position:fixed; right:0; bottom:0; left:0; z-index:1080; display:none; grid-template-columns:repeat(4,1fr); padding:8px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:rgba(10,17,21,.96); border-top:1px solid rgba(255,255,255,.10); backdrop-filter:blur(14px); }
.mobile-quick-bar a { display:grid; justify-items:center; gap:2px; padding:5px 4px; color:#aab8be; font-size:.63rem; }
.mobile-quick-bar a span { font-size:1.02rem; color:#dfe8e4; }
.mobile-quick-bar a small { font-size:.58rem; font-weight:800; }
.mobile-quick-bar .quick-main { margin-top:-18px; padding-top:9px; border-radius:16px 16px 8px 8px; background:var(--green); color:#fff; box-shadow:0 8px 24px rgba(29,141,83,.30); }
.mobile-quick-bar .quick-main span { color:#fff; }

/* 404 */
.not-found-page { min-height:100svh; display:grid; place-items:center; padding:160px 0 90px; background:linear-gradient(180deg,#eef4f1,#fff); }
.not-found-card { width:min(780px,100%); padding:clamp(28px,7vw,70px); border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.not-found-number { margin:10px 0; color:var(--green); font-size:clamp(5rem,16vw,10rem); font-weight:1000; letter-spacing:-.08em; line-height:.86; }
.not-found-card h1 { font-size:clamp(2.4rem,5vw,4.8rem); }
.not-found-card p { max-width:650px; margin:15px 0 0; color:var(--muted); }

/* Animations */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left { transform:translateX(-30px); }
.reveal-right { transform:translateX(30px); }
.reveal-scale { transform:scale(.97); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.15s; }

/* Accordion */
.premium-accordion .accordion-item { margin-bottom:9px; overflow:hidden; border:1px solid var(--line); border-radius:16px !important; }
.premium-accordion .accordion-button { padding:17px 18px; color:var(--ink); background:#fff; box-shadow:none; font-weight:900; }
.premium-accordion .accordion-button:not(.collapsed) { color:var(--green-dark); background:var(--soft-green); }
.premium-accordion .accordion-body { color:#637078; font-size:.85rem; }

/* Desktop nav / mobile breakpoint */
@media (max-width: 1080px) {
  .desktop-nav { gap: 2px; }
  .nav-link-premium { padding-inline:9px; font-size:.74rem; }
  .nav-cta-premium { padding-inline:13px; font-size:.72rem; }
  .hero-visual-col { min-height:560px; }
  .hero-media-stack { width:min(610px,100%); }
  .credibility-grid, .reasons-grid, .principle-grid, .road-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .nav-actions { display:flex; }
  .site-container { width:min(var(--max),calc(100% - 28px)); }
  .hero-home { padding-top:132px; }
  .hero-copy { padding-bottom:34px; }
  .hero-visual-col { min-height:520px; }
  .hero-media-stack { top:3%; right:0; width:100%; height:95%; }
  .hero-main-media { inset:4% 4% 6% 2%; }
  .hero-badge-float { left:2%; }
  .hero-secondary-media { right:0; width:41%; }
  .hero-scroll { display:none; }
  .pathways-grid, .split-feature-card, .commercial-grid { grid-template-columns:1fr; }
  .pathway-card { min-height:440px; }
  .split-feature-image { min-height:420px; }
  .supply-promise-grid { grid-template-columns:1fr; }
  .final-cta-card { grid-template-columns:1fr; }
  .final-cta-actions { justify-content:flex-start; }
  .mobile-quick-bar { display:grid; }
  body { padding-bottom:66px; }
  .site-footer { padding-bottom:60px; }
}
@media (max-width: 760px) {
  .top-strip { display:none; }
  .nav-inner { min-height:70px; }
  .hero-home { min-height:auto; padding-top:94px; }
  .hero-home h1 { font-size:clamp(2.65rem,14vw,4.9rem); }
  .hero-lead { font-size:.96rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn-premium, .final-cta-actions .btn-premium, .appointment-actions .btn-premium { width:100%; }
  .hero-proof-grid { gap:5px; }
  .hero-proof-grid span { font-size:.69rem; }
  .hero-visual-col { min-height:400px; margin-top:12px; }
  .hero-media-stack { position:relative; height:400px; }
  .hero-main-media { inset:4% 7% 8% 0; border-radius:22px; transform:rotate(1deg); }
  .hero-secondary-media { width:43%; border-width:5px; border-radius:18px; transform:rotate(-5deg); }
  .hero-badge-float { width:135px; top:6%; left:-1%; padding:11px; border-radius:15px; }
  .orbit-one { width:360px; height:360px; right:-20%; }
  .orbit-two { width:480px; height:480px; right:-35%; }
  .inner-hero { padding-top:112px; padding-bottom:54px; }
  .inner-hero h1 { font-size:clamp(2.7rem,12vw,4.8rem); }
  .inner-hero-image { margin-top:12px; aspect-ratio:1.18; border-radius:22px; }
  .credibility-grid, .reasons-grid, .principle-grid, .client-grid, .road-service-grid, .commercial-grid { grid-template-columns:1fr; }
  .credibility-card, .reason-card, .principle-card, .commercial-card, .client-card, .road-service-card { min-height:unset; }
  .pathways-grid { gap:10px; }
  .pathway-card { min-height:430px; }
  .collage-media { min-height:420px; }
  .collage-small { border-width:5px; }
  .collage-stamp { width:92px; height:92px; font-size:.6rem; }
  .mini-stats { grid-template-columns:1fr; }
  .masonry-gallery { grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .gallery-card.gallery-wide { grid-column:span 2; }
  .gallery-card.gallery-tall { grid-row:span 2; }
  .footer-bottom { flex-direction:column; }
  .final-cta-card { padding:25px; }
  .display-title { font-size:clamp(2.25rem,10vw,4rem); }
  .appointment-form { padding:18px; }
}
@media (max-width: 420px) {
  .site-container { width:calc(100% - 22px); }
  .brand-mark { width:138px; }
  .nav-search-btn, .menu-toggle-premium { width:41px; height:41px; }
  .hero-copy { padding-top:14px; }
  .hero-proof-grid { grid-template-columns:1fr; padding-bottom:2px; }
  .hero-proof-grid > div { padding-top:10px; }
  .hero-visual-col, .hero-media-stack { min-height:335px; height:335px; }
  .hero-main-media { inset:0 0 8% 0; }
  .hero-secondary-media { width:38%; bottom:0; }
  .hero-badge-float { top:3%; left:2%; width:122px; }
  .hero-main-media figcaption { right:15px; bottom:14px; left:15px; }
  .hero-main-media figcaption b { font-size:1rem; }
  .masonry-gallery { grid-template-columns:1fr; grid-auto-rows:220px; }
  .gallery-card.gallery-wide { grid-column:span 1; }
  .gallery-card.gallery-tall { grid-row:span 1; }
  .appointment-actions { flex-direction:column; }
  .mobile-quick-bar a small { font-size:.54rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}


/* Compact brand scale — requested site-wide logo reduction */
.preloader-card > img { width: min(150px, 42vw); height: auto; margin-inline: auto; }
@media (max-width: 760px) {
  .brand-mark { width: 112px; }
  .mobile-logo { width: 105px; padding: 6px 8px; }
  .footer-logo { width: min(145px, 54%); }
}


/* Bitumen premium utility cards */
.bitumen-promise-card {
  position:relative; overflow:hidden; min-height:238px; padding:24px; border:1px solid rgba(20,50,39,.10);
  border-radius:24px; background:linear-gradient(145deg,#fff 0%,#f4faf7 100%);
  box-shadow:0 16px 38px rgba(16,46,34,.08); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bitumen-promise-card::before { content:""; position:absolute; width:120px; height:120px; right:-52px; top:-52px; border-radius:999px; background:rgba(29,141,83,.10); }
.bitumen-promise-card:hover { transform:translateY(-6px); border-color:rgba(29,141,83,.28); box-shadow:0 22px 48px rgba(16,46,34,.13); }
.bitumen-promise-card .card-no { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:var(--ink); font-size:.68rem; font-weight:900; letter-spacing:.08em; }
.bitumen-promise-card h3 { margin-top:38px; font-size:1.16rem; }
.bitumen-promise-card p { margin-top:8px; color:var(--muted); font-size:.79rem; line-height:1.7; }
.bitumen-promise-card .card-arrow { position:absolute; right:20px; bottom:20px; color:var(--green); font-weight:900; }
.bitumen-keep-moving { position:relative; overflow:hidden; padding:clamp(26px,4vw,42px); border-radius:30px; color:#fff; background:radial-gradient(circle at 88% 15%,rgba(81,207,133,.20),transparent 30%),linear-gradient(135deg,#0c171c 0%,#163127 100%); box-shadow:0 24px 60px rgba(8,20,15,.18); }
.bitumen-keep-moving::after { content:""; position:absolute; right:-90px; bottom:-100px; width:280px; height:280px; border:1px solid rgba(255,255,255,.10); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.025),0 0 0 64px rgba(255,255,255,.018); pointer-events:none; }
.bitumen-keep-moving h2 { position:relative; z-index:1; color:#fff; }
.bitumen-keep-moving .lead-copy, .bitumen-keep-moving > p { position:relative; z-index:1; color:#b9c9c1; }
.bitumen-keep-moving .supply-promise-grid { position:relative; z-index:2; }
.bitumen-keep-moving .bitumen-promise-card { background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.12); box-shadow:none; backdrop-filter:blur(10px); }
.bitumen-keep-moving .bitumen-promise-card:hover { background:rgba(255,255,255,.11); border-color:rgba(121,224,158,.34); }
.bitumen-keep-moving .bitumen-promise-card h3 { color:#fff; }
.bitumen-keep-moving .bitumen-promise-card p { color:#b8c9c1; }
.bitumen-keep-moving .bitumen-promise-card .card-no { background:var(--green); }
.bitumen-keep-moving .bitumen-promise-card .card-arrow { color:#8be0ac; }
.supply-quote-card { position:relative; overflow:hidden; border:1px solid rgba(15,23,28,.08); box-shadow:0 22px 55px rgba(15,23,28,.10); }
.supply-quote-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--green),var(--gold)); }
@media (max-width:760px) {
  .bitumen-promise-card { min-height:210px; padding:20px; }
  .bitumen-keep-moving { border-radius:24px; }
}



/* ==========================================================
   FINAL RESPONSIVE HARDENING — NO HORIZONTAL OVERFLOW
   ========================================================== */
.site-container > .row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.site-container,
.section-space,
.section-dark,
.section-cream,
.site-footer,
main,
header,
footer,
section,
article,
.card,
[class*="-card"],
[class*="-panel"],
[class*="-form"] {
  min-width: 0;
  max-width: 100%;
}
p, li, small, strong, b, a, button, label, input, textarea, select {
  overflow-wrap: anywhere;
}

/* ==========================================================
   HOMEPAGE HERO — RESTORED ORIGINAL COMPOSITION
   ========================================================== */
.hero-home .hero-copy {
  position: relative;
  z-index: 4;
  margin-right: 12px;
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(13,31,25,.96) 0%, rgba(15,23,28,.94) 100%);
  box-shadow: 0 24px 65px rgba(0,0,0,.16);
}
.hero-home .hero-media-stack { top: 2%; height: 92%; }
.hero-home .hero-secondary-media { z-index: 6; }
.hero-home .hero-badge-float { z-index: 7; }

/* Smaller headline so every word remains visible on compact screens. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .hero-home { padding-top: 96px; padding-bottom: 58px; }
  .hero-home .hero-copy {
    margin-right: 0;
    padding: 22px 18px 24px;
    border-radius: 22px;
  }
  .hero-home h1 {
    max-width: 100%;
    font-size: clamp(1.95rem, 9.1vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -.03em;
  }
  .hero-home h1 span { display: inline; }
  .hero-home .hero-visual-col { min-height: 385px; margin-top: 8px; }
  .hero-home .hero-visual { min-height: 385px; }
  .hero-home .hero-media-stack {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .hero-home .hero-main-media {
    inset: 0 6% 8% 0;
    z-index: 2;
    border-radius: 22px;
    transform: rotate(1deg);
  }
  .hero-home .hero-secondary-media {
    right: 2%;
    top: 8px;
    bottom: auto;
    z-index: 8;
    width: min(160px, 40vw);
    border-width: 4px;
    border-radius: 17px;
    transform: rotate(-4deg);
  }
  .hero-home .hero-badge-float {
    left: 2%;
    top: auto;
    bottom: 6px;
    z-index: 9;
    width: 112px;
    padding: 10px;
    border-radius: 15px;
  }
  .hero-home .hero-secondary-label { font-size: .55rem; }
}

@media (max-width: 420px) {
  .site-container { width: calc(100% - 16px); }
  .hero-home { padding-top: 90px; padding-bottom: 52px; }
  .hero-home .hero-copy { padding: 19px 15px 21px; }
  .hero-home h1 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  .hero-home .hero-lead { font-size: .9rem; line-height: 1.58; }
  .hero-home .hero-actions { margin-top: 22px; }
  .hero-home .hero-proof-grid { margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-home .hero-proof-grid > div { padding-right: 4px; }
  .hero-home .hero-proof-grid span { font-size: .62rem; line-height: 1.35; }
  .hero-home .hero-visual-col,
  .hero-home .hero-visual { min-height: 330px; height: 330px; }
  .hero-home .hero-main-media { inset: 0 0 8% 0; }
  .hero-home .hero-secondary-media { width: 132px; top: 6px; }
  .hero-home .hero-badge-float { width: 100px; }
}

@media (max-width: 350px) {
  .hero-home h1 { font-size: 1.95rem; }
  .hero-home .hero-copy { padding-inline: 13px; }
  .hero-home .hero-actions .btn-premium { min-height: 47px; padding-inline: 14px; font-size: .76rem; }
  .hero-home .hero-secondary-media { width: 122px; top: 5px; }
}