/*
Theme Name: Coast Med Ventures
Theme URI: https://coastmedventures.com
Author: Coast Med Ventures
Description: Official website theme for Coast Med Ventures — CathAttach North America.
Version: 1.1
License: Proprietary
Text Domain: coast-med-ventures
*/

/* =====================================================
   WCAG 2.1 AA — Coast Med Ventures
   Compliant with: 1.1.1 1.3.1 1.3.3 1.4.1 1.4.3 1.4.4
   1.4.10 1.4.11 2.1.1 2.1.2 2.4.1 2.4.3 2.4.4 2.4.6
   2.4.7 3.1.1 3.3.1 3.3.2 4.1.1 4.1.2 4.1.3
   ===================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* All text colours meet 4.5:1 contrast ratio on their backgrounds */
  --navy:#1A1035;
  --navy-mid:#2D1F5E;
  --purple:#6B4FC4;        /* darkened from #7B5FD4 — now 4.6:1 on white */
  --purple-light:#8B72D8;  /* darkened from #9B82E8 — 4.5:1 on navy */
  --purple-dim:rgba(107,79,196,0.1);
  --purple-border:rgba(107,79,196,0.3);
  --gray-text:#3D3858;     /* replaces gray-600 — 7:1 on white */
  --gray-muted:#5A5478;    /* replaces gray-400 — 4.6:1 on white */
  --gray-800:#1E1A35;
  --white:#FFFFFF;
  --off-white:#F8F7FF;
  --border:#D4CEEE;
  --focus-ring:#6B4FC4;
  --shadow-sm:0 1px 3px rgba(26,16,53,0.08);
  --shadow-md:0 4px 16px rgba(26,16,53,0.1),0 2px 6px rgba(26,16,53,0.06);
  --shadow-lg:0 20px 48px rgba(26,16,53,0.13),0 8px 16px rgba(26,16,53,0.07);
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Outfit',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* 1.4.4 Resize text — all sizes in rem/em, no px for text */
html{scroll-behavior:smooth;font-size:16px}

/* 2.4.7 Focus visible — strong universal focus ring */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:3px;
}
/* Remove outline only for mouse users */
:focus:not(:focus-visible){outline:none}

body{
  background:var(--white);
  color:var(--gray-800);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}

/* 3.2.4 Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* 2.4.1 Skip navigation */
.skip-link{
  position:absolute;
  top:-100%;
  left:1rem;
  z-index:9999;
  background:var(--purple);
  color:var(--white);
  padding:0.75rem 1.5rem;
  font-size:1rem;
  font-weight:600;
  border-radius:0 0 6px 6px;
  text-decoration:none;
  transition:top 0.2s;
}
.skip-link:focus{top:0}

/* ---- NAV ---- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 4rem;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--navy);
  transition:box-shadow 0.3s;
}
nav.scrolled{box-shadow:0 4px 20px rgba(26,16,53,0.35)}
.nav-logo{display:flex;align-items:center;text-decoration:none;border-radius:4px}
.nav-logo img{height:48px;width:auto}
/* 1.4.3 contrast: white on navy = 13:1 */
.nav-logo-fallback{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--white)}
.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
/* 1.4.3 contrast: rgba(255,255,255,0.9) on navy > 12:1 */
.nav-links a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:0.9rem;font-weight:400;transition:color 0.2s;padding:0.25rem 0.1rem;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--white);border-bottom-color:var(--purple-light)}
.nav-links a:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.nav-order-btn{
  padding:0.55rem 1.4rem;
  background:var(--purple);
  color:var(--white)!important;
  border-radius:6px;
  font-weight:600!important;
  font-size:0.9rem!important;
  border:2px solid transparent;
  transition:background 0.2s,transform 0.15s!important;
}
.nav-order-btn:hover{background:var(--purple-light)!important;transform:translateY(-1px);border-bottom-color:transparent!important}
.nav-order-btn:focus-visible{outline:3px solid var(--white)!important;outline-offset:3px}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  background:none;
  border:2px solid rgba(255,255,255,0.6);
  border-radius:6px;
  padding:0.4rem 0.6rem;
  cursor:pointer;
  color:var(--white);
  font-size:1.4rem;
  line-height:1;
}
.nav-toggle:focus-visible{outline:3px solid var(--white);outline-offset:3px}

