/* =========================================================
   Kelly's School Transportation
   Palette sampled directly from the company flyer/card.
   ========================================================= */

:root{
  --pink:      #D6317E;
  --pink-dark: #B2245F;
  --pink-soft: #FDEBF3;
  --green:     #5CB253;
  --green-dark:#3F9440;
  --green-soft:#EDF7EA;
  --blue:      #00AFF0;
  --blue-dark: #0090C6;
  --blue-soft: #E6F7FE;

  --ink:       #2B2430;
  --ink-soft:  #5C5566;
  --cream:     #FFFAF4;
  --paper:     #FFFFFF;
  --line:      #EFE7DE;

  --radius:    22px;
  --radius-sm: 14px;
  --shadow:    0 10px 30px rgba(43,36,48,.08);
  --shadow-lg: 0 20px 50px rgba(43,36,48,.13);

  --f-head: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script:"Dancing Script", "Segoe Script", cursive;

  --wrap: 1180px;
  --header-h: 78px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(214,49,126,.15);
}

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

h1,h2,h3{ font-family:var(--f-head); line-height:1.15; margin:0 0 .4em; letter-spacing:.2px; }
h2{ font-size:clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
a{ color:var(--pink-dark); }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--pink); color:#fff; padding:12px 18px; border-radius:0 0 12px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

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

.ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:var(--pink); --btn-bg2:var(--pink-dark);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  min-height:46px; padding:.7em 1.35em; border-radius:999px; border:0;
  color:#fff; background:var(--btn-bg); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 0 var(--btn-bg2), 0 10px 22px rgba(43,36,48,.15);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--btn-bg2), 0 14px 26px rgba(43,36,48,.18); filter:saturate(1.05); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--btn-bg2), 0 6px 14px rgba(43,36,48,.15); }
.btn-green{ --btn-bg:var(--green); --btn-bg2:var(--green-dark); }
.btn-blue { --btn-bg:var(--blue);  --btn-bg2:var(--blue-dark); }
.btn-lg{ font-size:1.1rem; min-height:54px; padding:.85em 1.7em; }
.btn-sm{ font-size:.95rem; min-height:42px; padding:.55em 1.1em; }
.btn-block{ display:flex; width:100%; }

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:4px solid var(--green);
}
.header-inner{ display:flex; align-items:center; gap:18px; padding:10px 0; }
.brand{ display:block; flex:none; }
.brand-logo{ height:52px; width:auto; }

.nav{ display:flex; gap:24px; margin-left:auto; }
.nav a{
  font-family:var(--f-head); font-weight:600; font-size:1rem;
  color:var(--ink); text-decoration:none; padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--pink); border-radius:3px; transition:right .22s ease;
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }
/* the page you are on */
.nav a.is-current{ color:var(--pink-dark); }
.nav a.is-current::after{ right:0; background:var(--pink); }

/* ---------------- language toggle ---------------- */
.lang-toggle{
  display:flex; align-items:center; flex:none; gap:3px; padding:4px 6px 4px 10px;
  background:var(--green-soft); border:2px solid #CBE7C6; border-radius:999px;
}
.lang-globe{ width:20px; height:20px; fill:var(--green-dark); flex:none; margin-right:2px; opacity:.85; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--f-head); font-weight:700; font-size:.92rem; line-height:1;
  min-height:38px; padding:0 .9em; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--green-dark); white-space:nowrap;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.lang-btn:hover{ background:rgba(255,255,255,.7); }
.lang-btn.is-active{
  background:var(--green); color:#fff;
  box-shadow:0 2px 8px rgba(92,178,83,.4);
}
.lang-flag{ font-size:1.05em; line-height:1; }

