/* ============================================================
   AragoCor Minerals — global stylesheet
   Corporate B2B refinement: navy/turquoise retained, squared
   geometry, editorial flow, restrained effects.
   ============================================================ */

:root{
  --background:200 33% 99%;
  --foreground:206 79% 15%;
  --card:0 0% 100%;
  --card-foreground:206 79% 15%;
  /* Teal accent darkened from 35% to 27% lightness on 2026-08-13: at 35% it
     rendered #169C9C, 3.35:1 on white and 4.27:1 on the pale panels it sits on
     — below the 4.5:1 AA needs for body text. 27% keeps hue and saturation and
     reaches 4.81:1 on the palest ground in use. --accent-on-dark is the inverse
     case: eyebrows over the ink scrim, where darkening would have made things
     worse. Kept in step with styles.css. */
  --primary:180 75% 27%;
  --primary-foreground:0 0% 100%;
  --accent:180 75% 27%;
  --accent-on-dark:180 75% 52%;
  --accent-foreground:0 0% 100%;
  --emerald:168 62% 36%;
  --sand:196 42% 95%;
  --secondary:196 42% 95%;
  --secondary-foreground:206 79% 15%;
  --muted:196 35% 96%;
  --muted-foreground:203 21% 39%;
  --graphite:203 65% 19%;
  --pearl:0 0% 100%;
  --border:196 46% 91%;
  --ring:180 75% 35%;
  --overlay:206 79% 15%;
  --radius:3px;

  --gradient-deep:linear-gradient(180deg,hsl(206 79% 15%) 0%,hsl(205 72% 11%) 100%);
  --gradient-pale:linear-gradient(180deg,hsl(200 33% 99%) 0%,hsl(196 42% 96%) 100%);

  --shadow-soft:0 1px 2px hsl(206 60% 15% / 0.08),0 4px 14px hsl(206 60% 15% / 0.06);
  --shadow-elevated:0 18px 40px -18px hsl(206 60% 15% / 0.28);

  --font-display:"Source Serif 4",Georgia,serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;border-color:hsl(var(--border))}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
img{display:block;max-width:100%}
h1,h2{font-family:var(--font-display);letter-spacing:-0.01em;font-weight:600;margin:0;line-height:1.15}
p{margin:0}
ul{margin:0}
a{color:hsl(var(--accent));text-decoration:none;transition:color .2s}
a:hover{color:hsl(184 66% 26%)}
button{font-family:inherit}
::selection{background:hsl(var(--accent) / 0.25)}
.hero :focus-visible{outline-color:hsl(var(--pearl))}
p,.hero-desc{text-wrap:pretty;max-width:68ch}

/* ---------- Layout ---------- */
.container-wide{margin-inline:auto;width:100%;max-width:78rem;padding-inline:1.5rem}
@media(min-width:768px){.container-wide{padding-inline:3rem}}
.section{padding-block:4.5rem}
.section-lg{padding-block:6rem}
main{display:block}

/* ---------- Typography ---------- */
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:hsl(var(--accent));margin:0;font-weight:500}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
/* 1.1 is the shared leading floor for display headings; see "Display headline
   leading floor" in site-chrome.css for the measurement behind it. This copy of
   .display-1 shadows the one in styles.css on the pages that load this file, so
   the two have to be corrected together or the fix reaches only half the site. */
.display-1{font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.1;letter-spacing:-0.02em;font-weight:600}
.text-balance{text-wrap:balance}
.text-pretty{text-wrap:pretty}

/* ---------- Surfaces ---------- */
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);transition:border-color .2s}

/* ---------- Buttons ---------- */

/* ---------- Grids ---------- */

/* =========================================================
   HEADER / NAV
   ========================================================= */
/* Desktop dropdowns */

/* Mobile menu */
@media(max-width:767px){
  .section-lg{padding-block:4.5rem}
}

