/* Landing page templates. Design 1 is the page as it has always been and needs no rules here: it is what every
   visitor sees. Designs 2 and 3 restyle the same markup, so there is one page to maintain, not three.
   The switcher that turns these on is a private preview tool — see public/templates.js. */

/* The palette read off the reference: a deep royal blue at the top of the sky, easing through a mid blue to a pale
   warm horizon, with white cards, a blue call to action and ink-dark text on them. */
html[data-template="2"],html[data-template="3"]{
  --t-blue-deep:#0a1a9c;
  --t-blue:#1231d8;
  --t-blue-cta:#2c5fe8;
  --t-blue-mid:#4a7fd4;
  --t-blue-soft:#9dc0ee;
  --t-horizon:#e6dcc3;
  --t-ink:#0b1740;
  --t-paper:#f4f7fe;
}

/* ---------------------------------------------------------------- Design 2 — the reference palette, on paper
   The same blue, used the other way round: the page stays light and the blue carries the headline, the button and
   the captions. One centred column, with the photographs as a filmstrip beneath. */
html[data-template="2"] body{background:var(--t-paper)}
html[data-template="2"] .hero{grid-template-columns:1fr;gap:0;min-height:0;padding-top:66px;padding-bottom:74px;text-align:center}
html[data-template="2"] .hero-copy{max-width:900px;margin:0 auto}
html[data-template="2"] .hero .eyebrow{justify-content:center;color:var(--t-blue)}
html[data-template="2"] .hero .small-line{display:none}
html[data-template="2"] .hero h1{font-size:clamp(46px,6.6vw,88px);color:var(--t-ink);letter-spacing:-2.4px;font-weight:300}
html[data-template="2"] .hero h1 em{display:block;color:var(--t-blue);font-style:normal;font-weight:700}
html[data-template="2"] .hero-copy p{max-width:640px;margin-inline:auto;color:#41527e;font-size:17px}
html[data-template="2"] .hero-copy p br.desktop{display:none}
html[data-template="2"] .hero-actions{justify-content:center}
html[data-template="2"] .hero-actions .button{border-radius:999px;background:var(--t-blue-cta);border-color:var(--t-blue-cta);padding:16px 30px}
html[data-template="2"] .hero-note{justify-content:center;color:#5b6a94}
html[data-template="2"] .memory-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:16px;padding:48px 0 0}
html[data-template="2"] .mosaic-caption{justify-content:center;order:-1;margin-bottom:-26px;color:var(--t-blue)}
html[data-template="2"] .memory-mosaic .mosaic-shot{grid-area:auto;height:300px;border-radius:18px;box-shadow:0 18px 44px #0b174021}
html[data-template="2"] .memory-mosaic .mosaic-shot img{width:100%;height:100%;object-fit:cover}
html[data-template="2"] .mosaic-letter,html[data-template="2"] .mosaic-seal{display:none}
html[data-template="2"] .values-band{background:#e4ecfb;color:var(--t-ink)}

/* ---------------------------------------------------------------- Design 3 — the reference, followed closely
   A blue sky falling to a warm horizon, a giant translucent letterform behind everything, the navigation floating
   as a white pill, a two-weight centred headline, a stat card pinned bottom-left and a row of pills along the foot. */
html[data-template="3"] body{background:var(--t-blue-deep)}

/* the navigation, lifted off the page into a floating white pill */
html[data-template="3"] .header{position:absolute;z-index:40;top:22px;left:50%;height:auto;width:auto;max-width:calc(100% - 32px);transform:translateX(-50%);gap:8px;padding:9px 9px 9px 22px;border:0;border-radius:999px;background:#fffffff5;box-shadow:0 14px 40px #06103d3d}
html[data-template="3"] .brand{font-size:25px;color:var(--t-ink)}
html[data-template="3"] .brand img{width:32px;height:32px}
html[data-template="3"] .header nav{flex-wrap:nowrap;gap:20px;font-size:13px;white-space:nowrap}
html[data-template="3"] .header nav a,html[data-template="3"] .header .nav-link{white-space:nowrap}
html[data-template="3"] .header .button{flex:none;white-space:nowrap}
html[data-template="3"] .header nav a,html[data-template="3"] .header .nav-link{color:var(--t-ink)}
html[data-template="3"] .header .button{width:auto;padding:12px 20px;border-radius:999px;gap:10px;background:var(--t-blue-cta);border-color:var(--t-blue-cta);font-size:12px}
html[data-template="3"] .lang-switch{order:3}

/* the sky: deep blue at the top, the photograph showing through at the horizon */
html[data-template="3"] .hero{position:relative;grid-template-columns:1fr;width:100%;max-width:none;min-height:min(94vh,900px);margin:0;padding:150px 24px 54px;align-content:center;text-align:center;overflow:hidden}
html[data-template="3"] .hero:before{position:absolute;inset:0;background:linear-gradient(180deg,var(--t-blue-deep) 0%,var(--t-blue) 22%,#2d55cfd9 44%,#4a7fd4a6 60%,#9dc0ee66 74%,#0b174066 100%),url('/images/family.jpg') center 58%/cover no-repeat;content:""}
html[data-template="3"] .hero-copy{position:relative;z-index:2;max-width:980px;margin:0 auto;color:#fff}
html[data-template="3"] .hero .eyebrow{justify-content:center;color:#cddcff}
html[data-template="3"] .hero .small-line{display:none}
/* two weights, as the reference does: a light first line, the emphasis solid beneath it */
html[data-template="3"] .hero h1{font-size:clamp(44px,6vw,86px);color:#fff;font-weight:300;letter-spacing:-2px;text-shadow:0 2px 30px #06103d5c}
html[data-template="3"] .hero h1 em{display:block;margin-top:4px;color:#fff;font-style:normal;font-weight:700}
html[data-template="3"] .hero-copy p{max-width:660px;margin-inline:auto;color:#eaf0ff;font-size:16px;font-weight:600}
html[data-template="3"] .hero-copy p br.desktop{display:none}
html[data-template="3"] .hero-actions{justify-content:center;margin-top:26px}
html[data-template="3"] .hero-actions .button{border-radius:999px;background:var(--t-blue-cta);border-color:var(--t-blue-cta);padding:15px 28px;gap:14px}
html[data-template="3"] .hero-note{justify-content:center;color:#c5d4f5;text-shadow:0 1px 12px #06103d99}
html[data-template="3"] .hero-note svg{color:#c5d4f5;opacity:.9}

/* the foot of the hero: pills across the bottom, a card pinned to the left */
html[data-template="3"] .memory-mosaic{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:11px;grid-template-columns:none;grid-template-rows:none;margin-top:48px;padding:0}
html[data-template="3"] .mosaic-caption{width:100%;justify-content:center;margin-bottom:4px;color:#cddcff}
html[data-template="3"] .memory-mosaic .mosaic-shot{grid-area:auto;display:flex;align-items:center;gap:11px;width:auto;height:auto;padding:8px 20px 8px 8px;border-radius:999px;background:#fffffff7;box-shadow:0 16px 42px #06103d4d}
html[data-template="3"] .memory-mosaic .mosaic-shot img{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover}
html[data-template="3"] .memory-mosaic .mosaic-shot figcaption{position:static;padding:0;background:none;color:var(--t-ink);font-size:13px;font-weight:600;white-space:nowrap}
/* the seal becomes the stat card the reference pins to the bottom-left corner */
html[data-template="3"] .mosaic-seal{position:absolute;z-index:3;left:34px;bottom:34px;top:auto;right:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:auto;min-width:190px;height:auto;padding:16px 20px;border:0;border-radius:16px;background:#fffffff7;box-shadow:0 16px 42px #06103d4d;color:var(--t-ink);transform:none}
html[data-template="3"] .mosaic-seal strong{font-size:27px;font-weight:700;letter-spacing:-.5px}
html[data-template="3"] .mosaic-seal span{color:#5b6a94;font-size:9px;letter-spacing:1px}
html[data-template="3"] .mosaic-letter{display:none}
html[data-template="3"] .values-band{margin-top:0;background:#e4ecfb;color:var(--t-ink)}

@media(max-width:1100px){
  html[data-template="3"] .header{left:16px;right:16px;transform:none;max-width:none;width:auto}
  html[data-template="3"] .mosaic-seal{position:static;margin-top:12px}
}
@media(max-width:900px){
  html[data-template="2"] .memory-mosaic{grid-template-columns:1fr 1fr}
  html[data-template="2"] .memory-mosaic .mosaic-shot{height:215px}
  html[data-template="3"] .hero{min-height:0;padding:124px 18px 40px}
  html[data-template="3"] .memory-mosaic .mosaic-shot figcaption{font-size:11px;white-space:normal}
}

/* ---------------------------------------------------------------- the switcher itself */
.template-switch{position:fixed;z-index:60;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #d5e3f5;border-radius:999px;background:#fffffff2;box-shadow:0 12px 34px #0b1f3c26;backdrop-filter:blur(8px);font:13px/1 inherit;color:#0b1f3c}
.template-switch strong{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.6}
.template-switch select{min-height:34px;padding:0 8px;border:1px solid #d5e3f5;border-radius:9px;background:#fff;color:inherit;font:inherit}
.template-switch a{color:#2563eb;font-size:11px;font-weight:700;text-decoration:none}
@media(max-width:600px){.template-switch{right:10px;bottom:10px;padding:7px 10px}.template-switch strong{display:none}}
@media print{.template-switch{display:none}}