/* ==========================================================================
   Shoreline — "ultra modern" overlay
   Loaded AFTER styles.css. Keeps every layout rule in styles.css; only
   changes the look: deep navy + Shoreline logo blue, sharp edges, dark
   header with the white logo, dark hero.
   ========================================================================== */

:root {
  --color-copper:    #1f86d1;   /* Shoreline blue (from the logo, brightened for contrast) */
  --color-copper-dk: #0b578d;   /* exact logo blue */
  --color-copper-lt: #6db4ea;
  --color-sand:      #eef3f7;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
}

/* ---------- sharp edges everywhere (WhatsApp button stays round) ---------- */
.btn, .nav a, .chip, .why-icon, .feature-list .tick, .gallery-item .gallery-zoom,
.lightbox-close, .field input, .field textarea, .map-tab, .badge-float { border-radius: 0 !important; }
.card-media { border-radius: 0 !important; }

/* ---------- buttons ---------- */
.btn-primary { background: var(--color-copper); box-shadow: 0 10px 26px rgba(31,134,209,0.35); }
.btn-primary:hover { background: var(--color-copper-dk); box-shadow: 0 16px 34px rgba(31,134,209,0.42); }
.btn { white-space: nowrap; }

/* ---------- topbar + header: dark glass, white logo ---------- */
.topbar { background: #050b14; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.06); }
.topbar a { color: rgba(255,255,255,0.85); }
.topbar-item svg { color: var(--color-copper-lt); }
.site-header {
  background: rgba(10,28,48,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.site-header.is-scrolled { background: rgba(10,28,48,0.98); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.nav a { color: rgba(255,255,255,0.8); }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255,255,255,0.08); color: #fff; }
.nav a[aria-current="page"] { color: var(--color-copper-lt); box-shadow: inset 0 -2px 0 var(--color-copper); }
.nav-toggle { color: #fff; }
.brand-logo { height: 46px; }

/* ---------- hero: deep navy, engineering grid, blue glow ---------- */
.hero {
  background:
    radial-gradient(55% 70% at 80% 35%, rgba(31,134,209,0.22), transparent 70%),
    radial-gradient(45% 60% at 5% 95%, rgba(22,59,98,0.7), transparent 70%),
    linear-gradient(160deg, #050b14 0%, #0a1c30 55%, #0f2946 100%);
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.hero-blob--amber { background: radial-gradient(circle, rgba(31,134,209,0.25), transparent 70%); }
.hero-blob--navy  { background: radial-gradient(circle, rgba(109,180,234,0.12), transparent 70%); }
/* layout fix: the hero container lost its side padding */
.container.hero-fill { padding-left: 24px; padding-right: 24px; }
.hero-content h1 { color: #fff; font-size: clamp(2rem, 2.3vw + 1.1rem, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.hero-content .eyebrow { color: var(--color-copper-lt); }
.hero-content .eyebrow::before { background: var(--color-copper-lt); }
.hero-content p.lead { color: rgba(255,255,255,0.78); }
.hero-actions .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; }
.hero-actions .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.hero-media img { height: auto; aspect-ratio: 4 / 3.1; object-fit: cover; filter: brightness(1.28) contrast(1.05) saturate(1.1); box-shadow: 0 30px 70px rgba(0,0,0,0.45); outline: 1px solid rgba(255,255,255,0.1); outline-offset: 10px; }
.hero-media .badge-float {
  background: rgba(10,28,48,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hero-media .badge-float strong { color: var(--color-copper-lt); }
.hero-media .badge-float span { color: rgba(255,255,255,0.75); }
.hero-stats { background: rgba(5,11,20,0.55); border-top: 1px solid rgba(255,255,255,0.1); }
.hero-stat { border-right-color: rgba(255,255,255,0.1); }
.hero-stat strong { color: #fff; }
.hero-stat span { color: rgba(255,255,255,0.6); }

/* ---------- inner page headers: dark with a dot-matrix texture ---------- */
.page-hero {
  background:
    radial-gradient(55% 90% at 85% 25%, rgba(31,134,209,0.2), transparent 70%),
    linear-gradient(160deg, #050b14 0%, #0a1c30 60%, #0f2946 100%);
}
.page-hero::before {
  width: auto; aspect-ratio: auto; border-radius: 0; filter: none;
  inset: 0; top: 0; right: 0;
  background-image: radial-gradient(rgba(255,255,255,0.13) 1.4px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.page-hero h1 { color: #fff; }
.page-hero p.lead { color: rgba(255,255,255,0.75); }
.breadcrumb { color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: var(--color-copper-lt); }

/* ---------- cards, icons, accents ---------- */
.why-icon { background: linear-gradient(135deg, var(--color-copper), var(--color-copper-dk)); }
.card, .why-card, .product-card, .contact-card { box-shadow: none; }
.card:hover, .why-card:hover, .product-card:hover { box-shadow: 0 18px 40px rgba(7,15,26,0.12); }
.product-card { border-left-color: var(--color-copper); }
.feature-list .tick { background: rgba(31,134,209,0.12); }
.nav a:hover { background: rgba(255,255,255,0.08); }
.chip { background: #fff; }
.section--sand .chip { background: #fff; }
.chip--more { display: none; }   /* every list is shown in full now */

/* ---------- CTA band: navy with a blue glow instead of amber ---------- */
.cta-band {
  background:
    radial-gradient(60% 120% at 90% 0%, rgba(31,134,209,0.35), transparent 70%),
    linear-gradient(120deg, #0a1c30, #0f2946);
  box-shadow: 0 24px 56px rgba(10,28,48,0.35);
}
.cta-band .btn-primary { background: var(--color-copper); box-shadow: 0 10px 26px rgba(31,134,209,0.4); }
.cta-band .btn-primary:hover { background: var(--color-copper-dk); }

/* ---------- forms ---------- */
.form-card { border: 1px solid var(--color-line); }
.form-note.is-ok { color: #1f7a4d; font-weight: 600; }
.form-note.is-err { color: #b3261e; font-weight: 600; }

/* ---------- mid-width desktops: keep logo, nav and CTA on one line ---------- */
@media (min-width: 1081px) and (max-width: 1280px) {
  .nav a { padding-left: 9px; padding-right: 9px; font-size: 0.9rem; }
  .brand-logo { height: 40px; }
  .site-header .header-cta, .site-header .btn { padding-left: 16px; padding-right: 16px; font-size: 0.88rem; }
}
@media (min-width: 1081px) and (max-width: 1180px) {
  .site-header .header-cta, .site-header .btn { display: none; }
}

/* ---------- mobile nav: dark panel ---------- */
@media (max-width: 1080px) {
  .nav { background: rgba(10,28,48,0.98); border-bottom-color: rgba(255,255,255,0.08); }
}
@media (max-width: 760px) {
  .brand-logo { height: 36px; }
  .container.hero-fill { padding-left: 20px; padding-right: 20px; }
}

/* stop slide-in animations from causing sideways scroll on phones */
html, body { overflow-x: clip; }