/* ==========================================================================
   JustClinical — Stylesheet
   Layout follows a classic centred corporate structure: utility bar, logo row,
   full-width nav, image hero, centred section headings, three-up card grids.
   Palette: marine blue + warm amber on ivory.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --navy:       #123B5B;
  --navy-700:   #0D2C44;
  --navy-500:   #1B5478;
  --navy-300:   #6E96B0;
  --sky:        #DCE8F0;
  --sky-soft:   #EDF4F8;

  --amber:      #D98829;
  --amber-600:  #B96F1C;
  --amber-tint: #FBEEDC;

  --ivory:      #FBF7F0;
  --ivory-2:    #F3EDE3;
  --white:      #FFFFFF;

  --ink:        #16232C;
  --ink-2:      #46596A;
  --ink-3:      #7C8E9C;
  --line:       #E1D9CC;
  --line-2:     rgba(18,59,91,.12);
  --line-inv:   rgba(255,255,255,.2);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", "Segoe UI", Helvetica, sans-serif;

  --gut:  clamp(1rem, 4vw, 2rem);
  --sec:  clamp(3.5rem, 8vw, 6.5rem);
  --maxw: 1200px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --shadow: 0 14px 40px -22px rgba(13,44,68,.55);
  --shadow-lg: 0 26px 60px -28px rgba(13,44,68,.6);
  --radius: 10px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.nav-open,body.modal-open{ overflow:hidden; }
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; }
p{ margin:0 0 1.15em; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--navy); color:#fff; }

h1,h2,h3,h4,h5{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.2;
  letter-spacing:-.01em; color:var(--navy-700); }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-lg{ max-width:1360px; }
.sec{ padding-block:var(--sec); }
.sec-sm{ padding-block:clamp(2.5rem,5vw,4rem); }
.center{ text-align:center; }
.grid{ display:grid; gap:clamp(1.5rem,2.6vw,2.25rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr;} }

/* ---------- 4. Type ------------------------------------------------------ */
.h-xl{ font-size:clamp(2.3rem,5.4vw,4rem); }
.h-lg{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.h-md{ font-size:clamp(1.45rem,2.4vw,1.9rem); }
.h-sm{ font-size:clamp(1.15rem,1.7vw,1.35rem); }
.lead{ font-size:clamp(1.05rem,1.4vw,1.18rem); color:var(--ink-2); line-height:1.72; }
.small{ font-size:.9rem; }
.muted{ color:var(--ink-3); }

/* Centred section heading with an italic serif title and a short amber rule,
   mirroring the reference site's section styling. */
.sect-head{ max-width:820px; margin:0 auto clamp(2.25rem,4vw,3.25rem); text-align:center; }
.sect-head .kicker{ display:inline-block; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber-600); font-weight:600; margin-bottom:.85rem; }
.sect-title{ font-style:italic; font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:1rem; }
.sect-head .rule{ width:64px; height:3px; background:var(--amber); margin:0 auto 1.35rem;
  border-radius:3px; }
.sect-head p{ color:var(--ink-2); }
.on-dark .sect-title,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark p{ color:rgba(255,255,255,.78); }
.on-dark .kicker{ color:var(--amber); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --bg:var(--amber); --fg:#fff; --bd:var(--amber);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.82rem 1.65rem; background:var(--bg); color:var(--fg);
  border:2px solid var(--bd); border-radius:60px;
  font-size:.92rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:background .28s, color .28s, border-color .28s, transform .3s var(--spring), box-shadow .3s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(13,44,68,.55); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:3px solid var(--navy-300); outline-offset:3px; }
.btn .bi{ font-size:1rem; transition:transform .35s var(--spring); }
.btn:hover .bi{ transform:translateX(3px); }