.menu-btn{
  display:none; width:48px; height:44px; border:0; border-radius:12px;
  background:var(--green-soft); cursor:pointer; padding:12px 11px;
  flex-direction:column; justify-content:space-between; flex:none;
}
.menu-btn span{ display:block; height:3px; border-radius:3px; background:var(--green-dark); transition:transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ display:none; flex-direction:column; padding:6px 20px 18px; border-top:1px solid var(--line); background:#fff; }
.mobile-nav a{
  font-family:var(--f-head); font-weight:600; font-size:1.05rem; color:var(--ink);
  text-decoration:none; padding:14px 4px; border-bottom:1px solid var(--line);
}
.mobile-nav a.is-current{ color:var(--pink-dark); }
.mobile-nav .mobile-mail{ color:var(--pink-dark); border-bottom:0; word-break:break-all; font-size:.95rem; }
.mobile-nav.is-open{ display:flex; }

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; padding:clamp(28px,5vw,70px) 0 clamp(46px,6vw,84px); }
.blob{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.5; pointer-events:none; }
.blob-a{ width:520px; height:520px; background:var(--green-soft); top:-190px; left:-160px; }
.blob-b{ width:420px; height:420px; background:var(--blue-soft);  bottom:-190px; right:-120px; }
.blob-c{ width:300px; height:300px; background:var(--pink-soft);  top:120px; right:24%; opacity:.45; }

.hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }

.hero-logo-wrap{ margin:0 0 8px; }
.hero-logo{
  width:min(100%, 560px); height:auto;
  mix-blend-mode:multiply; /* drops the flyer's white background onto the cream page */
}
.script-tag{
  font-family:var(--f-script); color:var(--pink);
  font-size:clamp(1.8rem,1.2rem + 1.9vw,2.6rem); line-height:1.1; margin:0 0 .35em;
}
.hero-lead{ font-size:1.1rem; color:var(--ink-soft); max-width:36em; }
.hero-lead strong{ color:var(--ink); }

