/* ==========================================================================
   Omega Care — Modern Design System (2026 redesign)
   --------------------------------------------------------------------------
   Colours + type follow the Omega Care Brand Sheet: Omega Teal #4CAEB9,
   Deep Teal #33767D, Pale Teal tints, Ink #111418, led by generous white.
   Poppins carries the whole type system. Everything derives from these tokens.
   ========================================================================== */

:root {
  /* --- Brand teal (Omega Care brand sheet) ---------------------------- */
  --brand:        #4CAEB9;   /* Omega Teal — primary: header, hero band, accents */
  --brand-bright: #6FC3CC;   /* lighter sheen for gradients                */
  --brand-deep:   #2A6067;   /* darker deep teal — hover on teal surfaces  */
  --brand-600:    #33767D;   /* Deep Teal — strong accent / AA text (5.2:1) */
  --brand-700:    #33767D;   /* Deep Teal — links + buttons (white text AA) */
  --brand-ink:    #111418;   /* Ink — dark sections, footer               */

  /* --- Soft brand tints (extended teal scale) ------------------------ */
  --tint:         #EDF6F8;   /* palest teal wash                          */
  --tint-2:       #D2EAED;   /* pale teal — cards / borders               */

  /* --- Neutrals: white-led per brand ("plenty of white") ------------- */
  --cream:        #F4FAFB;   /* soft teal-white (form fills / panels)     */
  --cream-2:      #EDF6F8;   /* pale-teal section background              */
  --sand:         #D2EAED;   /* pale teal accent (decorative)             */
  --white:        #FFFFFF;

  /* --- Ink / text ----------------------------------------------------- */
  --ink:          #111418;   /* Ink — body text                           */
  --ink-soft:     #46545A;   /* secondary text (cool)                     */
  --muted:        #6C7A80;   /* captions / meta                           */
  --line:         #DCEAEC;   /* hairline (pale teal)                      */
  --line-soft:    #E9F3F5;

  /* --- Effects (teal-tinted, layered) -------------------------------- */
  --shadow-sm:  0 1px 2px rgba(19,44,48,.06), 0 2px 6px rgba(19,44,48,.05);
  --shadow:     0 8px 22px -10px rgba(19,44,48,.22), 0 2px 8px rgba(19,44,48,.06);
  --shadow-lg:  0 30px 60px -28px rgba(19,44,48,.40), 0 8px 24px -12px rgba(19,44,48,.16);
  --shadow-teal:0 24px 50px -20px rgba(76,174,185,.55);
  --ring:       0 0 0 3px rgba(255,255,255,.55), 0 0 0 6px rgba(19,44,48,.18);

  /* --- Shape ---------------------------------------------------------- */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-pill: 999px;

  /* --- Layout --------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.4rem);

  /* --- Type ----------------------------------------------------------- */
  /* Poppins across the whole system (Omega Care brand sheet).
     Display weights lean Bold/ExtraBold; body Regular; leads Light. */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);   /* soft, decelerating settle for scroll reveals */
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.68;
  font-size: clamp(1rem, .965rem + .18vw, 1.09rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--brand-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;                 /* Poppins Bold — headlines */
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 1.7rem + 3.9vw, 4.3rem); font-weight: 800; letter-spacing: -.03em; }  /* Poppins ExtraBold — display */
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem); }
h3 { font-size: clamp(1.22rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.01em; }
p  { margin: 0 0 1.1rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand); color: #06302F; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.text-center { text-align: center; }
.section { padding-block: clamp(3.6rem, 2.4rem + 5vw, 7rem); position: relative; }
.section-sm { padding-block: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-700);
  padding: .42rem .85rem .42rem .7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(76,174,185,.25); }

.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.32rem); font-weight: 300; color: var(--ink-soft); line-height: 1.62; }  /* Poppins Light — leads / large quotes */

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 3vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }

/* Backgrounds */
.bg-cream { background: var(--cream-2); }
.bg-ink   { background: var(--brand-ink); color: #DCEFEF; }
.bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-tint  { background: linear-gradient(180deg, var(--tint) 0%, #F4FBFA 100%); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --_bg: var(--brand-700); --_fg: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 650; font-size: 1rem; line-height: 1;
  padding: .92rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--_bg); color: var(--_fg);
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
  will-change: transform;
}
.btn .arrow { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease-spring); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* Keep button text colour under our control even against the global a:hover rule */
.btn:hover, .btn:focus, a.btn:hover { color: var(--_fg); }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1.06rem; }