.btn-amber:hover{ --bg:var(--amber-600); --bd:var(--amber-600); }
.btn-navy{ --bg:var(--navy); --bd:var(--navy); }
.btn-navy:hover{ --bg:var(--navy-700); --bd:var(--navy-700); }
.btn-outline{ --bg:transparent; --fg:var(--navy); --bd:var(--navy); }
.btn-outline:hover{ --bg:var(--navy); --fg:#fff; }
.btn-white{ --bg:#fff; --fg:var(--navy); --bd:#fff; }
.btn-white:hover{ --bg:var(--amber); --fg:#fff; --bd:var(--amber); }
.btn-ghost-light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.55); }
.btn-ghost-light:hover{ --bg:#fff; --fg:var(--navy); --bd:#fff; }
.btn-sm{ padding:.6rem 1.2rem; font-size:.85rem; }
.btn-block{ width:100%; }

/* Inline arrow link */
.arrow-link{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  font-size:.92rem; color:var(--navy-500); transition:color .25s, gap .3s var(--spring); }
.arrow-link:hover{ color:var(--amber-600); gap:.8rem; }

/* ---------- 6. Utility bar ----------------------------------------------- */
.topbar{ background:var(--navy-700); color:rgba(255,255,255,.82); font-size:.8rem; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:42px; }
.topbar-brand{ display:inline-flex; align-items:center; gap:.55rem; letter-spacing:.02em; }
.topbar-brand .flag{ width:20px; height:13px; border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.topbar-social{ display:flex; align-items:center; gap:.35rem; }
.topbar-social a{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  font-size:.9rem; opacity:.8; transition:opacity .25s, background .25s, transform .3s var(--spring); }
.topbar-social a:hover{ opacity:1; background:rgba(255,255,255,.13); transform:translateY(-2px); }
@media(max-width:640px){ .topbar-brand span.txt{ display:none; } }

/* ---------- 7. Logo row -------------------------------------------------- */
.logo-row{ background:var(--white); }
.logo-row .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:1rem; }
.logo{ display:inline-flex; align-items:center; gap:.7rem; }
.logo-mark{ width:44px; height:44px; flex:none; }
.logo-name{ font-family:var(--serif); font-size:1.6rem; font-weight:600; line-height:1;
  color:var(--navy); letter-spacing:-.02em; }
.logo-name em{ font-style:normal; color:var(--amber); }
.logo-tag{ display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.35rem; font-weight:500; }
.logo-row .btn{ flex:none; }
@media(max-width:900px){ .logo-row .btn{ display:none; } }

/* ---------- 8. Navigation ------------------------------------------------ */
.navbar{ background:var(--navy); position:sticky; top:0; z-index:150;
  box-shadow:0 2px 18px -8px rgba(13,44,68,.5); }
.navbar .wrap{ display:flex; align-items:center; justify-content:center; gap:.2rem; }
.menu{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; list-style:none; }
.menu > li{ position:relative; }
.menu > li > a{ display:block; padding:1rem 1.15rem; color:rgba(255,255,255,.88);
  font-size:.94rem; font-weight:500; position:relative; transition:color .25s, background .25s; }
.menu > li > a::after{ content:""; position:absolute; left:1.15rem; right:1.15rem; bottom:.7rem;
  height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease); }
.menu > li > a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.menu > li > a:hover::after,.menu > li.active > a::after{ transform:scaleX(1); }
.menu > li.active > a{ color:#fff; }
.menu .caret{ font-size:.7rem; margin-left:.35rem; transition:transform .3s var(--ease); }
.menu .has-sub:hover .caret{ transform:rotate(180deg); }

.submenu{ position:absolute; top:100%; left:0; min-width:230px; background:var(--white);
  border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-lg);
  padding:.4rem; list-style:none; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s, transform .32s var(--ease), visibility .28s; }
.has-sub:hover .submenu,.has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:none; }
.submenu a{ display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; font-size:.9rem;
  border-radius:6px; color:var(--ink-2); transition:background .22s, color .22s, padding-left .28s; }
