/* ================================================================
   sitedocs.css — CannBus Site Documents
   Unified stylesheet for all sitedocs pages:
   About Us · Careers · Contact Us · Cookie Policy
   Privacy Policy · Support · Terms of Service
   
   cannbus.org · support@cannbus.org
   Version: 1.0  |  March 2026
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ════════════════════════════════════════════════════
   CannBus Unified Design Tokens
   Covers all variable name variants used across:
   About Us, Careers, Contact, Cookie Policy,
   Privacy Policy, Support, Terms of Service
════════════════════════════════════════════════════ */
:root {
  /* ── Core Teal Palette (canonical --t* names) ── */
  --t950:#021414; --t900:#032020; --t800:#053434;
  --t750:#0a4848; --t700:#0d5656; --t600:#177474;
  --t500:#1e9290; --t400:#28b4ae; --t300:#46d2cb;
  --t200:#86e6e0; --t100:#c2f4f1; --t50:#ecfaf9;

  /* ── Aliases: --g* (used by about-us.html) ── */
  --g950:#021414; --g900:#032020; --g800:#053434;
  --g750:#0a4848; --g700:#0d5656; --g600:#177474;
  --g500:#1e9290; --g400:#28b4ae; --g300:#46d2cb;
  --g200:#86e6e0; --g100:#c2f4f1; --g50:#ecfaf9;

  /* ── Aliases: --c* (used by cookie-policy.html) ── */
  --c950:#021616; --c900:#042020; --c800:#063636;
  --c750:#0a4646; --c700:#0d5252; --c600:#167070;
  --c500:#1f8f8a; --c400:#27b2ab; --c300:#44d0c9;
  --c200:#83e5df; --c100:#c0f3ef; --c50:#ecfaf8;

  /* ── Aliases: --teal-* (used by privacy-policy, terms-of-service) ── */
  --teal-950:#021818; --teal-900:#042424; --teal-800:#063636;
  --teal-700:#0d5252; --teal-600:#187070; --teal-500:#1f908b;
  --teal-400:#26b0aa; --teal-300:#43cfc8; --teal-200:#82e4df;
  --teal-100:#bff3f0; --teal-50:#edfaf9;

  /* ── Accent (all pages) ── */
  --brand-teal: #1a908b;
  --acc: var(--brand-teal);
  --acc2: #0d5656;
  --acc-dim: rgba(26,144,139,0.10);
  --accent: var(--brand-teal);
  --accent-dim: rgba(26,144,139,0.10);

  /* ── Neutrals (canonical --wh/--off + aliases) ── */
  --wh:#ffffff;   --off:#f5fcfb;
  --white:#ffffff; --off-white:#f6fdfc;

  /* ── Text colours (canonical --txt/--mid + aliases) ── */
  --txt:#082020;  --mid:#1a4848;
  --mut:#4a8480;  --fnt:#8ab6b2;
  --text:#082020;
  --text-mid:#1e4a48;
  --text-muted:#4d8582;
  --text-faint:#8fb8b5;

  /* ── Borders ── */
  --bdr:rgba(26,144,139,.14);
  --bdrm:rgba(26,144,139,.28);
  --border:rgba(26,144,139,0.14);
  --border-md:rgba(26,144,139,0.26);

  /* ── Shadows ── */
  --sh:0 2px 14px rgba(26,144,139,.08);
  --shm:0 8px 40px rgba(26,144,139,.14);
  --shl:0 18px 64px rgba(26,144,139,.20);
  --shsm:0 2px 12px rgba(26,144,139,.08);
  --shmd:0 8px 36px rgba(26,144,139,.13);
  --shadow-xs:0 1px 6px rgba(26,144,139,.07);
  --shadow-sm:0 3px 14px rgba(26,144,139,.09);
  --shadow-md:0 8px 36px rgba(26,144,139,.13);

  /* ── Radii ── */
  --r:10px; --rl:16px; --rxl:26px;
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-xl:24px;

  /* ── Page-Specific: Support FAQ category accents ── */
  --ca-mb: var(--brand-teal);
  --ca-pr:#1060a0;
  --ca-ct:#256020;
  --ca-pl:#8030c0;
  --ca-bi:#c07010;
  --ca-tc:#c03040;

  /* ── Page-Specific: Careers department colours ── */
  --d-eng:#1060a0; --d-eng-p:#eef4ff;
  --d-cnt:#177030; --d-cnt-p:#edf8f2;
  --d-sal:#c07010; --d-sal-p:#fff8ec;
  --d-ops:#8030c0; --d-ops-p:#f4eeff;
  --d-mkt:#c03040; --d-mkt-p:#fff0f2;
  --d-dat: var(--brand-teal); --d-dat-p: #ecfaf9;
}


/* ════════════════════════════════════════════════════
   SHARED BASE — Reset & Body
   Applied to all sitedocs pages
════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--off);
  color:var(--txt);
  line-height:1.70;
  overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image:radial-gradient(circle,rgba(26,144,139,.09) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none; z-index:0;
}
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--t700); }


/* ════════════════════════════════════════════════════════════
   PAGE: ABOUT US
   File: about-us.html
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   RESET
════════════════════════════════════════════ */


body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off);
  color: var(--txt);
  line-height: 1.70;
  overflow-x: hidden;
}
/* Subtle dot-grid background */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(26,144,139,.10) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; z-index: 0;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--g700); }

/* ════════════════════════════════════════════
   DOWNLOAD BANNER
════════════════════════════════════════════ */
.dl-bar {
  position: relative; z-index: 200;
  background: var(--g800);
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 28px;
}
.dl-bar-txt { font-size: .78rem; color: rgba(255,255,255,.76); font-weight: 500; }
.dl-bar-txt strong { color: #fff; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--g400); color: var(--g950);
  font-size: .76rem; font-weight: 700;
  padding: 7px 18px; border-radius: 20px;
  letter-spacing: .03em; flex-shrink: 0;
  transition: background .18s, transform .14s;
}
.dl-btn:hover { background: var(--g300); transform: translateY(-1px); text-decoration: none; color: var(--g950); }

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
  position: relative; z-index: 5;
  background: linear-gradient(148deg,
    var(--g950) 0%,
    var(--g800) 30%,
    var(--g600) 65%,
    var(--g400) 100%
  );
  padding: 80px 28px 72px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 12% 55%, rgba(70,210,203,.16) 0%, transparent 58%),
    radial-gradient(ellipse 52% 68% at 88% 28%, rgba(30,146,144,.13) 0%, transparent 52%);
  pointer-events: none;
}
/* Large decorative rings */
.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}
.hero-ring-1 { width: 600px; height: 600px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.hero-ring-2 { width: 880px; height: 880px; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.hero-inner {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto;
}

.hero-logo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; margin-bottom: 32px;
}
.logo-mark {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--g600), var(--g300));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(26,144,139,.45);
}
.logo-word {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-weight: 700;
  color: #fff; letter-spacing: .02em;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--g200); margin-bottom: 18px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; height: 1px; width: 36px;
  background: var(--g300); opacity: .45;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 900; color: #fff;
  line-height: 1.08; letter-spacing: -.02em;
  margin-bottom: 20px;
}
.hero h1 em { font-style: italic; color: var(--g200); }
.hero h1 span { display: block; }

.hero-tagline {
  font-size: 1.05rem; color: rgba(255,255,255,.72);
  line-height: 1.70; max-width: 600px;
  margin: 0 auto 36px;
}
.hero-tagline strong { color: rgba(255,255,255,.92); font-weight: 600; }

/* Stat strip */
.hero-stats {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--rl);
  overflow: hidden;
  max-width: 760px; margin: 0 auto;
}
.hstat {
  flex: 1; min-width: 140px;
  padding: 22px 16px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.10);
}
.hstat:last-child { border-right: none; }
.hstat-n {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem; font-weight: 700;
  color: #fff; line-height: 1;
  margin-bottom: 5px;
}
.hstat-n em { font-style: normal; color: var(--g200); }
.hstat-l {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.50);
}

/* ════════════════════════════════════════════
   WAVE DIVIDER
════════════════════════════════════════════ */
.wave {
  position: relative; z-index: 4;
  height: 60px;
  background: var(--off);
}
.wave::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; top: 0;
  background: var(--g900);
  clip-path: ellipse(55% 100% at 50% 0%);
}

/* ════════════════════════════════════════════
   MAIN CONTENT WRAPPER
════════════════════════════════════════════ */
.page-body {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: 0 28px 100px;
}

/* ════════════════════════════════════════════
   MISSION SECTION
════════════════════════════════════════════ */
.mission-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 72px 0 60px;
}
.mission-text .eyebrow {
  font-size: .64rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.mission-text .eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2.5px;
  background: var(--acc); border-radius: 2px;
}
.mission-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700; color: var(--g900);
  line-height: 1.18; margin-bottom: 20px;
}
.mission-text h2 em { font-style: italic; color: var(--g600); }
.mission-text p {
  font-size: .96rem; color: var(--mid);
  line-height: 1.80; margin-bottom: 16px;
}
.mission-text p:last-child { margin-bottom: 0; }
.mission-text p strong { color: var(--g800); font-weight: 600; }

.mission-visual {
  background: linear-gradient(145deg, var(--g800), var(--g500));
  border-radius: var(--rxl);
  padding: 42px 36px;
  box-shadow: var(--shl);
  position: relative; overflow: hidden;
}
.mission-visual::after {
  content: '';
  position: absolute; bottom: -40px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  border: 30px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.mv-icon { font-size: 2.8rem; margin-bottom: 20px; }
.mv-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-weight: 600;
  font-style: italic;
  color: #fff; line-height: 1.45;
  margin-bottom: 18px;
}
.mv-sub { font-size: .84rem; color: rgba(255,255,255,.68); line-height: 1.65; }

/* ════════════════════════════════════════════
   WHAT WE DO — PLATFORM FEATURES
════════════════════════════════════════════ */
.section { padding: 64px 0; }
.section.alt { background: var(--wh); margin: 0 -28px; padding: 64px 28px; }

.section-hdr { text-align: center; margin-bottom: 52px; }
.section-hdr .ey {
  display: inline-block;
  font-size: .63rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 10px;
}
.section-hdr h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--g900);
  line-height: 1.2; margin-bottom: 14px;
}
.section-hdr h2 em { font-style: italic; color: var(--g600); }
.section-hdr p {
  font-size: .94rem; color: var(--mut);
  line-height: 1.70; max-width: 560px;
  margin: 0 auto;
}

/* Feature pillars grid */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pillar {
  background: var(--wh);
  border: 1.5px solid var(--bdr);
  border-radius: var(--rl);
  padding: 30px 26px;
  box-shadow: var(--sh);
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shm); }

.pillar.p-teal::before   { background: linear-gradient(90deg, var(--g700), var(--g400)); }
.pillar.p-blue::before   { background: linear-gradient(90deg, #0d3d6e, #2e80d0); }
.pillar.p-green::before  { background: linear-gradient(90deg, #0e4822, #28a052); }
.pillar.p-amber::before  { background: linear-gradient(90deg, #7a4200, #d08020); }
.pillar.p-purple::before { background: linear-gradient(90deg, #3d0e82, #8040d0); }
.pillar.p-rose::before   { background: linear-gradient(90deg, #7a0e2e, #d04060); }

.pillar-ico {
  font-size: 2.2rem; margin-bottom: 16px;
  display: block;
}
.pillar h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--g800); margin-bottom: 10px;
  line-height: 1.25;
}
.pillar p {
  font-size: .86rem; color: var(--mut);
  line-height: 1.68; margin-bottom: 14px;
}
.pillar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ptag {
  font-size: .66rem; font-weight: 700;
  padding: 3px 10px; border-radius: 12px;
  background: var(--g50); color: var(--mut);
  border: 1px solid var(--bdrm);
  letter-spacing: .04em;
}

/* ════════════════════════════════════════════
   WHO WE SERVE — MEMBER TYPES
════════════════════════════════════════════ */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.member-card {
  background: linear-gradient(145deg, var(--g800), var(--g600));
  border-radius: var(--rl);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shm);
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.member-card::after {
  content: '';
  position: absolute; bottom: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shl); }
.mc-ico { font-size: 2rem; margin-bottom: 12px; display: block; }
.mc-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: 8px;
}
.mc-desc { font-size: .78rem; color: rgba(255,255,255,.70); line-height: 1.60; }

/* ════════════════════════════════════════════
   KNOWLEDGE HUB — LAW + REPORTS
════════════════════════════════════════════ */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.hub-card {
  border-radius: var(--rl);
  padding: 34px 30px;
  position: relative; overflow: hidden;
}
.hub-card.laws {
  background: linear-gradient(135deg, #0a2e4a, #1060a0);
}
.hub-card.reports {
  background: linear-gradient(135deg, var(--g900), var(--g700));
}
.hub-card::after {
  content: '';
  position: absolute; bottom: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 40px solid rgba(255,255,255,.05);
  pointer-events: none;
}
.hc-icon { font-size: 2.5rem; margin-bottom: 18px; }
.hc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 700;
  color: #fff; margin-bottom: 12px;
}
.hc-desc { font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.70; margin-bottom: 18px; }
.hc-list { list-style: none; padding: 0; }
.hc-list li {
  font-size: .84rem; color: rgba(255,255,255,.80);
  padding: 5px 0 5px 18px;
  position: relative;
}
.hc-list li::before {
  content: '▸';
  position: absolute; left: 0; top: 6px;
  color: var(--g300); font-size: .76rem;
}
.hc-badge {
  display: inline-block;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.88);
  font-size: .68rem; font-weight: 700;
  padding: 3px 11px; border-radius: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════
   VALUES
════════════════════════════════════════════ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.val-card {
  background: var(--wh);
  border: 1.5px solid var(--bdr);
  border-radius: var(--rl);
  padding: 26px 22px;
  box-shadow: var(--sh);
}
.val-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem; font-weight: 900;
  color: var(--g100); line-height: 1;
  margin-bottom: 12px;
}
.val-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--g800); margin-bottom: 9px;
}
.val-desc { font-size: .86rem; color: var(--mut); line-height: 1.68; }

/* ════════════════════════════════════════════
   GEOGRAPHY COVERAGE
════════════════════════════════════════════ */
.geo-strip {
  background: var(--g900);
  border-radius: var(--rxl);
  padding: 44px 40px;
  display: flex; gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.geo-intro { flex: 1; padding-right: 44px; border-right: 1px solid rgba(255,255,255,.10); }
.geo-intro h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem; font-weight: 700;
  color: #fff; margin-bottom: 14px;
}
.geo-intro p { font-size: .88rem; color: rgba(255,255,255,.68); line-height: 1.70; }
.geo-markets { flex: 2; padding-left: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.geo-item {
  display: flex; align-items: flex-start; gap: 12px;
}
.geo-flag { font-size: 1.6rem; flex-shrink: 0; }
.geo-country {
  font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 2px;
}
.geo-detail { font-size: .78rem; color: rgba(255,255,255,.56); line-height: 1.55; }

/* ════════════════════════════════════════════
   TIMELINE / STORY
════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: '';
  position: absolute; left: 10px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--g400), var(--g700), var(--g900));
}
.tl-item { position: relative; margin-bottom: 38px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: -36px; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--acc);
  border: 3px solid var(--off);
  box-shadow: 0 0 0 3px rgba(26,144,139,.25);
}
.tl-year {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 4px;
}
.tl-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--g800); margin-bottom: 6px;
}
.tl-desc { font-size: .88rem; color: var(--mut); line-height: 1.65; }

/* ════════════════════════════════════════════
   COMMITMENT / PROMISE BANNER
════════════════════════════════════════════ */
.promise-band {
  background: linear-gradient(148deg, var(--g900) 0%, var(--g700) 55%, var(--g500) 100%);
  border-radius: var(--rxl);
  padding: 54px 50px;
  text-align: center;
  position: relative; overflow: hidden;
}
.promise-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(255,255,255,.07) 0%, transparent 65%);
  pointer-events: none;
}
.pb-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.pb-icon { font-size: 3rem; margin-bottom: 18px; display: block; }
.pb-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; color: #fff;
  line-height: 1.2; margin-bottom: 18px;
}
.pb-title em { font-style: italic; color: var(--g200); }
.pb-text { font-size: .94rem; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 28px; }
.pb-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 26px; border-radius: 24px;
  font-size: .88rem; font-weight: 700;
  letter-spacing: .02em; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.pb-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25); text-decoration: none; }