.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; }
.pill{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:700; font-size:.92rem; padding:.45em .95em; border-radius:999px;
  background:#fff; border:2px solid var(--line); color:var(--ink);
}
.pill-green{ border-color:#CBE7C6; color:var(--green-dark); background:var(--green-soft); }
.pill-blue { border-color:#BEE8FA; color:var(--blue-dark);  background:var(--blue-soft); }
.pill-pink { border-color:#F7CFE1; color:var(--pink-dark);  background:var(--pink-soft); }
/* the experience pill — deliberately the only warm/gold badge on the page so
   "10+ years" reads before the other three. Used in the home hero and under
   the page heading on why-us / how-it-works / contact. */
.pill-gold { border-color:#F0D394; color:#8A5A12; background:#FDF3DA; }
.pill-gold .ico{ fill:#C9922A; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-note{ margin-top:18px; font-size:.95rem; color:var(--ink-soft); font-weight:600; }

.hero-art{ position:relative; }
.van-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  transform:rotate(-1.2deg);
}
.van-img{ width:100%; height:auto; }

/* "10+ years" seal — sits on the corner of the van photo. It is a sibling of
   .van-card, not a child, because .van-card clips its overflow. */
.exp-seal{
  position:absolute; top:-16px; right:-12px; z-index:2;
  display:grid; place-content:center; width:110px; height:110px;
  border-radius:50%; text-align:center; transform:rotate(7deg);
  background:var(--pink); color:#fff; border:5px solid #fff; box-shadow:var(--shadow-lg);
}
.exp-seal b{ display:block; font-family:var(--f-head); font-weight:800; font-size:1.65rem; line-height:1; }
.exp-seal span{ display:block; margin-top:4px; padding:0 8px; font-size:.66rem; font-weight:700; line-height:1.2; }

/* the same claim under the <h1> on the inner pages */
.page-hero-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }

.van-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.stat{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 10px; text-align:center; box-shadow:var(--shadow);
}
.stat-num{ display:block; font-family:var(--f-head); font-weight:800; font-size:1.4rem; color:var(--pink); }
.stat-lbl{ display:block; font-size:.82rem; color:var(--ink-soft); font-weight:600; }

/* ---------------- trust strip ---------------- */
.trust-strip{ background:var(--green); color:#fff; }
.trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:26px 0; }
.trust-item{ display:flex; align-items:center; gap:12px; font-weight:700; line-height:1.35; }
.trust-item .ico{ width:34px; height:34px; fill:#fff; opacity:.95; }
.trust-item small{ display:block; font-weight:600; opacity:.9; font-size:.85rem; }

/* ---------------- sections ---------------- */
.section{ padding:clamp(50px,6vw,92px) 0; }
.section-tint{ background:var(--paper); border-block:1px solid var(--line); }

.section-head{ max-width:720px; margin:0 auto clamp(30px,4vw,52px); text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--f-head); font-weight:700; font-size:.88rem;
  letter-spacing:1.4px; text-transform:uppercase; padding:.35em 1em; border-radius:999px; margin-bottom:12px;
}
.eyebrow-pink{ background:var(--pink-soft); color:var(--pink-dark); }
.eyebrow-green{ background:var(--green-soft); color:var(--green-dark); }
.eyebrow-blue{ background:var(--blue-soft); color:var(--blue-dark); }
.section-sub{ color:var(--ink-soft); font-size:1.05rem; margin:0; }

/* A card / step / form heading. Inner pages use <h2 class="card-h"> so the
   heading order stays h1 -> h2, but it should still look like an h3. */
.card-h{ font-size:1.25rem; }

/* "See all the reasons…" link under a shortened section */
.section-more{ text-align:center; margin:clamp(28px,4vw,42px) 0 0; }
.more-link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head);
  font-weight:700; font-size:1.05rem; color:var(--pink-dark); text-decoration:none;
  border-bottom:2px solid var(--pink-soft); padding-bottom:2px;
}
.more-link::after{ content:"→"; transition:transform .18s ease; }
.more-link:hover{ border-bottom-color:var(--pink); }
.more-link:hover::after{ transform:translateX(4px); }

/* ---------------- inner-page hero ----------------
   The short banner at the top of why-us / how-it-works / contact. */
.page-hero{ position:relative; overflow:hidden; padding:clamp(34px,5vw,66px) 0 clamp(30px,4vw,54px); }
.page-hero-inner{ position:relative; text-align:center; max-width:760px; }
.page-hero h1{ font-size:clamp(1.9rem, 1.1rem + 2.4vw, 3rem); margin-bottom:.25em; }
.page-hero-sub{ color:var(--ink-soft); font-size:1.08rem; margin:0; }

/* ---------------- plain checklist ---------------- */
.check-list{
  list-style:none; margin:0 auto; padding:0; max-width:760px;
  display:flex; flex-direction:column; gap:12px;
}
.check-list li{
  position:relative; background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 18px 14px 52px; font-weight:600; box-shadow:var(--shadow);
}
.check-list li::before{
  content:""; position:absolute; left:16px; top:50%; width:22px; height:22px; margin-top:-11px;
  border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.6 17.3 4.3 12l1.4-1.4 3.9 3.9 8.7-8.7L19.7 7z'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* ---------------- closing call-to-action band ---------------- */
.cta-band{ background:var(--green-soft); border-top:1px solid var(--line); padding:clamp(44px,5vw,72px) 0; }
.cta-inner{ text-align:center; }
.cta-inner h2{ margin-bottom:.25em; }
.cta-inner p{ color:var(--ink-soft); font-size:1.05rem; margin:0 auto 26px; max-width:44em; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------------- why-us cards ---------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; }
.card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:28px 26px 24px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card p{ margin:0; color:var(--ink-soft); }
.card-ico{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px; }
.card-ico svg{ width:30px; height:30px; fill:#fff; }
.card-pink  .card-ico{ background:var(--pink); }
.card-green .card-ico{ background:var(--green); }
.card-blue  .card-ico{ background:var(--blue); }
.card-pink:hover { border-color:#F7CFE1; }
.card-green:hover{ border-color:#CBE7C6; }
.card-blue:hover { border-color:#BEE8FA; }

/* ---------------- service area + map ---------------- */
.area-grid{ display:grid; grid-template-columns:1.35fr .8fr; gap:32px; align-items:start; }

.map-card{
  margin:0; background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:14px 14px 6px; box-shadow:var(--shadow);
}
.map-holder{ position:relative; border-radius:var(--radius-sm); overflow:hidden; }
.map{ height:clamp(340px, 44vh, 480px); width:100%; background:#EDF3F7; }

.map-activate{
  position:absolute; inset:0; z-index:500;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:rgba(43,36,48,.32); backdrop-filter:blur(1px);
  font-family:var(--f-head); font-weight:700; font-size:1rem; color:#fff;
}
.map-activate[hidden]{ display:none; }
.map-activate-inner{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--pink); padding:.7em 1.3em; border-radius:999px;
  box-shadow:0 6px 18px rgba(43,36,48,.3);
}
.map-activate-inner svg{ width:20px; height:20px; fill:#fff; }

.map-fallback{
  display:grid; place-items:center; text-align:center; padding:40px 24px;
  background:var(--green-soft); border-radius:var(--radius-sm); color:var(--ink-soft);
}
.map-fallback[hidden]{ display:none; }
.map-fallback p{ margin:0; font-weight:600; }

.map-caption{ font-size:.85rem; color:var(--ink-soft); text-align:center; padding:10px 6px 8px; }

/* Leaflet, restyled to match the brand */
.kst-pin{ background:none; border:0; filter:drop-shadow(0 4px 6px rgba(43,36,48,.3)); }
.leaflet-container{ font-family:var(--f-body); background:#EDF3F7; }
.leaflet-popup-content-wrapper{ border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.leaflet-popup-content{ margin:14px 16px; font-size:.95rem; line-height:1.45; }
.kst-pop-name{ display:block; font-family:var(--f-head); font-size:1.05rem; color:var(--ink); }
.kst-pop-addr{ display:block; color:var(--ink-soft); margin:2px 0 8px; }
.kst-pop-link{
  display:inline-block; font-weight:800; font-size:.9rem; color:#fff;
  background:var(--pink); padding:.4em 1em; border-radius:999px; text-decoration:none;
}
.kst-pop-link:hover{ background:var(--pink-dark); }
.leaflet-control-zoom a{ color:var(--ink) !important; font-weight:700; }
.leaflet-control-attribution{ font-size:10px; background:rgba(255,255,255,.8) !important; }
.leaflet-tooltip{
  font-family:var(--f-head); font-weight:700; border:0; border-radius:8px;
  box-shadow:0 4px 12px rgba(43,36,48,.18);
}

.area-side{ display:flex; flex-direction:column; gap:22px; }
.area-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.area-list li{
  display:flex; align-items:flex-start; gap:14px;
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px;
}
.area-list strong{ display:block; font-family:var(--f-head); font-size:1.08rem; }
.area-list small{ color:var(--ink-soft); font-size:.9rem; }
.dot{ width:16px; height:16px; border-radius:50%; margin-top:7px; flex:none; }
.dot-pink{ background:var(--pink); } .dot-green{ background:var(--green); }
.dot-blue{ background:var(--blue); } .dot-soft{ background:#D8D2CB; }

.area-cta{
  background:var(--pink-soft); border:2px dashed #F0BCD5; border-radius:var(--radius);
  padding:22px; text-align:center;
}
.area-cta p{ font-size:.98rem; }

/* ---------------- schools ---------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; }
.chip{
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  min-height:44px; padding:.5em 1.2em; border-radius:999px; cursor:pointer;
  background:#fff; border:2px solid var(--line); color:var(--ink-soft);
  transition:all .16s ease;
}
.chip:hover{ border-color:#D9CFC4; color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip-green.is-active{ background:var(--green); border-color:var(--green); }
.chip-blue.is-active { background:var(--blue);  border-color:var(--blue); }
.chip-pink.is-active { background:var(--pink);  border-color:var(--pink); }

.school-grid{
  list-style:none; margin:0 auto; padding:0; max-width:1060px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
}
.school{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 24px; box-shadow:0 4px 14px rgba(43,36,48,.05);
  transition:transform .16s ease, box-shadow .16s ease, opacity .2s ease;
}
.school:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.school h3{ font-size:1.15rem; margin:0 0 .35em; }
.school-pin{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px; }
.school-pin svg{ width:28px; height:28px; fill:#fff; }
.pin-pink{ background:var(--pink); } .pin-blue{ background:var(--blue); } .pin-green{ background:var(--green); }
.school-meta{ margin:0 0 16px; font-size:.92rem; color:var(--ink-soft); font-weight:600; }
.school-dir{
  margin-top:auto; display:inline-flex; align-items:center; min-height:40px;
  font-family:var(--f-head); font-weight:700; font-size:.95rem;
  color:var(--pink-dark); text-decoration:none;
  border-bottom:2px solid var(--pink-soft); padding:0 2px;
  transition:border-color .16s ease;
}
.school-dir:hover{ border-bottom-color:var(--pink); }
.school.is-hidden{ display:none; }
.lvl{
  display:inline-block; font-family:var(--f-body); font-weight:800; font-size:.72rem;
  letter-spacing:1px; text-transform:uppercase; padding:.25em .7em; border-radius:999px;
  margin:0 4px 10px 0;
}
.lvl-green{ background:var(--green-soft); color:var(--green-dark); }
.lvl-blue { background:var(--blue-soft);  color:var(--blue-dark); }
.lvl-pink { background:var(--pink-soft);  color:var(--pink-dark); }

.schools-foot{
  margin:30px auto 0; max-width:640px; text-align:center; color:var(--ink-soft);
  background:var(--green-soft); border-radius:var(--radius); padding:20px 24px;
}

/* ---------------- steps ---------------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:34px 24px;
}
.step{
  position:relative; background:var(--cream); border:2px solid var(--line);
  border-radius:var(--radius); padding:44px 26px 26px; text-align:center;
}
.step p{ margin:0; color:var(--ink-soft); }
.step-num{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:1.6rem; color:#fff;
  background:var(--pink); box-shadow:0 6px 16px rgba(214,49,126,.32); border:4px solid #fff;
}
.step:nth-child(2) .step-num{ background:var(--green); box-shadow:0 6px 16px rgba(92,178,83,.32); }
.step:nth-child(3) .step-num{ background:var(--blue);  box-shadow:0 6px 16px rgba(0,175,240,.32); }

/* ---------------- contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:start; }
/* home page: the contact card on its own, without the form beside it */
.contact-single{ max-width:620px; margin-inline:auto; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.contact-actions .btn{ flex:1 1 240px; }

.contact-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:14px 22px 24px; box-shadow:var(--shadow);
}
.contact-row{
  display:flex; align-items:center; gap:16px; padding:16px 4px;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.contact-row:last-of-type{ border-bottom:0; }
a.contact-row:hover .c-txt strong{ color:var(--pink-dark); }
.c-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; }
.c-ico svg{ width:24px; height:24px; fill:#fff; }
.c-pink{ background:var(--pink); } .c-green{ background:var(--green); } .c-blue{ background:var(--blue); }
.c-txt{ min-width:0; }   /* lets long emails shrink instead of overflowing */
.c-txt small{ display:block; font-size:.8rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.c-txt strong{ font-family:var(--f-head); font-size:1.12rem; overflow-wrap:anywhere; }
.script-sm{ font-size:1.9rem; text-align:center; margin:14px 0 0; }

.form-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow);
}
.form-card h3, .form-card .card-h{ margin-bottom:.2em; }
.form-intro{ color:var(--ink-soft); font-size:.95rem; }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:6px; }
input,select,textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  min-height:48px; padding:12px 14px; border:2px solid var(--line); border-radius:12px;
  background:var(--cream);
  transition:border-color .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--blue); background:#fff; }
input:user-invalid, textarea:user-invalid{ border-color:var(--pink); }
textarea{ resize:vertical; min-height:96px; }
.form-alt{ text-align:center; font-size:.92rem; color:var(--ink-soft); margin:14px 0 0; }

/* submit feedback */
.form-status{ border-radius:12px; padding:11px 14px; font-weight:700; font-size:.95rem; margin:0 0 16px; }
.form-status-busy{ background:var(--blue-soft); color:var(--blue-dark); }
.form-status-ok{ background:var(--green-soft); color:var(--green-dark); }
.form-status-err{ background:var(--pink-soft); color:var(--pink-dark); }
.form-status[hidden]{ display:none; }

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--green); color:#fff; padding:46px 0 46px; text-align:center; }
.footer-logo{ width:min(320px,80%); margin:0 auto 14px; background:#fff; border-radius:16px; padding:10px 14px; }
.footer-tag{ font-family:var(--f-script); font-size:2rem; margin:0 0 10px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin:0 0 18px; }
.footer-nav a{
  font-family:var(--f-head); font-weight:700; color:#fff; text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.45); padding-bottom:2px;
}
.footer-nav a:hover{ border-bottom-color:#fff; }
.footer-meta{ font-weight:600; opacity:.95; margin-bottom:10px; }
.footer-contact{ font-family:var(--f-head); font-size:1.12rem; font-weight:700; margin-bottom:14px; }
.footer-contact a{ color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.5); }
.footer-contact a:hover{ border-bottom-color:#fff; }
.footer-contact span{ margin:0 10px; opacity:.6; }
.footer-legal{ font-size:.85rem; opacity:.85; margin:0; }

/* ---------------- mobile call bar ---------------- */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:1000;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1000px){
  .hero-inner{ grid-template-columns:1fr; }
  /* logo leads, van follows — brand first when the columns stack */
  .hero-copy{ order:0; }
  .hero-art{ order:1; max-width:560px; margin-inline:auto; }
  .hero-copy{ text-align:center; }
  .hero-logo{ margin-inline:auto; }
  .hero-lead{ margin-inline:auto; }
  .hero-badges,.hero-actions{ justify-content:center; }
  .area-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:repeat(2,1fr); }
}

/* --- tablet / phone: nav collapses, call bar appears --- */
@media (max-width:880px){
  :root{ --header-h:70px; }
  .nav{ display:none; }
  .header-cta{ display:none; }
  .menu-btn{ display:flex; }
  .lang-toggle{ margin-left:auto; }
  .brand-logo{ height:44px; }
  .callbar{ display:block; }
  /* leave room for the fixed call bar */
  .site-footer{ padding-bottom:104px; }
}

/* --- phone: the layout is rebuilt for a small screen, not just squeezed.
       Everything below is about cutting vertical height so a thumb reaches
       the next section sooner, while keeping type and tap targets big. --- */
@media (max-width:600px){
  body{ font-size:16px; }
  .wrap{ width:min(100% - 28px, var(--wrap)); }

  /* header has to fit brand + language + menu on a narrow phone */
  .header-inner{ gap:10px; }
  .brand-logo{ height:38px; }
  .lang-btn{ padding:0 .75em; font-size:.85rem; min-height:38px; }
  .lang-globe{ display:none; }  /* the two words alone fit better on a phone */
  .lang-toggle{ padding:3px; }

  /* sections: less air between blocks, so more content per screen.
     Section headings are the biggest single cost on a phone — six of
     them at desktop size added up to roughly two screens on their own. */
  .section{ padding:34px 0; }
  .section-head{ margin-bottom:22px; }
  .section-head h2, .cta-inner h2{ font-size:1.55rem; }
  .section-sub{ font-size:.95rem; }
  .eyebrow{ font-size:.72rem; padding:.3em .85em; margin-bottom:8px; }
  .section-more{ margin-top:22px; }
  .page-hero{ padding:20px 0 22px; }
  .page-hero h1{ font-size:1.75rem; }
  .page-hero-sub{ font-size:.98rem; }
  .btn-lg{ font-size:1.02rem; min-height:50px; padding:.7em 1.3em; }

  /* hero */
  .hero{ padding:16px 0 34px; }
  .hero-inner{ gap:26px; }
  .hero-lead{ font-size:1rem; line-height:1.5; }
  .script-tag{ font-size:1.9rem; }
  .hero-badges{ gap:8px; margin:16px 0 20px; }
  .pill{ font-size:.85rem; padding:.4em .8em; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-note{ font-size:.9rem; margin-top:14px; }
  .exp-seal{ width:82px; height:82px; top:-12px; right:-6px; border-width:4px; }
  .exp-seal b{ font-size:1.25rem; }
  .exp-seal span{ font-size:.56rem; padding:0 6px; }
  .page-hero-pills{ margin-top:12px; }
  .van-stats{ grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
  .stat{ padding:10px 6px; }
  .stat-num{ font-size:1.1rem; }
  .stat-lbl{ font-size:.72rem; }

  /* trust strip: 2x2 instead of one tall column — half the height */
  .trust-inner{ grid-template-columns:repeat(2,1fr); gap:15px 12px; padding:18px 0; }
  .trust-item{ flex-direction:column; align-items:flex-start; gap:6px; font-size:.88rem; line-height:1.25; }
  .trust-item .ico{ width:26px; height:26px; }
  .trust-item small{ font-size:.74rem; }

  /* cards: icon sits beside the title instead of above it */
  .cards{ gap:14px; }
  .card{ display:grid; grid-template-columns:auto 1fr; gap:0 13px; padding:18px 16px; }
  .card-ico{ grid-column:1; grid-row:1; width:42px; height:42px; border-radius:13px; margin:0; }
  .card-ico svg{ width:22px; height:22px; }
  .card h3, .card .card-h{ grid-column:2; grid-row:1; align-self:center; font-size:1.08rem; margin:0; }
  .card p{ grid-column:1 / -1; grid-row:2; margin-top:12px; font-size:.94rem; line-height:1.5; }

  /* map + service area */
  .map{ height:300px; }
  .map-card{ padding:10px 10px 4px; }
  .map-caption{ font-size:.8rem; }
  .area-grid{ gap:20px; }
  .area-side{ gap:16px; }
  .area-list{ gap:10px; }
  .area-list li{ padding:12px 14px; gap:11px; }
  .area-list strong{ font-size:.98rem; }
  .area-list small{ font-size:.83rem; line-height:1.35; }
  .dot{ width:12px; height:12px; margin-top:6px; }
  .area-cta{ padding:16px; }
  .area-cta p{ font-size:.92rem; margin-bottom:12px; }

  /* schools: pin moves beside the name instead of sitting above it,
     which takes roughly a third off each card */
  .school-grid{ gap:14px; }
  .school{
    display:grid; grid-template-columns:auto 1fr; gap:2px 14px;
    align-items:center; text-align:left; padding:16px 18px;
  }
  .school-pin{ grid-column:1; grid-row:1; width:40px; height:40px; margin:0; }
  .school-pin svg{ width:22px; height:22px; }
  .school h3{ grid-column:2; grid-row:1; font-size:1.05rem; margin:0; }
  .school-meta{ grid-column:2; grid-row:2; margin:4px 0 8px; font-size:.86rem; }
  /* justify-self keeps the underline on the text, not the whole column */
  .school-dir{ grid-column:2; grid-row:3; justify-self:start; margin-top:0; min-height:34px; font-size:.9rem; }
  .schools-foot{ font-size:.95rem; }

  /* steps + checklists */
  .steps{ gap:14px; }
  .step{ padding:38px 20px 20px; }
  .check-list li{ padding:13px 16px 13px 48px; }

  /* contact */
  .form-card{ padding:20px; }
  .contact-card{ padding:12px 16px 18px; }
  .field-row{ grid-template-columns:1fr; }
  .contact-row{ gap:11px; padding:11px 4px; }
  .c-ico{ width:40px; height:40px; border-radius:12px; }
  .c-ico svg{ width:21px; height:21px; }
  .c-txt small{ font-size:.72rem; }
  .c-txt strong{ font-size:.95rem; }
  /* stacked: the 240px flex-basis would otherwise become the button HEIGHT */
  .contact-actions{ flex-direction:column; margin-top:18px; }
  .contact-actions .btn{ flex:0 0 auto; width:100%; }
  .cta-actions{ flex-direction:column; align-items:stretch; }
  .cta-actions .btn{ width:100%; }
  .script-sm{ font-size:1.6rem; }

  /* footer — keep the bottom padding that clears the fixed call bar */
  .site-footer{ padding:28px 0 100px; }
  .footer-logo{ width:min(220px,62%); margin-bottom:12px; }
  .footer-tag{ font-size:1.5rem; }
  .footer-nav{ gap:6px 18px; font-size:.95rem; margin-bottom:14px; }
  .footer-meta{ font-size:.88rem; }
  .footer-contact{ font-size:1.02rem; }

  /* soften the decorative blobs — cheaper to paint on phones */
  .blob{ filter:none; opacity:.42; }
  .blob-c{ display:none; }
}

@media (max-width:380px){
  .lang-btn{ padding:0 .55em; font-size:.8rem; }
  .brand-logo{ height:32px; }
  .header-inner{ gap:8px; }
  .school{ padding:24px 18px 20px; }
}

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

@media print{
  .site-header,.callbar,.menu-btn,.form-card,.map-activate,.lang-toggle{ display:none !important; }
  body{ background:#fff; }
}