/* ==========================================================================
   Inspired Kids Family Day Care — inner page components
   Loaded after main.css + responsive.css on every page except the homepage.

   Everything here is built from the approved tokens in main.css. No new
   colours, no new typeface, no new spacing scale. Inner pages are calmer
   than the homepage by design: wider margins, quieter dividers, fewer
   simultaneous ideas per screen.

   Mobile-first. Breakpoints match the shared set: 560 / 760 / 960 / 1120.
   ========================================================================== */

/* ---------- BUTTON VARIANT FOR LIGHT BACKGROUNDS ----------
   .btn--outline in main.css is near-white text on a translucent white border:
   correct over photographs and the dark CTA panel, invisible on sand or
   paper. This is the same shape and weight in ink, for light surfaces.
   Added here rather than in main.css so the homepage cannot be affected. */
.btn--line{color:var(--ink);border-color:var(--rule);background:transparent}
.btn--line:hover{border-color:var(--ink);background:rgba(21,42,46,.06);transform:translateY(-2px)}
.btn--line:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- shared page furniture ---------- */
.pg{padding:var(--sec) 0}
.pg--tight{padding:clamp(2.25rem,4.4vw,4.25rem) 0}
.pg--paper{background:var(--paper)}
.pg--sand{background:var(--sand)}
.pg--ink{background:var(--ink);color:var(--on-dark-2)}
.pg--ink .h2,.pg--ink h2,.pg--ink h3{color:var(--paper)}

.measure{max-width:64ch}
.measure-sm{max-width:52ch}

/* a quiet dashed rule, the divider language from the service reference */
.rule{border:0;border-top:1px dashed var(--rule);margin:clamp(2.25rem,4.5vw,3.75rem) 0}
.pg--ink .rule{border-top-color:rgba(255,255,255,.18)}

/* ---------- PAGE HERO ----------
   Centred editorial hero. The organic line sits behind the words and is
   purely decorative, so it is aria-hidden and never affects layout height. */
.phero{position:relative;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2rem,4vw,3.25rem);overflow:hidden}
.phero__in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center}
.phero .eyebrow{justify-content:center}
.phero__h{
  font-weight:600;letter-spacing:-.034em;line-height:1.02;color:var(--ink);
  font-size:clamp(2.1rem,1.1rem + 4.2vw,4.4rem);
  max-width:17ch;margin:0;text-wrap:balance;
}
.phero__lede{margin:clamp(1.1rem,2vw,1.6rem) 0 0;max-width:56ch;color:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.16rem);line-height:1.6}
.phero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(1.5rem,3vw,2.25rem)}
.phero__line{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;opacity:.5}
.phero__line svg{width:min(1400px,132%);height:auto;flex:0 0 auto;
  fill:none;stroke:var(--accent-br);stroke-width:1.6;opacity:.5}

/* one large contained photograph directly under a hero */
.phero__shot{margin-top:clamp(1.75rem,3.5vw,2.75rem);border-radius:var(--r-media);
  overflow:hidden;background:var(--sand-2);aspect-ratio:16/10}
.phero__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}

/* ---------- IMAGE STRIP (About) ----------
   Full-bleed horizontal band of photographs. It drifts automatically on every
   pointer type, touch included; while live the viewport clips horizontally so
   the transform cannot fight finger scrolling. prefers-reduced-motion is the
   sole exception and falls back to plain scrolling with every photograph
   still present. Same policy as the homepage testimonials. */
.strip{padding:clamp(1.5rem,3vw,2.5rem) 0;overflow:hidden}
.strip__vp{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none}
.strip__vp::-webkit-scrollbar{display:none}
.strip__track{display:flex;gap:clamp(.6rem,1.4vw,1rem);width:max-content}
.strip__row{display:flex;gap:clamp(.6rem,1.4vw,1rem);margin:0;padding:0;list-style:none}
.strip__row li{flex:0 0 auto;border-radius:var(--r-card);overflow:hidden;background:var(--sand-2);
  width:clamp(180px,34vw,300px);aspect-ratio:4/5}