.pb-btn.primary { background: var(--g400); color: var(--g950); }
.pb-btn.primary:hover { background: var(--g300); color: var(--g950); }
.pb-btn.outline  { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.pb-btn.outline:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ════════════════════════════════════════════
   CONTACT SECTION
════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-card {
  background: var(--wh);
  border: 1.5px solid var(--bdr);
  border-radius: var(--rl);
  padding: 28px 26px;
  box-shadow: var(--sh);
}
.contact-card.primary-card {
  background: linear-gradient(135deg, var(--g800), var(--g600));
  border: none;
}
.cc-ico { font-size: 1.8rem; margin-bottom: 14px; }
.cc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--g800); margin-bottom: 8px;
}
.primary-card .cc-title { color: #fff; }
.cc-desc { font-size: .86rem; color: var(--mut); line-height: 1.65; margin-bottom: 14px; }
.primary-card .cc-desc { color: rgba(255,255,255,.72); }
.cc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .86rem; font-weight: 700; color: var(--acc);
}
.primary-card .cc-link { color: var(--g200); }
.cc-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.site-footer {
  position: relative; z-index: 2;
  background: var(--g950);
  padding: 36px 28px;
  text-align: center;
}
.sf-inner { max-width: 1100px; margin: 0 auto; }
.sf-logo {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; margin-bottom: 16px;
}
.sf-logo-mk {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--g600), var(--g300));
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.sf-logo-wm {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: #fff;
}
.sf-links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 20px;
  margin-bottom: 14px;
}
.sf-links a { font-size: .80rem; color: var(--g300); }
.sf-links a:hover { color: var(--g200); }
.sf-copy { font-size: .74rem; color: rgba(255,255,255,.34); line-height: 1.65; }

/* FAB print */
.fab {
  position: fixed; bottom: 28px; right: 28px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--acc); color: #fff;
  border: none; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 500;
  box-shadow: 0 4px 20px rgba(26,144,139,.38);
  transition: transform .18s, background .18s;
}
.fab:hover { background: var(--g700); transform: translateY(-2px); }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 960px) {
  .mission-wrap { grid-template-columns: 1fr; gap: 32px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
  .geo-strip { flex-direction: column; }
  .geo-intro { padding-right: 0; padding-bottom: 28px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.10); }
  .geo-markets { padding-left: 0; padding-top: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .promise-band { padding: 40px 28px; }
}
@media (max-width: 660px) {
  .hero { padding: 56px 20px 50px; }
  .pillars { grid-template-columns: 1fr; }
  .members-grid { grid-template-columns: 1fr 1fr; }
  .geo-markets { grid-template-columns: 1fr; }
  .page-body { padding: 0 20px 80px; }
  .dl-bar { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 2.2rem; }
}
@media print {
  body::before, .dl-bar, .fab { display: none; }
  .hero { background: #053434 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mission-visual, .hub-card, .geo-strip, .promise-band, .member-card,
  .contact-card.primary-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .section.alt { background: #fafafa !important; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: CAREERS
   File: careers.html
════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS — CannBus Teal System
═══════════════════════════════════════════════ */


body {
  font-family:'DM Sans',sans-serif;
  background:var(--off); color:var(--txt);
  line-height:1.70; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image:radial-gradient(circle,rgba(26,144,139,.08) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none; z-index:0;
}
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--t700); }

/* ═══════════════════════════════════════════════
   STICKY NAV
═══════════════════════════════════════════════ */
.topnav {
  position:sticky; top:0; z-index:300;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--sh);
  height:62px;
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 28px;
}
.nav-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.nav-mk {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--t700),var(--t300));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  box-shadow:0 2px 8px rgba(26,144,139,.32);
}
.nav-wm {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700;
  color:var(--t900); letter-spacing:.02em;
}
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-pill {
  font-size:.63rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--t700); background:var(--t50);
  border:1px solid var(--bdrm);
  padding:4px 12px; border-radius:20px;
}
.nav-cta {
  background:var(--acc); color:#fff;
  font-size:.76rem; font-weight:700;
  padding:7px 18px; border-radius:20px;
  letter-spacing:.03em;
  transition:background .18s;
}
.nav-cta:hover { background:var(--t700); color:#fff; text-decoration:none; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  position:relative; z-index:5;
  background:linear-gradient(148deg,var(--t950) 0%,var(--t800) 32%,var(--t600) 68%,var(--t300) 100%);
  padding:80px 28px 0;
  text-align:center;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 10% 52%,rgba(70,210,203,.16) 0%,transparent 58%),
    radial-gradient(ellipse 50% 65% at 90% 26%,rgba(30,146,144,.13) 0%,transparent 54%);
  pointer-events:none;
}
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.055); pointer-events:none;
}
.hr1 { width:500px; height:500px; top:50%; left:50%; transform:translate(-50%,-50%); }
.hr2 { width:780px; height:780px; top:50%; left:50%; transform:translate(-50%,-50%); }

.hero-inner {
  position:relative; z-index:1;
  max-width:800px; margin:0 auto;
}
.hero-logo {
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:30px;
}
.hl-mk {
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  box-shadow:0 3px 14px rgba(26,144,139,.44);
}
.hl-wm {
  font-family:'Playfair Display',serif;
  font-size:1.28rem; font-weight:700; color:#fff; letter-spacing:.02em;
}
.hero-eye {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.63rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--t200); margin-bottom:15px;
}
.hero-eye::before,.hero-eye::after {
  content:''; height:1px; width:30px;
  background:var(--t300); opacity:.44;
}
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.4rem,6vw,3.8rem);
  font-weight:900; color:#fff;
  line-height:1.08; letter-spacing:-.02em;
  margin-bottom:18px;
}
.hero h1 em { font-style:italic; color:var(--t200); }
.hero h1 span { display:block; }
.hero-sub {
  font-size:.96rem; color:rgba(255,255,255,.72);
  line-height:1.72; max-width:600px;
  margin:0 auto 36px;
}
.hero-sub strong { color:rgba(255,255,255,.92); }

/* Hero CTA buttons */
.hero-btns {
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:12px;
  margin-bottom:48px;
}
.hbtn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:28px;
  font-size:.90rem; font-weight:700;
  letter-spacing:.02em; text-decoration:none;
  transition:transform .18s, box-shadow .18s;
}
.hbtn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.22); text-decoration:none; }
.hbtn.primary { background:var(--t400); color:var(--t950); }
.hbtn.primary:hover { background:var(--t300); color:var(--t950); }
.hbtn.outline  { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.hbtn.outline:hover { background:rgba(255,255,255,.22); color:#fff; }

/* Hero stats shelf */
.hero-shelf {
  display:flex; flex-wrap:wrap;
  max-width:900px; margin:0 auto;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-bottom:none;
  border-radius:var(--rl) var(--rl) 0 0;
  overflow:hidden;
}
.hshelf-item {
  flex:1; min-width:150px; padding:22px 16px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.09);
}
.hshelf-item:last-child { border-right:none; }
.hsi-n {
  display:block;
  font-family:'Playfair Display',serif;
  font-size:2rem; font-weight:700; color:#fff;
  line-height:1; margin-bottom:5px;
}
.hsi-n em { font-style:normal; color:var(--t200); }
.hsi-l {
  font-size:.60rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.48);
}

/* ═══════════════════════════════════════════════
   WAVE DIVIDER
═══════════════════════════════════════════════ */
.wave {
  position:relative; z-index:4; height:56px;
  background:var(--off);
}
.wave::before {
  content:''; position:absolute;
  inset:0; background:var(--t900);
  clip-path:ellipse(52% 100% at 50% 0%);
}

/* ═══════════════════════════════════════════════
   PAGE BODY
═══════════════════════════════════════════════ */
.page-body {
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto;
  padding:0 28px 100px;
}

.section { padding:68px 0; }
.section.alt {
  background:var(--wh);
  margin:0 -28px; padding:68px 28px;
}
.sec-hdr { text-align:center; margin-bottom:52px; }
.sec-eye {
  display:inline-block;
  font-size:.62rem; font-weight:700; letter-spacing:.20em;
  text-transform:uppercase; color:var(--acc); margin-bottom:10px;
}
.sec-hdr h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.75rem,3vw,2.5rem); font-weight:700;
  color:var(--t900); line-height:1.2; margin-bottom:14px;
}
.sec-hdr h2 em { font-style:italic; color:var(--t600); }
.sec-hdr p { font-size:.93rem; color:var(--mut); line-height:1.70; max-width:560px; margin:0 auto; }

/* ═══════════════════════════════════════════════
   WHY WORK HERE — VALUE PROPS
═══════════════════════════════════════════════ */
.values-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px; align-items:center;
  padding:72px 0 60px;
}
.vw-text .eyebrow {
  display:flex; align-items:center; gap:8px;
  font-size:.64rem; font-weight:700; letter-spacing:.20em;
  text-transform:uppercase; color:var(--acc); margin-bottom:12px;
}
.vw-text .eyebrow::before {
  content:''; width:24px; height:2.5px;
  background:var(--acc); border-radius:2px;
}
.vw-text h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,3vw,2.7rem); font-weight:700;
  color:var(--t900); line-height:1.17; margin-bottom:18px;
}
.vw-text h2 em { font-style:italic; color:var(--t600); }
.vw-text p {
  font-size:.94rem; color:var(--mid); line-height:1.80; margin-bottom:14px;
}
.vw-text p strong { color:var(--t800); font-weight:600; }

/* Perks list */
.perks-list { list-style:none; margin-top:22px; }
.perks-list li {
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--bdr);
  font-size:.90rem; color:var(--mid);
}
.perks-list li:last-child { border-bottom:none; }
.perks-list .p-ico { font-size:1.15rem; flex-shrink:0; margin-top:1px; }
.perks-list .p-txt strong { color:var(--t800); font-weight:600; display:block; margin-bottom:2px; font-size:.90rem; }
.perks-list .p-txt span  { font-size:.82rem; color:var(--mut); }

/* Right visual panel */
.vw-visual {
  background:linear-gradient(145deg,var(--t800),var(--t500));
  border-radius:var(--rxl); padding:42px 36px;
  box-shadow:var(--shl);
  position:relative; overflow:hidden;
}
.vw-visual::after {
  content:''; position:absolute;
  bottom:-50px; right:-50px;
  width:200px; height:200px; border-radius:50%;
  border:40px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.vv-label {
  font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t200); margin-bottom:18px;
}
.vv-quote {
  font-family:'Playfair Display',serif;
  font-size:1.38rem; font-weight:600; font-style:italic;
  color:#fff; line-height:1.45; margin-bottom:18px;
}
.vv-sub { font-size:.84rem; color:rgba(255,255,255,.68); line-height:1.68; margin-bottom:28px; }
.vv-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vv-chip {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.88);
  font-size:.70rem; font-weight:700;
  padding:5px 14px; border-radius:20px;
  letter-spacing:.05em;
}

