/* ==========================================================================
   Sue Riekels — ELEVATED redesign, shared foundation
   Navy + copper-gradient, Playfair Display display serif, Inter UI/body
   ========================================================================== */
:root{
  --navy:#12244a;
  --navy-deep:#0b1933;
  --navy-2:#1c2f5a;
  --ink:#0e1d3d;
  --slate:#5a6478;
  --cream:#f5ede1;
  --paper:#faf6ee;
  --sand:#f4ecda;
  --copper:#bd7f52;
  --copper-soft:#cf9a6d;
  --copper-grad:linear-gradient(120deg,#eca885 0%,#c68050 55%,#a8683f 100%);
  --copper-metal:linear-gradient(180deg,#f2c79e 0%,#dc9f6c 20%,#c07f4d 46%,#a4673c 72%,#c88a5b 100%);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.wrap{width:92%;max-width:var(--wrap);margin:0 auto}

/* ---- copper gradient button ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.2px;
  color:#fff;background:var(--copper-metal);
  border:0;border-radius:40px;padding:9px 26px;cursor:pointer;
  position:relative;overflow:hidden;
  text-shadow:0 1px 1px rgba(90,45,20,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(90,45,20,.4),0 6px 16px -9px rgba(150,85,45,.75);
  transition:box-shadow .2s ease,filter .2s ease;
}
/* gloss shine sweep on hover (no lift) */
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-22deg);pointer-events:none;
}
.btn:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(90,45,20,.4),0 9px 22px -9px rgba(150,85,45,.85)}
.btn:hover::after{animation:btn-shine .75s ease}
@keyframes btn-shine{from{left:-120%}to{left:140%}}
.btn>*{position:relative;z-index:1}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{background:transparent;border:1.5px solid var(--copper);color:var(--copper);box-shadow:none}
.btn--ghost::after{display:none}
.btn--ghost:hover{background:var(--copper);color:#fff}

/* ---- eyebrow ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:3px;
  text-transform:uppercase;color:var(--copper-soft);
}

/* ---- announcement bar ---- */
.announce{background:linear-gradient(120deg,var(--navy-deep),var(--navy-2))}
.announce-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 0;text-align:center}
.announce-txt{font-size:17.5px;font-weight:500;letter-spacing:.2px;line-height:1.4;color:var(--cream)}
.survey-pill{display:inline-flex;border-radius:999px;overflow:hidden;background:var(--copper-metal);text-shadow:0 1px 1px rgba(90,45,20,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(90,45,20,.4),0 6px 16px -9px rgba(150,85,45,.75)}
.survey-pill a{display:inline-flex;align-items:center;justify-content:center;width:84px;padding:2px 0;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.3px;color:#fff;transition:background .15s ease}
.survey-pill a+a{border-left:1px solid rgba(255,255,255,.4)}
.survey-pill a:hover{background:rgba(255,255,255,.15)}
@media(max-width:600px){.announce-txt{font-size:15px}.announce-in{gap:10px;padding:13px 14px}.survey-pill a{width:78px;font-size:11.5px}}

/* ---- shared header ---- */
.site-head{position:sticky;top:0;z-index:50;background:#fffefc;box-shadow:0 1px 0 rgba(14,29,61,.07)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:62px;height:62px;flex:0 0 62px}
.brand-wide{height:64px;width:auto;display:block}
@media(max-width:600px){.head-cta{padding:6px 15px;font-size:12.5px}}
@media(max-width:520px){.brand-wide{height:50px}.head-in{gap:12px}}
.brand .name{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--navy);line-height:1}
.brand .tag{font-family:var(--sans);font-weight:600;font-size:8.5px;letter-spacing:2.2px;color:var(--copper);text-transform:uppercase;margin-top:5px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--navy);transition:color .15s}
.nav a:hover,.nav a.active{color:var(--copper)}
.head-cta{white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--navy);margin:5px 0;border-radius:2px}

