/* ============================================================
   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,h3{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)}
table{border-collapse:collapse}
.hero :focus-visible{outline-color:hsl(var(--pearl))}
p,.lead,.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}
.display{font-family:var(--font-display)}
.italic{font-style:normal;color:hsl(var(--accent))}
/* 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}
.display-2{font-size:clamp(1.875rem,3.6vw,2.75rem);line-height:1.12;letter-spacing:-0.015em;font-weight:600}
.text-balance{text-wrap:balance}
.text-pretty{text-wrap:pretty}
.lead{font-size:1.0625rem;color:hsl(var(--muted-foreground));max-width:58ch;line-height:1.65}
@media(min-width:768px){.lead{font-size:1.125rem}}

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

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:3px;font-size:.875rem;font-weight:600;line-height:1;min-height:44px;padding:.65rem 1.4rem;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap;text-decoration:none;letter-spacing:-0.005em}
.btn svg{width:1rem;height:1rem;flex:none}
.btn-lg{padding:.9rem 1.75rem;font-size:.95rem}
.btn-accent{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.btn-accent:hover{background:hsl(184 66% 27%);color:hsl(var(--accent-foreground))}
.btn-accent.ring{box-shadow:none}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover{background:hsl(213 70% 20%);color:hsl(var(--primary-foreground))}
.btn-outline{background:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground))}
.btn-outline:hover{background:hsl(var(--secondary));border-color:hsl(var(--foreground) / 0.3);color:hsl(var(--foreground))}

/* ---------- Grids ---------- */
.grid{display:grid;gap:1.25rem}
.section-head{max-width:44rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:.85rem}
.section-head .lead{margin-top:1rem}

/* =========================================================
   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}}
.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))}
/* The breadcrumb link sits in a line that is mostly not a link — "Industries /
   Glass Manufacturing" — and it inherits the eyebrow's colour and weight, so
   with no underline the only thing marking it as a link was hover, which
   touch users never see (WCAG 1.4.1). The underline is now permanent and
   hover thickens it. `padding-block` grows the hit box from 13px to 25px to
   clear the 24px target minimum; on an inline box that padding extends the
   hit region without changing the line box, so the hero layout is unmoved. */
.eyebrow a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding-block:6px}
.eyebrow a:hover{color:inherit;text-decoration-thickness:2px}
/* The hero h1's accented span sits on the dark image scrim, so it needs
   the light variant for the same reason the eyebrow does. Darkening the
   base accent for body text pushed this the wrong way: 3.86:1 before,
   2.0-2.8:1 after, against the 3:1 that 60px display type needs. */
.hero-inner .italic,.hero h1 .italic,.on-dark .italic{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}}
.hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}

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

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

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

/* =========================================================
   TABLES
   ========================================================= */
table.data{width:100%;font-size:.875rem;border-collapse:collapse}
table.data thead{background:hsl(var(--secondary))}
table.data th{text-align:left;padding:.85rem 1rem;font-weight:600}
table.data td{padding:.85rem 1rem;border-top:1px solid hsl(var(--border));vertical-align:top}
table.data tbody tr:first-child td{border-top:0}

/* =========================================================
   TECHNICAL DATA HUB
   ========================================================= */
.technical-table-frame{border:1px solid hsl(var(--border));background:hsl(var(--card))}
.technical-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;line-height:1.45}
.technical-table caption{padding:1rem 1.1rem;border-bottom:1px solid hsl(var(--border));background:hsl(var(--secondary));font-family:var(--font-display);font-size:1rem;font-weight:600;text-align:left;color:hsl(var(--foreground))}
.technical-table thead th{position:sticky;top:112px;z-index:3;padding:.75rem 1rem;background:hsl(213 52% 15%);color:hsl(var(--pearl));font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:left;vertical-align:bottom}
.technical-table tbody th,.technical-table tbody td{padding:.85rem 1rem;border-top:1px solid hsl(var(--border));text-align:left;vertical-align:top}
.technical-table tbody tr:first-child th,.technical-table tbody tr:first-child td{border-top:0}
.technical-table tbody th{font-weight:600;color:hsl(var(--foreground))}
.technical-table tbody tr:hover{background:hsl(var(--secondary) / .65)}
.mobile-label{display:none}
.comparison-frame{margin-top:1rem}
.comparison-table .product-head{background:hsl(190 64% 24%);color:white}
.comparison-table .product-cell{background:hsl(var(--accent) / .07);font-weight:600;color:hsl(var(--primary))}
.comparison-table tr[hidden]{display:none}