/* ═══════════════════════════════════════════════
   DEPARTMENT FILTER TABS
═══════════════════════════════════════════════ */
.dept-tabs {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; margin-bottom:36px;
}
.dtab {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:700;
  padding:8px 18px; border-radius:22px;
  border:1.5px solid var(--bdrm);
  background:var(--wh); color:var(--mut);
  cursor:pointer; transition:all .18s;
  letter-spacing:.03em;
}
.dtab:hover { border-color:var(--acc); color:var(--acc); }
.dtab.active {
  background:var(--acc); color:#fff; border-color:var(--acc);
}
.dtab-dot {
  width:8px; height:8px; border-radius:50%;
}
.dtab-count {
  font-size:.65rem; font-weight:700;
  background:rgba(0,0,0,.10); color:inherit;
  padding:1px 7px; border-radius:10px;
}
.dtab.active .dtab-count { background:rgba(255,255,255,.20); }

/* ═══════════════════════════════════════════════
   JOB LISTINGS
═══════════════════════════════════════════════ */
.jobs-grid {
  display:flex; flex-direction:column; gap:16px;
}
.job-card {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:0;
  box-shadow:var(--sh);
  overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
  cursor:pointer;
}
.job-card:hover { box-shadow:var(--shm); border-color:var(--bdrm); }
.job-card.open  { box-shadow:var(--shm); border-color:var(--bdrm); }

/* Card header row */
.jc-head {
  display:flex; align-items:center; gap:16px;
  padding:20px 24px;
}
.jc-dept-bar {
  width:4px; height:44px; border-radius:3px; flex-shrink:0;
}
.jc-info { flex:1; min-width:0; }
.jc-title {
  font-family:'Playfair Display',serif;
  font-size:1.08rem; font-weight:700;
  color:var(--t800); margin-bottom:5px;
  line-height:1.3;
}
.jc-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.jc-dept-badge {
  font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 10px; border-radius:12px;
}
.jc-tag {
  font-size:.72rem; color:var(--mut); font-weight:500;
  display:flex; align-items:center; gap:4px;
}
.jc-tag::before { content:'·'; color:var(--fnt); }
.jc-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.jc-new {
  font-size:.60rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; background:#dcfce7;
  color:#15803d; border:1px solid #86efac;
  padding:3px 9px; border-radius:10px;
}
.jc-chevron {
  font-size:.80rem; color:var(--mut);
  transition:transform .22s;
}
.job-card.open .jc-chevron { transform:rotate(180deg); color:var(--acc); }

/* Card body (expanded) */
.jc-body {
  display:none;
  border-top:1px solid var(--bdr);
  padding:24px 24px 24px 44px;
}
.job-card.open .jc-body { display:block; }

.jc-body p {
  font-size:.90rem; color:var(--mid); line-height:1.80; margin-bottom:14px;
}
.jc-body h4 {
  font-family:'DM Sans',sans-serif;
  font-size:.76rem; font-weight:700; color:var(--t700);
  text-transform:uppercase; letter-spacing:.09em;
  margin:20px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--bdr);
}
.jc-body ul { list-style:none; padding:0; margin-bottom:14px; }
.jc-body ul li {
  position:relative; padding:5px 0 5px 20px;
  font-size:.88rem; color:var(--mid); line-height:1.65;
}
.jc-body ul li::before {
  content:'▸'; position:absolute; left:0; top:6px;
  color:var(--t400); font-size:.78rem;
}
.jc-body ul li strong { color:var(--t700); font-weight:600; }

/* 2-col details strip */
.jc-details {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px; margin-bottom:18px;
}
.jc-detail-item {
  background:var(--t50); border:1px solid var(--bdrm);
  border-radius:8px; padding:10px 12px;
}
.jcd-lbl {
  font-size:.60rem; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:var(--fnt); margin-bottom:3px;
}
.jcd-val { font-size:.84rem; font-weight:600; color:var(--mid); }

/* Apply button in card */
.jc-apply-row {
  display:flex; align-items:center; gap:14px;
  padding-top:16px; border-top:1px solid var(--bdr);
}
.jc-apply-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--acc); color:#fff;
  font-size:.86rem; font-weight:700;
  padding:10px 24px; border-radius:22px;
  text-decoration:none; letter-spacing:.03em;
  transition:background .18s, transform .14s;
}
.jc-apply-btn:hover { background:var(--t700); color:#fff; transform:translateY(-1px); text-decoration:none; }
.jc-apply-note { font-size:.78rem; color:var(--mut); line-height:1.55; }

/* No results */
.jobs-empty {
  text-align:center; padding:60px 20px; display:none;
}
.jobs-empty .je-ico { font-size:2.8rem; margin-bottom:14px; }
.jobs-empty p { font-size:.94rem; color:var(--mut); }

/* ═══════════════════════════════════════════════
   HOW WE HIRE — PROCESS STEPS
═══════════════════════════════════════════════ */
.process-steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0; position:relative;
}
.process-steps::before {
  content:''; position:absolute;
  top:36px; left:10%; right:10%; height:2px;
  background:linear-gradient(to right,var(--t400),var(--t700));
  z-index:0;
}
.ps-step {
  text-align:center; position:relative; z-index:1;
  padding:0 16px 28px;
}
.ps-num {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--t700),var(--t400));
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:700; color:#fff;
  margin:0 auto 16px;
  box-shadow:0 4px 14px rgba(26,144,139,.30);
  position:relative; z-index:2;
}
.ps-title {
  font-family:'Playfair Display',serif;
  font-size:.96rem; font-weight:700;
  color:var(--t800); margin-bottom:8px;
}
.ps-desc { font-size:.82rem; color:var(--mut); line-height:1.62; }

/* ═══════════════════════════════════════════════
   CULTURE SECTION
═══════════════════════════════════════════════ */
.culture-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.culture-card {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:26px 22px;
  box-shadow:var(--sh);
  position:relative; overflow:hidden;
}
.culture-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--t700),var(--t400));
}
.cc-num {
  font-family:'Playfair Display',serif;
  font-size:2.6rem; font-weight:900;
  color:var(--t100); line-height:1;
  margin-bottom:12px;
}
.cc-title {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-weight:700;
  color:var(--t800); margin-bottom:9px;
}
.cc-desc { font-size:.84rem; color:var(--mut); line-height:1.68; }

/* ═══════════════════════════════════════════════
   OPEN APPLICATION CTA
═══════════════════════════════════════════════ */
.open-app-band {
  background:linear-gradient(148deg,var(--t900) 0%,var(--t700) 55%,var(--t500) 100%);
  border-radius:var(--rxl); padding:56px 48px;
  text-align:center; position:relative; overflow:hidden;
}
.open-app-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 58% at 50% -12%,rgba(255,255,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
.oab-inner { position:relative; z-index:1; max-width:660px; margin:0 auto; }
.oab-icon { font-size:3rem; margin-bottom:18px; display:block; }
.oab-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:700;
  color:#fff; line-height:1.2; margin-bottom:16px;
}
.oab-title em { font-style:italic; color:var(--t200); }
.oab-text {
  font-size:.93rem; color:rgba(255,255,255,.72);
  line-height:1.74; margin-bottom:28px;
}
.oab-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.oab-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:26px;
  font-size:.88rem; font-weight:700;
  letter-spacing:.02em; text-decoration:none;
  transition:transform .18s, box-shadow .18s;
}
.oab-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.22); text-decoration:none; }
.oab-btn.primary { background:var(--t400); color:var(--t950); }
.oab-btn.primary:hover { background:var(--t300); color:var(--t950); }
.oab-btn.outline  { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.oab-btn.outline:hover { background:rgba(255,255,255,.22); color:#fff; }

/* ═══════════════════════════════════════════════
   APPLY MODAL
═══════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(2,20,20,.72);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .24s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--wh);
  border-radius:var(--rxl); padding:0;
  max-width:600px; width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.38);
  max-height:92vh; overflow-y:auto;
  transform:translateY(16px);
  transition:transform .24s;
}
.modal-overlay.open .modal { transform:none; }

.modal-head {
  background:linear-gradient(135deg,var(--t800),var(--t600));
  padding:28px 30px 22px;
  border-radius:var(--rxl) var(--rxl) 0 0;
  position:relative;
}
.modal-head h3 {
  font-family:'Playfair Display',serif;
  font-size:1.35rem; font-weight:700; color:#fff;
  margin-bottom:5px;
}
.modal-head p { font-size:.82rem; color:rgba(255,255,255,.70); }
.modal-close {
  position:absolute; top:18px; right:20px;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; width:32px; height:32px; border-radius:50%;
  font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.modal-close:hover { background:rgba(255,255,255,.28); }

.modal-body { padding:28px 30px; }

.mf-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.mf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.mf-group label {
  font-size:.74rem; font-weight:700; color:var(--t700); letter-spacing:.05em;
}
.mf-group input,
.mf-group select,
.mf-group textarea {
  background:var(--off); border:1.5px solid var(--bdr);
  border-radius:var(--r); padding:10px 14px;
  font-family:'DM Sans',sans-serif; font-size:.88rem; color:var(--txt);
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.mf-group input::placeholder,.mf-group textarea::placeholder { color:var(--fnt); }
.mf-group input:focus,.mf-group select:focus,.mf-group textarea:focus {
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(26,144,139,.10);
}
.mf-group textarea { resize:vertical; min-height:100px; }

/* File upload */
.file-drop {
  border:2px dashed var(--bdrm);
  border-radius:var(--r); padding:22px 20px;
  text-align:center; cursor:pointer;
  background:var(--off);
  transition:border-color .18s, background .18s;
}
.file-drop:hover { border-color:var(--acc); background:var(--t50); }
.file-drop input { display:none; }
.file-drop .fd-ico { font-size:2rem; margin-bottom:8px; }
.file-drop .fd-txt { font-size:.84rem; color:var(--mut); }
.file-drop .fd-txt strong { color:var(--acc); }
.file-drop .fd-name { font-size:.80rem; color:var(--mid); font-weight:600; margin-top:6px; display:none; }

.modal-submit {
  background:var(--acc); color:#fff; border:none;
  font-family:'DM Sans',sans-serif;
  font-size:.90rem; font-weight:700;
  padding:12px 28px; border-radius:24px;
  cursor:pointer; width:100%;
  transition:background .18s, transform .14s;
  margin-top:4px;
}
.modal-submit:hover { background:var(--t700); transform:translateY(-1px); }
.modal-note { font-size:.74rem; color:var(--mut); text-align:center; margin-top:9px; }

.modal-success { display:none; text-align:center; padding:40px 30px; }
.ms-ico { font-size:3rem; margin-bottom:16px; }
.ms-title { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--t800); margin-bottom:10px; }
.ms-text  { font-size:.88rem; color:var(--mut); line-height:1.70; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer {
  position:relative; z-index:2;
  background:var(--t950); padding:32px 28px; text-align:center;
}
.sf-inner { max-width:1100px; margin:0 auto; }
.sf-logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-bottom:14px; }
.sfl-mk {
  width:30px; height:30px; border-radius:7px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex; align-items:center; justify-content:center; font-size:.86rem;
}
.sfl-wm { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:#fff; }
.sf-links { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:13px; }
.sf-links a { font-size:.78rem; color:var(--t300); }
.sf-links a:hover { color:var(--t200); }
.sf-copy { font-size:.72rem; color:rgba(255,255,255,.34); line-height:1.65; }

.fab {
  position:fixed; bottom:28px; right:28px;
  width:50px; height:50px; border-radius:50%;
  background:var(--acc); color:#fff; border:none;
  font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:500;
  box-shadow:0 4px 20px rgba(26,144,139,.38);
  transition:transform .18s, background .18s;
}
.fab:hover { background:var(--t700); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:960px) {
  .values-wrap { grid-template-columns:1fr; gap:32px; }
  .process-steps::before { display:none; }
}
@media (max-width:660px) {
  .hero { padding:52px 18px 0; }
  .hero h1 { font-size:2.2rem; }
  .hero-shelf { display:none; }
  .page-body { padding:0 18px 80px; }
  .jc-head { flex-wrap:wrap; }
  .mf-row { grid-template-columns:1fr; gap:0; }
  .open-app-band { padding:38px 24px; }
  .dtab-count { display:none; }
  .topnav .nav-pill { display:none; }
}
@media print {
  body::before, .topnav, .fab, .modal-overlay { display:none; }
  .hero { background:#053434 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: CONTACT US
   File: contact.html
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════ */


/* ── Reset ── */


body{
  font-family:'DM Sans',sans-serif;
  background:var(--off); color:var(--txt);
  line-height:1.70; overflow-x:hidden;
}
/* Dot-grid texture */
body::before{
  content:''; position:fixed; inset:0;
  background-image:radial-gradient(circle,rgba(26,144,139,.09) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none; z-index:0;
}
a{color:var(--acc);text-decoration:none;}
a:hover{text-decoration:underline;color:var(--t700);}

/* ════════════════════════════════════════════
   TOPNAV
════════════════════════════════════════════ */
.topnav{
  position:sticky; top:0; z-index:300;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--sh);
  height:62px;
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 28px;
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-mk{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--t700),var(--t300));
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  box-shadow:0 2px 8px rgba(26,144,139,.32);
}
.nav-wm{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--t900);letter-spacing:.02em;
}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-pill{
  font-size:.63rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--t700);background:var(--t50);
  border:1px solid var(--bdrm);
  padding:4px 13px;border-radius:20px;
}
.nav-cta{
  background:var(--acc);color:#fff;
  font-size:.76rem;font-weight:700;
  padding:7px 18px;border-radius:20px;
  letter-spacing:.03em;
  transition:background .18s;
}
.nav-cta:hover{background:var(--t700);color:#fff;text-decoration:none;}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero{
  position:relative;z-index:5;
  background:linear-gradient(150deg,var(--t950) 0%,var(--t800) 34%,var(--t600) 70%,var(--t300) 100%);
  padding:76px 28px 68px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 66% 56% at 12% 54%,rgba(70,210,203,.16) 0%,transparent 58%),
    radial-gradient(ellipse 50% 64% at 88% 28%,rgba(30,146,144,.13) 0%,transparent 52%);
  pointer-events:none;
}
.hero-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.hr1{width:480px;height:480px;top:50%;left:50%;transform:translate(-50%,-50%);}
.hr2{width:760px;height:760px;top:50%;left:50%;transform:translate(-50%,-50%);}

