@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@600;700;800&family=Playfair+Display:ital,wght@1,600&display=swap");

:root {
  --ink: #0b2631;
  --deep: #08222c;
  --navy: #0a2f3b;
  --sea: #0f6670;
  --aqua: #60d8cd;
  --foam: #f7f6f1;
  --sand: #ddd4c2;
  --line: rgba(8, 34, 44, 0.15);
  --muted: #5e6d6e;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--foam); font: 16px/1.65 var(--body); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 25px 5.2vw; color: white; border-bottom: 1px solid rgba(255,255,255,.2); }
.logo { display: flex; gap: 8px; align-items: center; font: 800 20px/1 var(--display); letter-spacing: 3px; flex:0 0 auto; }
.logo span span { color: var(--aqua); }
.logo-mark { display:block; width:34px; height:34px; object-fit:contain; flex:0 0 34px; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.site-nav a:not(.nav-cta) { opacity: .85; transition: opacity .2s ease; }
.site-nav a:hover { opacity: 1; }
.nav-cta { padding: 11px 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 2px; }
.mobile-call { display:none; padding:10px 13px; border:1px solid rgba(255,255,255,.5); color:white; font:700 11px/1 var(--display); letter-spacing:1.2px; text-transform:uppercase; }
.menu-button { display: none; border: 0; background: transparent; }
.hero { min-height: 760px; height: 100vh; position: relative; display: flex; color: white; overflow: hidden; }
.hero-photo, .hero-deck, .hero-overlay { position: absolute; inset: 0; width:100%; height:100%; }
.hero-photo { z-index:1; object-fit:cover; object-position:center; }
.hero-deck { overflow:hidden; background:linear-gradient(135deg, #315e68 0%, #103d49 49%, #0a2934 100%); }
.hero-deck::before { content:""; position:absolute; width:92%; height:150%; right:-20%; bottom:-66%; border:20px solid rgba(6,26,33,.68); border-radius:18% 0 0 0; background:repeating-linear-gradient(103deg, #aa9676 0 7%, #1c3334 7.2% 7.7%, #c0ad8a 7.9% 14.5%); transform:rotate(-8deg); box-shadow:0 0 0 8px rgba(190,170,132,.17); }
.hero-deck::after { content:""; position:absolute; width:44%; height:35%; right:-4%; bottom:-11%; border:14px solid rgba(6,26,33,.74); border-radius:10px 10px 0 0; background:repeating-linear-gradient(103deg, #9c896d 0 9%, #1c3334 9.3% 10%, #b5a27f 10.2% 18%); transform:rotate(-8deg); }
.hero-deck span { position:absolute; display:block; border:10px solid rgba(6,26,33,.75); background:repeating-linear-gradient(103deg, #a79271 0 14%, #203b3a 14.5% 15.3%, #beaa86 15.8% 26%); transform:rotate(-8deg); }
.hero-deck span:nth-child(1) { width:430px; height:145px; right:19%; bottom:27%; border-radius:12px; }
.hero-deck span:nth-child(2) { width:250px; height:110px; right:4%; bottom:46%; border-radius:12px; }
.hero-deck span:nth-child(3) { width:220px; height:84px; right:30%; bottom:51%; border-radius:12px; }
.hero-deck span:nth-child(4) { width:160px; height:160px; right:11%; bottom:6%; border-radius:50%; }
.hero-deck span:nth-child(5) { width:340px; height:90px; right:-3%; bottom:64%; border-radius:12px; }
.hero-overlay { z-index:2; background: linear-gradient(90deg, rgba(2,25,34,.96), rgba(2,25,34,.72) 38%, rgba(2,25,34,.08) 74%), linear-gradient(0deg, rgba(2,25,34,.45), transparent 32%); }
.hero-content { position: relative; z-index: 3; align-self: center; max-width: 720px; padding: 115px 5.2vw 130px; }
.eyebrow { margin: 0 0 15px; color: var(--sea); font: 700 12px/1 var(--display); letter-spacing: 2px; text-transform: uppercase; }
.hero .eyebrow, .quote-section .eyebrow { color: var(--aqua); }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -.04em; }
h1 { font-size: clamp(58px, 6.5vw, 98px); line-height: .98; color: #fff; }
h2 { font-size: clamp(44px, 5vw, 72px); line-height: 1.03; }
h3 { font-size: 23px; line-height: 1.2; }
em { color: var(--aqua); font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; }
.hero-copy { max-width: 555px; margin: 27px 0 34px; color: rgba(255,255,255,.82); font-size: 18px; }
.button-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-keywords { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; color:rgba(255,255,255,.76); font:700 11px/1 var(--display); letter-spacing:1.45px; text-transform:uppercase; }
.hero-keywords span { display:flex; align-items:center; gap:18px; }
.hero-keywords span:not(:last-child)::after { content:""; width:4px; height:4px; border-radius:50%; background:var(--aqua); }
.button { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 2px; font: 700 12px/1 var(--display); letter-spacing: 1.7px; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--aqua); color: var(--deep); }
.button-ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.button-dark { background: var(--deep); color: white; }
.button-outline { border:1px solid var(--line); color:var(--deep); background:transparent; }
.intro-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.section-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-proof { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 0; padding: 0 5.2vw; color: white; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.08); background: var(--deep); }
.hero-proof div { min-width: 220px; padding: 18px 32px 18px 0; margin-right: 32px; border-right: 1px solid rgba(255,255,255,.2); }
.hero-proof strong, .hero-proof span { display:block; }
.hero-proof strong { color: var(--aqua); font: 700 18px var(--display); }
.hero-proof span { color: rgba(255,255,255,.75); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.section { padding: 118px 7vw; }
.section-tight { padding: 0 7vw 100px; }
.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; }
.intro-copy { max-width: 590px; color: var(--muted); font-size: 18px; }
.intro-copy p { margin: 0 0 22px; }
.text-link { color: var(--sea); font: 700 12px/1 var(--display); letter-spacing: 1.6px; text-transform: uppercase; }
.text-link span { display:inline-block; margin-left: 6px; transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.benefits article { position: relative; padding: 0 0 28px; overflow:hidden; border: 1px solid var(--line); background:#ebe8de; }
.benefits article:last-child { border-right: 1px solid var(--line); }
.benefits article img { width:100%; height:175px; object-fit:cover; margin-bottom:24px; }
.benefits h3, .benefits p { padding:0 26px; }
.benefits p { margin-bottom: 0; color: var(--muted); font-size: 15px; }
.split-showcase { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 620px; background: var(--sand); }
.showcase-image { display:grid; place-items:center; overflow:hidden; background:#153e48; }
.showcase-image > img { width:100%; height:100%; object-fit:cover; }
.deck-detail { position:relative; width:min(100%, 660px); aspect-ratio:1.32; border:16px solid #071e25; border-radius:16px; background:#1d292b; transform:rotate(-6deg); box-shadow:0 28px 45px rgba(0,0,0,.25); }
.deck-detail span { position:absolute; display:block; border:7px solid #172323; border-radius:8px; background:repeating-linear-gradient(90deg, #84908e 0 3px, #788583 3px 6px); }
.deck-detail span:nth-child(1) { inset:7% 5% auto 5%; height:23%; }
.deck-detail span:nth-child(2) { top:36%; left:5%; width:42%; height:56%; }
.deck-detail span:nth-child(3) { top:36%; right:5%; width:42%; height:56%; }
.deck-detail span:nth-child(4) { width:74px; height:74px; right:11%; bottom:15%; border-radius:50%; background:#b8c3c1; box-shadow:inset 0 0 0 15px #536261; }
.deck-detail span:nth-child(5) { width:32%; height:10%; left:11%; top:44%; border-radius:20px; background:#667574; }
.deck-detail span:nth-child(6) { width:25%; height:10%; right:11%; top:44%; border-radius:20px; background:#667574; }
.showcase-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 70px 8vw 70px 7vw; }
.showcase-copy p:not(.eyebrow) { max-width: 510px; margin: 25px 0 28px; color: #57605e; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 28px; margin-bottom: 34px; }
.section-heading p:not(.eyebrow) { max-width: 530px; justify-self: end; color: var(--muted); }
.section-heading.narrow { display: block; }
.solutions-heading { display:block; max-width:1120px; margin-bottom:32px; }
.solutions-heading h2 { max-width:1120px; }
.solutions-heading p:not(.eyebrow) { max-width:780px; margin:18px 0 0; justify-self:auto; color:var(--muted); }
.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.solution-card { min-height: 430px; display:flex; flex-direction:column; justify-content:space-between; padding: 0 0 24px; overflow:hidden; background: #ebe8de; transition: transform .25s ease, opacity .25s ease; }
.solution-card:hover { transform: translateY(-6px); }
.card-label { color: var(--sea); font: 700 11px/1 var(--display); letter-spacing: 1.4px; text-transform: uppercase; }
.solution-card > img { width:100%; height:190px; object-fit:cover; margin-bottom:24px; }
.solution-card > div { padding:0 20px; }
.solution-card p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.process { display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; background: #e4e0d5; }
.process-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(8,34,44,.18); }
.process-list li { display:grid; grid-template-columns:50px 1fr; gap:10px; padding:22px 0; border-bottom:1px solid rgba(8,34,44,.18); }
.process-list span { color:var(--sea); font:700 12px var(--display); }
.process-list h3 { font-size:20px; }
.process-list p { margin:7px 0 0; color:var(--muted); font-size:15px; }
.light { color:var(--aqua); white-space:nowrap; }
.search-copy { display:grid; grid-template-columns:1fr 1fr; gap:70px; border-bottom:1px solid var(--line); }
.search-copy-body { color:var(--muted); }
.search-copy-body p:first-child { margin-top:0; }
.discovery-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; padding:0 7vw 94px; }
.discovery-strip article { padding:28px 26px 26px; border-top:3px solid var(--sea); border-right:1px solid var(--line); background:#ebe8de; }
.discovery-strip article:first-child { border-left:1px solid var(--line); }
.discovery-strip .eyebrow { margin-bottom:14px; }
.discovery-strip h3 { font-size:21px; }
.discovery-strip p:last-child { margin-bottom:0; color:var(--muted); font-size:15px; }
.discovery-actions { grid-column:1 / -1; justify-content:center; }
.faq { display:block; padding-left:0; padding-right:0; }
.faq-hero { position:relative; min-height:360px; display:flex; align-items:end; overflow:hidden; margin-bottom:44px; padding:62px 7vw; color:white; background:var(--navy); }
.faq-hero > img, .faq-hero-overlay { position:absolute; inset:0; width:100%; height:100%; }
.faq-hero > img { object-fit:cover; object-position:center 54%; }
.faq-hero-overlay { background:linear-gradient(90deg, rgba(2,23,30,.92), rgba(2,23,30,.64) 48%, rgba(2,23,30,.14)), linear-gradient(0deg, rgba(2,23,30,.35), transparent 55%); }
.faq-hero .section-heading { position:relative; z-index:1; margin:0; }
.faq-hero .eyebrow { color:#fff; }
.faq-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:0 42px; margin:0 7vw; border-top:1px solid var(--line); }
details { position:relative; display:block; padding:22px 0 22px 54px; border-bottom:1px solid var(--line); }
details::before { content:""; position:absolute; top:23px; left:0; width:34px; height:34px; border-radius:50%; background:var(--aqua); }
details::after { content:""; position:absolute; top:32px; left:11px; width:10px; height:6px; border-left:3px solid var(--deep); border-bottom:3px solid var(--deep); transform:rotate(-45deg); }
summary { display:block; padding:0; color:var(--ink); cursor:default; font:700 23px/1.2 var(--display); letter-spacing:-.04em; list-style:none; pointer-events:none; }
summary::-webkit-details-marker { display:none; }
details p { margin:8px 0 0; padding:0; color:var(--muted); font-size:16px; }
.quote-section { display:flex; justify-content:space-between; align-items:end; gap:45px; padding:95px 7vw; background:#102f38; color:white; }
.quote-section p:not(.eyebrow) { color:rgba(255,255,255,.7); }
.quote-actions { display:flex; align-items:flex-end; flex-direction:column; gap:16px; }
.phone { color:var(--aqua); font:700 21px var(--display); }
.dealer-section { position:relative; overflow:hidden; padding:76px 7vw 70px; color:white; background:var(--navy); }
.dealer-bg { position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,31,40,.9), rgba(5,31,40,.7)), url("assets/flexdek-product-hero-aerial-hd.png") center/cover; opacity:.95; }
.dealer-content { position:relative; z-index:1; text-align:center; }
.dealer-content .eyebrow { color:white; }
.dealer-content h2 { font-size:clamp(38px, 4.2vw, 62px); }
.dealer-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin:36px 0 34px; }
.dealer-card { display:flex; min-height:190px; flex-direction:column; justify-content:space-between; align-items:center; gap:18px; padding:22px 16px 18px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); backdrop-filter:blur(3px); transition:transform .2s ease, background .2s ease; }
.dealer-card:hover { transform:translateY(-5px); background:rgba(255,255,255,.16); }
.dealer-card img { max-width:100%; height:84px; object-fit:contain; background:white; }
.dealer-card span { display:block; color:rgba(255,255,255,.86); font-size:14px; line-height:1.45; }
.dealer-email { display:inline-flex; align-items:center; gap:10px; padding:15px 21px; border:1px solid rgba(255,255,255,.4); color:white; font:700 12px/1 var(--display); letter-spacing:1.4px; text-transform:uppercase; }
.dealer-email span { color:var(--aqua); }
footer { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:28px 45px; padding:35px 7vw; color:white; background:#08222c; border-top:1px solid rgba(255,255,255,.12); }
footer p, footer small { margin:0; color:rgba(255,255,255,.56); font-size:13px; }
.footer-links { display:flex; gap:20px; color:rgba(255,255,255,.78); font-size:13px; }
.footer-social { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; gap:28px; padding-top:12px; }
.footer-social a { display:block; transition:transform .2s ease; }
.footer-social a:hover { transform:translateY(-3px); }
.footer-social img { height:72px; width:auto; max-width:min(300px, 42vw); object-fit:contain; }
footer small { grid-column:2; }

@media (max-width: 900px) {
  .site-header { padding:20px 6vw; }
  .mobile-call { display:inline-flex; align-items:center; margin-left:auto; margin-right:8px; }
  .menu-button { display:block; padding:6px; cursor:pointer; }
  .menu-button span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px; background:white; }
  .site-nav { display:none; position:absolute; top:72px; left:0; width:100%; padding:22px 6vw 26px; align-items:flex-start; flex-direction:column; gap:17px; background:rgba(2,25,34,.97); }
  .site-nav.open { display:flex; }
  .hero { min-height:720px; height:auto; }
  .hero-content { align-self:flex-end; padding:160px 6vw 165px; }
  .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 6vw; }
  .hero-proof div { min-width:0; padding:16px 14px 16px 0; margin-right:14px; }
  .intro, .split-showcase, .process, .search-copy { grid-template-columns:1fr; gap:35px; }
  .section { padding:85px 6vw; }
  .section-tight { padding:0 6vw 75px; }
  .benefits { grid-template-columns:repeat(2, 1fr); }
  .benefits article:nth-child(2) { border-right:1px solid var(--line); }
  .showcase-image { height:420px; }
  .showcase-copy { padding:65px 6vw; }
  .solution-grid { grid-template-columns:repeat(2, 1fr); }
  .section-heading { display:block; }
  .section-heading p:not(.eyebrow) { margin-top:18px; }
  .solutions-heading h2 br { display:none; }
  .quote-section { padding:76px 6vw; align-items:flex-start; flex-direction:column; }
  .dealer-section { padding:64px 6vw; }
  .dealer-grid { grid-template-columns:repeat(2, 1fr); }
  .discovery-strip { grid-template-columns:1fr; padding:0 6vw 74px; }
  .discovery-strip article { border-left:1px solid var(--line); }
  .faq-hero { min-height:310px; padding:52px 6vw; }
  .faq-list { margin:0 6vw; }
  .faq-list { grid-template-columns:1fr; }
  .quote-actions { align-items:flex-start; }
  footer { grid-template-columns:1fr; gap:16px; padding:32px 6vw; }
  footer small { grid-column:auto; }
  .footer-social { grid-column:auto; justify-content:flex-start; flex-wrap:wrap; gap:14px; padding-top:4px; }
}
@media (max-width: 560px) {
  h1 { font-size:59px; }
  h2 { font-size:47px; }
  .hero-overlay { background:linear-gradient(90deg, rgba(2,25,34,.92), rgba(2,25,34,.6)); }
  .hero-photo { object-position:62% center; }
  .hero-proof { grid-template-columns:1fr; }
  .hero-proof div { padding:14px 0; margin-right:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.16); }
  .hero-proof div:last-child { border-bottom:0; }
  .hero-proof strong { font-size:14px; }
  .hero-proof span { max-width:105px; font-size:9px; line-height:1.4; }
  .benefits { grid-template-columns:1fr; }
  .benefits article, .benefits article:nth-child(2) { border-right:1px solid var(--line); }
  .solution-grid { grid-template-columns:1fr; }
  .mobile-call { padding:9px 10px; font-size:10px; }
  .logo { font-size:16px; letter-spacing:2px; }
  .logo-mark { width:30px; height:30px; flex-basis:30px; }
  .solution-card { min-height:350px; }
  .section-heading { margin-bottom:26px; }
  .footer-links { flex-direction:column; gap:6px; }
  .footer-social img { height:54px; max-width:100%; }
  .dealer-grid { grid-template-columns:1fr; }
  .dealer-card { min-height:160px; }
}