.submenu a:hover{ background:var(--sky-soft); color:var(--navy); padding-left:1.1rem; }
.submenu .bi{ color:var(--amber); font-size:.85rem; }

.nav-toggle{ display:none; align-items:center; gap:.6rem; color:#fff; padding:.9rem 0;
  font-size:.95rem; font-weight:500; margin-right:auto; }
.nav-toggle .bi{ font-size:1.3rem; }
.nav-cta-m{ display:none; }
@media(max-width:1000px){
  .menu{ display:none; }
  .navbar .wrap{ justify-content:space-between; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta-m{ display:inline-flex; }
}

/* Mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:var(--navy-700); color:#fff;
  padding:1.25rem var(--gut) 3rem; overflow-y:auto; transform:translateX(100%);
  transition:transform .45s var(--ease); }
body.nav-open .drawer{ transform:none; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.25rem; border-bottom:1px solid var(--line-inv); margin-bottom:1rem; }
.drawer-close{ color:#fff; font-size:1.6rem; line-height:1; padding:.35rem; }
.drawer ul{ list-style:none; }
.drawer > ul > li{ border-bottom:1px solid var(--line-inv); }
.drawer > ul > li > a{ display:flex; align-items:center; gap:.75rem; padding:.95rem 0;
  font-family:var(--serif); font-size:1.3rem; color:#fff; }
.drawer > ul > li > a .bi{ color:var(--amber); font-size:1rem; }
.drawer .sub{ padding:0 0 .9rem 1.75rem; }
.drawer .sub a{ display:block; padding:.35rem 0; font-size:.95rem; color:rgba(255,255,255,.7); }
.drawer-foot{ margin-top:2rem; display:grid; gap:.9rem; }
.drawer-foot .btn{ width:100%; }
.drawer-foot a.line{ display:flex; align-items:center; gap:.6rem; font-size:.9rem;
  color:rgba(255,255,255,.75); }

/* ---------- 9. Hero ------------------------------------------------------ */
.hero{ position:relative; min-height:clamp(480px,74vh,700px); display:grid; place-items:center;
  text-align:center; overflow:hidden; background:var(--navy-700); }
.hero-bg{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.hero-slide.on{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1);
  transition:transform 8s linear; }
.hero-slide.on img{ transform:scale(1); }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,44,68,.72),rgba(13,44,68,.55) 45%,rgba(13,44,68,.85)); }