.hero-inner{position:relative;z-index:1;max-width:740px;margin:0 auto;}

.hero-logo{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;margin-bottom:30px;
}
.hl-mk{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  box-shadow:0 3px 14px rgba(26,144,139,.44);
}
.hl-wm{
  font-family:'Playfair Display',serif;
  font-size:1.26rem;font-weight:700;color:#fff;letter-spacing:.02em;
}
.hero-eye{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.63rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t200);margin-bottom:15px;
}
.hero-eye::before,.hero-eye::after{
  content:'';height:1px;width:30px;background:var(--t300);opacity:.44;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,5.5vw,3.4rem);
  font-weight:900;color:#fff;
  line-height:1.09;letter-spacing:-.015em;
  margin-bottom:16px;
}
.hero h1 em{font-style:italic;color:var(--t200);}
.hero-sub{
  font-size:.96rem;color:rgba(255,255,255,.72);
  line-height:1.72;max-width:580px;
  margin:0 auto 34px;
}
.hero-sub strong{color:rgba(255,255,255,.92);}

/* Quick method chips */
.hero-methods{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-bottom:0;
}
.hm-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.88);
  font-size:.78rem;font-weight:600;
  padding:8px 18px;border-radius:24px;
  text-decoration:none;
  transition:background .18s,transform .14s;
  letter-spacing:.02em;
}
.hm-chip:hover{
  background:rgba(255,255,255,.20);color:#fff;
  transform:translateY(-1px);text-decoration:none;
}
.hm-chip.primary{
  background:var(--t400);color:var(--t950);border-color:var(--t400);
}
.hm-chip.primary:hover{background:var(--t300);color:var(--t950);}

/* ════════════════════════════════════════════
   STATUS BAR
════════════════════════════════════════════ */
.status-bar{
  position:relative;z-index:4;
  background:var(--t900);
  border-bottom:3px solid var(--t600);
}
.sb-inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;
  padding:0 28px;
}
.sbi{
  flex:1;min-width:200px;
  display:flex;align-items:center;gap:13px;
  padding:18px 22px;
  border-right:1px solid rgba(255,255,255,.08);
}
.sbi:last-child{border-right:none;}
.sbi-ico{font-size:1.4rem;flex-shrink:0;}
.sbi-lbl{
  font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--t300);margin-bottom:2px;
}
.sbi-val{font-size:.88rem;font-weight:600;color:#fff;}
.sbi-val a{color:var(--t200);font-weight:700;}
.sbi-val a:hover{color:var(--t100);}

/* Live status dot */
.live-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
  margin-right:6px;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18);}
  50%{box-shadow:0 0 0 7px rgba(34,197,94,.06);}
}

/* ════════════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════════════ */
.page-body{
  position:relative;z-index:2;
  max-width:1100px;margin:0 auto;
  padding:0 28px 100px;
}

/* ════════════════════════════════════════════
   CONTACT CARDS ROW
════════════════════════════════════════════ */
.contact-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  padding:56px 0 0;
}
.cc{
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:0;
  box-shadow:var(--sh);
  overflow:hidden;
  text-decoration:none;color:var(--txt);
  display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  position:relative;
}
.cc:hover{transform:translateY(-4px);box-shadow:var(--shm);border-color:var(--bdrm);text-decoration:none;color:var(--txt);}
.cc-top{
  padding:26px 22px 20px;
  flex:1;
}
.cc-icon-wrap{
  width:52px;height:52px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:16px;
  border:1.5px solid;
}
.cc-title{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;font-weight:700;
  color:var(--t800);margin-bottom:8px;
}
.cc-desc{
  font-size:.83rem;color:var(--mut);
  line-height:1.64;margin-bottom:14px;
}
.cc-contact-val{
  font-size:.86rem;font-weight:700;
  color:var(--acc);display:block;
}
.cc-footer{
  background:var(--t50);
  border-top:1px solid var(--bdr);
  padding:10px 22px;
  font-size:.70rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--mut);
  display:flex;align-items:center;justify-content:space-between;
}
.cc-footer-arrow{color:var(--acc);font-size:.80rem;}
.cc:hover .cc-footer{background:var(--t100);}

/* Card accent stripe on top */
.cc::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:4px;
}
.cc-email::before    {background:linear-gradient(90deg,var(--t700),var(--t400));}
.cc-support::before  {background:linear-gradient(90deg,#0d3d6e,#2e80d0);}
.cc-partner::before  {background:linear-gradient(90deg,#177030,#28a052);}
.cc-press::before    {background:linear-gradient(90deg,#8030c0,#b060e8);}
.cc-legal::before    {background:linear-gradient(90deg,#c03040,#e05060);}
.cc-careers::before  {background:linear-gradient(90deg,#c07010,#e0a030);}

.cc-email    .cc-icon-wrap{background:#ecfaf9;border-color:var(--bdrm);color:var(--t700);}
.cc-support  .cc-icon-wrap{background:#eef4ff;border-color:#93b4e0;color:#1060a0;}
.cc-partner  .cc-icon-wrap{background:#edf8f2;border-color:#7ac89a;color:#177030;}
.cc-press    .cc-icon-wrap{background:#f4eeff;border-color:#c090e0;color:#8030c0;}
.cc-legal    .cc-icon-wrap{background:#fff0f2;border-color:#f09090;color:#c03040;}
.cc-careers  .cc-icon-wrap{background:#fff8ec;border-color:#e0b870;color:#c07010;}

/* ════════════════════════════════════════════
   MAIN FORM + INFO TWO-COLUMN BLOCK
════════════════════════════════════════════ */
.contact-main{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:36px;
  padding:64px 0 0;
  align-items:start;
}

/* ── Info Panel ── */
.info-panel{
  position:sticky;top:84px;
}
.ip-header{
  font-size:.62rem;font-weight:700;letter-spacing:.20em;
  text-transform:uppercase;color:var(--acc);
  margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.ip-header::before{
  content:'';width:22px;height:2.5px;
  background:var(--acc);border-radius:2px;
}
.ip-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:700;color:var(--t900);
  line-height:1.2;margin-bottom:14px;
}
.ip-title em{font-style:italic;color:var(--t600);}
.ip-desc{
  font-size:.90rem;color:var(--mid);
  line-height:1.78;margin-bottom:28px;
}

/* Info rows */
.ip-rows{display:flex;flex-direction:column;gap:0;}
.ip-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--bdr);
}
.ip-row:last-child{border-bottom:none;}
.ipr-ico{
  font-size:1.2rem;flex-shrink:0;
  width:38px;height:38px;border-radius:9px;
  background:var(--t50);border:1px solid var(--bdrm);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.ipr-lbl{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fnt);margin-bottom:3px;
}
.ipr-val{
  font-size:.88rem;font-weight:600;color:var(--mid);
}
.ipr-val a{color:var(--acc);font-weight:700;}

/* SLA table */
.sla-box{
  background:var(--t50);
  border:1.5px solid var(--bdrm);
  border-radius:var(--rl);
  padding:18px 20px;
  margin-top:24px;
}
.sla-title{
  font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--t600);margin-bottom:13px;
}
.sla-row{
  display:flex;justify-content:space-between;
  align-items:center;
  font-size:.82rem;color:var(--mid);
  padding:7px 0;
  border-bottom:1px solid rgba(26,144,139,.08);
}
.sla-row:last-child{border-bottom:none;}
.sla-row .sr-type{display:flex;align-items:center;gap:8px;}
.sla-row .sr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sla-row .sr-sla{font-weight:700;color:var(--t700);white-space:nowrap;}

/* Social links */
.social-row{
  display:flex;gap:10px;margin-top:22px;
}
.social-link{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:20px;
  border:1.5px solid var(--bdrm);
  font-size:.76rem;font-weight:700;color:var(--mut);
  background:var(--wh);
  transition:all .18s;
  text-decoration:none;
}
.social-link:hover{
  border-color:var(--acc);color:var(--acc);
  background:var(--t50);text-decoration:none;
}

/* ── Contact Form ── */
.form-wrap{
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rxl);
  padding:36px 32px;
  box-shadow:var(--sh);
}
.fw-title{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;font-weight:700;
  color:var(--t900);margin-bottom:6px;
}
.fw-sub{
  font-size:.84rem;color:var(--mut);
  margin-bottom:28px;line-height:1.60;
}

/* Topic selector cards */
.topic-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;margin-bottom:24px;
}
.topic-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 8px;
  border:1.5px solid var(--bdr);border-radius:var(--r);
  background:var(--off);cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;font-weight:600;color:var(--mut);
  text-align:center;line-height:1.35;
  transition:all .18s;
}
.topic-btn .tb-ico{font-size:1.3rem;}
.topic-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--t50);}
.topic-btn.selected{
  border-color:var(--acc);background:var(--t50);
  color:var(--t700);box-shadow:0 0 0 3px rgba(26,144,139,.10);
}

/* Form fields */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.form-group label{
  font-size:.74rem;font-weight:700;
  color:var(--t700);letter-spacing:.05em;
}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--off);
  border:1.5px solid var(--bdr);
  border-radius:var(--r);
  padding:10px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.88rem;color:var(--txt);
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--fnt);}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(26,144,139,.10);
}
.form-group textarea{resize:vertical;min-height:130px;}
.form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a8480' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:34px;
}

/* Char counter */
.char-counter{
  font-size:.70rem;color:var(--fnt);
  text-align:right;margin-top:3px;
}

/* Privacy checkbox */
.privacy-check{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:20px;
}
.privacy-check input[type=checkbox]{
  width:16px;height:16px;flex-shrink:0;
  margin-top:2px;accent-color:var(--acc);cursor:pointer;
}
.privacy-check label{
  font-size:.80rem;color:var(--mut);line-height:1.55;cursor:pointer;
}
.privacy-check a{color:var(--acc);font-weight:600;}

/* Submit */
.form-submit{
  background:var(--acc);color:#fff;border:none;
  font-family:'DM Sans',sans-serif;
  font-size:.92rem;font-weight:700;
  padding:13px 32px;border-radius:26px;
  cursor:pointer;width:100%;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s,transform .14s;
}
.form-submit:hover{background:var(--t700);transform:translateY(-1px);}
.form-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* Loading spinner */
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:none;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Success state */
.form-success{
  display:none;text-align:center;padding:48px 24px;
}
.fs-icon{font-size:3.5rem;margin-bottom:16px;}
.fs-title{
  font-family:'Playfair Display',serif;
  font-size:1.55rem;color:var(--t800);margin-bottom:10px;
}
.fs-text{font-size:.90rem;color:var(--mut);line-height:1.70;margin-bottom:22px;}
.fs-back{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--t50);border:1.5px solid var(--bdrm);
  color:var(--mid);font-size:.82rem;font-weight:700;
  padding:9px 20px;border-radius:20px;cursor:pointer;border:none;
  font-family:'DM Sans',sans-serif;
  transition:background .18s;
}
.fs-back:hover{background:var(--t100);}

/* Form note */
.form-note{
  font-size:.74rem;color:var(--fnt);
  text-align:center;margin-top:10px;line-height:1.55;
}

/* ════════════════════════════════════════════
   TOPIC DETAIL BOXES (show/hide based on topic)
════════════════════════════════════════════ */
.topic-detail{
  display:none;
  background:var(--t50);
  border:1px solid var(--bdrm);
  border-radius:var(--r);
  padding:12px 16px;
  font-size:.83rem;color:var(--mid);
  line-height:1.60;margin-bottom:14px;
}
.topic-detail.show{display:block;}
.topic-detail strong{color:var(--t700);}

/* ════════════════════════════════════════════
   SECTION — ADDITIONAL WAYS TO REACH US
════════════════════════════════════════════ */
.reach-section{padding:72px 0 0;}
.rs-hdr{text-align:center;margin-bottom:48px;}
.rs-eye{
  display:inline-block;
  font-size:.62rem;font-weight:700;letter-spacing:.20em;
  text-transform:uppercase;color:var(--acc);margin-bottom:10px;
}
.rs-hdr h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:700;
  color:var(--t900);line-height:1.2;margin-bottom:12px;
}
.rs-hdr h2 em{font-style:italic;color:var(--t600);}
.rs-hdr p{font-size:.92rem;color:var(--mut);line-height:1.68;max-width:520px;margin:0 auto;}

.reach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;
}
.reach-card{
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:28px 24px;
  box-shadow:var(--sh);
  position:relative;overflow:hidden;
}
.reach-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:4px;
}
.rca::before{background:linear-gradient(90deg,var(--t700),var(--t400));}
.rcb::before{background:linear-gradient(90deg,#0d3d6e,#2e80d0);}
.rcc::before{background:linear-gradient(90deg,#177030,#28a052);}

.reach-card .rc-ico{
  font-size:2rem;margin-bottom:14px;display:block;
}
.reach-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.08rem;font-weight:700;
  color:var(--t800);margin-bottom:9px;
}
.reach-card p{
  font-size:.86rem;color:var(--mut);
  line-height:1.66;margin-bottom:16px;
}
.reach-card .rc-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:700;color:var(--acc);
}
.reach-card .rc-link:hover{text-decoration:underline;}

/* ════════════════════════════════════════════
   MAP / COVERAGE SECTION
════════════════════════════════════════════ */
.coverage-band{
  margin-top:72px;
  background:var(--t900);
  border-radius:var(--rxl);
  padding:44px 42px;
  display:flex;gap:0;align-items:stretch;
  overflow:hidden;
}
.cb-left{
  flex:1;padding-right:44px;
  border-right:1px solid rgba(255,255,255,.10);
}
.cb-left h3{
  font-family:'Playfair Display',serif;
  font-size:1.55rem;font-weight:700;color:#fff;
  margin-bottom:12px;
}
.cb-left p{font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.72;}
.cb-right{
  flex:2;padding-left:44px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;align-content:center;
}
.cb-market{
  display:flex;align-items:flex-start;gap:12px;
}
.cbm-flag{font-size:1.7rem;flex-shrink:0;}
.cbm-country{
  font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px;
}
.cbm-detail{font-size:.76rem;color:rgba(255,255,255,.54);line-height:1.55;}

/* ════════════════════════════════════════════
   FAQ TEASER
════════════════════════════════════════════ */
.faq-teaser{
  margin-top:72px;
  padding:52px 48px;
  background:linear-gradient(148deg,var(--t900) 0%,var(--t700) 55%,var(--t500) 100%);
  border-radius:var(--rxl);
  text-align:center;
  position:relative;overflow:hidden;
}
.faq-teaser::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 68% 56% at 50% -10%,rgba(255,255,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
.ft-inner{position:relative;z-index:1;max-width:620px;margin:0 auto;}
.ft-icon{font-size:2.8rem;margin-bottom:18px;display:block;}
.ft-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.55rem,3vw,2.2rem);font-weight:700;
  color:#fff;line-height:1.2;margin-bottom:14px;
}
.ft-title em{font-style:italic;color:var(--t200);}
.ft-text{font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.74;margin-bottom:26px;}
.ft-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.ft-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 24px;border-radius:24px;
  font-size:.86rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  transition:transform .18s,box-shadow .18s;
}
.ft-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.22);text-decoration:none;}
.ft-btn.primary{background:var(--t400);color:var(--t950);}
.ft-btn.primary:hover{background:var(--t300);color:var(--t950);}
.ft-btn.outline{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.28);}
.ft-btn.outline:hover{background:rgba(255,255,255,.22);color:#fff;}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.site-footer{
  position:relative;z-index:2;
  background:var(--t950);padding:32px 28px;text-align:center;
}
.sf-inner{max-width:1100px;margin:0 auto;}
.sf-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:14px;}
.sfl-mk{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex;align-items:center;justify-content:center;font-size:.86rem;
}
.sfl-wm{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:#fff;}
.sf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:13px;}
.sf-links a{font-size:.78rem;color:var(--t300);}
.sf-links a:hover{color:var(--t200);}
.sf-copy{font-size:.72rem;color:rgba(255,255,255,.34);line-height:1.65;}

