/* iCare Group — visual system.

   Layout spine: a fixed rail on the left holds the mark, the section index and
   the phone number; .page is inset by --rail to clear it. Below --bp-rail the
   rail becomes a top bar and --rail collapses to 0, so every inset that
   references it resolves to flush-left without a second set of rules.

   Colour is documented at the token block below. */

/* ---------- TOKENS ---------- */
/* Every colour here derives from the mark, which is one continuous monoline
   stroke filled with a single left-to-right gradient: #0CC0DF -> #FFDE59.
   Its midpoint resolves to #86CF9C, so the brand is a three-stop ramp
   (cyan -> mint -> yellow), not a pair.

   The three brand stops are surfaces only: at full strength they measure
   2.18:1, 2.26:1 and 1.33:1 on white, so none of them can carry text. Text
   uses the -ink/-text/-deep variants below, each darkened along its own hue
   so it still reads as the brand colour rather than a generic dark. */
:root{
  /* Five stops sampled across the rendered mark, left to right. The logo is one
     continuous gradient, so it almost never shows its declared endpoints alone —
     what the eye reads is this ramp. Every coloured surface on the page is one of
     these stops, which is what keeps the page and the mark in the same family. */
  --cyan:#0CC0DF;  --turq:#4EC9BC;  --mint:#78CEA5;  --sage:#A4D38E;  --gold:#FFDE59;
  --brand-ramp:linear-gradient(90deg,#0CC0DF,#4EC9BC,#78CEA5,#A4D38E,#FFDE59);

  /* Tints of the same five hues, for large surfaces. */
  --cyan-wash:#E4FAFE; --turq-wash:#EAF8F7; --mint-wash:#EAF8F1;
  --sage-wash:#EFF7EB; --gold-wash:#FFF9E3;

  /* Each stop darkened along its own hue until it carries text. The -text set
     clears AA on white/cream/cream-deep; the -deep set clears AAA there, and
     white clears AAA on any of them. */
  --cyan-text:#087B8F; --turq-text:#267C73; --mint-text:#2E7E58;
  --sage-text:#497D31; --gold-text:#886D00;
  --cyan-deep:#065C6A; --turq-deep:#1C5D56; --mint-deep:#225E42;
  --sage-deep:#365D24; --gold-deep:#655100;

  --ink:#11282C;          /* hue-true to the cyan: 15.40:1 on white, 11.62:1 on brand yellow */
  --ink-soft:#3D5A60;
  --muted:#55747B;
  --line:#E3DED3;
  --line-soft:#EFEAE1;

  --cream:#FFFCF4;
  --cream-deep:#FDF5E7;
  --paper:#FFFFFF;
  --paper-dim:#FDFAF3;   /* consumed by form.css for the modal's footer and status strip */

  --red:#B3261E;
  --green:#1B6B4A;

  --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:40px; --r-pill:999px;

  --rail:300px;
  --gutter:clamp(20px,4vw,64px);
  --measure:66ch;

  /* Nunito's terminals are rounded, which is the same move the mark makes with
     its round line caps; a serif fights the monoline geometry. */
  --display:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

@media (max-width:1100px){ :root{ --rail:0px; } }

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Fraunces' SOFT and WONK axes round the terminals and tilt the g/y — the
   difference between this reading as a clinic and as a friendly one. */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0;
}
p{margin:0;}
a{color:var(--cyan-text); text-underline-offset:3px;}
a:hover{color:var(--cyan-deep);}
img,svg{max-width:100%;}
ul{margin:0; padding:0; list-style:none;}

:focus-visible{outline:3px solid var(--cyan-text); outline-offset:3px; border-radius:6px;}

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

.skip-link{position:absolute; left:16px; top:-60px; z-index:200; background:var(--cyan-deep); color:#fff;
  padding:12px 18px; border-radius:var(--r-sm); font-weight:700; text-decoration:none; transition:top .18s ease;}
.skip-link:focus{top:16px; color:#fff;}

/* ---------- PAGE SPINE ---------- */
.page{margin-left:var(--rail);}
.bleed{padding-inline:var(--gutter);}
.hold{max-width:1240px; margin-inline:auto;}

/* ---------- RAIL ---------- */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:90;
  background:var(--cyan-deep); color:#fff;
  display:flex; flex-direction:column;
  padding:26px 22px 22px;
}
.rail-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff;}
.rail-brand:hover{color:#fff;}
.rail-brand img{height:46px; width:auto; flex:none;}
.rail-name{font-family:var(--display); font-size:26px; font-weight:800; display:block; line-height:1.1;}
.rail-sub{display:block; font-size:11px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; color:#B3E4EF; margin-top:3px;}

.rail-nav{display:flex; flex-direction:column; gap:2px; margin:24px 0;}
.rail-nav a{
  display:flex; align-items:center; gap:13px; text-decoration:none; color:#CFEFF6;
  padding:8px 13px; font-size:15px; font-weight:600; border-radius:var(--r-pill);
  transition:background-color .15s ease, color .15s ease;
}
.rail-nav a:hover{background:rgba(255,255,255,.13); color:#fff;}
.rail-nav .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); flex:none;}
.rail-nav a:hover .dot{background:var(--gold);}
.rail-nav a[aria-current="true"]{background:rgba(255,255,255,.16); color:#fff;}
.rail-nav a[aria-current="true"] .dot{background:var(--gold);}

.rail-foot{display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.rail-call{display:block; text-decoration:none; color:#fff; background:rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:14px 16px; text-align:center;}
.rail-call:hover{background:rgba(255,255,255,.17); color:#fff;}
.rail-call small{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#B3E4EF; margin-bottom:5px;}
.rail-call strong{font-family:var(--display); font-size:23px; font-weight:800; display:block;}

/* ---------- TOP BAR ---------- */
.topbar{display:none;}
@media (max-width:1100px){
  .rail{display:none;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    position:sticky; top:0; z-index:95; background:var(--cyan-deep); color:#fff;
    padding:12px var(--gutter);
    padding-top:calc(12px + env(safe-area-inset-top));
  }
  .topbar .rail-brand img{height:42px; width:auto;}
  .topbar .rail-name{font-size:20px;}
  .topbar .rail-brand{min-width:0;}
  .topbar .rail-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .topbar .rail-sub{display:none;}
}
.bar-actions{display:flex; align-items:center; gap:10px;}
.menu-btn{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0 12px; background:rgba(255,255,255,.12);
  border:0; border-radius:var(--r-sm); cursor:pointer;
}
.menu-btn span{display:block; height:2.5px; background:#fff; border-radius:3px;}

.drawer{display:none;}
@media (max-width:1100px){
  .drawer{display:block; position:fixed; inset:0; z-index:94; background:var(--cyan-deep);
    padding:92px var(--gutter) 40px; overflow-y:auto; transform:translateY(-100%);
    transition:transform .28s ease; visibility:hidden;}
  .drawer.open{transform:translateY(0); visibility:visible;}
  .drawer a{display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none;
    font-family:var(--display); font-size:30px; font-weight:600; padding:14px 0;}
  .drawer .dot{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:15.5px; line-height:1;
  padding:14px 24px; border-radius:var(--r-pill); text-decoration:none;
  cursor:pointer; border:2.5px solid transparent; white-space:nowrap;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--cyan-deep); color:#fff;}
.btn-primary:hover{background:#04505E; color:#fff;}
.btn-accent{background:var(--gold); color:var(--ink);}
.btn-accent:hover{background:#FFD42E; color:var(--ink);}
.btn-outline{background:transparent; border-color:currentColor; color:var(--cyan-deep);}
.btn-outline:hover{background:var(--cyan-wash); color:var(--cyan-deep);}
.btn-light{background:#fff; color:var(--cyan-deep);}
.btn-light:hover{background:#fff; color:#04505E;}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.6); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.15); color:#fff;}
.btn-sm{padding:11px 17px; font-size:14.5px; min-height:44px;}
/* Only inside a column flow — never on a child of a flex row. */
.btn-wide{display:flex; width:100%;}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--cream-deep);
  padding:clamp(34px,5vh,60px) var(--gutter) clamp(30px,4vh,48px);}
/* Two soft blobs, drawn behind content and ignored by pointers. */
.hero::before,.hero::after{content:''; position:absolute; border-radius:50%; pointer-events:none;}
.hero::before{width:44vw; height:44vw; right:-15vw; top:-21vw; background:rgba(12,192,223,.24);}
.hero::after{width:26vw; height:26vw; right:-9vw; bottom:-15vw; background:rgba(255,222,89,.42);}
.hero > *{position:relative;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(22px,3.2vw,46px); align-items:end;}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; align-items:start;} }

.kicker{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700;
  color:var(--cyan-deep); background:#fff; border-radius:var(--r-pill);
  padding:7px 15px 7px 11px; margin-bottom:16px;}
.kicker::before{content:''; width:12px; height:12px; border-radius:50%; background:var(--brand-ramp);}

.hero h1{font-size:clamp(31px,4.5vw,56px); letter-spacing:-.026em;}
.hero h1 em{font-style:normal; color:var(--cyan-deep);}
.hero-lead{margin-top:16px; font-size:clamp(15.5px,1.15vw,17.5px); color:var(--ink-soft); max-width:58ch;}
.hero-lead strong{color:var(--ink); font-weight:700;}
.hero-cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px;}

.hero-figures{display:flex; flex-direction:column; gap:9px; padding-bottom:3px;}
.figure{background:#fff; border-radius:var(--r-md); padding:14px 18px;}
.figure b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.5vw,32px);
  color:var(--cyan-deep); line-height:1;}
.figure span{display:block; margin-top:5px; font-size:14px; color:var(--muted); line-height:1.4;}

/* ---------- SECTION FURNITURE ---------- */
.band{padding:clamp(40px,4.6vw,68px) 0;}
.band-cream{background:var(--cream);}
.band-white{background:var(--paper);}
.band-cyan{background:var(--cyan-wash);}
.band-head{margin-bottom:clamp(22px,2.4vw,34px); max-width:var(--measure);}
.band-head .tag{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-text); margin-bottom:11px;}
.band-head .tag::before{content:''; width:26px; height:3px; border-radius:2px; background:var(--brand-ramp);}
.band-head h2{font-size:clamp(24px,2.8vw,35px); max-width:20ch;}
.band-head p{margin-top:12px; font-size:clamp(15px,1.1vw,16.5px); color:var(--muted);}

/* ---------- SPLIT: the two branches ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
@media (max-width:860px){ .split{grid-template-columns:1fr;} }
.half{border-radius:var(--r-lg); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column;}
.half-nursing{background:var(--cyan-deep); color:#fff;}
.half-day{background:var(--gold); color:var(--ink);}
.half-tag{display:inline-block; align-self:flex-start; font-size:13px; font-weight:800;
  border-radius:var(--r-pill); padding:6px 13px; margin-bottom:14px;}
.half-nursing .half-tag{background:rgba(255,255,255,.17); color:#fff;}
.half-day .half-tag{background:rgba(22,50,61,.1); color:var(--ink);}
.half h3{font-size:clamp(20px,2vw,26px); max-width:16ch;}
.half > p{margin-top:11px; font-size:15.5px; max-width:46ch;}
.half-nursing > p{color:#CFEFF6;}
.half-day > p{color:var(--gold-deep);}
.half ul{margin:18px 0 0; display:flex; flex-wrap:wrap; gap:7px; flex:1 1 auto; align-content:flex-start;}
.half li{font-weight:600; font-size:14px; border-radius:var(--r-pill); padding:7px 13px;}
.half-nursing li{background:rgba(255,255,255,.13);}
.half-day li{background:rgba(255,255,255,.55);}
.half .btn{margin-top:20px; align-self:flex-start;}

/* ---------- EDITORIAL ROWS ---------- */
.rows{display:flex; flex-direction:column; gap:8px;}
.row{
  display:grid; grid-template-columns:minmax(0,21ch) minmax(0,1fr);
  gap:clamp(12px,2.2vw,30px); align-items:start;
  background:var(--paper); border-radius:var(--r-md); padding:clamp(15px,1.6vw,21px) clamp(18px,1.9vw,25px);
}
.band-white .row{background:var(--cream);}
@media (max-width:760px){ .row{grid-template-columns:1fr; gap:10px;} }
.row h3{font-size:clamp(17px,1.55vw,20px);}
.row p{color:var(--muted); font-size:15.3px;}

/* ---------- HOMES ---------- */
.plates{display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:10px;}
.plate{border-radius:var(--r-md); padding:18px 18px 17px; min-height:124px;
  display:flex; flex-direction:column; justify-content:flex-end; background:var(--cyan-wash);}
.plate:nth-child(5n+2){background:var(--turq-wash);}
.plate:nth-child(5n+3){background:var(--mint-wash);}
.plate:nth-child(5n+4){background:var(--sage-wash);}
.plate:nth-child(5n){background:var(--gold-wash);}
.plate:nth-child(5n+2) .plate-mark{color:var(--turq-deep);}
.plate:nth-child(5n+3) .plate-mark{color:var(--mint-deep);}
.plate:nth-child(5n+4) .plate-mark{color:var(--sage-deep);}
.plate:nth-child(5n) .plate-mark{color:var(--gold-deep);}
.plate-mark{width:32px; height:32px; border-radius:50%; background:#fff; margin-bottom:auto;
  display:flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:800; font-size:17px; color:var(--cyan-deep);}
.plate h3{font-size:19px; margin-top:13px;}
.plate p{margin-top:5px; font-size:13.5px; color:var(--ink-soft);}
.note{margin-top:20px; font-size:15.5px; color:var(--muted); max-width:var(--measure);}

/* ---------- PROGRAMS ---------- */
.progs{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:10px;}
.prog{background:var(--paper); border-radius:var(--r-md); padding:20px 20px 19px;}
.band-white .prog{background:var(--cream);}
.prog b{display:inline-block; font-size:13px; font-weight:800; border-radius:var(--r-pill);
  padding:5px 11px; background:var(--cyan-wash); color:var(--cyan-deep); margin-bottom:11px;}
.prog:nth-child(4n+2) b{background:var(--mint-wash); color:var(--mint-deep);}
.prog:nth-child(4n+3) b{background:var(--sage-wash); color:var(--sage-deep);}
.prog:nth-child(4n) b{background:var(--gold-wash); color:var(--gold-deep);}
.prog h3{font-size:clamp(18px,1.7vw,22px);}
.prog p{margin-top:8px; color:var(--muted); font-size:15px;}

/* ---------- CALLOUT ---------- */
.callout{background:var(--gold); color:var(--ink); border-radius:var(--r-lg);
  padding:clamp(26px,2.9vw,42px);}
.callout-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,2.8vw,40px); align-items:center;}
@media (max-width:860px){ .callout-grid{grid-template-columns:1fr;} }
.callout h2{font-size:clamp(22px,2.5vw,32px); max-width:19ch;}
.callout p{margin-top:11px; font-size:15.5px; color:var(--gold-deep); max-width:52ch;}
.callout-acts{display:flex; flex-direction:column; gap:12px;}

/* ---------- TEAM ---------- */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:clamp(13px,1.6vw,20px);}
.who{display:flex; flex-direction:column; gap:10px;}
.who-mark{
  width:100%; aspect-ratio:1/1; border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:clamp(25px,2.7vw,34px); font-weight:800;
  background:var(--cyan-wash); color:var(--cyan-deep);
}
.who:nth-child(4n+2) .who-mark{background:var(--turq-wash); color:var(--turq-deep);}
.who:nth-child(4n+3) .who-mark{background:var(--mint-wash); color:var(--mint-deep);}
.who:nth-child(4n) .who-mark{background:var(--gold-wash); color:var(--gold-deep);}
.who h3{font-size:17.5px;}
.who p{font-size:14.3px; color:var(--muted); margin-top:3px;}

/* ---------- FAQ ---------- */
.qas{display:flex; flex-direction:column; gap:7px;}
.qa{background:var(--paper); border-radius:var(--r-md);}
.band-white .qa{background:var(--cream);}
.qa summary{
  list-style:none; cursor:pointer; padding:15px 52px 15px 20px; position:relative;
  font-family:var(--display); font-size:clamp(16px,1.4vw,18.5px); font-weight:800;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:''; position:absolute; right:26px; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:2.5px solid var(--cyan-text); border-bottom:2.5px solid var(--cyan-text);
  transform:rotate(45deg); transition:transform .2s ease;
}
.qa[open] summary::after{transform:rotate(-135deg); margin-top:-3px;}
.qa summary:hover{color:var(--cyan-deep);}
.qa p{padding:0 38px 17px 20px; color:var(--muted); max-width:var(--measure);}

/* ---------- CONTACT ---------- */
.reach{display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:12px;}
.card{background:var(--paper); border-radius:var(--r-lg); padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column;}
.band-white .card{background:var(--cream);}
.card h3{font-size:20px; margin-bottom:13px;}
.card > p{color:var(--muted); margin-bottom:11px; font-size:15.3px;}
.line{display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; padding:9px 0; font-size:15.3px; align-items:start;}
.line b{font-weight:800; color:var(--cyan-text); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; padding-top:4px;}
.line a,.line span{overflow-wrap:anywhere;}
.card .btn{margin-top:auto;}
/* The auto margin drops the button to the card floor so buttons line up across
   a row of cards of differing content height; this keeps a gap above it when
   the content is tall enough to leave none. */
.card > p:last-of-type{margin-bottom:18px;}

/* ---------- FOOTER ---------- */
.foot{background:var(--cyan-deep); color:#fff;
  padding:clamp(34px,3.6vw,52px) var(--gutter) calc(24px + env(safe-area-inset-bottom));}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px);}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
.foot p{color:#B3E4EF; margin-top:11px; max-width:36ch; font-size:15px;}
.foot h4{font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;}
.foot li{margin-bottom:8px;}
.foot a{color:#DDF2F7; text-decoration:none; font-size:15px;}
.foot a:hover{color:var(--gold);}
.foot-end{margin-top:clamp(26px,3vw,40px); padding-top:18px; border-top:1px solid rgba(255,255,255,.17);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:14.5px; color:#9FD2DE;}
.foot-end p{margin:0; color:#9FD2DE;}

.nojs{background:var(--gold-wash); border-radius:var(--r-sm); padding:16px 20px; margin:22px 0; color:var(--ink);}