.hero-inner{ position:relative; z-index:2; max-width:880px; padding:clamp(3rem,7vw,5rem) var(--gut); }
.hero-text{ display:none; }
.hero-text.on{ display:block; animation:fadeUp .85s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.hero-title{ color:#fff; font-size:clamp(2.1rem,5.6vw,3.9rem); line-height:1.12; margin-bottom:1.1rem; }
.hero-title em{ font-style:italic; color:var(--amber); }
.hero-sub{ color:rgba(255,255,255,.85); font-size:clamp(1rem,1.6vw,1.2rem); max-width:640px;
  margin:0 auto 2rem; }
.hero-acts{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.hero-dots{ position:absolute; bottom:1.75rem; left:0; right:0; z-index:3;
  display:flex; gap:.5rem; justify-content:center; }
.hero-dots button{ width:32px; height:4px; border-radius:4px; background:rgba(255,255,255,.35);
  transition:background .3s, width .35s var(--spring); }
.hero-dots button.on{ background:var(--amber); width:52px; }
.hero-arrow{ position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  color:#fff; display:grid; place-items:center; font-size:1.15rem;
  transition:background .28s, color .28s, border-color .28s; }
.hero-arrow:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.hero-arrow.prev{ left:clamp(.75rem,3vw,2rem); }
.hero-arrow.next{ right:clamp(.75rem,3vw,2rem); }
@media(max-width:700px){ .hero-arrow{ display:none; } }

/* ---------- 10. Statement strip with floating photos --------------------- */
.statement{ position:relative; background:var(--white); overflow:hidden;
  padding-block:clamp(3rem,7vw,5.5rem); }
.statement .wrap{ position:relative; z-index:2; }
.statement p{ max-width:760px; margin:0 auto; text-align:center;
  font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.6;
  color:var(--navy-700); }
.statement p strong{ color:var(--amber-600); font-weight:600; }
.float-img{ position:absolute; z-index:1; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); width:clamp(150px,17vw,240px); aspect-ratio:4/3; }
.float-img img{ width:100%; height:100%; object-fit:cover; }
.float-img.one{ left:2%; top:12%; animation:bob 7s ease-in-out infinite; }
.float-img.two{ right:2%; bottom:10%; animation:bob 7s ease-in-out infinite 1.6s; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@media(max-width:1100px){ .float-img{ display:none; } }

/* ---------- 11. Cards ---------------------------------------------------- */
.card{ background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%;
  transition:transform .45s var(--ease), box-shadow .45s; }
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.card-fig{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card-fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card-fig img{ transform:scale(1.07); }
.card-icon{ position:absolute; left:1.15rem; bottom:-24px; width:52px; height:52px;
  border-radius:50%; background:var(--amber); color:#fff; display:grid; place-items:center;
  font-size:1.35rem; box-shadow:0 8px 20px -8px rgba(13,44,68,.6);
  transition:transform .4s var(--spring); }
.card:hover .card-icon{ transform:rotate(-8deg) scale(1.08); }
.card-body{ padding:2.1rem 1.6rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:1.32rem; margin-bottom:.7rem; }
.card-body h3.ital{ font-style:italic; }
.card-body p{ font-size:.95rem; color:var(--ink-2); }
.card-body .btn,.card-body .arrow-link{ margin-top:auto; align-self:flex-start; }
.card-body .btn{ margin-top:1.3rem; }

/* ---------- 12. Coloured band -------------------------------------------- */
.band{ background:var(--navy); position:relative; overflow:hidden; }
.band::before{ content:""; position:absolute; inset:0; opacity:.55;
  background:radial-gradient(620px 320px at 15% 0%,rgba(110,150,176,.3),transparent 62%),
             radial-gradient(560px 380px at 88% 100%,rgba(217,136,41,.22),transparent 60%); }
.band > *{ position:relative; z-index:1; }
.band-amber{ background:var(--amber); }
.band-amber::before{ background:radial-gradient(600px 320px at 85% 0%,rgba(255,255,255,.16),transparent 60%); }

.stat{ text-align:center; padding:1.25rem .5rem; }
.stat .bi{ font-size:1.6rem; color:var(--amber); margin-bottom:.55rem; display:block; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2rem,3.8vw,2.9rem);
  font-weight:600; color:#fff; line-height:1; }
.stat span{ display:block; margin-top:.5rem; font-size:.86rem; color:rgba(255,255,255,.72); }

/* ---------- 13. CTA band ------------------------------------------------- */
.cta{ background:var(--navy-700); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(700px 320px at 50% 0%,rgba(217,136,41,.22),transparent 65%); }
.cta .wrap{ position:relative; z-index:1; padding-block:clamp(3rem,6vw,4.75rem); max-width:820px; }
.cta h2{ color:#fff; font-style:italic; font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:1rem; }
.cta p{ color:rgba(255,255,255,.8); margin-bottom:2rem; }

/* ---------- 14. Footer --------------------------------------------------- */
.site-foot{ background:var(--navy-700); color:rgba(255,255,255,.72); }
.foot-main{ padding-block:clamp(3rem,6vw,4.5rem); display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(1.75rem,3.5vw,3rem); }
@media(max-width:900px){ .foot-main{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .foot-main{ grid-template-columns:1fr; } }
.site-foot h4{ color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; margin-bottom:1.15rem; }
.site-foot ul{ list-style:none; display:grid; gap:.55rem; }
.site-foot li a{ display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem;
  transition:color .25s, padding-left .28s; }
.site-foot li a .bi{ font-size:.72rem; color:var(--amber); }
.site-foot li a:hover{ color:#fff; padding-left:.25rem; }
.foot-brand .logo-name{ color:#fff; }
.foot-brand p{ font-size:.92rem; margin-top:1rem; }
.foot-social{ display:flex; gap:.5rem; margin-top:1.25rem; }
.foot-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-inv);
  display:grid; place-items:center; transition:background .3s, color .3s, transform .3s var(--spring); }
.foot-social a:hover{ background:var(--amber); border-color:var(--amber); color:#fff; transform:translateY(-3px); }
.foot-contact li{ display:flex; gap:.7rem; font-size:.92rem; line-height:1.6; }
.foot-contact .bi{ color:var(--amber); margin-top:.35rem; }
.foot-bar{ border-top:1px solid var(--line-inv); padding-block:1.4rem; display:flex;
  flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; align-items:center; font-size:.83rem; }
.foot-bar nav{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.foot-bar a:hover{ color:#fff; }

/* ---------- 15. Page banner ---------------------------------------------- */
.banner{ position:relative; background:var(--navy-700); color:#fff; text-align:center;
  padding-block:clamp(3rem,7vw,5.25rem); overflow:hidden; }
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32;
  animation:zoomOut 16s ease-out both; }
@keyframes zoomOut{ from{ transform:scale(1.14);} to{ transform:scale(1);} }
.banner::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,44,68,.72),rgba(13,44,68,.86)); }
.banner .wrap{ position:relative; z-index:2; max-width:820px; }
.banner h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); margin-bottom:.85rem; }
.banner h1 em{ font-style:italic; color:var(--amber); }
.banner p{ color:rgba(255,255,255,.82); margin:0; }
.crumb{ display:flex; gap:.5rem; align-items:center; justify-content:center; font-size:.8rem;
  color:rgba(255,255,255,.65); margin-bottom:1rem; }
.crumb a:hover{ color:#fff; }
.crumb .bi{ font-size:.65rem; }

/* ---------- 16. Media + text rows ---------------------------------------- */
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.row2.flip .row2-media{ order:-1; }
@media(max-width:880px){ .row2,.row2.flip{ grid-template-columns:1fr; }
  .row2.flip .row2-media{ order:0; } }
.row2-media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.row2-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.row2-media .badge{ position:absolute; left:1rem; bottom:1rem; background:var(--amber); color:#fff;
  padding:.5rem .95rem; border-radius:60px; font-size:.78rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.45rem; }

/* Tick list */
.ticks{ list-style:none; display:grid; gap:.85rem; margin:1.5rem 0; }
.ticks li{ display:flex; gap:.8rem; font-size:.96rem; color:var(--ink-2); }
.ticks .bi{ color:var(--amber); font-size:1.05rem; margin-top:.28rem; flex:none; }

/* ---------- 17. Numbered steps ------------------------------------------- */
.steps{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.step{ background:var(--white); border-radius:var(--radius); padding:1.75rem 1.5rem;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s; }
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--amber); }
.step .n{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--sky); color:var(--navy); font-weight:700; font-size:1rem; margin-bottom:1rem; }
.step h3{ font-size:1.14rem; margin-bottom:.5rem; }
.step p{ font-size:.92rem; color:var(--ink-2); margin:0; }

/* ---------- 18. Accordion ------------------------------------------------ */
.acc{ display:grid; gap:.85rem; }
.acc-item{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; }
.acc-q{ width:100%; text-align:left; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; font-family:var(--serif); font-size:1.08rem; font-weight:500;
  color:var(--navy-700); transition:background .25s; }
.acc-q:hover{ background:var(--sky-soft); }
.acc-q .bi{ margin-left:auto; color:var(--amber); font-size:1.1rem; flex:none;
  transition:transform .4s var(--spring); }
.acc-item.open .acc-q .bi{ transform:rotate(45deg); }
.acc-a{ height:0; overflow:hidden; transition:height .45s var(--ease); }
.acc-a-in{ padding:0 1.4rem 1.35rem; color:var(--ink-2); font-size:.95rem; }

/* ---------- 19. Location cards ------------------------------------------- */
.loc{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-columns:.9fr 1.1fr; transition:transform .45s var(--ease), box-shadow .45s; }
.loc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
@media(max-width:800px){ .loc{ grid-template-columns:1fr; } }
.loc-fig{ position:relative; min-height:230px; overflow:hidden; }
.loc-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease); }
.loc:hover .loc-fig img{ transform:scale(1.06); }
.loc-tag{ position:absolute; left:.9rem; top:.9rem; background:var(--navy); color:#fff;
  padding:.35rem .8rem; border-radius:60px; font-size:.74rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem; }