.strip__row li:nth-child(even){aspect-ratio:1/1;align-self:center}
.strip__row li img{width:100%;height:100%;object-fit:cover}
.strip__vp.is-live{overflow-x:hidden}
.strip__vp.is-live .strip__track{animation:stripFlow var(--strip-dur,54s) linear infinite}
.strip__vp.is-live:hover .strip__track,
.strip__vp.is-live:focus-within .strip__track{animation-play-state:paused}
@keyframes stripFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--strip-w,50%)),0,0)}}
.strip__vp.is-manual{scroll-snap-type:x proximity;padding-inline:var(--gut)}
.strip__vp.is-manual .strip__track{animation:none;transform:none}
.strip__vp.is-manual .strip__row[aria-hidden="true"]{display:none}
.strip__vp.is-manual .strip__row li{scroll-snap-align:center}

/* ---------- BIG STATEMENT WITH INLINE PHOTO CHIPS ----------
   Photographs set inside the sentence itself, from the About reference.
   The chips are decorative punctuation for the words, so they carry empty
   alt text and are hidden from assistive tech. */
.stmt{text-align:center}
.stmt__t{
  font-weight:600;letter-spacing:-.03em;line-height:1.24;color:var(--ink);
  font-size:clamp(1.35rem,.95rem + 1.85vw,2.5rem);
  max-width:22ch;margin:0 auto;text-wrap:balance;
}
.stmt__pic{
  display:inline-block;vertical-align:middle;
  width:clamp(46px,6.5vw,92px);aspect-ratio:1/1;
  border-radius:var(--pill);overflow:hidden;background:var(--sand-2);
  margin:0 .18em;transform:translateY(-.08em);
}
.stmt__pic img{width:100%;height:100%;object-fit:cover}
.stmt__sub{margin:clamp(1.4rem,2.6vw,2rem) auto 0;max-width:56ch;color:var(--body);line-height:1.65}

/* ---------- VALUE DECK (About) ----------
   A fanned set of cards. The tilt is decorative only: on narrow screens and
   under reduced motion the deck straightens into an ordinary stack. */