.fab{
  position:fixed;bottom:28px;right:28px;
  width:50px;height:50px;border-radius:50%;
  background:var(--acc);color:#fff;border:none;
  font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:500;
  box-shadow:0 4px 20px rgba(26,144,139,.38);
  transition:transform .18s,background .18s;
}
.fab:hover{background:var(--t700);transform:translateY(-2px);}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:960px){
  .contact-main{grid-template-columns:1fr;}
  .info-panel{position:static;}
  .coverage-band{flex-direction:column;}
  .cb-left{padding-right:0;padding-bottom:28px;border-right:none;border-bottom:1px solid rgba(255,255,255,.10);}
  .cb-right{padding-left:0;padding-top:28px;}
}
@media (max-width:660px){
  .hero{padding:52px 18px 52px;}
  .page-body{padding:0 18px 80px;}
  .topic-grid{grid-template-columns:repeat(3,1fr);}
  .form-row{grid-template-columns:1fr;}
  .cb-right{grid-template-columns:1fr;}
  .contact-cards{grid-template-columns:1fr 1fr;}
  .sb-inner{flex-direction:column;}
  .sbi{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);}
  .sbi:last-child{border-bottom:none;}
  .faq-teaser{padding:38px 24px;}
  .topnav .nav-pill{display:none;}
}
@media (max-width:420px){
  .contact-cards{grid-template-columns:1fr;}
  .topic-grid{grid-template-columns:repeat(2,1fr);}
}
@media print{
  body::before,.topnav,.fab{display:none;}
  .hero{background:#053434 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .coverage-band,.faq-teaser{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}


/* ════════════════════════════════════════════════════════════
   PAGE: COOKIE POLICY
   File: cookie-policy.html
════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */


body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off);
  color: var(--txt);
  line-height: 1.72;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(26,144,139,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,144,139,.03) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none; z-index: 0;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--c700); }

/* ═══════════════════════════════════════════
   DOWNLOAD BANNER
═══════════════════════════════════════════ */
.dl-strip {
  position: relative; z-index: 200;
  background: var(--c800);
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 28px;
}
.dl-strip-txt { font-size: .78rem; color: rgba(255,255,255,.76); font-weight: 500; }
.dl-strip-txt strong { color: #fff; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--c400); color: var(--c950);
  font-size: .76rem; font-weight: 700;
  padding: 7px 18px; border-radius: 20px;
  text-decoration: none; letter-spacing: .03em;
  transition: background .18s, transform .14s; flex-shrink: 0;
}
.dl-btn:hover { background: var(--c300); transform: translateY(-1px); text-decoration: none; color: var(--c950); }

/* ═══════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════ */
.site-hdr {
  position: relative; z-index: 10;
  background: linear-gradient(152deg, var(--c950) 0%, var(--c800) 38%, var(--c600) 74%, var(--c300) 100%);
  padding: 58px 24px 50px;
  text-align: center;
  overflow: hidden;
}
.site-hdr::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 18% 52%, rgba(68,208,201,.14) 0%, transparent 58%),
    radial-gradient(ellipse 48% 62% at 82% 28%, rgba(31,143,138,.11) 0%, transparent 54%);
  pointer-events: none;
}
.site-hdr::after {
  content: ''; position: absolute;
  width: 480px; height: 480px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.hdr-inner {
  position: relative; z-index: 1;
  max-width: 740px; margin: 0 auto;
}

/* Logo */
.hdr-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; margin-bottom: 28px;
}
.logo-mk {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--c600), var(--c300));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 14px rgba(26,144,139,.42);
}
.logo-wm {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem; font-weight: 700;
  color: #fff; letter-spacing: .02em;
}

.doc-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .63rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c200); margin-bottom: 15px;
}
.doc-tag::before, .doc-tag::after {
  content: ''; height: 1px; width: 30px;
  background: var(--c300); opacity: .44;
}

.site-hdr h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 700; color: #fff;
  line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: 15px;
}
.site-hdr h1 em { font-style: italic; color: var(--c200); }

.hdr-desc {
  font-size: .9rem; color: rgba(255,255,255,.68);
  line-height: 1.68; max-width: 540px;
  margin: 0 auto 26px;
}
.hdr-pills {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 9px;
}
.hpill {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.17);
  color: rgba(255,255,255,.84);
  font-size: .72rem; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  letter-spacing: .03em;
}

/* ═══════════════════════════════════════════
   COOKIE-TYPE VISUAL LEGEND STRIP
═══════════════════════════════════════════ */
.cookie-legend {
  position: relative; z-index: 5;
  background: var(--c900);
  padding: 20px 28px;
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0;
  border-bottom: 3px solid var(--c600);
}
.cl-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 22px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.cl-item:last-child { border-right: none; }
.cl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.cl-dot.essential  { background: #27b2ab; }
.cl-dot.functional { background: #2ea8e0; }
.cl-dot.analytics  { background: #e07d2e; }
.cl-dot.marketing  { background: #9b3fc6; }
.cl-dot.thirdparty { background: #c63f5f; }
.cl-lbl {
  font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.78);
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════════ */
.page-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 250px 1fr;
  max-width: 1180px; margin: 0 auto;
  padding: 0 24px 88px;
  align-items: start;
}

/* ═══════════════════════════════════════════
   SIDEBAR TOC
═══════════════════════════════════════════ */
.toc-col {
  position: sticky; top: 26px;
  padding: 36px 36px 36px 0;
}
.toc-head {
  font-size: .60rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--fnt); margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--bdr);
}
.toc-list { list-style: none; }
.toc-list li { margin-bottom: 2px; }
.toc-list a {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .77rem; font-weight: 500;
  color: var(--mut);
  padding: 5px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  line-height: 1.42; text-decoration: none;
  transition: all .17s;
}
.toc-list a:hover { color: var(--acc); background: var(--c50); border-left-color: var(--c300); text-decoration: none; }
.toc-list a.active { color: var(--acc); background: var(--c50); border-left-color: var(--acc); font-weight: 600; }
.toc-n { font-size: .62rem; font-weight: 700; color: var(--c400); min-width: 20px; flex-shrink: 0; margin-top: 1px; }

/* Quick-actions in sidebar */
.toc-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.toc-act-btn {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 600;
  padding: 9px 13px; border-radius: var(--r);
  text-decoration: none; transition: all .17s;
  cursor: pointer; border: none; width: 100%; text-align: left;
}
.toc-act-btn.pref {
  background: var(--acc); color: #fff;
}
.toc-act-btn.pref:hover { background: var(--c700); }
.toc-act-btn.print {
  background: var(--c50); color: var(--mid);
  border: 1.5px solid var(--bdrm);
}
.toc-act-btn.print:hover { background: var(--c100); }

.toc-contact {
  margin-top: 18px; padding: 13px 14px;
  background: var(--c50); border: 1px solid var(--bdrm);
  border-radius: var(--r);
  font-size: .74rem; color: var(--mut); line-height: 1.6;
}
.toc-contact strong { display: block; color: var(--c700); margin-bottom: 3px; font-size: .78rem; }

/* ═══════════════════════════════════════════
   DOCUMENT BODY
═══════════════════════════════════════════ */
.doc-col {
  padding: 40px 0 0 44px;
  border-left: 1px solid var(--bdr);
}

/* Effective strip */
.eff-bar {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--c50);
  border: 1.5px solid var(--bdrm);
  border-radius: var(--r); padding: 14px 18px;
  margin-bottom: 40px;
  font-size: .84rem; color: var(--mid); line-height: 1.58;
}
.eff-bar .ei { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.eff-bar strong { color: var(--c700); }

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.cp-sec { margin-bottom: 52px; scroll-margin-top: 28px; }

.sec-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 7px;
}
.sec-tag::before {
  content: '';
  display: inline-block; width: 22px; height: 2px;
  background: var(--acc); border-radius: 1px;
}

.cp-sec h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem; font-weight: 700;
  color: var(--c900); line-height: 1.22;
  margin-bottom: 18px;
}

.cp-sec h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  color: var(--c700);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 26px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bdr);
}

.cp-sec p {
  font-size: .91rem; color: var(--mid);
  line-height: 1.80; margin-bottom: 14px;
}
.cp-sec p:last-child { margin-bottom: 0; }

/* Lists */
.cp-list { list-style: none; padding: 0; margin: 11px 0 14px; }
.cp-list li {
  position: relative; padding: 7px 0 7px 23px;
  font-size: .90rem; color: var(--mid); line-height: 1.66;
  border-bottom: 1px solid rgba(26,144,139,.07);
}
.cp-list li:last-child { border-bottom: none; }
.cp-list li::before {
  content: '▸'; position: absolute; left: 2px; top: 8px;
  color: var(--c400); font-size: .80rem;
}
.cp-list li strong { color: var(--c800); font-weight: 600; }

/* ═══════════════════════════════════════════
   COOKIE TYPE CARDS
═══════════════════════════════════════════ */
.cookie-cards { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }

.cookie-card {
  background: var(--wh);
  border: 1.5px solid var(--bdr);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--shsm);
  transition: box-shadow .18s;
}
.cookie-card:hover { box-shadow: var(--shmd); }

.cc-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
}
.cc-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.cc-head h3 {
  flex: 1; font-family: 'DM Sans', sans-serif;
  font-size: .90rem; font-weight: 700;
  letter-spacing: .03em; text-transform: none;
  border: none; padding: 0; margin: 0;
  color: var(--wh);
}
.cc-badge {
  font-size: .62rem; font-weight: 700;
  padding: 3px 10px; border-radius: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  white-space: nowrap; flex-shrink: 0;
}