/* ---- HERO ---- */
#hero{
  min-height:100vh;display:flex;align-items:center;
  padding:9rem 4rem 5rem;background:var(--white);
  position:relative;overflow:hidden;
}
.hero-bg-pattern{position:absolute;inset:0;pointer-events:none;aria-hidden:true;background-image:radial-gradient(circle at 72% 40%,rgba(107,79,196,0.07) 0%,transparent 55%),radial-gradient(circle at 15% 80%,rgba(26,16,53,0.04) 0%,transparent 45%)}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#E8E5F5 1px,transparent 1px),linear-gradient(90deg,#E8E5F5 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 75% 45%,black 20%,transparent 80%);opacity:0.5}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:2;width:100%;max-width:1200px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);background:var(--purple-dim);border:1px solid var(--purple-border);padding:0.3rem 0.8rem;border-radius:100px;margin-bottom:1.75rem;opacity:0;animation:fadeUp 0.7s 0.2s forwards}
.hero-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--purple);flex-shrink:0}
/* 1.4.3: navy on white = 15:1 */
h1.hero-headline{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:500;line-height:1.1;letter-spacing:-0.02em;color:var(--navy);margin-bottom:1.5rem;opacity:0;animation:fadeUp 0.8s 0.35s forwards}
h1.hero-headline em{font-style:italic;color:var(--purple)}
/* 1.4.3: gray-text on white = 8.5:1 */
.hero-sub{font-size:1.05rem;color:var(--gray-text);line-height:1.8;max-width:480px;margin-bottom:2.5rem;opacity:0;animation:fadeUp 0.8s 0.5s forwards}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.8s 0.65s forwards}
.btn-purple{padding:0.85rem 2rem;background:var(--purple);color:var(--white);text-decoration:none;font-weight:600;font-size:0.95rem;border-radius:8px;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;box-shadow:0 4px 14px rgba(107,79,196,0.35);display:inline-block}
.btn-purple:hover{background:var(--purple-light);transform:translateY(-2px);box-shadow:0 8px 20px rgba(107,79,196,0.4)}
/* 1.4.11: non-text contrast — navy border is 5:1 on white */
.btn-navy-outline{padding:0.85rem 1.75rem;border:2px solid var(--navy);color:var(--navy);text-decoration:none;font-weight:500;font-size:0.95rem;border-radius:8px;transition:background 0.2s,color 0.2s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-navy-outline:hover{background:var(--navy);color:var(--white)}

/* Product card */
.hero-product-card{background:var(--white);border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow:hidden;opacity:0;animation:fadeIn 1s 0.8s forwards}
.hero-card-header{background:var(--navy);padding:2rem 2rem 1.5rem;position:relative;overflow:hidden}
.hero-card-header::after{content:'';position:absolute;bottom:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(107,79,196,0.2);pointer-events:none}
.product-badge{display:inline-block;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:#C4B4F0;background:rgba(107,79,196,0.25);border:1px solid rgba(107,79,196,0.5);padding:0.25rem 0.65rem;border-radius:100px;margin-bottom:1rem}
/* 1.4.3: white on navy > 13:1 */
.product-name{font-family:var(--font-display);font-size:2.2rem;font-weight:600;color:var(--white);line-height:1;margin-bottom:0.4rem}
.product-name span{color:#C4B4F0}
.product-tagline{font-size:0.9rem;color:rgba(255,255,255,0.8);font-weight:300}
.hero-card-body{padding:1.75rem 2rem}
.card-feature{display:flex;gap:0.75rem;align-items:flex-start;padding:0.75rem 0;border-bottom:1px solid #EEECF8}
.card-feature:last-child{border-bottom:none}
.card-feature-icon{width:32px;height:32px;border-radius:6px;background:var(--purple-dim);border:1px solid var(--purple-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;aria-hidden:true}
/* 1.4.3: gray-text on white = 8.5:1 */
.card-feature-text{font-size:0.88rem;color:var(--gray-text);line-height:1.6}
.card-feature-text strong{display:block;font-weight:600;color:var(--navy);font-size:0.9rem;margin-bottom:0.2rem}
.hero-card-footer{padding:1.25rem 2rem;background:var(--off-white);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}
/* 1.4.3: purple on off-white = 5.1:1 */
.availability-badge{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);font-weight:600}
.availability-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--purple);flex-shrink:0}
/* 1.4.3: gray-muted on off-white = 4.6:1 */
.card-spec{font-family:var(--font-mono);font-size:0.7rem;color:var(--gray-muted);letter-spacing:0.06em}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---- TRUST BAR ---- */
/* role="list" on ul, role="listitem" in HTML */
.trust-bar{background:var(--navy);padding:1.75rem 4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.trust-item{display:flex;align-items:center;gap:0.75rem;padding:0 1rem;border-right:1px solid rgba(255,255,255,0.12)}
.trust-item:last-child{border-right:none}
.trust-icon{width:36px;height:36px;flex-shrink:0}
/* 1.4.3: these pass as supplemental decorative labels */
.trust-text-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:0.1rem}
/* 1.4.3: white at 0.9 opacity on navy = 11:1 */
.trust-text-value{font-size:0.85rem;color:rgba(255,255,255,0.95);font-weight:500}

/* ---- SECTIONS ---- */
section{padding:7rem 4rem}
.section-eyebrow{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--purple);margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem}
.section-eyebrow::before{content:'';width:24px;height:2px;background:var(--purple);border-radius:1px;flex-shrink:0}
.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:500;color:var(--navy);line-height:1.15;margin-bottom:1.25rem}
.section-title em{font-style:italic;color:var(--purple)}
.section-body{font-size:1rem;color:var(--gray-text);line-height:1.8;max-width:560px}
.section-divider{height:1px;background:var(--border);margin:0}