.btn-primary { --_bg: var(--brand-700); --_fg: #fff; box-shadow: 0 12px 26px -12px rgba(51,118,125,.7); }
.btn-primary:hover { --_bg: var(--brand-deep); box-shadow: 0 18px 34px -14px rgba(51,118,125,.85); }

.btn-secondary { --_bg: var(--white); --_fg: var(--brand-700); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { --_bg: var(--brand-700); --_fg: #fff; border-color: var(--brand-700); box-shadow: var(--shadow); }

.btn-light { --_bg: #fff; --_fg: var(--brand-700); box-shadow: 0 14px 30px -12px rgba(0,0,0,.3); }
.btn-light:hover { --_bg: var(--brand-700); --_fg: #fff; }

.btn-outline-light { --_bg: transparent; --_fg: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { --_bg: rgba(255,255,255,.12); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; color: var(--brand-700); margin-top: .25rem;
}
.link-arrow .arrow { width: 1em; height: 1em; transition: transform .35s var(--ease-spring); }

/* ==========================================================================
   Header
   ========================================================================== */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: #fff; color: var(--brand-700); padding: .6rem 1rem; border-radius: var(--r-sm);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--brand);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.site-header::after { /* subtle sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 180% at 12% -40%, rgba(255,255,255,.28), transparent 55%);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 38px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: 1.7rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: inline-flex; align-items: center; gap: .3rem;
  color: #fff; font-weight: 600; font-size: .98rem;
  padding: .55rem .7rem; border-radius: var(--r-pill);
  transition: background-color .2s var(--ease-out);
}
.nav-list > li > a:hover { background: rgba(255,255,255,.16); color: #fff; }

.has-sub > a::after {
  content: ""; width: 7px; height: 7px; margin-left: .1rem;
  border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease-out);
}
.has-sub:hover > a::after { transform: rotate(45deg) translateY(0); }

.sub-toggle { display: none; }

.sub-list {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 270px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: none;
}
.has-sub:hover > .sub-list, .has-sub:focus-within > .sub-list {
  display: block;
  animation: subListIn .22s var(--ease-out) both;
}
@keyframes subListIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sub-list a {
  display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
  color: var(--ink); font-weight: 550; font-size: .96rem;
  transition: background-color .18s var(--ease-out), color .18s;
}
.sub-list a:hover { background: var(--tint); color: var(--brand-700); }

.nav-cta { margin-left: .3rem; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-sm);
  background: rgba(255,255,255,.12); cursor: pointer; position: relative;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: #fff; transform: translate(-50%,-50%); transition: transform .25s var(--ease-out), opacity .2s;
}
.nav-toggle-bar::before { transform: translate(-50%,-7px); }
.nav-toggle-bar::after  { transform: translate(-50%,5px); }

.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;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(76,174,185,.18), transparent 60%),
    radial-gradient(50% 60% at 6% 92%, rgba(218,237,241,.85), transparent 60%),
    var(--white);
  padding-block: clamp(2.6rem, 1.8rem + 4vw, 5rem) clamp(3.4rem, 2.4rem + 5vw, 6.5rem);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero-copy { max-width: 600px; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .em { color: var(--brand-600); font-style: normal; }  /* teal accent word, per brand tagline */
.hero .lead { margin-bottom: 1.7rem; max-width: 30ch; }
.hero .btn-row { margin-top: .4rem; }

/* Hero media — rounded image with floating stat + decorative blobs */
.hero-art { position: relative; }
.hero-photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 16/11; background: var(--tint-2);
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { /* warm/teal treatment layer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(19,44,48,.28));
  mix-blend-mode: multiply;
}
.hero-blob {
  position: absolute; border-radius: 50%; z-index: -1;
  /* soft radial glow that fades to transparent — clean edges, no blur artefact */
}
.hero-blob.a { width: 260px; height: 260px; right: -70px; top: -60px; background: radial-gradient(circle, rgba(76,174,185,.55) 0%, rgba(76,174,185,0) 68%); }
.hero-blob.b { width: 220px; height: 220px; left: -70px; bottom: 10px; background: radial-gradient(circle, rgba(210,234,237,.85) 0%, rgba(210,234,237,0) 70%); }

.hero-badge {
  position: absolute; left: -28px; bottom: 36px;
  display: flex; align-items: center; gap: .8rem;
  background: #fff; padding: .85rem 1.1rem; border-radius: var(--r);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft);
}
.hero-badge .ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--tint); border-radius: 12px; color: var(--brand-700);
}
.hero-badge .ico svg { width: 22px; height: 22px; }
.hero-badge strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); line-height: 1.1; }
.hero-badge span { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   Stats / trust band
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.stat { text-align: center; padding: .4rem; }
.stat .num {
  font-family: var(--font-display); font-weight: 540; line-height: 1.02;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem); color: #fff;
}
.stat .label { font-size: .92rem; color: #BFE4E3; margin-top: .35rem; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.14); }

/* ==========================================================================
   Cards grid
   ========================================================================== */
.grid { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out), border-color .3s;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--tint-2); color: var(--ink); }
.card:hover::before { transform: scaleX(1); }
.card-icon {
  width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--tint); color: var(--brand-700); border-radius: 16px;
  transition: background-color .3s, transform .4s var(--ease-spring);
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card-icon { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.05); }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .98rem; margin-bottom: 1rem; }
.card .link-arrow { margin-top: auto; }