.vdeck{display:grid;gap:1rem}
.vdeck__c{
  position:relative;border-radius:var(--r-card);padding:clamp(1.35rem,2.6vw,2rem);
  min-height:clamp(230px,30vw,300px);display:flex;flex-direction:column;
  box-shadow:var(--sh);
}
.vdeck__c h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.16;margin:0 0 .7rem;color:var(--ink)}
.vdeck__c p{margin:0;font-size:.97rem;line-height:1.6;color:var(--body)}
.vdeck__n{margin-top:auto;padding-top:1.1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vdeck__c--a{background:#DCE9E4}
.vdeck__c--b{background:#CFDDEA}
.vdeck__c--c{background:#F6DFC9}
.vdeck__c--d{background:#E6DFEC}

/* ---------- EDITORIAL SPLIT ----------
   Heading in one column, body and media in the other. Used on About, Why Us
   and the service template so the pages share one rhythm. */
.split{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
/* grid and flex children default to a min-content floor, which lets one wide
   descendant push a whole column past the viewport. Everything that can hold
   a form or long label gets an explicit floor of zero. */
.split > *{min-width:0}
.split__h{align-self:start}
.split__body p{margin:0 0 1rem;line-height:1.7}
.split__body p:last-child{margin-bottom:0}
.split__media{border-radius:var(--r-media);overflow:hidden;background:var(--sand-2);aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--tall{aspect-ratio:3/4}

/* ---------- FEATURE ROWS ----------
   Numbered editorial rows, deliberately not a grid of identical cards. */
.rows{display:grid;gap:0;border-top:1px solid var(--rule-soft)}
.rows__r{display:grid;gap:.5rem 1.5rem;padding:clamp(1.35rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--rule-soft)}
.rows__n{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--accent-deep)}
.rows__t{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);font-weight:600;letter-spacing:-.022em;
  line-height:1.14;margin:0;color:var(--ink)}
.rows__d{margin:0;line-height:1.65;color:var(--body);max-width:60ch}
.pg--ink .rows{border-top-color:rgba(255,255,255,.14)}
.pg--ink .rows__r{border-bottom-color:rgba(255,255,255,.14)}
.pg--ink .rows__t{color:var(--paper)}
.pg--ink .rows__d{color:var(--on-dark-2)}
.pg--ink .rows__n{color:var(--accent-br)}

/* a row that carries its own photograph */
.rows__r--media{align-items:center}
.rows__pic{border-radius:var(--r-card);overflow:hidden;background:var(--sand-2);aspect-ratio:5/4;margin-top:.75rem}
.rows__pic img{width:100%;height:100%;object-fit:cover}

/* ---------- POINT LIST (service template) ---------- */
.points{display:grid;gap:0;margin:0;padding:0;list-style:none}
.points li{display:grid;grid-template-columns:22px 1fr;gap:.2rem .85rem;
  padding:1.05rem 0;border-bottom:1px dashed var(--rule)}
.points li:first-child{border-top:1px dashed var(--rule)}
.points__ic{width:20px;height:20px;margin-top:.25rem;fill:none;stroke:var(--accent);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.points b{grid-column:2;font-size:1.05rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.points span{grid-column:2;line-height:1.6;color:var(--body)}

/* ---------- TRUST BADGES ---------- */
/* pills size to their label rather than to a column, so short phrases like
   "School drop-off support" never break across three lines */
.trust{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1rem;white-space:nowrap;
  background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--pill);
  font-size:.95rem;font-weight:600;color:var(--ink)}
.trust svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--accent);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pg--ink .trust li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--paper)}
.pg--ink .trust svg{stroke:var(--accent-br)}

@media (max-width:400px){
  .trust li{white-space:normal}
}

/* ---------- SERVICE INDEX (services overview) ---------- */
.slist{display:grid;gap:0;border-top:1px solid var(--rule)}
.slist__i{border-bottom:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.5rem) 0;
  display:grid;gap:1.1rem}
.slist__n{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--accent-deep);margin:0}
.slist__t{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.6rem);font-weight:600;letter-spacing:-.028em;
  line-height:1.06;margin:.3rem 0 0;color:var(--ink)}
.slist__d{margin:0;line-height:1.7;color:var(--body);max-width:56ch}
.slist__pic{border-radius:var(--r-card);overflow:hidden;background:var(--sand-2);aspect-ratio:16/10}
.slist__pic img{width:100%;height:100%;object-fit:cover}
.slist__go{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-weight:600;color:var(--accent-deep)}
.slist__go svg{width:18px;height:18px;transition:transform var(--t1) var(--ease)}
.slist__i:hover .slist__go svg{transform:translateX(4px)}

/* ---------- RESOURCE CARDS ---------- */
.rgroup{margin-bottom:clamp(1.5rem,3vw,2.25rem);padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--rule-soft)}
.rgroup:last-of-type{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.rgroup__h{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.1rem}
.rcards{display:grid;gap:.9rem}
.rcard{display:block;padding:clamp(1.15rem,2.2vw,1.6rem);background:var(--paper);
  border:1px solid var(--rule-soft);border-radius:var(--r-card);
  transition:border-color var(--t1) var(--ease),transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.rcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh)}
.rcard__t{display:flex;align-items:flex-start;gap:.6rem;font-size:1.12rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:0 0 .5rem}
.rcard__t svg{width:16px;height:16px;flex:0 0 auto;margin-top:.28rem;fill:none;stroke:var(--muted);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t1) var(--ease)}
.rcard:hover .rcard__t svg{stroke:var(--accent)}
.rcard__d{margin:0;font-size:.97rem;line-height:1.6;color:var(--body)}
.rcard__go{display:inline-block;margin-top:.8rem;font-size:.9rem;font-weight:600;color:var(--accent-deep)}

/* ---------- GALLERY ----------
   A controlled editorial mosaic, not masonry. Every tile uses one of three
   fixed ratios (wide 16:9, landscape 4:3, square 1:1) so rows always resolve
   cleanly and no photograph can tower over its neighbours. Groups repeat in a
   deliberate rhythm: feature + pair, then a balanced trio. */
