@charset "UTF-8";
/* Copper Communications — design system
   Shares tokens and component vocabulary with stratoswitch.com.
   Divergence: copper is the primary accent here, navy the ground.
   Contrast rule (measured, WCAG 2.1 AA):
     --copper #b8703a  → 3.88:1 on white. Display / large / UI only (>=24px, or >=18.66px bold).
     --copper-dk #95592c → 5.61:1 on white. Required for any body-size accent text or link.
     --copper-dk must never sit on navy (2.72:1 — fails).
*/

/* ---------- fonts ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-variable.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/dm-sans-variable.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/dm-sans-italic-300.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-400.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-500.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root{
  --navy:#002840;
  --navy-2:#013a5a;
  --blue:#203078;
  --copper:#b8703a;
  --copper-dk:#95592c;
  --copper-lt:#d59a6f;
  --green:#287860;
  --green-dk:#1e6350;
  --light:#efe9dd;
  --offwhite:#f7f5ef;
  --white:#fff;
  --muted:#7d7566;
  --text:#002840;
  --text-mid:#4a5a68;
  --border:rgba(0,40,64,.12);
  --radius:12px;
  --radius-lg:24px;
  --shadow:0 4px 24px rgba(0,40,64,.09);
  --shadow-lg:0 16px 64px rgba(0,40,64,.15);
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --maxw:1180px;
  --gutter:24px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--copper-dk);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--copper)}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.15;margin:0 0 .5em;color:var(--navy)}
h1{font-size:clamp(2.1rem,5vw,3rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.1rem)}
h3{font-size:1.2rem}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0}

/* ---------- a11y ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--radius) 0;font-weight:500;
}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px;border-radius:3px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:84px 0}
.section-sm{padding:52px 0}
.section-alt{background:var(--offwhite)}
.section-dark{background:var(--navy);color:rgba(255,255,255,.82)}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark a{color:var(--copper-lt)}
.section-header{max-width:720px;margin-bottom:44px}
.section-header--center{margin-left:auto;margin-right:auto;text-align:center}
.section-header p{color:var(--text-mid);font-size:1.05rem;margin-bottom:0}
.section-dark .section-header p{color:rgba(255,255,255,.75)}

.label{
  font-family:'DM Mono',monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper-dk);
  display:block;margin-bottom:.75rem;
}
.section-dark .label{color:var(--copper-lt)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2-1{display:grid;grid-template-columns:1.35fr .9fr;gap:48px;align-items:start}

/* Grid items default to min-width:auto, which floors an fr track at the item's
   min-content width. On narrow screens that made a 1fr track wider than its
   own container and pushed a horizontal scrollbar onto the page. */
.grid-2 > *,
.grid-3 > *,
.grid-2-1 > *,
.hero-grid > *,
.footer-grid > *,
.contact-primary > *,
.cta-box > *{min-width:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:500;
  padding:13px 26px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:all var(--transition);text-align:center;
}
.btn-primary{background:var(--copper-dk);color:#fff;box-shadow:0 4px 16px rgba(149,89,44,.28)}
.btn-primary:hover{background:#7d4a25;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(149,89,44,.36)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--border)}
.btn-outline:hover{border-color:var(--copper-dk);color:var(--copper-dk)}
/* Any dark surface — including .hero and .cta-box, whose gradients are
   background-IMAGE and so are invisible to a background-color check. */
.section-dark .btn-outline,
.hero .btn-outline,
.cta-box .btn-outline{color:#fff;border-color:rgba(255,255,255,.35)}
.section-dark .btn-outline:hover,
.hero .btn-outline:hover,
.cta-box .btn-outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.btn-sm{padding:9px 18px;font-size:.9rem}

/* ---------- topbar ---------- */
.topbar{
  background:var(--navy);color:rgba(255,255,255,.8);
  font-size:.85rem;padding:8px 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-loc{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.9)}
.topbar a:hover{color:var(--copper-lt)}
.topbar-badge{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--copper-lt);font-family:'DM Mono',monospace;font-size:.78rem;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.site-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-logo img{height:54px;width:auto}
.site-logo-text{display:flex;flex-direction:column;line-height:1.1}
.site-logo-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.22rem;color:var(--navy)}
.site-logo-tag{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.main-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-link{
  font-size:.96rem;font-weight:500;color:var(--text-mid);
  padding:6px 0;position:relative;
}
.nav-link:hover{color:var(--navy)}
.nav-link.active{color:var(--navy)}
.nav-link.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--copper);border-radius:2px;
}
.header-ctas{display:flex;align-items:center;gap:12px}

.hamburger{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;transition:var(--transition)}

/* ---------- mobile menu ---------- */
/* Closed state is opacity + visibility, NOT translateX(100%): a fixed element
   parked off-screen to the right still counts toward the page scroll width and
   cannot be clipped away by overflow-x on html, which produced a horizontal
   scrollbar on phones. visibility:hidden also keeps its links out of the tab
   order while closed. The motion lives on the inner nav, which only moves
   vertically and so can never overflow sideways. */
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--white);
  transform:translateX(100%);transition:transform var(--transition);
  display:flex;flex-direction:column;padding:20px var(--gutter);overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.mobile-close{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--navy);padding:4px 10px}