/* ==========================================================================
   LIFE values
   ========================================================================== */
.grid-life { grid-template-columns: repeat(4, 1fr); }
.value {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.value .badge {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1rem;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 560; color: #fff;
  background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep));
  border-radius: 16px; box-shadow: var(--shadow-teal);
}
.value h3 { margin-bottom: .3rem; }
.value p { font-size: .96rem; margin: 0; }

/* ==========================================================================
   Split sections
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 5/4; background: var(--tint-2); box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(19,44,48,.25)); mix-blend-mode: multiply;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 120% at 85% -20%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, var(--brand-bright));
  border-radius: var(--r-xl);
  padding: clamp(2.6rem, 2rem + 4vw, 4.6rem) clamp(1.6rem, 5vw, 4rem);
  text-align: center; color: #fff;
  box-shadow: var(--shadow-teal);
}
.cta-band::before { /* grain */
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 56ch; margin-inline: auto; margin-bottom: 1.7rem; font-size: 1.1rem; }
.cta-band .btn-row { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--brand-ink); color: #C8E5E4; padding-block: clamp(3rem, 2rem + 3vw, 4.6rem) 2rem; }
.site-footer .brand-logo { height: 36px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand p { color: #A9D2D1; margin-top: 1rem; max-width: 34ch; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.footer-badge {
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #DCEFEF;
}
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a { color: #BBDEDD; font-size: .96rem; transition: color .18s; }
.footer-col a:hover { color: #fff; }
.footer-contact .line { display: block; font-size: .96rem; color: #BBDEDD; margin-bottom: .55rem; }
.footer-contact a { color: #fff; }
.social-row { display: flex; gap: .6rem; }
.social-row a {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  transition: background-color .2s, transform .3s var(--ease-spring);
}
.social-row a:hover { background: var(--brand); transform: translateY(-3px); }
.social-row svg { width: 19px; height: 19px; color: #fff; }

/* Social row on LIGHT backgrounds (e.g. contact "Follow us") */
.social-row--onlight a { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.social-row--onlight svg { color: var(--brand-700); transition: color .2s; }
.social-row--onlight a:hover { background: var(--brand-700); border-color: var(--brand-700); }
.social-row--onlight a:hover svg { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.6rem; font-size: .88rem; color: #9FC9C8;
}
.footer-bottom p { color: #9FC9C8; margin: 0; }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; padding: 0; }
.footer-legal a { color: #9FC9C8; }
.footer-legal a:hover { color: #fff; }

/* ==========================================================================
   Scroll reveal
   --------------------------------------------------------------------------
   Elements lift + settle as they enter the viewport. Only opacity/transform
   are animated (GPU-friendly). The hidden state is gated behind
   `@media (scripting: enabled)` so that if JS never runs — script disabled,
   or an old browser without IntersectionObserver that also skips the class —
   content is always visible. main.js adds `.in` to reveal on scroll and
   assigns each item a `--i` stagger index so grids/rows cascade.
   ========================================================================== */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    /* transform runs a touch longer than opacity for a gentle "settle" tail */
    transition:
      opacity   .7s var(--ease-reveal),
      transform .95s var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * 85ms);
  }

  /* Directional + scale variants — richer entrances for split media, hero art */
  .reveal-left  { transform: translate3d(-40px, 0, 0); }
  .reveal-right { transform: translate3d( 40px, 0, 0); }
  .reveal-scale { transform: translate3d(0, 22px, 0) scale(.96); }
  .reveal-blur  { transform: translate3d(0, 30px, 0); filter: blur(6px); }

  .reveal.in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }

  /* while a reveal is armed but not yet fired, promote it to its own layer */
  .reveal.will { will-change: opacity, transform; }

  /* Legacy fixed-delay hooks kept working (hero sequence uses these) */
  .reveal.d1 { transition-delay: .09s; }
  .reveal.d2 { transition-delay: .18s; }
  .reveal.d3 { transition-delay: .27s; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4, .grid-life { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .primary-nav {
    position: fixed; inset: 78px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--brand-ink); padding: 1rem var(--gutter) 1.6rem;
    max-height: calc(100vh - 78px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
  }
  .primary-nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-list > li > a { padding: .95rem .4rem; font-size: 1.05rem; }
  /* Submenus shown inline on mobile so every page is one tap away (no navigate-on-tap surprise) */
  .has-sub > a::after { display: none; }
  .sub-toggle { display: none; }
  .has-sub > a { padding-bottom: .55rem; }
  .sub-list {
    display: block; position: static; animation: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-left: 2px solid rgba(255,255,255,.16);
    background: transparent; margin: 0 0 .5rem .4rem; padding: .1rem 0 .3rem .85rem;
    max-height: none; overflow: visible; clip-path: none;
  }
  .sub-list li { border: 0; }
  .sub-list a { display: block; color: #BBDEDD; padding: .5rem .3rem; font-size: .98rem; }
  .sub-list a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav-cta { margin: 1rem 0 0; justify-content: center; }
  /* Footer: two columns on tablet */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col, .footer-brand, .footer-contact { min-width: 0; }
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; margin-inline: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.14); }
  .grid-3, .grid-4, .grid-life { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  /* Footer: single column on phones */
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* Inner-page hero (deep teal band) */
.page-hero {
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(95,212,210,.30), transparent 60%),
    var(--brand-ink);
  color: #E6F4F3; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(76,174,185,.32), transparent 65%); pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; padding-block: clamp(2.6rem, 2rem + 3vw, 4.6rem) clamp(2.8rem, 2.2rem + 3vw, 4.4rem); }
.page-hero .eyebrow { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #D7F1F0; box-shadow: none; }
.page-hero .eyebrow::before { background: var(--brand-bright); box-shadow: 0 0 0 3px rgba(95,212,210,.3); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: #C7E6E5; max-width: 58ch; }

/* Breadcrumbs */
.breadcrumb { font-size: .85rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0 0 1.2rem; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .45rem; color: rgba(231,246,245,.65); }
.breadcrumb li:not(:last-child)::after { content: "/"; opacity: .45; }
.breadcrumb a { color: rgba(231,246,245,.9); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* Grid-2 */
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Article layout: prose + sticky aside */
.article-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: start; }
.prose { max-width: 720px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.9rem; color: var(--brand-700); }
.prose p, .prose li { color: var(--ink); }
.prose .lead { color: var(--ink-soft); }
.prose strong { color: var(--ink); }

.aside-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 1.7rem 1.7rem; position: sticky; top: 98px; box-shadow: var(--shadow);
}
.aside-card h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.aside-card dl { margin: 0 0 1.4rem; display: grid; gap: 1.05rem; }
.aside-card dt { font-family: var(--font-body); font-weight: 700; color: var(--brand-700); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .2rem; }
.aside-card dd { margin: 0; color: var(--ink-soft); }
.aside-card .btn { width: 100%; justify-content: center; }

/* Check list */
.check-list { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .85rem; }
.check-list li { position: relative; padding-left: 2.2rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .12rem; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316706F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Feature list */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.feature-list li { padding-left: 0; }
.feature-list .ft-title { display: block; font-family: var(--font-display); font-weight: 560; font-size: 1.15rem; color: var(--ink); margin-bottom: .2rem; }

/* Note / callout */
.note {
  background: var(--tint); border: 1px solid var(--tint-2); border-left: 4px solid var(--brand);
  border-radius: var(--r-sm); padding: 1.15rem 1.35rem; margin: 1.8rem 0; font-size: .97rem; color: var(--ink-soft);
}
.note strong { color: var(--brand-ink); }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: .45rem; background: var(--tint);
  color: var(--brand-700); border-radius: var(--r-pill); padding: .38rem .9rem;
  font-size: .82rem; font-weight: 650;
}

/* Split media supports text placeholder OR image */
.split-media { display: grid; place-content: center; text-align: center; color: var(--brand-ink); padding: 1.5rem; }
.split-media:not(:has(img)) { background: linear-gradient(150deg, var(--tint-2), var(--brand)); }
.split-media img { position: absolute; inset: 0; padding: 0; }

/* Team grid */
.team-grid { --team-gap: clamp(1rem, 2vw, 1.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--team-gap); }
.team-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.7rem) 1rem clamp(1.15rem, .9rem + 1vw, 1.45rem);
  text-align: center;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.team-photo {
  width: clamp(120px, 11vw, 152px); aspect-ratio: 1/1; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep));
  display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 560; font-size: 2rem; letter-spacing: .02em;
}
.team-body { padding: 1.1rem 1.2rem 1.3rem; }
.team-card .team-body { padding: 0; margin-top: .95rem; }
.team-body .name { font-family: var(--font-display); font-weight: 560; color: var(--ink); margin: 0; font-size: 1.1rem; }
.team-body .role { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 0; }

/* Team tiers + department colour-coding (Meet the team) */
.team-tier { margin-top: clamp(2rem, 4vw, 3rem); }
.team-tier:first-child { margin-top: 0; }

.team-group-label {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dept, var(--brand-700));
}
.team-group-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--dept, var(--line)), transparent);
  opacity: .5;
}

/* Headshots fill the circular frame uniformly */
.team-photo { overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* Department accent — single-brand teal system (tiers are named in the group
   label, so colour stays on-brand rather than multi-hue). All AA on white. */
.tier-ri    { --dept: var(--brand-600); }  /* Responsible Individuals */
.tier-rm    { --dept: var(--brand-600); }  /* Registered Managers */
.tier-head  { --dept: var(--brand-600); }  /* Heads of Service */
.tier-homes { --dept: var(--brand-600); }  /* Homes Managers */

/* Department colour now frames each circular headshot as a ring */
.team-tier .team-photo { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--dept), 0 12px 26px -14px rgba(19,44,48, .42); }
.team-tier .team-card .name { color: var(--dept); }

/* Heads of Service — only two people, so centre the row */
/* Heads of Service — stacked in a single centred column */
.tier-head .team-grid {
  grid-template-columns: min(340px, 100%);
  justify-content: center;
}

/* Leadership card accent */
.team-lead { border-left: 4px solid var(--brand-700); }
.team-lead .name { color: var(--brand-700); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.3rem; }
.contact-list li { display: flex; gap: .95rem; align-items: flex-start; }
.contact-list .ci {
  flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--tint);
  color: var(--brand-700); display: grid; place-items: center;
}
.contact-list .ci svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.contact-list .k { font-family: var(--font-display); font-weight: 560; color: var(--ink); display: block; }

/* Forms */
.form { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.3rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-family: var(--font-display); font-weight: 560; font-size: .94rem; color: var(--ink); margin-bottom: .45rem; }
.field .req { color: var(--brand-600); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--cream);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1rem;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(76,174,185,.25); background: #fff;
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-success {
  display: none; background: var(--tint); border: 1px solid var(--tint-2); border-radius: var(--r);
  padding: 1.3rem 1.4rem; color: var(--brand-ink); font-weight: 550;
}
.form-success.show { display: block; }
.form-error {
  margin-top: 1rem; background: #FDF2F2; border: 1px solid #F3C9C9; border-left: 4px solid #B03A3A;
  border-radius: var(--r-sm); padding: .85rem 1rem; font-size: .9rem; color: #7A2020;
}
/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Not focusable, hidden from assistive tech. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .65; cursor: not-allowed; }

/* News list */
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.6rem); }
.post-card { display: flex; flex-direction: column; }
.post-thumb { aspect-ratio: 16/9; border-radius: var(--r); background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep)); margin-bottom: 1.2rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { font-size: .78rem; color: var(--brand-700); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
/* "Coming soon" tag sits where the read-more link would, pinned to the card bottom.
   White fill + tint border so it stays visible on the pale-teal section. */
.post-soon {
  margin-top: auto; align-self: flex-start;
  background: var(--white); border: 1px solid var(--tint-2);
  box-shadow: var(--shadow-sm);
}
.post-soon::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(76,174,185,.22);
}