/* Card head colour per type */
.cc-essential .cc-head  { background: linear-gradient(90deg, #0d5252, #27b2ab); }
.cc-functional .cc-head { background: linear-gradient(90deg, #0d3a5c, #2ea8e0); }
.cc-analytics .cc-head  { background: linear-gradient(90deg, #5c3010, #e07d2e); }
.cc-marketing .cc-head  { background: linear-gradient(90deg, #3a0e5c, #9b3fc6); }
.cc-thirdparty .cc-head { background: linear-gradient(90deg, #5c0e24, #c63f5f); }

/* Dot colours */
.cc-essential  .cc-dot { background: #27b2ab; }
.cc-functional .cc-dot { background: #2ea8e0; }
.cc-analytics  .cc-dot { background: #e07d2e; }
.cc-marketing  .cc-dot { background: #9b3fc6; }
.cc-thirdparty .cc-dot { background: #c63f5f; }

.cc-body { padding: 18px 20px; }
.cc-desc { font-size: .88rem; color: var(--mid); line-height: 1.68; margin-bottom: 14px; }

.cc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cc-meta-item {
  background: var(--c50);
  border: 1px solid var(--bdr);
  border-radius: 8px; padding: 10px 12px;
}
.cc-meta-item .cm-label {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--fnt); margin-bottom: 3px;
}
.cc-meta-item .cm-val {
  font-size: .82rem; color: var(--mid); font-weight: 500;
}

.cc-examples {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--bdr);
}
.cc-examples-lbl {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--fnt); margin-bottom: 7px;
}
.cc-ex-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-ex-chip {
  font-size: .70rem; font-weight: 600;
  padding: 3px 10px; border-radius: 12px;
  background: var(--c50); color: var(--mut);
  border: 1px solid var(--bdrm);
}

/* ═══════════════════════════════════════════
   CALLOUT BOXES
═══════════════════════════════════════════ */
.callout {
  border-radius: var(--r); padding: 16px 20px;
  margin: 18px 0; display: flex; gap: 13px;
  align-items: flex-start; font-size: .88rem; line-height: 1.68;
}
.callout .ci { font-size: 1.15rem; flex-shrink: 0; margin-top: 2px; }
.callout .cb { flex: 1; }
.callout .cb strong { display: block; margin-bottom: 4px; font-size: .90rem; }
.callout .cb p { font-size: .88rem; margin-bottom: 6px; }
.callout .cb p:last-child { margin-bottom: 0; }

.callout.teal    { background: var(--c50); border: 1.5px solid var(--bdrm); }
.callout.teal    .cb strong { color: var(--c700); }
.callout.teal    .cb { color: var(--mid); }

.callout.warn    { background: #fff9ec; border: 1.5px solid #e0b870; }
.callout.warn    .cb strong { color: #7a4a00; }
.callout.warn    .cb { color: #5a3600; }

.callout.info    { background: #eef5ff; border: 1.5px solid #93b4e0; }
.callout.info    .cb strong { color: #1d4f98; }
.callout.info    .cb { color: #1a3060; }

.callout.success { background: #edfbf4; border: 1.5px solid #7ac89a; }
.callout.success .cb strong { color: #1a5c34; }
.callout.success .cb { color: #154428; }

/* ═══════════════════════════════════════════
   DATA TABLE
═══════════════════════════════════════════ */
.tbl-wrap { overflow-x: auto; margin: 16px 0; }
.data-tbl {
  width: 100%; border-collapse: collapse;
  font-size: .85rem; min-width: 540px;
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shsm);
}
.data-tbl thead th {
  background: var(--c800); color: #fff;
  padding: 11px 14px; text-align: left;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.data-tbl tbody tr { border-bottom: 1px solid var(--c50); }
.data-tbl tbody tr:last-child { border-bottom: none; }
.data-tbl tbody tr:hover { background: var(--c50); }
.data-tbl tbody td {
  padding: 10px 14px;
  vertical-align: top; color: var(--mid); line-height: 1.55;
}
.data-tbl tbody td:first-child { font-weight: 600; color: var(--c700); white-space: nowrap; }

/* ═══════════════════════════════════════════
   PREFERENCE PANEL (interactive demo)
═══════════════════════════════════════════ */
.pref-panel {
  background: var(--wh);
  border: 1.5px solid var(--bdrm);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--shmd);
  margin: 24px 0;
}
.pref-panel-head {
  background: linear-gradient(90deg, var(--c800), var(--c600));
  padding: 16px 22px;
  display: flex; align-items: center; gap: 12px;
}
.pref-panel-head h3 {
  color: #fff; font-size: .96rem; font-weight: 700;
  border: none; padding: 0; margin: 0; flex: 1;
  text-transform: none; letter-spacing: 0; color: #fff;
}
.pref-panel-head .ph-tag {
  font-size: .64rem; font-weight: 700;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.90); padding: 3px 10px; border-radius: 10px;
  letter-spacing: .05em; text-transform: uppercase;
}
.pref-rows { padding: 6px 0; }
.pref-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--bdr);
}
.pref-row:last-child { border-bottom: none; }
.pref-info { flex: 1; min-width: 0; }
.pref-name {
  font-size: .88rem; font-weight: 700; color: var(--c800);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
}
.pref-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.pref-desc { font-size: .80rem; color: var(--mut); line-height: 1.55; }
.pref-toggle { flex-shrink: 0; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 46px; height: 26px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #d0dedd; border-radius: 26px;
  transition: background .22s;
}
.slider::before {
  content: ''; position: absolute;
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .22s;
}
.toggle input:checked + .slider { background: var(--acc); }
.toggle input:checked + .slider::before { transform: translateX(20px); }
.toggle input:disabled + .slider { cursor: not-allowed; opacity: .6; }

.pref-btn-row {
  display: flex; gap: 10px; padding: 14px 22px;
  background: var(--c50); border-top: 1px solid var(--bdr);
}
.pref-save {
  background: var(--acc); color: #fff; border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem; font-weight: 700;
  padding: 9px 22px; border-radius: 20px; cursor: pointer;
  transition: background .18s;
}
.pref-save:hover { background: var(--c700); }
.pref-reject {
  background: transparent; color: var(--mut);
  border: 1.5px solid var(--bdrm);
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem; font-weight: 600;
  padding: 9px 22px; border-radius: 20px; cursor: pointer;
  transition: all .18s;
}
.pref-reject:hover { background: var(--c50); color: var(--mid); }
.pref-status {
  margin-left: auto; font-size: .78rem;
  color: var(--mut); align-self: center;
  opacity: 0; transition: opacity .3s;
}
.pref-status.show { opacity: 1; }

/* ═══════════════════════════════════════════
   SECTION DIVIDER
═══════════════════════════════════════════ */
.sec-div {
  height: 1px; border: none;
  background: linear-gradient(to right, var(--bdrm), transparent);
  margin-bottom: 52px;
}

/* ═══════════════════════════════════════════
   CONTACT BLOCK
═══════════════════════════════════════════ */
.contact-blk {
  background: linear-gradient(135deg, var(--c900), var(--c700));
  border-radius: var(--rxl); padding: 28px 30px; color: #fff;
  margin-top: 20px;
}
.contact-blk h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem; color: #fff; margin-bottom: 10px;
}
.contact-blk p { color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.7; margin-bottom: 18px; }
.c-rows { display: flex; flex-direction: column; gap: 10px; }
.c-row { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255,255,255,.86); }
.c-lbl { min-width: 76px; font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.44); }
.c-row a { color: var(--c200); font-weight: 600; }
.c-row a:hover { color: var(--c100); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-ftr {
  position: relative; z-index: 1;
  background: var(--c950);
  padding: 28px 24px;
  text-align: center;
}
.site-ftr p { font-size: .77rem; color: rgba(255,255,255,.38); line-height: 1.75; }
.site-ftr a { color: var(--c300); }
.site-ftr strong { color: rgba(255,255,255,.60); }

/* FAB */
.fab {
  position: fixed; bottom: 28px; right: 28px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--acc); color: #fff;
  border: none; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 500;
  box-shadow: 0 4px 20px rgba(26,144,139,.38);
  transition: transform .18s, background .18s;
}
.fab:hover { background: var(--c700); transform: translateY(-2px); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .page-wrap { grid-template-columns: 1fr; }
  .toc-col { display: none; }
  .doc-col { padding: 30px 0 0; border-left: none; }
}
@media (max-width: 660px) {
  .cookie-legend { display: none; }
  .site-hdr { padding: 42px 16px 36px; }
  .page-wrap { padding: 0 16px 60px; }
  .cc-meta { grid-template-columns: 1fr 1fr; }
  .dl-strip { flex-direction: column; align-items: flex-start; }
}
@media print {
  body::before, .dl-strip, .toc-col, .fab, .cookie-legend,
  .pref-btn-row, .toc-actions { display: none; }
  .page-wrap { grid-template-columns: 1fr; padding: 0; }
  .doc-col { border-left: none; padding: 0; }
  .site-hdr { background: #042020 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cp-sec { break-inside: avoid; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: PRIVACY POLICY
   File: privacy-policy.html
════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────── */


/* ── Reset ──────────────────────────────────────────── */


body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.72;
  overflow-x: hidden;
}

/* ── Subtle grid background ─────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,144,139,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,144,139,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 10;
  background: linear-gradient(158deg, var(--teal-900) 0%, var(--teal-700) 52%, var(--teal-500) 100%);
  padding: 56px 24px 48px;
  text-align: center;
  overflow: hidden;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.header-inner { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; }

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 28px;
}
.logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-300));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(26,144,139,0.35);
}
.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.doc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-200);
  margin-bottom: 16px;
}
.doc-eyebrow::before, .doc-eyebrow::after {
  content: '';
  height: 1px;
  width: 28px;
  background: var(--teal-300);
  opacity: 0.5;
}

.site-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.site-header h1 em {
  font-style: italic;
  color: var(--teal-200);
}
.header-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 24px;
}
.header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.meta-chip {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.82);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

/* ── Layout ─────────────────────────────────────────── */
.page-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px 80px;
  align-items: start;
}

/* ── Sticky Sidebar TOC ──────────────────────────────── */
.toc-sidebar {
  position: sticky;
  top: 32px;
  padding: 32px 0 32px 0;
  padding-right: 36px;
}
.toc-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}
.toc-list { list-style: none; }
.toc-list li { margin-bottom: 2px; }
.toc-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all 0.18s;
  line-height: 1.4;
}
.toc-list a:hover {
  color: var(--accent);
  background: var(--teal-50);
  border-left-color: var(--teal-400);
}
.toc-list a.active {
  color: var(--accent);
  background: var(--teal-50);
  border-left-color: var(--accent);
  font-weight: 600;
}
.toc-num {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--teal-400);
  min-width: 18px;
  flex-shrink: 0;
}
.toc-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.toc-footer a { color: var(--accent); text-decoration: none; }
.toc-footer a:hover { text-decoration: underline; }

/* ── Main Content ────────────────────────────────────── */
.doc-content {
  padding: 40px 0 0 40px;
  border-left: 1px solid var(--border);
}

/* ── Effective Date Banner ───────────────────────────── */
.effective-banner {
  background: var(--teal-50);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
  font-size: 0.84rem;
  color: var(--text-mid);
}
.effective-banner strong { color: var(--teal-700); }
.effective-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ── Section ─────────────────────────────────────────── */
.policy-section {
  margin-bottom: 52px;
  scroll-margin-top: 32px;
}

.section-num-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.section-num-tag::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.policy-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--teal-900);
  margin-bottom: 16px;
  line-height: 1.25;
}

.policy-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 24px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.policy-section p {
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.78;
  margin-bottom: 14px;
}
.policy-section p:last-child { margin-bottom: 0; }

/* ── Lists ───────────────────────────────────────────── */
.policy-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 14px;
}
.policy-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 0.91rem;
  color: var(--text-mid);
  line-height: 1.65;
  border-bottom: 1px solid var(--teal-50);
}
.policy-list li:last-child { border-bottom: none; }
.policy-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--teal-400);
  font-size: 0.82rem;
}
.policy-list li strong { color: var(--teal-800); }

/* ── Info Cards ──────────────────────────────────────── */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
.info-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
}
.info-card-icon { font-size: 1.4rem; margin-bottom: 8px; }
.info-card h4 {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: 6px;
}
.info-card p {
  font-size: 0.80rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Highlight Callout ───────────────────────────────── */
.callout {
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.65;
}
.callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.callout-body strong { display: block; margin-bottom: 4px; font-size: 0.90rem; }

.callout.info {
  background: #eef6ff;
  border: 1.5px solid #93b8e0;
}
.callout.info .callout-body strong { color: #1d5fa8; }
.callout.info .callout-body { color: #1e3a5f; }

.callout.warning {
  background: #fff8ec;
  border: 1.5px solid #e0b070;
}
.callout.warning .callout-body strong { color: #8a4e00; }
.callout.warning .callout-body { color: #6a3c00; }

.callout.teal {
  background: var(--teal-50);
  border: 1.5px solid var(--border-md);
}
.callout.teal .callout-body strong { color: var(--teal-700); }
.callout.teal .callout-body { color: var(--text-mid); }

/* ── Data Table ──────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 16px 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table thead th {
  background: var(--teal-800);
  color: #fff;
  padding: 11px 14px;
  text-align: left;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.data-table tbody tr { border-bottom: 1px solid var(--teal-50); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--teal-50); }
.data-table tbody td {
  padding: 10px 14px;
  vertical-align: top;
  color: var(--text-mid);
  line-height: 1.55;
}
.data-table tbody td:first-child { font-weight: 600; color: var(--teal-700); }

/* ── Contact Box ─────────────────────────────────────── */
.contact-box {
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  border-radius: var(--radius-lg);
  padding: 28px 28px;
  color: #fff;
  margin-top: 20px;
}
.contact-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 12px;
  border: none;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.contact-box p {
  color: rgba(255,255,255,0.80);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
.contact-details { display: flex; flex-direction: column; gap: 8px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.88);
}
.contact-row a {
  color: var(--teal-200);
  text-decoration: none;
  font-weight: 600;
}
.contact-row a:hover { text-decoration: underline; }

/* ── Divider ─────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, var(--border-md), transparent);
  margin-bottom: 52px;
  border: none;
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--teal-900);
  padding: 28px 24px;
  text-align: center;
}
.site-footer p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}
.site-footer a { color: var(--teal-300); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer strong { color: rgba(255,255,255,0.70); }

/* ── Print button ────────────────────────────────────── */
.print-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(26,144,139,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s, background 0.18s;
  z-index: 500;
}
.print-btn:hover { background: var(--teal-700); transform: translateY(-2px); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 860px) {
  .page-wrap { grid-template-columns: 1fr; }
  .toc-sidebar { display: none; }
  .doc-content { padding: 32px 0 0 0; border-left: none; }
  .info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header { padding: 40px 16px 36px; }
  .page-wrap { padding: 0 16px 60px; }
  .data-table { font-size: 0.78rem; }
  .data-table thead th, .data-table tbody td { padding: 8px 10px; }
}

/* ── Print styles ────────────────────────────────────── */
@media print {
  body::before { display: none; }
  .site-header { background: #0d5252 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .toc-sidebar { display: none; }
  .page-wrap { grid-template-columns: 1fr; padding: 0; }
  .doc-content { border-left: none; padding: 0; }
  .print-btn { display: none; }
  .site-footer { background: #042424 !important; }
  .policy-section { break-inside: avoid; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: SUPPORT
   File: support.html
════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */


body {
  font-family:'DM Sans', sans-serif;
  background: var(--off);
  color: var(--txt);
  line-height:1.70;
  overflow-x:hidden;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: radial-gradient(circle, rgba(26,144,139,.09) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events:none; z-index:0;
}
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--t700); }

/* ═══════════════════════════════════════════
   TOPNAV
═══════════════════════════════════════════ */
.topnav {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--sh);
  padding:0 28px;
  display:flex; align-items:center;
  justify-content:space-between;
  height:62px;
}
.nav-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.nav-logo-mk {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--t700),var(--t300));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  box-shadow:0 2px 8px rgba(26,144,139,.32);
}
.nav-wordmark {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700;
  color:var(--t900); letter-spacing:.02em;
}
.nav-right {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.nav-chip {
  font-size:.64rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--t700);
  background:var(--t50);
  border:1px solid var(--bdrm);
  padding:4px 13px; border-radius:20px;
}
.nav-cta {
  font-size:.74rem; font-weight:700;
  background:var(--acc); color:#fff;
  padding:7px 18px; border-radius:20px;
  text-decoration:none; letter-spacing:.03em;
  transition:background .18s;
}
.nav-cta:hover { background:var(--t700); color:#fff; text-decoration:none; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position:relative; z-index:5;
  background:linear-gradient(150deg,var(--t950) 0%,var(--t800) 35%,var(--t600) 70%,var(--t400) 100%);
  padding:68px 28px 60px;
  text-align:center;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 68% 58% at 14% 54%,rgba(70,210,203,.15) 0%,transparent 58%),
    radial-gradient(ellipse 50% 65% at 86% 28%,rgba(30,146,144,.12) 0%,transparent 52%);
  pointer-events:none;
}
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.05); pointer-events:none;
}
.hr1 { width:540px; height:540px; top:50%; left:50%; transform:translate(-50%,-50%); }
.hr2 { width:820px; height:820px; top:50%; left:50%; transform:translate(-50%,-50%); }
.hero-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; }

.hero-logo {
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:28px;
}
.hl-mk {
  width:40px; height:40px; border-radius:11px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:0 3px 14px rgba(26,144,139,.44);
}
.hl-wm {
  font-family:'Playfair Display',serif;
  font-size:1.25rem; font-weight:700; color:#fff; letter-spacing:.02em;
}

.hero-eye {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.63rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--t200); margin-bottom:15px;
}
.hero-eye::before, .hero-eye::after {
  content:''; height:1px; width:30px;
  background:var(--t300); opacity:.44;
}

.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.1rem,5.5vw,3.2rem);
  font-weight:900; color:#fff;
  line-height:1.1; letter-spacing:-.015em; margin-bottom:15px;
}
.hero h1 em { font-style:italic; color:var(--t200); }
.hero-sub {
  font-size:.94rem; color:rgba(255,255,255,.70);
  line-height:1.70; max-width:560px; margin:0 auto 32px;
}
.hero-sub strong { color:rgba(255,255,255,.92); }

/* Quick-search bar */
.search-bar {
  display:flex; max-width:540px; margin:0 auto;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:30px;
  overflow:hidden;
}
.search-bar input {
  flex:1; background:transparent; border:none; outline:none;
  padding:13px 20px; font-family:'DM Sans',sans-serif;
  font-size:.90rem; color:#fff;
}
.search-bar input::placeholder { color:rgba(255,255,255,.50); }
.search-bar button {
  background:var(--t400); border:none; cursor:pointer;
  padding:0 22px;
  font-size:.86rem; font-weight:700; color:var(--t950);
  font-family:'DM Sans',sans-serif;
  transition:background .18s;
}
.search-bar button:hover { background:var(--t300); }

/* ═══════════════════════════════════════════
   QUICK CONTACT STRIP
═══════════════════════════════════════════ */
.quick-strip {
  position:relative; z-index:4;
  background:var(--t900);
  border-bottom:3px solid var(--t600);
}
.qs-inner {
  max-width:1100px; margin:0 auto;
  display:flex; flex-wrap:wrap;
  padding:0 28px;
}
.qs-item {
  flex:1; min-width:220px;
  display:flex; align-items:center; gap:14px;
  padding:20px 24px;
  border-right:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:background .18s;
}
.qs-item:last-child { border-right:none; }
.qs-item:hover { background:rgba(255,255,255,.05); text-decoration:none; }
.qs-ico {
  font-size:1.5rem; flex-shrink:0;
}
.qs-label {
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t300); margin-bottom:2px;
}
.qs-val {
  font-size:.88rem; font-weight:600; color:#fff;
}

/* ═══════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════ */
.page-body {
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto;
  padding:0 28px 100px;
}

/* ═══════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════ */
.section { padding:64px 0; }
.section.alt {
  background:var(--wh);
  margin:0 -28px; padding:64px 28px;
}
.sec-hdr { text-align:center; margin-bottom:48px; }
.sec-eye {
  display:inline-block;
  font-size:.62rem; font-weight:700; letter-spacing:.20em;
  text-transform:uppercase; color:var(--acc); margin-bottom:10px;
}
.sec-hdr h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700;
  color:var(--t900); line-height:1.2; margin-bottom:12px;
}
.sec-hdr h2 em { font-style:italic; color:var(--t600); }
.sec-hdr p { font-size:.93rem; color:var(--mut); line-height:1.68; max-width:540px; margin:0 auto; }