.mobile-nav-links{display:flex;flex-direction:column;gap:4px}
.mobile-nav-links a{
  font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:500;
  color:var(--navy);padding:14px 0;border-bottom:1px solid var(--border);
}
.mobile-ctas{display:flex;flex-direction:column;gap:12px;margin-top:28px}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,#0c4a63 100%);
  color:#fff;padding:96px 0 104px;position:relative;overflow:hidden;
}
.hero::after{
  content:'';position:absolute;right:-180px;top:-120px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(184,112,58,.28) 0%,transparent 68%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--copper-lt)}
.hero-sub{font-size:1.14rem;color:rgba(255,255,255,.8);max-width:52ch;margin-bottom:2rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.badge-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);padding:6px 15px;border-radius:999px;
  font-family:'DM Mono',monospace;font-size:.76rem;letter-spacing:.06em;
  margin-bottom:1.6rem;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--copper-lt);flex-shrink:0}

/* Darkened rather than lightened: the card sits over the pale end of the hero
   gradient, where the copper stat values only reached 3.63:1. This overlay
   takes the local background to ~rgb(14,58,81) and the copper to 4.97:1,
   which keeps the brand colour instead of washing it out to pass. */
.hero-card{
  background:rgba(0,20,35,.35);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:30px;backdrop-filter:blur(8px);
}
.hero-card h2{color:#fff;font-size:1.05rem;margin-bottom:18px}
.hero-stat{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hero-stat:last-child{border-bottom:0}
.hero-stat-k{color:rgba(255,255,255,.7);font-size:.92rem}
.hero-stat-v{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--copper-lt);font-size:1.05rem}
/* Links in the hero use white, not copper-lt: the gradient's lightest stop
   (#0c4a63) puts copper-lt at 3.99:1, under the 4.5 needed at this size.
   White is 9.65:1 there, and the underline marks it as a link. */
.hero a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero a:not(.btn):hover{color:var(--copper-lt)}
/* Inside a stat value the partner name reads as part of the value itself, so
   it takes the surrounding copper and drops the underline. */
.hero .hero-stat-v a{color:inherit;text-decoration:none}
.hero .hero-stat-v a:hover{color:#fff}
.topbar-badge a{color:var(--copper-lt);text-decoration:underline;text-underline-offset:2px}
.topbar-badge a:hover{color:#fff}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--navy);color:#fff;padding:62px 0 56px}
.page-hero h1{color:#fff;margin-bottom:.3em}
.page-hero p{color:rgba(255,255,255,.76);max-width:62ch;margin-bottom:0}
.breadcrumb{font-size:.84rem;color:rgba(255,255,255,.6);margin-bottom:1rem}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:var(--copper-lt)}

/* ---------- trust bar ---------- */
.trust-bar{background:var(--offwhite);border-bottom:1px solid var(--border);padding:34px 0}
.trust-label{
  text-align:center;font-family:'DM Mono',monospace;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.trust-logos{
  display:flex;align-items:center;justify-content:center;
  gap:42px;flex-wrap:wrap;
}
.trust-logo{
  height:30px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:all var(--transition);
}
.trust-logo:hover{filter:grayscale(0);opacity:1}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px;transition:all var(--transition);height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(184,112,58,.3)}
.card h3{margin-bottom:.5em}
.card p{color:var(--text-mid);font-size:.97rem;margin-bottom:0}
.card-icon{
  width:46px;height:46px;border-radius:var(--radius);
  background:rgba(184,112,58,.1);color:var(--copper-dk);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9}
.card-bullets{list-style:none;padding:0;margin:14px 0 0}
.card-bullets li{
  position:relative;padding-left:22px;font-size:.94rem;
  color:var(--text-mid);margin-bottom:.45em;
}
.card-bullets li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--copper);
}
.section-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.section-dark .card p{color:rgba(255,255,255,.72)}
.section-dark .card-bullets li{color:rgba(255,255,255,.72)}
.section-dark .card-icon{background:rgba(184,112,58,.2);color:var(--copper-lt)}
.section-dark .card:hover{border-color:rgba(184,112,58,.45)}

.card-media{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  background:var(--offwhite);
}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.card-media:hover img{transform:scale(1.04)}
.card-media-body{padding:24px}
.card-media-body h3{margin-bottom:.4em}
.card-media-body p{color:var(--text-mid);font-size:.95rem;margin-bottom:0}

/* ---------- info cards (contact) ---------- */
.info-card{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--white);margin-bottom:14px;
}
.info-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:rgba(0,40,64,.06);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.info-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
.info-label{
  font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.info-value{font-weight:500;color:var(--navy);font-size:1.02rem;line-height:1.45}
.info-value a{color:var(--copper-dk)}
.info-sub{font-size:.88rem;color:var(--text-mid);margin-top:2px}

/* ---------- contact primary (phone / email) ---------- */
.contact-primary{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-big{
  display:flex;align-items:center;gap:20px;
  padding:30px 32px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--offwhite);color:var(--navy);transition:all var(--transition);
}
.contact-big:hover{
  background:var(--white);border-color:rgba(184,112,58,.45);
  box-shadow:var(--shadow-lg);transform:translateY(-3px);color:var(--navy);
}
.contact-big-icon{
  width:56px;height:56px;border-radius:var(--radius);flex-shrink:0;
  background:rgba(184,112,58,.12);color:var(--copper-dk);
  display:flex;align-items:center;justify-content:center;
}
.contact-big-icon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8}
.contact-big-label{
  display:block;font-family:'DM Mono',monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.contact-big-value{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:1.35rem;color:var(--navy);line-height:1.25;word-break:break-word;
}

/* ---------- feature list ---------- */
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{
  position:relative;padding-left:32px;margin-bottom:1em;color:var(--text-mid);
}
.feature-list li::before{
  content:'';position:absolute;left:0;top:.35em;width:18px;height:18px;
  border-radius:50%;background:rgba(184,112,58,.15);
}
.feature-list li::after{
  content:'';position:absolute;left:6px;top:.62em;width:5px;height:9px;
  border:solid var(--copper-dk);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.feature-list strong{color:var(--navy);font-weight:600}
.section-dark .feature-list li{color:rgba(255,255,255,.75)}
.section-dark .feature-list strong{color:#fff}
.section-dark .feature-list li::after{border-color:var(--copper-lt)}

/* ---------- cta box ---------- */
.cta-box{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:52px 48px;
  display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-box::after{
  content:'';position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(184,112,58,.3) 0%,transparent 70%);
}
.cta-box > *{position:relative;z-index:1}
.cta-box h2{color:#fff;margin-bottom:.35em}
.cta-box p{color:rgba(255,255,255,.78);margin-bottom:0;max-width:56ch}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- forms ---------- */
.form-box{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:.88rem;font-weight:500;color:var(--navy);margin-bottom:6px;
}
.field .req{color:var(--copper-dk)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:1rem;color:var(--text);
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--copper-dk);box-shadow:0 0 0 3px rgba(149,89,44,.13);
}
.field textarea{resize:vertical;min-height:130px}
.field-hint{font-size:.82rem;color:var(--muted);margin-top:5px}

.alert{padding:15px 18px;border-radius:var(--radius);margin-bottom:22px;font-size:.95rem}
.alert-ok{background:rgba(40,120,96,.1);border:1px solid rgba(40,120,96,.3);color:var(--green-dk)}
.alert-err{background:rgba(176,42,42,.08);border:1px solid rgba(176,42,42,.28);color:#8c2020}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.68);padding:64px 0 0;font-size:.94rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px}
.footer-brand .site-logo-name{color:#fff}
.footer-brand img{height:44px;width:auto;margin-bottom:16px;background:#fff;padding:6px 10px;border-radius:8px}
.footer-brand p{color:rgba(255,255,255,.62);font-size:.92rem;max-width:34ch}
.footer-col h3{color:#fff;font-size:.82rem;font-family:'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.6em}
.footer-links a{color:rgba(255,255,255,.68)}
.footer-links a:hover{color:var(--copper-lt)}
.footer-contact-line{margin-bottom:.7em;line-height:1.5}
.footer-contact-line a{color:rgba(255,255,255,.85)}
.footer-contact-line a:hover{color:var(--copper-lt)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.5);
}
.footer-bottom-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom-links a{color:rgba(255,255,255,.6)}
.footer-partner{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'DM Mono',monospace;font-size:.78rem;color:var(--copper-lt);
}

/* ---------- long-form prose (privacy policy etc.) ---------- */
.prose{max-width:74ch;color:var(--text-mid)}
.prose h2{
  font-size:1.3rem;margin-top:2.4em;margin-bottom:.6em;
  padding-top:1.2em;border-top:1px solid var(--border);
}
.prose h2:first-of-type{border-top:0;padding-top:0;margin-top:1.6em}
.prose p{margin-bottom:1.15em}
.prose strong{color:var(--navy);font-weight:600}
.prose ul{margin:0 0 1.4em;padding-left:1.3em}
.prose li{margin-bottom:.6em}
.prose a{text-decoration:underline;text-underline-offset:2px}
.policy-date{
  font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.06em;
  color:var(--muted);margin-bottom:2em;
}
.callout{
  background:var(--offwhite);border-left:3px solid var(--copper);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 2em;
}
.policy-contact{
  font-style:normal;background:var(--offwhite);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 24px;line-height:1.8;
}

/* ---------- animation ----------
   Content is visible by default. It is only hidden for the reveal when the
   inline head script has confirmed JS is running — otherwise a failed or
   blocked site.js would leave these elements at opacity:0 forever. */
.js .fade-up{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.js .fade-up.in{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .section{padding:68px 0}
}
@media(max-width:900px){
  .main-nav,.header-ctas{display:none}
  .hamburger{display:flex}
  .grid-2-1{grid-template-columns:1fr;gap:34px}
  /* The email address is long enough to break mid-word in a half-width box,
     so give each contact block the full width from here down. */
  .contact-primary{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr;padding:42px 32px}
}
@media(max-width:768px){
  body{font-size:16px}
  /* Keep the logo from crowding the hamburger on narrow screens. */
  .site-logo{flex-shrink:1;min-width:0}
  .site-logo img{height:42px}
  .mobile-menu-header .site-logo-name{font-size:1.05rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .contact-primary{grid-template-columns:1fr}
  .contact-big{padding:24px}
  .contact-big-value{font-size:1.15rem}
  .form-row{grid-template-columns:1fr;gap:0}
  .hero{padding:68px 0 76px}
  .section{padding:56px 0}
  .topbar .container{justify-content:center;text-align:center}
  .topbar-loc{justify-content:center;gap:14px}
  .trust-logos{gap:30px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  :root{--gutter:18px}
  /* Stack the icon above the text so the email address gets the full card
     width instead of breaking mid-word. */
  .contact-big{flex-direction:column;align-items:flex-start;gap:14px}
  .contact-big-value{font-size:1.05rem}
  .hero-ctas .btn,.cta-btns .btn{width:100%}
  .form-box{padding:24px 20px}
  .card{padding:24px}
  .cta-box{padding:34px 22px}
  .trust-logo{height:24px}
  .trust-logos{gap:24px}
}

/* ---------- motion preference ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .fade-up{opacity:1;transform:none;transition:none}
  .card:hover,.btn:hover{transform:none}
  .card-media:hover img{transform:none}
}

/* ---------- print ---------- */
@media print{
  .topbar,.site-header,.hamburger,.mobile-menu,.hero-ctas,.cta-box,.site-footer{display:none}
  body{font-size:12pt;color:#000}
  .hero,.page-hero{background:none;color:#000;padding:0}
  .hero h1,.page-hero h1{color:#000}
}