.gal{display:grid;gap:clamp(.6rem,1.4vw,1rem);grid-template-columns:1fr}
.gal__item{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--sand-2);aspect-ratio:4/3}
.gal__item--wide{aspect-ratio:16/9}
.gal__item--sq{aspect-ratio:1/1}
.gal__item--feature{aspect-ratio:16/9}
.gal__btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal__btn img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 480ms var(--ease)}
.gal__btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(21,42,46,.42),rgba(21,42,46,0) 46%);
  opacity:0;transition:opacity var(--t2) var(--ease)}
.gal__btn:hover img,.gal__btn:focus-visible img{transform:scale(1.04)}
.gal__btn:hover::after,.gal__btn:focus-visible::after{opacity:1}
.gal__btn:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.gal__cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;margin:0;
  color:#fff;font-size:.92rem;line-height:1.4;text-align:left;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.gal__btn:hover .gal__cap,.gal__btn:focus-visible .gal__cap{opacity:1;transform:none}

/* ---------- LIGHTBOX ---------- */
/* .lb sets display:flex, which outranks the UA [hidden] rule. Without this
   the closed lightbox stays laid over the page and swallows every click. */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(10,22,25,.93);opacity:0;transition:opacity 220ms var(--ease);padding:var(--gut)}
.lb.is-open{opacity:1}
.lb__stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:.85rem;
  max-width:min(1100px,100%);max-height:100%}
.lb__img{max-width:100%;max-height:min(72vh,760px);width:auto;height:auto;
  border-radius:var(--r-card);background:var(--ink-2)}
.lb__meta{text-align:center;color:var(--on-dark);max-width:60ch}
.lb__cap{margin:0;font-size:.97rem;line-height:1.5}
.lb__num{display:block;margin-top:.35rem;font-size:.82rem;color:var(--on-dark-2)}
.lb button{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.lb button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.lb button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lb__x{position:absolute;top:calc(var(--gut) * -1 + .25rem);right:0}
.lb__nav{display:flex;gap:1rem;justify-content:center}

/* ---------- MULTI-STEP FORM ---------- */
/* .btn sets display:inline-flex, which outranks the UA rule for [hidden] and
   left the final submit button visible on step one. Scoped, not !important. */
.msf [hidden]{display:none}
.msf__req{color:var(--accent-deep)}
.msf{min-width:0;background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-media);
  padding:clamp(1.35rem,3vw,2.5rem);box-shadow:var(--sh)}
.msf__bar{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0;margin:0 0 clamp(1.4rem,2.6vw,2rem);padding:0;list-style:none;
  counter-reset:step}