/* ═══════════════════════════════════════════
   TOPIC CATEGORY CARDS
═══════════════════════════════════════════ */
.topic-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.topic-card {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:26px 22px 22px;
  box-shadow:var(--sh);
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  text-decoration:none; color:var(--txt);
  display:block;
  position:relative; overflow:hidden;
}
.topic-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:4px;
  background:var(--cat-color, var(--acc));
  transition:height .2s;
}
.topic-card:hover { transform:translateY(-4px); box-shadow:var(--shm); text-decoration:none; color:var(--txt); }
.topic-card:hover::before { height:6px; }

.tc-ico { font-size:2rem; margin-bottom:13px; display:block; }
.tc-title {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-weight:700; color:var(--t800);
  margin-bottom:8px;
}
.tc-desc { font-size:.82rem; color:var(--mut); line-height:1.62; margin-bottom:14px; }
.tc-count {
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  color:var(--cat-color,var(--acc));
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════ */
.faq-container { max-width:820px; margin:0 auto; }

.faq-category { margin-bottom:38px; }
.faq-cat-label {
  display:flex; align-items:center; gap:10px;
  font-size:.64rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 0 12px;
  border-bottom:2px solid var(--bdr);
  margin-bottom:12px;
}
.faq-cat-dot {
  width:10px; height:10px; border-radius:50%;
}

.faq-item {
  border:1.5px solid var(--bdr);
  border-radius:var(--r);
  margin-bottom:8px;
  overflow:hidden;
  background:var(--wh);
  transition:box-shadow .18s;
}
.faq-item:hover { box-shadow:var(--sh); }
.faq-item.open { box-shadow:var(--shm); border-color:var(--bdrm); }

.faq-q {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  cursor:pointer;
  user-select:none;
}
.faq-q-icon { font-size:1rem; flex-shrink:0; }
.faq-q-text {
  flex:1;
  font-size:.92rem; font-weight:600; color:var(--t800);
  line-height:1.45;
}
.faq-chevron {
  font-size:.78rem; color:var(--mut);
  transition:transform .22s;
  flex-shrink:0;
}
.faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--acc); }
.faq-item.open .faq-q-text  { color:var(--acc); }

.faq-a {
  display:none;
  padding:0 20px 18px 50px;
  font-size:.88rem; color:var(--mid);
  line-height:1.78;
}
.faq-item.open .faq-a { display:block; }
.faq-a p { margin-bottom:10px; }
.faq-a p:last-child { margin-bottom:0; }
.faq-a ul { padding-left:18px; margin:8px 0; }
.faq-a ul li { margin-bottom:5px; color:var(--mid); }
.faq-a a { color:var(--acc); font-weight:600; }
.faq-a .ans-note {
  background:var(--t50); border:1px solid var(--bdrm);
  border-radius:8px; padding:10px 14px;
  font-size:.83rem; color:var(--mid);
  margin-top:10px;
}

/* ═══════════════════════════════════════════
   CONTACT FORM SECTION
═══════════════════════════════════════════ */
.contact-layout {
  display:grid; grid-template-columns:1fr 1.5fr; gap:36px;
  align-items:start;
}

/* Contact info panel */
.ci-panel {
  background:linear-gradient(145deg,var(--t800),var(--t600));
  border-radius:var(--rxl); padding:34px 28px;
  color:#fff; box-shadow:var(--shl);
  position:relative; overflow:hidden;
}
.ci-panel::after {
  content:''; position:absolute;
  bottom:-50px; right:-50px;
  width:180px; height:180px; border-radius:50%;
  border:36px solid rgba(255,255,255,.05);
}
.ci-panel h3 {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; font-weight:700; color:#fff;
  margin-bottom:10px;
}
.ci-panel .ci-sub {
  font-size:.86rem; color:rgba(255,255,255,.70);
  line-height:1.65; margin-bottom:24px;
}
.ci-rows { display:flex; flex-direction:column; gap:16px; }
.ci-row {
  display:flex; align-items:flex-start; gap:12px;
}
.ci-row .cr-ico {
  font-size:1.2rem; flex-shrink:0; margin-top:2px;
}
.ci-row .cr-lbl {
  font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.48);
  margin-bottom:2px;
}
.ci-row .cr-val {
  font-size:.88rem; font-weight:600; color:#fff;
}
.ci-row a { color:var(--t200); font-weight:600; }
.ci-row a:hover { color:var(--t100); }

.ci-divider {
  height:1px; background:rgba(255,255,255,.12);
  margin:20px 0;
}

.ci-panel .response-card {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:16px 18px;
  margin-top:20px;
}
.response-card .rc-title {
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.10em;
  color:var(--t200); margin-bottom:10px;
}
.rc-row {
  display:flex; justify-content:space-between;
  align-items:center;
  font-size:.82rem; color:rgba(255,255,255,.80);
  padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rc-row:last-child { border-bottom:none; }
.rc-row .rc-sla {
  font-weight:700; color:#fff;
}

/* Contact form */
.cf-wrap {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rxl);
  padding:34px 30px;
  box-shadow:var(--sh);
}
.cf-wrap h3 {
  font-family:'Playfair Display',serif;
  font-size:1.3rem; font-weight:700;
  color:var(--t900); margin-bottom:22px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group label {
  font-size:.74rem; font-weight:700;
  color:var(--t700); letter-spacing:.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--off);
  border:1.5px solid var(--bdr);
  border-radius:var(--r);
  padding:10px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.88rem; color:var(--txt);
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--fnt); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(26,144,139,.10);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a8480' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }

.form-submit {
  background:var(--acc); color:#fff; border:none;
  font-family:'DM Sans',sans-serif;
  font-size:.90rem; font-weight:700;
  padding:12px 32px; border-radius:24px;
  cursor:pointer; letter-spacing:.03em;
  transition:background .18s, transform .14s;
  width:100%;
}
.form-submit:hover { background:var(--t700); transform:translateY(-1px); }
.form-note {
  font-size:.76rem; color:var(--mut);
  text-align:center; margin-top:10px; line-height:1.55;
}

/* Success message */
.form-success {
  display:none; text-align:center; padding:28px 20px;
}
.form-success .fs-ico { font-size:3rem; margin-bottom:14px; }
.form-success h4 {
  font-family:'Playfair Display',serif;
  font-size:1.3rem; color:var(--t800); margin-bottom:8px;
}
.form-success p { font-size:.88rem; color:var(--mut); line-height:1.65; }

/* ═══════════════════════════════════════════
   STATUS BANNER (live status indicator)
═══════════════════════════════════════════ */
.status-banner {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:18px 24px;
  display:flex; align-items:center; gap:16px;
  box-shadow:var(--sh);
  margin-bottom:32px;
}
.sb-dot {
  width:14px; height:14px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
  flex-shrink:0;
  animation:pulse 2.4s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 4px rgba(34,197,94,.18); }
  50%      { box-shadow:0 0 0 8px rgba(34,197,94,.06); }
}
.sb-text { flex:1; }
.sb-title { font-size:.88rem; font-weight:700; color:var(--t800); }
.sb-sub   { font-size:.78rem; color:var(--mut); }
.sb-meta  { font-size:.72rem; color:var(--fnt); white-space:nowrap; }