@media(max-width:899px){
  .technical-table-frame{border:0;background:transparent}
  .technical-table--stack,.technical-table--stack tbody,.technical-table--stack tr,.technical-table--stack th,.technical-table--stack td{display:block;width:100%}
  .technical-table--stack thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .technical-table--stack caption{display:block;width:100%;border:1px solid hsl(var(--border));font-size:.92rem}
  .technical-table--stack tbody{display:grid;gap:.75rem;margin-top:.75rem}
  .technical-table--stack tbody tr{padding:1rem;border:1px solid hsl(var(--border));background:hsl(var(--card))}
  .technical-table--stack tbody th,.technical-table--stack tbody td{padding:.35rem 0;border:0}
  .technical-table--stack tbody th{padding-bottom:.7rem;border-bottom:1px solid hsl(var(--border));font-family:var(--font-display);font-size:1rem}
  .technical-table--stack tbody tr:hover{background:hsl(var(--card))}
  .technical-table--stack .mobile-label{display:block;margin-bottom:.2rem;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:hsl(var(--muted-foreground))}
  .comparison-table .product-cell{margin:.25rem -.35rem;padding:.65rem .35rem;background:hsl(var(--accent) / .08)}
}

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

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

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

/* =========================================================
   ABOUT map / timeline
   ========================================================= */

/* Verification-led trust content */

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

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

/* =========================================================
   RESOURCES / KNOWLEDGE
   ========================================================= */
.rc-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:.3rem .55rem;border-radius:3px;border:1px solid;white-space:nowrap}
.badge-coa{color:hsl(33 82% 34%);background:hsl(38 80% 94%);border-color:hsl(38 68% 84%)}
.badge-ag{color:hsl(186 68% 28%);background:hsl(186 55% 94%);border-color:hsl(186 45% 82%)}
.badge-cs{color:hsl(215 32% 38%);background:hsl(215 28% 95%);border-color:hsl(215 22% 85%)}
/* Modal + toast */
@keyframes rcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.field{display:flex;flex-direction:column}

/* =========================================================
   Misc utilities
   ========================================================= */
.band-secondary{background:hsl(var(--secondary) / 0.55);border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}

@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 */
.band-secondary{background:hsl(200 33% 98%);border-color:hsl(var(--border))}

/* Button hover tuning for turquoise primary/accent */
.btn-accent:hover{background:hsl(180 76% 28%);color:hsl(var(--accent-foreground));transform:translateY(-1px)}
.btn-primary:hover{background:hsl(180 76% 28%);color:hsl(var(--primary-foreground));transform:translateY(-1px)}
.btn-outline{color:hsl(var(--foreground));border-color:hsl(var(--border))}
.btn-outline:hover{background:hsl(var(--secondary));border-color:hsl(var(--accent) / 0.5);color:hsl(var(--foreground))}
a:hover{color:hsl(180 76% 28%)}
::selection{background:hsl(var(--accent) / 0.22);color:hsl(var(--foreground))}

/* Resource badges: recolor for dark cards */
.badge-ag{color:hsl(168 62% 60%);background:hsl(168 40% 14%);border-color:hsl(168 40% 26%)}
.badge-coa{color:hsl(38 82% 66%);background:hsl(38 50% 14%);border-color:hsl(38 50% 28%)}
.badge-cs{color:hsl(205 30% 78%);background:hsl(210 24% 18%);border-color:hsl(210 20% 28%)}

/* =================== 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 */