.loc-body{ padding:1.75rem 1.6rem; }
.loc-body h3{ font-size:1.45rem; margin-bottom:.55rem; }
.loc-list{ list-style:none; display:grid; gap:.55rem; margin:1.1rem 0; font-size:.9rem;
  color:var(--ink-2); }
.loc-list li{ display:flex; gap:.65rem; }
.loc-list .bi{ color:var(--amber); margin-top:.3rem; flex:none; }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ font-size:.75rem; padding:.32rem .7rem; border-radius:60px; background:var(--sky-soft);
  color:var(--navy-500); font-weight:500; }

/* ---------- 20. Jobs + posts --------------------------------------------- */
.job{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.6rem; display:grid; grid-template-columns:1fr auto; gap:1.25rem; align-items:center;
  transition:transform .4s var(--ease), box-shadow .4s; }
.job:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
@media(max-width:640px){ .job{ grid-template-columns:1fr; } }
.job h3{ font-size:1.2rem; margin-bottom:.55rem; }
.job-meta{ display:flex; flex-wrap:wrap; gap:.5rem .95rem; font-size:.83rem; color:var(--ink-3); }
.job-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.job-meta .bi{ color:var(--amber); }

.post{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; height:100%; transition:transform .45s var(--ease), box-shadow .45s; }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.post-fig{ aspect-ratio:16/10; overflow:hidden; }
.post-fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.post:hover .post-fig img{ transform:scale(1.07); }
.post-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.post-tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber-600); margin-bottom:.6rem; }
.post-body h3{ font-size:1.18rem; margin-bottom:.55rem; transition:color .25s; }
.post:hover h3{ color:var(--navy-500); }
.post-body p{ font-size:.92rem; color:var(--ink-2); }
.post-date{ margin-top:auto; padding-top:.9rem; font-size:.82rem; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.4rem; }
.post-date .bi{ color:var(--amber); }