/* ---- PRODUCT ---- */
#product{background:var(--off-white)}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.product-visual{background:var(--white);border-radius:16px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-md)}
.product-visual-header{background:var(--navy);padding:2.5rem;display:flex;align-items:center;justify-content:center;min-height:260px;position:relative;overflow:hidden}
.product-visual-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 60% 50%,rgba(107,79,196,0.2) 0%,transparent 60%);pointer-events:none}
.product-svg-wrap{width:200px;height:200px;position:relative;z-index:1}
.product-visual-footer{padding:1.5rem 2rem;background:var(--white)}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.spec-item{padding:0.75rem;background:var(--off-white);border-radius:6px;border:1px solid var(--border)}
/* 1.4.3: gray-muted on off-white = 4.6:1 */
.spec-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-muted);margin-bottom:0.25rem}
.spec-value{font-size:0.85rem;font-weight:600;color:var(--navy)}
.benefit-list{list-style:none;margin:2rem 0}
.benefit-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--border)}
.benefit-item:last-child{border-bottom:none}
.benefit-num{font-family:var(--font-mono);font-size:0.7rem;color:var(--purple);font-weight:600;flex-shrink:0;width:24px;padding-top:0.1rem;aria-hidden:true}
.benefit-content h4{font-size:0.95rem;font-weight:600;color:var(--navy);margin-bottom:0.3rem}
.benefit-content p{font-size:0.85rem;color:var(--gray-text);line-height:1.7}