.msf__dot{flex:1 1 0;min-width:0;background:none;border:0;padding:.55rem 0 0;cursor:default;
  text-align:left;border-top:3px solid var(--rule-soft);
  font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.msf__dot:disabled{cursor:default;opacity:1}
.msf__dot.is-done{border-top-color:var(--accent);color:var(--body);cursor:pointer}
.msf__dot.is-on{border-top-color:var(--accent);color:var(--ink)}
.msf__dot span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* on narrow screens the step labels wrap instead of holding the bar open */
@media (max-width:559px){
  .msf__bar{gap:.3rem}
  .msf__dot{flex:1 1 0;font-size:.68rem;letter-spacing:0}
  .msf__dot span{white-space:normal;overflow:visible;text-overflow:clip}
}
.msf__step{border:0;margin:0;padding:0;min-width:0;max-width:100%}
.msf__legend{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);font-weight:600;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 .4rem;padding:0}
.msf__legend:focus{outline:none}
.msf__hint{margin:0 0 1.35rem;color:var(--body);font-size:.97rem;line-height:1.55}
.msf__grid{display:grid;gap:1rem;min-width:0}
.msf__grid > *{min-width:0}
.msf__group{display:grid;gap:.55rem;margin:0}
.msf__group > b{font-size:.92rem;font-weight:600;color:var(--ink)}
.msf__days{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.dchip{position:relative;display:inline-flex}
.dchip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.dchip span{display:inline-flex;align-items:center;justify-content:center;
  min-width:60px;min-height:44px;padding:.55rem 1rem;border-radius:var(--pill);
  border:1px solid var(--rule);background:var(--sand);font-size:.95rem;font-weight:600;color:var(--body);
  transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.dchip.is-on span{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.dchip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.msf__radios{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;min-width:0}
.msf__radio span{display:block;min-width:0}
.msf__radio{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1rem;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--sand);cursor:pointer;
  transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.msf__radio:hover{border-color:var(--accent)}
.msf__radio input{margin:.2rem 0 0;accent-color:var(--accent);width:18px;height:18px;flex:0 0 auto}
.msf__radio b{display:block;font-weight:600;color:var(--ink);font-size:.97rem}
.msf__radio small{display:block;color:var(--body);font-size:.88rem;line-height:1.45;margin-top:.15rem}
.msf__consent{display:flex;align-items:flex-start;gap:.7rem;margin-top:.35rem;
  padding:1rem;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--sand)}
.msf__consent input{margin:.15rem 0 0;width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.msf__consent span{font-size:.95rem;line-height:1.55;color:var(--body)}
.msf__group.is-bad .dchip span,.msf__group.is-bad .msf__consent{border-color:#B3261E}
.msf__acts{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:clamp(1.1rem,2.2vw,1.5rem);
  border-top:1px solid var(--rule-soft)}
.msf__acts .btn{min-height:48px}
.msf__spacer{flex:1 1 auto}
.msf__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.msf__note{margin:1.15rem 0 0;padding:1rem 1.15rem;border-radius:var(--r-sm);
  background:#E8F1D9;border:1px solid #C4D9A6;color:#33461C;font-size:.95rem;line-height:1.6}
.msf__note:focus{outline:3px solid var(--accent);outline-offset:2px}
.msf__note a{font-weight:600;color:#2A5B2E;text-decoration:underline}

/* ---------- SERVICE ENQUIRY (full width) ----------
   The form previously sat in a narrow right-hand column, leaving half the
   section empty on desktop. It now runs the full content width with the
   intro above it and fields paired into rows. */
.senq__head{max-width:56ch;margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.senq__head p{margin:.9rem 0 0;line-height:1.7}
.senq__aside{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;align-items:center;
  margin-top:1.1rem;font-size:.97rem;color:var(--body)}
.senq__aside a{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--accent)}
.senq__aside a:hover{color:var(--accent-deep)}

/* ---------- CONTACT PANELS ---------- */
.cpanels{display:grid;gap:1rem}
.cpanel{padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--r-card);
  background:var(--paper);border:1px solid var(--rule-soft)}
.cpanel h2,.cpanel h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cpanel h2 svg,.cpanel h3 svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cpanel p,.cpanel address{margin:0;font-style:normal;line-height:1.6;color:var(--ink);font-size:1.02rem}
.cpanel ul{margin:0;padding:0;list-style:none;display:grid;gap:.15rem}
.cpanel a{color:var(--ink);font-weight:600}
.cpanel li a{display:inline-flex;align-items:center;min-height:40px}
.cpanel a:hover{color:var(--accent-deep)}
.cpanel small{display:block;margin-top:.6rem;color:var(--body);font-size:.88rem;line-height:1.5}

.cmap{border-radius:var(--r-media);overflow:hidden;background:var(--sand-2);
  border:1px solid var(--rule-soft)}
.cmap iframe{display:block;width:100%;height:clamp(260px,38vw,380px);border:0}

/* ---------- FAQ reuse ----------
   The homepage .qa component is reused as-is; this only gives it a max width
   on very wide screens so lines stay readable. */
.qa--page{max-width:900px}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:560px){
  /* tablet keeps an even two-up at one ratio: the mosaic is a desktop
     treatment and shrinking it here only produces half-rows */
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__item,.gal__item--wide,.gal__item--sq,
  .gal__item--feature,.gal__item--partner,.gal__item--half{
    grid-column:span 1;aspect-ratio:4/3}
  .rcards{grid-template-columns:repeat(2,1fr)}
  .msf__grid--2{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:680px){
  /* two fields per row once there is genuinely room for both to stay
     comfortable; below this everything is a single column */
  .msf__grid--pair{grid-template-columns:repeat(2,1fr)}
  /* School name is conditional, so it is the odd field out when shown.
     Spanning it reads as a deliberate row rather than an orphan. */
  .msf__grid--pair .msf__school{grid-column:1/-1}
}

@media (min-width:760px){
  .vdeck{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .rows__r{grid-template-columns:auto 1fr;align-items:baseline}
  .rows__n{grid-row:span 2}
  .rows__d{grid-column:2}
  .points li{grid-template-columns:24px 1fr;gap:.25rem 1rem}
  .cpanels{grid-template-columns:repeat(2,1fr)}
  .split--media{grid-template-columns:repeat(2,1fr);align-items:center}
}

@media (min-width:960px){
  /* Six-column base. Every group sums to exactly six, so no row can leave a
     hole: feature(4)+partner(2), three squares(2+2+2), wide(3)+half(3).
     In each pair one tile sets the height and the other stretches to match,
     which is why the partners carry aspect-ratio:auto. */
  .gal{grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1vw,1.1rem)}
  .gal__item,.gal__item--sq{grid-column:span 2;aspect-ratio:1/1}
  .gal__item--feature{grid-column:span 4;aspect-ratio:16/9}
  .gal__item--partner{grid-column:span 2;aspect-ratio:auto}
  /* taking the stretch tiles out of flow removes their intrinsic height, so
     the row is set by its feature tile and the partner fills it exactly */
  .gal__item--partner > .gal__btn,.gal__item--half > .gal__btn{position:absolute;inset:0}
  .gal__item--wide{grid-column:span 3;aspect-ratio:16/9}
  .gal__item--half{grid-column:span 3;aspect-ratio:auto}

  /* each topic holds a single resource, so a 3-up card grid left two thirds of
     the row empty. Topic label sits beside its card instead. */
  .rgroup{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
  .rgroup__h{margin:.35rem 0 0}
  .rcards{grid-template-columns:1fr}

  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .split__h{position:sticky;top:calc(var(--nav-h,96px) + 2rem)}
  .split--flat .split__h{position:static}
  .split--media{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

  /* the deck fans out only where there is room for it to read as a deck */
  .vdeck{grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem 0}
  .vdeck__c{transform:rotate(-3.2deg);transition:transform var(--t2) var(--ease)}
  .vdeck__c:nth-child(2){transform:rotate(2.4deg) translateY(14px)}
  .vdeck__c:nth-child(3){transform:rotate(-1.6deg) translateY(-8px)}
  .vdeck__c:nth-child(4){transform:rotate(3deg) translateY(10px)}
  .vdeck__c:hover{transform:rotate(0) translateY(-6px)}

  .rows__r--media{grid-template-columns:auto minmax(0,1fr) minmax(0,.72fr);gap:1.5rem 2rem}
  .rows__r--media .rows__d{grid-column:2}
  .rows__pic{grid-column:3;grid-row:1/span 2;margin-top:0;align-self:center}

  .slist__i{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:2rem clamp(2rem,4vw,3.5rem);
    align-items:center}
  .slist__pic{grid-column:2;grid-row:1/span 3}



  .msf__grid--2{grid-template-columns:repeat(2,1fr)}
  .msf__dot{font-size:.78rem}

  .cmap iframe{height:clamp(300px,26vw,420px)}
}

@media (min-width:1120px){
  .phero{padding-top:clamp(3rem,4.5vw,5rem)}
  .cpanels{grid-template-columns:repeat(3,1fr)}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .vdeck__c,.vdeck__c:nth-child(2),.vdeck__c:nth-child(3),.vdeck__c:nth-child(4),
  .vdeck__c:hover{transform:none}
  .strip__vp.is-live .strip__track{animation:none}
  .strip__vp.is-live{overflow-x:auto}
  .gal__btn:hover img,.rcard:hover,.slist__i:hover .slist__go svg{transform:none}
  .lb{transition:none}
}