/* =========================================================
   FOOTER
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--gradient-deep);color:hsl(var(--pearl))}
.hero-media{position:absolute;inset:0}
.hero-media picture{display:contents}
.hero-media img{height:100%;width:100%;object-fit:cover}
.page-hero .hero-media img{opacity:.28}
.page-hero .hero-inner{padding-top:5.7rem;padding-bottom:3.6rem}
@media(min-width:768px){.page-hero .hero-inner{padding-top:6.6rem;padding-bottom:4.5rem}}
.legal-prose{max-width:44rem}
.legal-prose h2{font-family:var(--font-display);font-size:1.375rem;font-weight:600;color:hsl(var(--foreground));margin-top:2.5rem}
.legal-prose h2:first-child{margin-top:0}
.legal-prose p,.legal-prose li{font-size:.9375rem;line-height:1.7;color:hsl(var(--muted-foreground));margin-top:.85rem}
.legal-prose ul{margin-top:.85rem;padding-left:1.25rem;list-style:disc}
.legal-prose li{margin-top:.4rem}
/* Prose links carry an underline, not colour alone: the sheet's base rule
   strips underlines site-wide, which is right for nav and buttons but leaves
   an inline `mailto:` in a paragraph indistinguishable from the sentence
   around it for anyone who cannot separate the two hues (WCAG 1.4.1). Scoped
   to .legal-prose so the footer and nav keep their own treatment. */
.legal-prose a{color:hsl(var(--accent));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-prose a:hover{text-decoration-thickness:2px}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,hsl(var(--primary) / 0.94) 0%,hsl(var(--primary) / 0.8) 45%,hsl(var(--primary) / 0.55) 100%)}
.hero-inner{position:relative;padding-top:9.5rem;padding-bottom:6rem;max-width:44rem}
@media(min-width:768px){.hero-inner{padding-top:11rem;padding-bottom:7.5rem}}
.hero-inner .eyebrow{color:hsl(var(--accent-on-dark))}
.hero h1{margin-top:1rem;max-width:40rem}
.hero .hero-desc{margin-top:1.5rem;max-width:38rem;font-size:1.0625rem;color:hsl(var(--pearl) / 0.78)}
@media(min-width:768px){.hero .hero-desc{font-size:1.125rem}}

/* =========================================================
   STATS STRIP
   ========================================================= */

/* =========================================================
   INDUSTRY CARDS
   ========================================================= */

/* =========================================================
   Feature boxes / glass tiles
   ========================================================= */

/* =========================================================
   TABLES
   ========================================================= */

/* =========================================================
   TECHNICAL DATA HUB
   ========================================================= */

/* =========================================================
   FAQ / ACCORDION
   ========================================================= */

/* =========================================================
   CTA BANNER
   ========================================================= */

/* =========================================================
   Compare cards
   ========================================================= */

/* =========================================================
   ABOUT map / timeline
   ========================================================= */
.timeline{margin-top:2.5rem;position:relative;border-left:1px solid hsl(var(--border));padding-left:2rem;list-style:none;display:flex;flex-direction:column;gap:2.25rem}
.timeline li{position:relative}
.timeline p{margin-top:.5rem;color:hsl(var(--muted-foreground));max-width:42rem}

/* Verification-led trust content */

/* Resource + article grids: per-card borders with gap (not shared rows) */

/* Science page — method cards + mini spec tiles */

/* =========================================================
   RESOURCES / KNOWLEDGE
   ========================================================= */
/* Modal + toast */
@keyframes rcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   CONTACT FORM
   ========================================================= */

/* =========================================================
   Misc utilities
   ========================================================= */

@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes fade-in-slow{0%{opacity:0}100%{opacity:1}}
@keyframes scale-in{0%{opacity:0;transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* ============================================================
   TEX-TECH DARK INDUSTRIAL THEME — overrides + new components
   ============================================================ */
/* Dark overlays for image scrims (primary is now turquoise) */
.hero-scrim{background:linear-gradient(100deg,hsl(var(--overlay) / 0.94) 0%,hsl(var(--overlay) / 0.74) 45%,hsl(var(--overlay) / 0.5) 100%)}
.page-hero .hero-media img{opacity:.42}

/* Bright mineral-white and ice-blue supporting surfaces */

/* Button hover tuning for turquoise primary/accent */
a:hover{color:hsl(180 76% 28%)}
::selection{background:hsl(var(--accent) / 0.22);color:hsl(var(--foreground))}

/* Resource badges: recolor for dark cards */

/* =================== Photographic industry grid =================== */

/* =================== Credibility row =================== */

/* =================== Capabilities =================== */

/* =================== Grades strip =================== */

/* Home hero — cinematic full-bleed aerial background */

/* Science hero — Bahamas aerial footage with a readable technical overlay */