/* Map embed */
.map-embed { position: relative; aspect-ratio: 16/7; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid #fff; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) { .map-embed { aspect-ratio: 4/3; } }

/* Utilities */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.tag-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.3rem 0; }

@media (max-width: 1040px) {
  .grid-2 { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .post-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .article-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .post-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OMEGA TRAINING THEME — scoped to the Training & development page
   Brand palette: Orange #D45526 (lead), Near-black #14121D, Cream #F4ECC8,
   Yellow #F5D23B, White. (Colours only — site fonts retained.)
   ========================================================================== */
.training-theme {
  --ot-orange: #D45526;
  --ot-orange-700: #B8431B;
  --ot-ink: #14121D;
  --ot-cream: #F4ECC8;
  --ot-yellow: #F5D23B;
}
.training-theme .page-hero {
  background:
    radial-gradient(55% 95% at 84% -12%, rgba(212,85,38,.60), transparent 60%),
    radial-gradient(45% 80% at 8% 125%, rgba(245,210,59,.18), transparent 60%),
    var(--ot-ink);
}
.training-theme .page-hero::after { background: radial-gradient(circle, rgba(212,85,38,.42), transparent 65%); }
.training-theme .page-hero .eyebrow {
  background: rgba(245,210,59,.16); border-color: rgba(245,210,59,.45); color: var(--ot-yellow); box-shadow: none;
}
.training-theme .page-hero .eyebrow::before { background: var(--ot-orange); box-shadow: 0 0 0 3px rgba(212,85,38,.35); }
.training-theme .ft-title { color: var(--ot-orange-700); }

/* Omega Training promo band */
.ot-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(85% 150% at 10% -25%, rgba(245,210,59,.32), transparent 55%),
    linear-gradient(135deg, var(--ot-orange) 0%, #C2491E 100%);
  border-radius: var(--r-xl);
  padding: clamp(2.4rem, 2rem + 3vw, 4rem) clamp(1.6rem, 5vw, 3.6rem);
  color: #fff; box-shadow: 0 26px 54px -22px rgba(212,85,38,.65);
}
.ot-band::before { /* grain */
  content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ot-band > * { position: relative; }
.ot-kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem;
  color: var(--ot-ink); background: var(--ot-yellow); padding: .42rem .9rem; border-radius: var(--r-pill);
}
.ot-band h2 { color: #fff; max-width: 20ch; }
.ot-band p { color: rgba(255,255,255,.94); max-width: 56ch; margin-bottom: 1.7rem; font-size: 1.1rem; }
.btn-ot-dark { --_bg: var(--ot-ink); --_fg: #fff; box-shadow: 0 14px 30px -12px rgba(20,18,29,.7); }
.btn-ot-dark:hover { --_bg: #000; --_fg: #fff; }
.btn-ot-yellow { --_bg: var(--ot-yellow); --_fg: var(--ot-ink); }
.btn-ot-yellow:hover { --_bg: #fff; --_fg: var(--ot-ink); }

/* Featured lead card on Meet the team */
.team-lead {
  display: flex; gap: 1.4rem; align-items: center; text-align: left;
  max-width: 600px; margin: 0 auto clamp(2rem, 4vw, 3rem);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 1.3rem 1.5rem;
}
.team-lead .team-photo { width: 180px; height: 180px; flex: none; aspect-ratio: auto; margin: 0; border-radius: 50%; font-size: 1.9rem; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--brand-700), var(--shadow); }
.team-lead .team-body { padding: 0; }
.team-lead .name { font-size: 1.3rem; }
.team-lead .role { font-size: .96rem; margin-top: .25rem; }
@media (max-width: 480px) { .team-lead { flex-direction: column; text-align: center; } }

/* ==========================================================================
   CURRENT VACANCIES — service groups
   Roles are grouped by service, so each role title sits one level below its
   group heading (h3, with the headings inside it at h4) while keeping the
   original visual hierarchy.
   ========================================================================== */
.group-label {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-700);
}
.group-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent); opacity: .55;
}
.prose .role-title {
  margin-top: 1rem;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem);
  letter-spacing: -.02em; color: var(--ink);
}
.prose h4 {
  margin-top: 1.9rem;
  font-size: clamp(1.22rem, 1.05rem + .6vw, 1.5rem);
  letter-spacing: -.01em; color: var(--brand-700);
}
.aside-card h4 { font-size: 1.15rem; margin-bottom: 1.1rem; }