/* ---------- 21. Forms ---------------------------------------------------- */
.formbox{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.5vw,2.75rem); }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.35rem; }
@media(max-width:640px){ .fields{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:.4rem; }
.fld.full{ grid-column:1/-1; }
.fld label{ font-size:.83rem; font-weight:600; color:var(--navy-700); }
.fld label b{ color:var(--amber-600); font-weight:600; }
.fld input,.fld select,.fld textarea{ width:100%; padding:.8rem .95rem; background:var(--ivory);
  border:1.5px solid var(--line); border-radius:8px; font-size:.95rem;
  transition:border-color .28s, background .28s, box-shadow .28s; }
.fld textarea{ min-height:150px; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; background:#fff;
  border-color:var(--navy-500); box-shadow:0 0 0 3px rgba(27,84,120,.14); }
.fld.err input,.fld.err select,.fld.err textarea{ border-color:#C0453B; }
.fld-err{ font-size:.79rem; color:#C0453B; display:inline-flex; align-items:center; gap:.35rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.checkline{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.checkline input{ width:18px; height:18px; margin-top:.25rem; flex:none; accent-color:var(--navy); }

.alert{ display:flex; gap:.75rem; padding:.95rem 1.15rem; border-radius:8px; margin-bottom:1.5rem;
  font-size:.92rem; align-items:flex-start; }
.alert .bi{ font-size:1.1rem; margin-top:.15rem; }
.alert-ok{ background:var(--sky-soft); color:var(--navy); border-left:4px solid var(--navy-500); }
.alert-no{ background:#FBEAE8; color:#8E2F26; border-left:4px solid #C0453B; }

/* Contact detail tiles */
.ctile{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.6rem; text-align:center; height:100%;
  transition:transform .4s var(--ease), box-shadow .4s; }
.ctile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.ctile .ico{ width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--sky);
  color:var(--navy); display:grid; place-items:center; font-size:1.4rem; }
.ctile h3{ font-size:1.08rem; margin-bottom:.5rem; }
.ctile p,.ctile a{ font-size:.92rem; color:var(--ink-2); margin:0 0 .25rem; }
.ctile a:hover{ color:var(--amber-600); }

/* ---------- 22. Modal ---------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:1.25rem;
  background:rgba(13,44,68,.65); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.modal.open{ opacity:1; visibility:visible; }
.modal-box{ background:var(--white); border-radius:var(--radius); width:min(620px,100%);
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  transform:translateY(24px) scale(.98); transition:transform .4s var(--spring); }
.modal.open .modal-box{ transform:none; }
.modal-head{ display:flex; align-items:flex-start; gap:1rem; padding:1.5rem 1.6rem 0; }
.modal-head h3{ font-size:1.35rem; font-style:italic; }
.modal-close{ margin-left:auto; font-size:1.5rem; line-height:1; color:var(--ink-3); flex:none;
  transition:color .25s, transform .3s var(--spring); }
.modal-close:hover{ color:var(--amber-600); transform:rotate(90deg); }
.modal-body{ padding:1rem 1.6rem 1.75rem; }
.modal-body > p:first-child{ font-size:.92rem; color:var(--ink-2); }

/* ---------- 23. Prose (legal) -------------------------------------------- */
.prose{ max-width:800px; margin:0 auto; }
.prose h2{ font-size:clamp(1.35rem,2.4vw,1.8rem); margin:2.5rem 0 .9rem; }
.prose h3{ font-size:1.12rem; margin:1.85rem 0 .6rem; }
.prose p,.prose li{ color:var(--ink-2); }
.prose ul,.prose ol{ padding-left:1.25rem; margin:0 0 1.2em; display:grid; gap:.5rem; }
.prose a{ color:var(--amber-600); text-decoration:underline; text-underline-offset:3px; }
.toc{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.5rem 1.6rem; margin-bottom:2.5rem; }
.toc h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:.9rem; }
.toc ol{ margin:0; padding-left:1.15rem; display:grid; gap:.4rem; font-size:.92rem; }

/* ---------- 24. Cookie bar ----------------------------------------------- */
.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:350; background:var(--navy-700);
  color:rgba(255,255,255,.85); padding:1rem var(--gut);
  transform:translateY(110%); transition:transform .6s var(--ease); }
.cookie.show{ transform:none; }
.cookie-in{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center;
  gap:1rem 1.5rem; flex-wrap:wrap; font-size:.88rem; }
.cookie-in p{ margin:0; flex:1 1 340px; }
.cookie-in a{ color:var(--amber); text-decoration:underline; }
.cookie-in .btn{ flex:none; }

/* ---------- 25. Reveal --------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-d="1"]{ transition-delay:.1s; } [data-d="2"]{ transition-delay:.2s; }
[data-d="3"]{ transition-delay:.3s; } [data-d="4"]{ transition-delay:.4s; }
[data-d="5"]{ transition-delay:.5s; }

img.img-fallback{ background:linear-gradient(135deg,var(--sky),var(--ivory-2)); min-height:120px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--navy);
  color:#fff; padding:.75rem 1.15rem; }
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- 26. Reduced motion ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-slide img,.float-img{ transform:none; animation:none; }
}