/* ---- shared footer ---- */
.site-foot{background:var(--navy-deep);color:#c7cede;padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot-brand .name{font-family:var(--serif);font-size:26px;color:#fff}
.foot-brand .tag{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:2.4px;color:var(--copper-soft);text-transform:uppercase;margin:6px 0 16px}
.foot-brand p{font-size:14px;color:#9aa6c0;max-width:300px}
.foot-col h4{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--copper-soft);margin-bottom:16px}
.foot-col a{display:block;font-size:15px;color:#c7cede;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-social{display:flex;gap:12px;margin-top:18px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:.15s}
.foot-social a:hover{background:var(--copper);border-color:var(--copper)}
.foot-social svg{width:17px;height:17px;fill:#fff}
.foot-email{display:none}
.foot-email a{font-size:15px;color:var(--copper-soft);transition:color .15s}
.foot-email a:hover{color:#fff}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-size:13px;color:#8b98b5}

/* tablets + below use the hamburger */
@media(max-width:1024px){
  .nav-toggle{display:block}
  /* CTA sits to the right, next to the hamburger (normal gap between) */
  .head-cta{margin-left:auto}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fffefc;border-top:1px solid rgba(14,29,61,.08);
    box-shadow:0 18px 34px -16px rgba(14,29,61,.35);padding:6px 0;z-index:60;
  }
  .site-head.nav-open .nav{display:flex}
  .nav a{padding:13px 24px;font-size:17px}
  /* trim generous section spacing on tablet */
  .section{padding:62px 0}
  .section-head{margin-bottom:40px}
}
@media(max-width:920px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 22px;text-align:center}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{max-width:none;margin:0 auto}
  .foot-social{justify-content:center}
  .foot-col .cx-email{display:none}
  .foot-email{display:block;grid-column:1 / -1;text-align:center;margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
  .site-foot{padding:34px 0 26px}
  .foot-base{flex-direction:column;gap:8px;align-items:center;text-align:center}
  .m-br{display:inline}
  .d-br{display:none}
}

/* ==========================================================================
   INTERIOR PAGE HELPERS (elevated Dark Editorial)
   ========================================================================== */
.page-hero{position:relative;background:linear-gradient(120deg,#0b1933 0%,#152a54 55%,#1c2f5a 100%);color:#fff;overflow:hidden;text-align:center;padding:78px 0 70px}
.page-hero .watermark{position:absolute;left:-328px;top:-328px;width:720px;opacity:.10;pointer-events:none}
.page-hero .eyebrow{justify-content:center;margin-bottom:20px}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:60px;line-height:1.05;color:var(--cream);letter-spacing:-.5px;position:relative}
.page-hero p{position:relative;max-width:640px;margin:18px auto 0;color:#b8c1d6;font-size:18px}
.page-hero .btn{margin-top:30px}

/* section wrappers */
.section{padding:92px 0}
.section--sand{background:var(--sand)}
.section--paper{background:var(--paper)}
.section--white{background:#fff}
.section--navy{background:linear-gradient(120deg,#0b1933,#1c2f5a);color:#fff}
.section-head{text-align:center;max-width:760px;margin:0 auto 52px}
.section-head .eyebrow{justify-content:center;margin-bottom:16px}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:42px;color:var(--navy);line-height:1.12}
.section--navy .section-head h2{color:#fff}
.section-head p{color:var(--slate);font-size:18px;margin-top:14px}

/* ---- "specific to you" CTA band (shared across pages) ---- */
.specific{background:var(--sand);text-align:center;padding:72px 0}
.specific h2{font-family:var(--serif);font-weight:600;font-size:38px;color:var(--navy);line-height:1.2;margin-bottom:18px}
.specific p{font-size:18px;color:var(--slate);line-height:1.65;max-width:760px;margin:0 auto 30px}
.m-br{display:none}
.d-br{display:inline}
.t-br{display:none}
@media(min-width:921px) and (max-width:1024px){.t-br{display:inline}}
.dk-br{display:inline}
@media(max-width:1024px){.dk-br{display:none}}
@media(max-width:920px){.specific{padding:56px 0}.specific h2{font-size:30px}}
.section--navy .section-head p{color:#aab4cc}

/* prose */
.prose{max-width:760px;margin:0 auto;font-size:16.5px;color:#41485c}
.prose p{margin-bottom:18px}
.section--navy .prose{color:#c7cede}
.center{text-align:center}

/* generic elevated card */
.ecard{background:#fff;border-radius:16px;padding:38px 32px;box-shadow:0 24px 60px -40px rgba(18,36,74,.4);border-bottom:3px solid transparent;transition:.2s}
.ecard:hover{transform:translateY(-6px);border-bottom-color:var(--copper)}
.ecard h3{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--navy);margin-bottom:12px}
.ecard p{color:#4a5064;font-size:15.5px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:center}

/* media frame (video/photo) */
.media-frame{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(18,36,74,.5);background:#0b1933}
.media-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.media-frame video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.media-frame.vertical iframe{aspect-ratio:9/16}
.ratio-vert{position:relative;width:100%;padding-top:177.78%}
.ratio-vert iframe,.ratio-vert video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}

@media(max-width:920px){
  .page-hero h1{font-size:42px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr;gap:30px}
  .section{padding:56px 0}
  .section-head{margin-bottom:32px}
  .section-head h2{font-size:29px}
}
/* video sections: phone = swipeable slider; tablet = three small videos in a centered row */
@media(max-width:767px){
  .vid-slider{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
  .vid-slider>*{flex:0 0 74%;scroll-snap-align:center}
}
@media(min-width:768px) and (max-width:1024px){
  .vid-slider{display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;gap:22px;max-width:900px;margin-left:auto;margin-right:auto}
}