/* ═══════════════════════════════════════════
   RESOURCES GRID
═══════════════════════════════════════════ */
.resources-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.res-card {
  background:var(--wh);
  border:1.5px solid var(--bdr);
  border-radius:var(--rl);
  padding:22px 20px;
  box-shadow:var(--sh);
  text-decoration:none; color:var(--txt);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .18s, box-shadow .18s;
}
.res-card:hover { transform:translateY(-3px); box-shadow:var(--shm); text-decoration:none; color:var(--txt); }
.rc-ico-wrap {
  width:44px; height:44px; border-radius:10px;
  background:var(--t50); border:1.5px solid var(--bdrm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.rc-title { font-size:.90rem; font-weight:700; color:var(--t800); }
.rc-desc  { font-size:.80rem; color:var(--mut); line-height:1.60; flex:1; }
.rc-arrow { font-size:.78rem; font-weight:700; color:var(--acc); margin-top:2px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
  position:relative; z-index:2;
  background:var(--t950);
  padding:32px 28px; text-align:center;
}
.sf-inner { max-width:1100px; margin:0 auto; }
.sf-logo {
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; margin-bottom:14px;
}
.sfl-mk {
  width:30px; height:30px; border-radius:7px;
  background:linear-gradient(135deg,var(--t600),var(--t300));
  display:flex; align-items:center; justify-content:center;
  font-size:.86rem;
}
.sfl-wm { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:#fff; }
.sf-links {
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  margin-bottom:13px;
}
.sf-links a { font-size:.79rem; color:var(--t300); }
.sf-links a:hover { color:var(--t200); }
.sf-copy { font-size:.73rem; color:rgba(255,255,255,.34); line-height:1.65; }

/* FAB */
.fab {
  position:fixed; bottom:28px; right:28px;
  width:50px; height:50px; border-radius:50%;
  background:var(--acc); color:#fff;
  border:none; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:500;
  box-shadow:0 4px 20px rgba(26,144,139,.38);
  transition:transform .18s, background .18s;
}
.fab:hover { background:var(--t700); transform:translateY(-2px); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:960px) {
  .topic-grid { grid-template-columns:1fr 1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:660px) {
  .hero { padding:50px 18px 44px; }
  .page-body { padding:0 18px 80px; }
  .topic-grid { grid-template-columns:1fr; }
  .qs-inner { flex-direction:column; }
  .qs-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .qs-item:last-child { border-bottom:none; }
  .topnav { padding:0 16px; }
  .nav-right .nav-chip { display:none; }
}

@media print {
  body::before, .topnav, .fab, .search-bar { display:none; }
  .hero { background:#053434 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .section.alt { background:#fafafa !important; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: TERMS OF SERVICE
   File: terms-of-service.html
════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────── */


/* ── Reset & Base ──────────────────────────────────── */


body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.72;
  overflow-x: hidden;
}

/* subtle grid texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(26,144,139,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,144,139,.032) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none; z-index: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--teal-700); }

/* ── Download Banner ───────────────────────────────── */
.download-bar {
  position: relative; z-index: 200;
  background: var(--teal-800);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.dl-bar-text {
  font-size: 0.78rem;
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
.dl-bar-text strong { color: #fff; }
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--teal-400);
  color: var(--teal-950);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: .03em;
  transition: background .18s, transform .14s;
  flex-shrink: 0;
}
.dl-btn:hover { background: var(--teal-300); transform: translateY(-1px); text-decoration: none; color: var(--teal-950); }
.dl-btn-icon { font-size: 0.9rem; }

/* ── Header ────────────────────────────────────────── */
.site-header {
  position: relative; z-index: 10;
  background: linear-gradient(155deg, var(--teal-950) 0%, var(--teal-800) 40%, var(--teal-600) 78%, var(--teal-400) 100%);
  padding: 60px 24px 52px;
  text-align: center;
  overflow: hidden;
}
.site-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 15% 50%, rgba(67,207,200,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 65% at 85% 25%, rgba(31,144,139,.12) 0%, transparent 55%);
  pointer-events: none;
}
/* Decorative ring */
.site-header::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.05);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.header-inner {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 30px;
}
.logo-mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-300));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 3px 12px rgba(26,144,139,.40);
}
.logo-wordmark {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 700;
  color: #fff; letter-spacing: .02em;
}

.doc-type-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal-200); margin-bottom: 16px;
}
.doc-type-tag::before, .doc-type-tag::after {
  content: ''; height: 1px; width: 32px;
  background: var(--teal-300); opacity: .45;
}

.site-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  font-weight: 700; color: #fff;
  line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: 16px;
}
.site-header h1 em { font-style: italic; color: var(--teal-200); }

.header-desc {
  font-size: 0.9rem; color: rgba(255,255,255,.68);
  line-height: 1.7; max-width: 560px;
  margin: 0 auto 28px;
}

.header-pills {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px;
}
.h-pill {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.17);
  color: rgba(255,255,255,.84);
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  letter-spacing: .03em;
}

/* ── Page Layout ───────────────────────────────────── */
.page-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 256px 1fr;
  max-width: 1180px; margin: 0 auto;
  padding: 0 24px 88px;
  align-items: start;
}

/* ── TOC Sidebar ───────────────────────────────────── */
.toc-aside {
  position: sticky; top: 28px;
  padding: 36px 36px 36px 0;
}

.toc-heading {
  font-size: 0.60rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}

.toc-nav { list-style: none; }
.toc-nav li { margin-bottom: 2px; }
.toc-nav a {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.77rem; font-weight: 500;
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  line-height: 1.45;
  text-decoration: none;
  transition: all .17s;
}
.toc-nav a:hover {
  color: var(--accent);
  background: var(--teal-50);
  border-left-color: var(--teal-300);
  text-decoration: none;
}
.toc-nav a.active {
  color: var(--accent);
  background: var(--teal-50);
  border-left-color: var(--accent);
  font-weight: 600;
}
.toc-n {
  font-size: 0.62rem; font-weight: 700;
  color: var(--teal-400);
  min-width: 20px; flex-shrink: 0;
  margin-top: 1px;
}

.toc-contact {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--teal-50);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  font-size: 0.74rem; color: var(--text-muted);
  line-height: 1.65;
}
.toc-contact strong { display: block; color: var(--teal-700); margin-bottom: 4px; }
.toc-contact a { color: var(--accent); font-weight: 600; }

/* ── Document Body ─────────────────────────────────── */
.doc-body {
  padding: 40px 0 0 44px;
  border-left: 1px solid var(--border);
}

/* Effective date strip */
.eff-strip {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--teal-50);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 40px;
  font-size: 0.84rem; color: var(--text-mid);
  line-height: 1.6;
}
.eff-strip .eff-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.eff-strip strong { color: var(--teal-700); }

/* ── Section ───────────────────────────────────────── */
.tos-section {
  margin-bottom: 54px;
  scroll-margin-top: 30px;
}

.sec-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.sec-label::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--accent); border-radius: 1px;
}

.tos-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.48rem; font-weight: 700;
  color: var(--teal-900);
  margin-bottom: 18px; line-height: 1.22;
}

.tos-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem; font-weight: 700;
  color: var(--teal-700);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 26px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.tos-section p {
  font-size: 0.91rem; color: var(--text-mid);
  line-height: 1.80; margin-bottom: 14px;
}
.tos-section p:last-child { margin-bottom: 0; }

/* ── Lists ─────────────────────────────────────────── */
.tos-list {
  list-style: none; padding: 0;
  margin: 12px 0 16px;
}
.tos-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 0.90rem; color: var(--text-mid);
  line-height: 1.68;
  border-bottom: 1px solid rgba(26,144,139,.07);
}
.tos-list li:last-child { border-bottom: none; }
.tos-list li::before {
  content: '▸';
  position: absolute; left: 2px; top: 8px;
  color: var(--teal-400); font-size: 0.80rem;
}
.tos-list li strong { color: var(--teal-800); font-weight: 600; }

/* Numbered list */
.tos-ol {
  list-style: none; padding: 0; counter-reset: tos-count;
  margin: 12px 0 16px;
}
.tos-ol li {
  position: relative;
  padding: 7px 0 7px 34px;
  font-size: 0.90rem; color: var(--text-mid);
  line-height: 1.68; counter-increment: tos-count;
  border-bottom: 1px solid rgba(26,144,139,.07);
}
.tos-ol li:last-child { border-bottom: none; }
.tos-ol li::before {
  content: counter(tos-count) '.';
  position: absolute; left: 0; top: 8px;
  color: var(--accent); font-weight: 700; font-size: 0.78rem;
  min-width: 26px;
}

/* ── Callout Boxes ─────────────────────────────────── */
.callout {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 0.88rem; line-height: 1.68;
}
.callout-ico { font-size: 1.15rem; flex-shrink: 0; margin-top: 2px; }
.callout-body { flex: 1; }
.callout-body strong {
  display: block; margin-bottom: 4px;
  font-size: 0.90rem;
}
.callout-body p { margin-bottom: 6px; font-size: 0.88rem; color: inherit; }
.callout-body p:last-child { margin-bottom: 0; }

.callout.danger  { background: #fff2f0; border: 1.5px solid #f09080; }
.callout.danger  .callout-body strong { color: #9a2010; }
.callout.danger  .callout-body { color: #7a2010; }

.callout.warn    { background: #fff9ec; border: 1.5px solid #e0b870; }
.callout.warn    .callout-body strong { color: #7a4a00; }
.callout.warn    .callout-body { color: #5a3600; }

.callout.info    { background: #eef5ff; border: 1.5px solid #93b4e0; }
.callout.info    .callout-body strong { color: #1d4f98; }
.callout.info    .callout-body { color: #1a3060; }

.callout.teal    { background: var(--teal-50); border: 1.5px solid var(--border-md); }
.callout.teal    .callout-body strong { color: var(--teal-700); }
.callout.teal    .callout-body { color: var(--text-mid); }

.callout.success { background: #edfbf4; border: 1.5px solid #7ac89a; }
.callout.success .callout-body strong { color: #1a5c34; }
.callout.success .callout-body { color: #154428; }

/* ── Grid of Feature Cards ─────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin: 18px 0;
}
.feat-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-xs);
}
.feat-card-ico { font-size: 1.5rem; margin-bottom: 9px; }
.feat-card h4 {
  font-size: 0.83rem; font-weight: 700;
  color: var(--teal-800); margin-bottom: 6px;
}
.feat-card p {
  font-size: 0.79rem; color: var(--text-muted);
  line-height: 1.6; margin: 0;
}

/* ── Two-Column Comparison ─────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 18px 0;
}
.two-col-box {
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1.5px solid;
}
.two-col-box.allowed {
  background: #edfbf4; border-color: #7ac89a;
}
.two-col-box.allowed h4 { color: #1a5c34; }
.two-col-box.disallowed {
  background: #fff2f0; border-color: #f09080;
}
.two-col-box.disallowed h4 { color: #9a2010; }
.two-col-box h4 {
  font-size: 0.80rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.two-col-box ul {
  list-style: none; padding: 0;
}
.two-col-box ul li {
  font-size: 0.82rem; color: var(--text-mid);
  padding: 4px 0 4px 18px;
  position: relative; line-height: 1.55;
}
.two-col-box ul li::before {
  position: absolute; left: 0; top: 5px;
  font-size: 0.76rem;
}
.two-col-box.allowed ul li::before { content: '✓'; color: #2a8c50; }
.two-col-box.disallowed ul li::before { content: '✕'; color: #c84030; }

/* ── Data Table ────────────────────────────────────── */
.data-tbl-wrap { overflow-x: auto; margin: 16px 0; }
.data-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 0.85rem;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-xs);
  min-width: 520px;
}
.data-tbl thead th {
  background: var(--teal-800); color: #fff;
  padding: 11px 14px; text-align: left;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.data-tbl tbody tr { border-bottom: 1px solid var(--teal-50); }
.data-tbl tbody tr:last-child { border-bottom: none; }
.data-tbl tbody tr:hover { background: var(--teal-50); }
.data-tbl tbody td {
  padding: 10px 14px;
  vertical-align: top;
  color: var(--text-mid); line-height: 1.55;
}
.data-tbl tbody td:first-child {
  font-weight: 600; color: var(--teal-700);
  white-space: nowrap;
}

/* ── Section Divider ───────────────────────────────── */
.sec-divider {
  height: 1px; border: none;
  background: linear-gradient(to right, var(--border-md), transparent);
  margin-bottom: 54px;
}

/* ── Contact Block ─────────────────────────────────── */
.contact-block {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  border-radius: var(--radius-xl);
  padding: 30px 30px;
  color: #fff; margin-top: 22px;
}
.contact-block h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; color: #fff;
  margin-bottom: 10px;
}
.contact-block p {
  color: rgba(255,255,255,.72);
  font-size: 0.87rem; line-height: 1.7;
  margin-bottom: 18px;
}
.contact-rows { display: flex; flex-direction: column; gap: 10px; }
.c-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.86rem; color: rgba(255,255,255,.86);
}
.c-row a {
  color: var(--teal-200); font-weight: 600;
}
.c-row a:hover { color: var(--teal-100); }
.c-row .c-label {
  min-width: 72px; font-size: 0.70rem;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.45);
}

/* ── Footer ────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 1;
  background: var(--teal-950);
  padding: 30px 24px;
  text-align: center;
}
.site-footer p {
  font-size: 0.77rem;
  color: rgba(255,255,255,.38);
  line-height: 1.75;
}
.site-footer a { color: var(--teal-300); }
.site-footer strong { color: rgba(255,255,255,.62); }

/* ── FAB Print Button ──────────────────────────────── */
.fab-print {
  position: fixed; bottom: 28px; right: 28px;
  width: 50px; height: 50px;
  background: var(--accent);
  color: #fff; border: none; border-radius: 50%;
  font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(26,144,139,.38);
  z-index: 500;
  transition: transform .18s, background .18s;
}
.fab-print:hover { background: var(--teal-600); transform: translateY(-2px); }
.fab-print title { display: none; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .page-wrap { grid-template-columns: 1fr; }
  .toc-aside { display: none; }
  .doc-body { padding: 32px 0 0; border-left: none; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { padding: 44px 16px 38px; }
  .page-wrap { padding: 0 16px 60px; }
  .card-grid { grid-template-columns: 1fr; }
  .download-bar { flex-direction: column; align-items: flex-start; }
}
@media print {
  body::before, .download-bar, .toc-aside, .fab-print { display: none; }
  .page-wrap { grid-template-columns: 1fr; padding: 0; }
  .doc-body { border-left: none; padding: 0; }
  .site-header { background: #063636 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tos-section { break-inside: avoid; }
  .contact-block { background: #0d5252 !important; }
}