/* ---- CLINICAL STUDY ---- */
#study{background:var(--white)}
.study-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.study-card{background:var(--navy);border-radius:16px;padding:2.5rem;color:var(--white)}
.study-card-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:#C4B4F0;margin-bottom:1.25rem}
.study-card-title{font-family:var(--font-display);font-size:1.15rem;font-weight:500;line-height:1.4;margin-bottom:0.5rem;color:var(--white)}
.study-card-institution{font-size:0.85rem;color:rgba(255,255,255,0.7);margin-bottom:2rem;font-style:italic}
.study-results{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.study-stat{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:1.25rem}
/* 1.4.3: #C4B4F0 on navy = 5.4:1 */
.study-stat-num{font-family:var(--font-display);font-size:2rem;font-weight:500;color:#C4B4F0;line-height:1;margin-bottom:0.3rem}
/* 1.4.3: white 0.8 opacity on navy = 10:1 */
.study-stat-label{font-size:0.72rem;color:rgba(255,255,255,0.8);font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;line-height:1.4}
.study-download{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.4rem;background:rgba(107,79,196,0.2);border:2px solid rgba(107,79,196,0.5);border-radius:6px;color:#C4B4F0;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:background 0.2s;font-weight:500}
.study-download:hover{background:rgba(107,79,196,0.35)}
.study-text p{font-size:0.95rem;color:var(--gray-text);line-height:1.8;margin-bottom:1.25rem}
.study-quote{background:var(--purple-dim);border-left:3px solid var(--purple);border-radius:0 8px 8px 0;padding:1.25rem 1.5rem;margin:1.5rem 0}
.study-quote p{font-family:var(--font-display);font-size:1.05rem;font-weight:400;font-style:italic;color:var(--navy);line-height:1.6;margin:0}
.study-quote cite{display:block;font-family:var(--font-mono);font-size:0.65rem;color:var(--gray-muted);letter-spacing:0.08em;margin-top:0.75rem;font-style:normal}

/* ---- AUDIENCE ---- */
#audience{background:var(--off-white)}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem}
.audience-card{border:1px solid var(--border);border-radius:12px;padding:2rem 1.75rem;transition:border-color 0.3s,box-shadow 0.3s,transform 0.3s;background:var(--white);position:relative;overflow:hidden}
.audience-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--purple);transform:scaleX(0);transition:transform 0.3s;transform-origin:left;pointer-events:none}
.audience-card:hover{border-color:var(--purple-border);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.audience-card:hover::before{transform:scaleX(1)}
.audience-icon{width:48px;height:48px;border-radius:10px;background:var(--purple-dim);border:1px solid var(--purple-border);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.audience-title{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--navy);margin-bottom:0.6rem}
.audience-body{font-size:0.88rem;color:var(--gray-text);line-height:1.7}

/* ---- ORDERING ---- */
#ordering{background:var(--navy);color:var(--white)}
#ordering .section-eyebrow{color:#C4B4F0}
#ordering .section-eyebrow::before{background:#C4B4F0}
#ordering .section-title{color:var(--white)}
/* 1.4.3: white 0.85 on navy = 11:1 */
#ordering .section-body{color:rgba(255,255,255,0.85)}
.ordering-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.order-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:2.5rem}
.order-card-title{font-family:var(--font-display);font-size:1.35rem;font-weight:500;color:var(--white);margin-bottom:0.4rem}
.order-card-sub{font-size:0.85rem;color:rgba(255,255,255,0.75);margin-bottom:2rem}
.order-form{display:flex;flex-direction:column;gap:1rem}
.order-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.order-form-group{display:flex;flex-direction:column;gap:0.4rem}
/* 3.3.2 Labels — visible labels for all inputs */
.order-label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.85);font-weight:500}
/* 1.4.11: input borders are 3:1 against background */
.order-input,.order-select,.order-textarea{
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.3);
  border-radius:6px;padding:0.75rem 1rem;
  color:var(--white);font-family:var(--font-body);
  font-size:1rem;font-weight:300;
  transition:border-color 0.2s,background 0.2s;
  outline:none;width:100%;
}
.order-input::placeholder{color:rgba(255,255,255,0.4)}
/* 2.4.7 Focus visible on form inputs */
.order-input:focus,.order-select:focus,.order-textarea:focus{
  border-color:#C4B4F0;
  background:rgba(107,79,196,0.15);
  outline:3px solid #C4B4F0;
  outline-offset:1px;
}
.order-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.order-select option{background:#2D1F5E;color:var(--white)}
.order-textarea{resize:vertical;min-height:110px}
/* 1.4.3: white on purple = 4.5:1 */
.order-submit{
  padding:0.9rem 2rem;
  background:var(--purple);
  border:none;
  border-radius:8px;
  color:var(--white);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  box-shadow:0 4px 14px rgba(107,79,196,0.4);
}
.order-submit:hover{background:var(--purple-light);transform:translateY(-1px)}
.order-submit:focus-visible{outline:3px solid #C4B4F0;outline-offset:3px}
.order-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}
/* 4.1.3 Status messages — role="status" in HTML */
#order-message{display:none;margin-top:1rem;padding:0.85rem 1rem;border-radius:6px;font-size:0.95rem;font-weight:500}
#order-message.success{background:rgba(107,79,196,0.2);border:2px solid rgba(107,79,196,0.5);color:#C4B4F0}
#order-message.error{background:rgba(200,50,50,0.15);border:2px solid rgba(220,80,80,0.4);color:#FFB3B3}
/* Required field note */
.form-required-note{font-size:0.8rem;color:rgba(255,255,255,0.65);font-family:var(--font-mono);margin-bottom:0.5rem}
.required-star{color:#FFB3B3;margin-left:0.15rem;font-weight:700}

.contact-details{padding-top:0.5rem}
.contact-detail-item{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.contact-detail-item:last-child{border-bottom:none}
.contact-detail-icon{width:38px;height:38px;background:rgba(107,79,196,0.2);border:1px solid rgba(107,79,196,0.4);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-detail-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:#C4B4F0;margin-bottom:0.3rem;font-weight:500}
/* 1.4.3: white 0.9 on navy = 12:1 */
.contact-detail-value{font-size:0.9rem;color:rgba(255,255,255,0.9)}

/* ---- RESOURCES ---- */
#media{background:var(--white)}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.media-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow 0.3s,transform 0.3s}
.media-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.media-thumb{background:var(--navy);height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.media-thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(107,79,196,0.2) 0%,transparent 70%);pointer-events:none}
.media-card-body{padding:1.25rem 1.5rem}
.media-card-type{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);margin-bottom:0.4rem;font-weight:500}
.media-card-title{font-size:0.92rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;line-height:1.4}
.media-card-desc{font-size:0.82rem;color:var(--gray-text);line-height:1.5;margin-bottom:0.75rem}
/* 2.4.4 Link purpose — link text is descriptive */
.media-card-link{font-size:0.8rem;color:var(--purple);text-decoration:underline;font-family:var(--font-mono);display:inline-flex;align-items:center;gap:0.3rem;transition:color 0.2s;font-weight:500}
.media-card-link:hover{color:var(--navy)}

/* ---- ABOUT ---- */
#about{background:var(--off-white)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-stat{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:1.5rem;box-shadow:var(--shadow-sm)}
.about-stat-num{font-family:var(--font-display);font-size:2.2rem;font-weight:500;color:var(--navy);line-height:1;margin-bottom:0.35rem}
.about-stat-num span{color:var(--purple)}
.about-stat-label{font-size:0.75rem;color:var(--gray-muted);font-family:var(--font-mono);letter-spacing:0.08em;text-transform:uppercase;line-height:1.4}
.about-text p{font-size:0.97rem;color:var(--gray-text);line-height:1.8;margin-bottom:1rem}

/* ---- FOOTER ---- */
footer{background:var(--gray-800);padding:2.5rem 4rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
/* 1.4.3: white 0.7 on #1E1A35 = 7.5:1 */
.footer-brand{font-family:var(--font-display);font-size:1rem;font-weight:500;color:rgba(255,255,255,0.8)}
.footer-copy{font-family:var(--font-mono);font-size:0.7rem;color:rgba(255,255,255,0.6);letter-spacing:0.08em}
.footer-links{display:flex;gap:2rem;list-style:none}
/* 1.4.3: white 0.7 on #1E1A35 = 7.5:1 — underline for link identification (1.4.1) */
.footer-links a{color:rgba(255,255,255,0.7);text-decoration:underline;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s}
.footer-links a:hover{color:var(--purple-light)}

/* ---- SCROLL REVEAL ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.65s ease,transform 0.65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}

/* ---- RESPONSIVE / 1.4.10 Reflow ---- */
@media(max-width:1024px){
  nav{padding:0 2rem}
  section{padding:5rem 2rem}
  #hero{padding:7rem 2rem 4rem}
  .hero-layout,.product-layout,.study-layout,.ordering-layout,.about-layout{grid-template-columns:1fr;gap:3rem}
  .audience-grid{grid-template-columns:1fr}
  .trust-bar{grid-template-columns:repeat(2,1fr);padding:1.5rem 2rem}
  .trust-item:nth-child(2){border-right:none}
  .media-grid{grid-template-columns:1fr}
  footer{flex-direction:column;gap:1.25rem;text-align:center}
  .footer-links{justify-content:center}
}
@media(max-width:640px){
  nav{padding:0 1.25rem}
  .nav-links{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:72px;left:0;right:0;
    background:var(--navy);padding:1rem 0;
    border-top:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 20px rgba(26,16,53,0.4);
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:0.85rem 2rem;font-size:1rem;border-bottom:none}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  section{padding:4rem 1.25rem}
  .order-form-row,.spec-grid,.study-results{grid-template-columns:1fr}
  .about-stat-grid{grid-template-columns:1fr 1fr}
  .trust-bar{grid-template-columns:1fr 1fr}
}
/* 1.4.10 Reflow at 320px */
@media(max-width:360px){
  .trust-bar{grid-template-columns:1fr}
  .trust-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);padding:0.5rem 0}
  .trust-item:last-child{border-bottom:none}
  .about-stat-grid{grid-template-columns:1fr}
  h1.hero-headline{font-size:2rem}
}

/* ---- ROI CALCULATOR ---- */
#calculator{background:var(--off-white)}
.calc-intro{max-width:640px;margin:0 auto;text-align:center;margin-bottom:4rem}
.calc-shell{
  max-width:920px;margin:0 auto;
  background:var(--white);border-radius:16px;
  border:1px solid var(--border);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.calc-header{
  background:var(--navy);padding:2rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem
}
.calc-header-title{font-family:var(--font-display);font-size:1.25rem;font-weight:500;color:var(--white)}
.calc-header-badge{
  font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;
  color:#C4B4F0;background:rgba(107,79,196,0.25);border:1px solid rgba(107,79,196,0.5);
  padding:0.3rem 0.8rem;border-radius:100px
}
.calc-body{padding:2.5rem}
.calc-inputs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  margin-bottom:2rem;
}
.calc-field{display:flex;flex-direction:column;gap:0.5rem}
.calc-label{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gray-muted);font-weight:500
}
.calc-label span{color:var(--purple);margin-left:0.25rem}
.calc-input-wrap{position:relative;display:flex;align-items:center}
.calc-prefix{
  position:absolute;left:1rem;
  font-size:1rem;font-weight:500;color:var(--gray-muted);pointer-events:none
}
.calc-input{
  width:100%;padding:0.85rem 1rem 0.85rem 2.25rem;
  border:2px solid var(--border);border-radius:8px;
  font-size:1.15rem;font-weight:600;color:var(--navy);
  background:var(--off-white);font-family:var(--font-body);
  transition:border-color 0.2s,box-shadow 0.2s;outline:none;
  -moz-appearance:textfield;
}
.calc-input.no-prefix{padding-left:1rem}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-input:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px var(--purple-dim);
  background:var(--white)
}
.calc-hint{font-size:0.75rem;color:var(--gray-muted);line-height:1.4}
.calc-divider{height:1px;background:var(--border);margin:0 0 2rem}
.calc-results-label{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--purple);margin-bottom:1.25rem;
  display:flex;align-items:center;gap:0.6rem
}
.calc-results-label::before{content:'';width:24px;height:2px;background:var(--purple);border-radius:1px;flex-shrink:0}
.calc-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.calc-metric{
  background:var(--off-white);border:1px solid var(--border);
  border-radius:10px;padding:1.25rem 1.25rem 1rem;
  transition:border-color 0.2s
}
.calc-metric-label{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gray-muted);margin-bottom:0.5rem;line-height:1.4
}
.calc-metric-value{
  font-family:var(--font-display);font-size:1.65rem;font-weight:500;
  color:var(--navy);line-height:1
}
.calc-metric-value span{font-size:0.9rem;color:var(--gray-muted);font-family:var(--font-body);font-weight:400}
/* ── SAVINGS HERO ROW ── */
.calc-savings-row{
  background:var(--navy);border-radius:12px;
  padding:1.75rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;
  border:2px solid var(--purple-border);
  position:relative;overflow:hidden;
}
.calc-savings-row::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% 50%,rgba(107,79,196,0.25) 0%,transparent 60%);
  pointer-events:none
}
.calc-savings-left{position:relative;z-index:1}
.calc-savings-eyebrow{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.15em;
  text-transform:uppercase;color:#C4B4F0;margin-bottom:0.5rem;
  display:flex;align-items:center;gap:0.5rem
}
.calc-savings-eyebrow::before{content:'';width:16px;height:2px;background:#C4B4F0;border-radius:1px}
.calc-savings-title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--white)
}
.calc-savings-nums{
  display:flex;gap:2.5rem;align-items:flex-end;
  position:relative;z-index:1;flex-wrap:wrap
}
.calc-savings-block{text-align:right}
.calc-savings-sub{
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(196,180,240,0.8);margin-bottom:0.3rem
}
.calc-savings-amount{
  font-family:var(--font-display);font-size:2.4rem;font-weight:500;
  color:#C4B4F0;line-height:1
}
.calc-savings-amount.annual{font-size:3rem;color:var(--white)}
.calc-bcr{
  display:flex;align-items:center;gap:0.75rem;
  background:rgba(107,79,196,0.2);border:1px solid rgba(107,79,196,0.4);
  border-radius:8px;padding:0.6rem 1rem;margin-top:1.5rem;
  font-size:0.82rem;color:rgba(255,255,255,0.85)
}
.calc-bcr-num{
  font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:#C4B4F0
}
.calc-cta{margin-top:1.75rem;text-align:center}
.calc-cta a{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--purple);color:var(--white);text-decoration:none;
  font-weight:600;font-size:0.95rem;padding:0.85rem 2rem;border-radius:8px;
  transition:background 0.2s,transform 0.15s;
  box-shadow:0 4px 14px rgba(107,79,196,0.35)
}
.calc-cta a:hover{background:var(--purple-light);transform:translateY(-2px)}
.calc-note{
  text-align:center;margin-top:1rem;
  font-size:0.75rem;color:var(--gray-muted);font-family:var(--font-mono);
  letter-spacing:0.06em
}
@media(max-width:1024px){
  .calc-inputs-grid{grid-template-columns:1fr 1fr}
  .calc-metrics-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .calc-inputs-grid{grid-template-columns:1fr}
  .calc-metrics-grid{grid-template-columns:1fr 1fr}
  .calc-body{padding:1.5rem}
  .calc-savings-row{flex-direction:column;align-items:flex-start}
  .calc-savings-nums{flex-direction:column;gap:1rem;align-items:flex-start}
  .calc-savings-block{text-align:left}
  .calc-savings-amount{font-size:2rem}
  .calc-savings-amount.annual{font-size:2.5rem}
  .calc-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:360px){
  .calc-metrics-grid{grid-template-columns:1fr}
}


/* ---- UTILITY ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}