/* ==========================================================================
   SHRS — Application form
   A seven-step admissions wizard in the institutional material language.
   ========================================================================== */

.ap-shell{ background:var(--ivory-bg); padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(4rem,7vw,6rem); }
.ap-wrap{ width:min(1080px, 100% - clamp(1.25rem,5vw,3rem)*2); margin-inline:auto; }

/* ---- masthead ---------------------------------------------------------- */
.ap-head{ text-align:center; margin-bottom:clamp(2rem,4vw,3.2rem); }
.ap-head .eyebrow{ justify-content:center; }
.ap-head h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,1.3rem + 2vw,3rem); color:var(--navy); margin:10px 0 0; line-height:1.14;
}
.ap-head p{ max-width:60ch; margin:16px auto 0; color:rgb(var(--lv-w32,91,76,59)); line-height:1.7; font-size:.98rem; }
.ap-save{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:18px;
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgb(var(--lv-w23,122,90,40)); background:rgba(var(--lv-gs,198,161,91),.10); border:1px solid rgba(var(--lv-gs,198,161,91),.28);
  padding:8px 16px; border-radius:999px;
}
.ap-save b{ font-weight:600; }

/* ---- progress rail ----------------------------------------------------- */
/* --ap-steps is written by js/apply.js from the number of rail items that
   actually exist. This was repeat(7,1fr), fixed, while the form has ten
   steps: 8, 9 and 10 wrapped onto a second row, the track — absolutely
   positioned at a single top:19px — never reached them, and the fill divided
   by 6 when it should divide by 9. The 10 below is only a fallback for the
   moment before script runs; the grid follows the markup, not this file. */
.ap-rail{
  display:grid; grid-template-columns:repeat(var(--ap-steps,10),minmax(0,1fr)); gap:0; position:relative;
  margin:0 0 clamp(2rem,4vw,3rem); padding:0; list-style:none;
}
/* The track runs centre-of-first-circle to centre-of-last, which is half a
   column in from each end — hence 50%/count, not a guessed 7%. */
.ap-rail::before{
  content:""; position:absolute; left:calc(50% / var(--ap-steps,10)); right:calc(50% / var(--ap-steps,10));
  top:19px; height:2px; border-radius:2px;
  background:rgba(var(--lv-gs,198,161,91),.22);
}
.ap-rail::after{
  content:""; position:absolute; left:calc(50% / var(--ap-steps,10)); top:19px; height:2px; border-radius:2px;
  width:calc((100% - 100% / var(--ap-steps,10)) / (var(--ap-steps,10) - 1) * var(--ap-progress, 0));
  background:linear-gradient(90deg,rgb(var(--lv-gs,198,161,91)),rgb(var(--lv-gbs,233,206,138)));
  box-shadow:0 0 14px -2px rgba(var(--lv-gbs,233,206,138),.7);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}
.ap-rail li{ position:relative; z-index:1; text-align:center; }
.ap-rail button{
  display:grid; place-items:center; width:40px; height:40px; margin:0 auto 10px;
  border-radius:50%; cursor:pointer; font:600 .78rem/1 'Inter',sans-serif;
  color:rgb(var(--lv-w33,138,118,88)); background:var(--ivory-bg);
  border:2px solid rgba(var(--lv-gs,198,161,91),.32);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.ap-rail button:disabled{ cursor:not-allowed; }
.ap-rail .is-current button{
  color:rgb(var(--lv-cfd3,36,24,9)); background:linear-gradient(168deg,rgb(var(--lv-gbs,233,206,138)),rgb(var(--lv-gs,198,161,91)));
  border-color:transparent; transform:scale(1.12);
  box-shadow:0 10px 20px -10px rgba(var(--lv-w10,140,100,40),.7), 0 0 0 6px rgba(var(--lv-gbs,233,206,138),.16);
}
.ap-rail .is-done button{
  color:rgb(var(--lv-cfd3,36,24,9)); background:rgba(var(--lv-gs,198,161,91),.30); border-color:rgba(var(--lv-gs,198,161,91),.55);
}
.ap-rail .is-done button::after{ content:"\2713"; }
.ap-rail .is-done button span{ display:none; }
.ap-rail em{
  font-style:normal; font-family:var(--font-label);
  font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:rgb(var(--lv-w33,138,118,88));
  display:block; line-height:1.4;
}
.ap-rail .is-current em{ color:var(--navy); }
@media (max-width:820px){
  .ap-rail em{ display:none; }
  .ap-rail::before,.ap-rail::after{ top:19px; }
}
/* Ten 40px circles need 400px of column before any gutter, which no phone has.
   They shrink instead of wrapping — a wrapped rail is what this whole section
   was rewritten to stop. The track follows the circle's centre down with them. */
@media (max-width:640px){
  .ap-rail button{ width:32px; height:32px; font-size:.7rem; margin-bottom:0; }
  .ap-rail::before,.ap-rail::after{ top:15px; }
}
@media (max-width:430px){
  .ap-rail button{ width:26px; height:26px; font-size:.62rem; border-width:1.5px; }
  .ap-rail::before,.ap-rail::after{ top:12px; }
  .ap-rail .is-current button{ transform:scale(1.08); box-shadow:0 8px 16px -9px rgba(var(--lv-w10,140,100,40),.7), 0 0 0 4px rgba(var(--lv-gbs,233,206,138),.16); }
}

/* ---- the card ---------------------------------------------------------- */
.ap-card{
  background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)) 0%,rgb(var(--lv-w75,252,247,238)) 52%,rgb(var(--lv-p4,247,240,226)) 100%);
  border:1px solid rgba(var(--lv-gs,198,161,91),.20);
  border-radius:30px;
  box-shadow:0 1px 2px rgba(var(--lv-cfd5,34,23,9),.05), 0 18px 40px -20px rgba(var(--lv-cfd5,34,23,9),.26), 0 60px 100px -60px rgba(var(--lv-cfd5,34,23,9),.4);
  padding:clamp(1.8rem,3.6vw,3.2rem);
  position:relative; overflow:hidden;
}
.ap-card::before{
  content:""; position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--lv-gbs,233,206,138),.8),transparent);
}

.ap-step{ display:none; }
.ap-step.is-active{ display:block; animation:ap-in .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes ap-in{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.ap-step-h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem); color:var(--navy); margin:0;
}
.ap-step-s{ margin:10px 0 clamp(1.6rem,3vw,2.4rem); color:rgb(var(--lv-w32,91,76,59)); font-size:.94rem; line-height:1.7; max-width:62ch; }

/* ---- fields ------------------------------------------------------------ */
.ap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 24px; }
.ap-grid .full{ grid-column:1 / -1; }
@media (max-width:720px){ .ap-grid{ grid-template-columns:1fr; } }

.ap-f{ display:flex; flex-direction:column; }
.ap-f > label{
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgb(var(--lv-w23,122,90,40)); margin-bottom:9px;
}
.ap-f > label .req{ color:var(--crimson); margin-left:3px; }
.ap-f > label .opt{ color:rgb(var(--lv-w141,154,138,114)); letter-spacing:.06em; text-transform:none; font-size:.68rem; margin-left:6px; }
.ap-f input,.ap-f select,.ap-f textarea{
  width:100%; font:400 .96rem/1.5 'Inter','Cairo',sans-serif; color:var(--ink);
  background:rgb(var(--lv-wh,255,255,255)); border:1px solid rgba(var(--lv-gs,198,161,91),.30); border-radius:14px;
  padding:14px 16px; min-height:52px;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ap-f textarea{ min-height:120px; resize:vertical; }
.ap-f select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A28' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:44px; cursor:pointer;
}
.ap-f input:focus,.ap-f select:focus,.ap-f textarea:focus{
  outline:none; border-color:rgba(var(--lv-gs,198,161,91),.8);
  box-shadow:0 0 0 4px rgba(var(--lv-gs,198,161,91),.14);
}
.ap-f .hint{ margin-top:7px; font-size:.78rem; color:rgb(var(--lv-w33,138,118,88)); line-height:1.5; }
.ap-f .err{ margin-top:7px; font-size:.78rem; color:var(--crimson); display:none; }
.ap-f.is-invalid input,.ap-f.is-invalid select,.ap-f.is-invalid textarea{ border-color:var(--crimson); }
.ap-f.is-invalid .err{ display:block; }

.ap-phone{ display:grid; grid-template-columns:118px 1fr; gap:10px; }
.ap-phone select{ padding-right:34px; background-position:right 10px center; }

/* choice cards ----------------------------------------------------------- */
.ap-choice{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:720px){ .ap-choice{ grid-template-columns:1fr; } }
.ap-choice label{
  position:relative; display:block; cursor:pointer;
  background:rgb(var(--lv-wh,255,255,255)); border:1px solid rgba(var(--lv-gs,198,161,91),.28); border-radius:18px;
  padding:20px 22px 20px 56px;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
}
.ap-choice label:hover{ transform:translateY(-2px); border-color:rgba(var(--lv-gs,198,161,91),.55); box-shadow:0 12px 24px -16px rgba(var(--lv-cfd5,34,23,9),.4); }
.ap-choice input{ position:absolute; opacity:0; width:0; height:0; }
.ap-choice label::before{
  content:""; position:absolute; left:20px; top:23px; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(var(--lv-gs,198,161,91),.5); transition:all .3s ease;
}
.ap-choice input:checked + .ap-choice-in::before,
.ap-choice label:has(input:checked)::before{
  border-color:rgb(var(--lv-gs,198,161,91));
  background:radial-gradient(circle, rgb(var(--lv-gs,198,161,91)) 0 45%, transparent 46%);
}
.ap-choice label:has(input:checked){
  border-color:rgba(var(--lv-gs,198,161,91),.75);
  background:linear-gradient(168deg,rgb(var(--lv-w19,255,252,244)),rgb(var(--lv-w142,248,240,222)));
  box-shadow:0 14px 28px -18px rgba(var(--lv-w10,140,100,40),.55), inset 0 1px 0 rgb(var(--lv-bev,255,255,255));
}
.ap-choice b{ display:block; font-family:var(--font-display); font-size:1.12rem; color:var(--navy); font-weight:600; }
.ap-choice small{ display:block; margin-top:5px; font-size:.82rem; color:rgb(var(--lv-w13,107,90,69)); line-height:1.55; }
.ap-choice input:focus-visible + b,
.ap-choice label:focus-within{ outline:2px solid var(--crimson); outline-offset:3px; }

/* ---- uploads ----------------------------------------------------------- */
.ap-docs{ display:grid; gap:16px; }
.ap-doc{
  background:rgb(var(--lv-wh,255,255,255)); border:1px dashed rgba(var(--lv-gs,198,161,91),.5); border-radius:18px;
  padding:20px 22px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.ap-doc.is-over{ border-color:rgb(var(--lv-gs,198,161,91)); background:rgb(var(--lv-w143,255,252,243)); box-shadow:0 0 0 4px rgba(var(--lv-gs,198,161,91),.12); }
.ap-doc.is-filled{ border-style:solid; border-color:rgba(var(--lv-gs,198,161,91),.45); background:linear-gradient(168deg,rgb(var(--lv-w19,255,252,244)),rgb(var(--lv-w144,248,241,225))); }
.ap-doc-ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:rgb(var(--lv-w23,122,90,40));
  background:linear-gradient(168deg,rgba(var(--lv-gs,198,161,91),.16),rgba(var(--lv-gs,198,161,91),.06));
  border:1px solid rgba(var(--lv-gs,198,161,91),.3);
}
.ap-doc b{ display:block; font-size:.96rem; color:var(--navy); }
.ap-doc small{ display:block; margin-top:4px; font-size:.79rem; color:rgb(var(--lv-w33,138,118,88)); line-height:1.5; }
.ap-doc .ap-doc-file{ margin-top:6px; font-size:.8rem; color:#3F6B4E; display:none; }
.ap-doc.is-filled .ap-doc-file{ display:block; }
.ap-doc-btn{
  font:600 .72rem/1 'Cinzel',serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:12px 20px; border-radius:999px; white-space:nowrap;
  color:rgb(var(--lv-cfd3,36,24,9)); background:linear-gradient(168deg,rgb(var(--lv-w20s,228,200,138)),rgb(var(--lv-gs,198,161,91)));
  border:0; box-shadow:0 10px 20px -12px rgba(var(--lv-w10,140,100,40),.6), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.6);
  transition:transform .25s ease;
}
.ap-doc-btn:hover{ transform:translateY(-2px); }
.ap-doc input[type=file]{ display:none; }
.ap-doc-thumb{ width:52px; height:52px; border-radius:10px; object-fit:cover; display:none; border:1px solid rgba(var(--lv-gs,198,161,91),.4); }
.ap-doc.is-filled .ap-doc-thumb[src]{ display:block; }
.ap-doc-clear{
  background:none; border:0; cursor:pointer; color:var(--crimson);
  font-size:.76rem; text-decoration:underline; padding:4px; display:none;
}
.ap-doc.is-filled .ap-doc-clear{ display:inline; }
@media (max-width:620px){
  .ap-doc{ grid-template-columns:auto 1fr; }
  .ap-doc-btn{ grid-column:1 / -1; }
}

/* ---- consents ---------------------------------------------------------- */
.ap-check{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:rgb(var(--lv-wh,255,255,255));
  border:1px solid rgba(var(--lv-gs,198,161,91),.24); border-radius:16px; }
.ap-check + .ap-check{ margin-top:12px; }
.ap-check input{ width:20px; height:20px; margin-top:2px; accent-color:rgb(var(--lv-w76,138,106,52)); flex:none; cursor:pointer; }
.ap-check span{ font-size:.88rem; line-height:1.65; color:rgb(var(--lv-w77,74,64,56)); }

/* ---- review ------------------------------------------------------------ */
.ap-review{ display:grid; gap:14px; }
.ap-rev-block{
  background:rgb(var(--lv-wh,255,255,255)); border:1px solid rgba(var(--lv-gs,198,161,91),.22); border-radius:18px; padding:20px 22px;
}
.ap-rev-block h4{
  margin:0 0 14px; font-family:var(--font-label); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgb(var(--lv-w23,122,90,40)); display:flex; justify-content:space-between; align-items:center;
}
.ap-rev-block h4 button{
  background:none; border:0; cursor:pointer; color:var(--crimson); font:600 .7rem/1 'Inter',sans-serif;
  letter-spacing:.04em; text-transform:none; text-decoration:underline;
}
.ap-rev-block dl{ margin:0; display:grid; grid-template-columns:minmax(0,180px) 1fr; gap:9px 18px; }
.ap-rev-block dt{ font-size:.8rem; color:rgb(var(--lv-w33,138,118,88)); }
.ap-rev-block dd{ margin:0; font-size:.9rem; color:var(--ink); }
.ap-rev-block dd.empty{ color:rgb(var(--lv-w145,162,145,122)); }
@media (max-width:620px){ .ap-rev-block dl{ grid-template-columns:1fr; gap:2px 0; } .ap-rev-block dd{ margin-bottom:8px; } }

/* ---- footer nav -------------------------------------------------------- */
.ap-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(1.8rem,3vw,2.6rem);
  padding-top:clamp(1.4rem,2.5vw,2rem); border-top:1px solid rgba(var(--lv-gs,198,161,91),.22); }
.ap-btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; text-decoration:none;
  font:600 .74rem/1 'Cinzel','Amiri',serif; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 32px; border-radius:999px; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, gap .25s ease;
}
.ap-btn-primary{
  color:rgb(var(--lv-cfd3,36,24,9)); background:linear-gradient(168deg,rgb(var(--lv-w20s,228,200,138)),rgb(var(--lv-gs,198,161,91)) 58%,rgb(var(--lv-w34,169,131,63)));
  box-shadow:0 16px 30px -14px rgba(var(--lv-w10,140,100,40),.62), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.6);
}
.ap-btn-primary:hover{ transform:translateY(-2px); gap:.95rem; }
.ap-btn-quiet{ color:rgb(var(--lv-w32,91,76,59)); border-color:rgba(var(--lv-gs,198,161,91),.35); background:rgb(var(--lv-wh,255,255,255)); }
.ap-btn-quiet:hover{ border-color:rgba(var(--lv-gs,198,161,91),.7); transform:translateY(-2px); }
.ap-btn[hidden]{ display:none; }

/* ---- done -------------------------------------------------------------- */
.ap-done{ text-align:center; padding:clamp(2rem,5vw,4rem) 0; }
.ap-done-crest{
  width:88px; height:88px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center;
  color:rgb(var(--lv-gb,233,206,138));
  background:radial-gradient(circle at 50% 30%, rgb(var(--lv-w24s,74,53,32)) 0%, rgb(var(--lv-w59,51,36,15)) 52%, rgb(var(--lv-w35,33,21,8)) 100%);
  border:1px solid rgba(var(--lv-gbs,233,206,138),.45);
  box-shadow:0 16px 30px -14px rgba(var(--lv-cfd5,34,23,9),.6), inset 0 1px 0 rgba(var(--lv-w02,255,247,225),.24), 0 0 0 10px rgba(var(--lv-gbs,233,206,138),.08);
}
.ap-done h2{ font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); color:var(--navy); margin:0 0 14px; }
.ap-done p{ max-width:52ch; margin:0 auto 10px; color:rgb(var(--lv-w32,91,76,59)); line-height:1.75; }
.ap-ref{
  display:inline-block; margin-top:22px; padding:12px 26px; border-radius:999px;
  font-family:var(--font-label); letter-spacing:.16em; color:rgb(var(--lv-gb,233,206,138));
  background:linear-gradient(168deg,rgb(var(--lv-w14s,58,41,25)),rgb(var(--lv-w146,34,22,9))); border:1px solid rgba(var(--lv-gbs,233,206,138),.4);
}

@media (prefers-reduced-motion: reduce){
  .ap-step.is-active{ animation:none; }
  .ap-rail::after{ transition:none; }
  .ap-btn,.ap-choice label,.ap-doc-btn{ transition:none; }
}

/* the wizard steps are <section> elements; neutralise the global section rhythm */
.ap-card .ap-step{ padding:0 !important; margin:0 !important; background:none !important; }
.ap-card .ap-step-h::after{ left:0 !important; }

/* [hidden] must win over the grid/flex display rules above */
[hidden]{ display:none !important; }

/* a consent row inside a field cell is a sentence, not a field label */
.ap-f > label.ap-check{
  font-family:var(--font-body); font-size:.9rem; letter-spacing:0;
  text-transform:none; color:rgb(var(--lv-w77,74,64,56)); margin-bottom:0;
}
.ap-f > label.ap-check span{ font-size:.9rem; }

/* ==========================================================================
   Page chrome — self-contained, so this page needs nothing but brand.css
   tokens. Deliberately quiet: crest, one way back, nothing else.
   ========================================================================== */
.ap-topbar{
  position:sticky; top:0; z-index:60; height:78px;
  background:linear-gradient(168deg,rgb(var(--lv-w14s,58,41,25)),rgb(var(--lv-w147,37,24,9)));
  border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.28);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.7);
}
.ap-topbar-in{
  height:100%; display:flex; align-items:center; gap:20px;
  width:min(1080px, 100% - clamp(1.25rem,5vw,3rem)*2); margin-inline:auto;
}
.ap-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
/* The standing line, in the form every other masthead on the site sets it:
   two statements, a raised point between them, a rule on each side. This was
   the one head with an empty middle, and that is what made a page otherwise
   in the family read as a form rather than as the school's own paper. It says
   who and where — it is not a way out, so it costs nothing of the quiet this
   header was deliberately given. Folded away below 1080px, where the crest
   and the way back are the only two things with a claim on the room. */
.ap-standing{
  display:none; align-items:center; gap:0 12px; margin-inline:auto;
  font-family:var(--font-label); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; white-space:nowrap;
  color:rgba(var(--lv-gbs,233,206,138),.8);
}
@media (min-width:1080px){ .ap-standing{ display:flex; } }
.ap-standing::before,.ap-standing::after{
  content:""; width:44px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--lv-gs,198,161,91),.7));
}
.ap-standing::after{
  background:linear-gradient(270deg,transparent,rgba(var(--lv-gs,198,161,91),.7));
}
.ap-standing-d{ color:rgba(var(--lv-gs,198,161,91),.8); letter-spacing:0; margin-inline:-4px; }
.ap-brand img{ width:38px; height:auto; display:block; }
.ap-brand b{
  display:block; font-family:var(--font-label); font-weight:600; font-size:1rem;
  letter-spacing:.055em; color:rgb(var(--lv-w43,246,239,227)); line-height:1.1;
}
.ap-brand span{
  display:block; margin-top:3px; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgb(var(--lv-g,198,161,91));
}
.ap-back-link{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; white-space:nowrap;
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgb(var(--lv-w20,228,200,138)); padding:11px 20px; border-radius:999px;
  border:1px solid rgba(var(--lv-w20s,228,200,138),.38);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.ap-back-link:hover{ background:rgba(var(--lv-gbs,233,206,138),.12); border-color:rgb(var(--lv-w20s,228,200,138)); transform:translateY(-1px); }
@media (max-width:560px){ .ap-back-link span{ display:none; } .ap-back-link{ padding:11px 14px; } }

/* ==========================================================================
   NOTE PANEL — "why we ask" (fees & support)
   Deliberately calm: parchment card, gold rule, no alarm colours.
   ========================================================================== */
.ap-note{
  position:relative; margin:34px 0 30px; padding:26px 28px 24px 32px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(var(--lv-w80s,255,252,246),.96), rgba(var(--lv-w152,250,244,233),.92));
  border:1px solid rgba(var(--lv-gs,198,161,91),.30);
  box-shadow:0 1px 0 rgba(var(--lv-bev,255,255,255),.9) inset,
    0 18px 40px -30px rgba(var(--lv-w14s,58,41,25),.45);
  overflow:hidden;
}
.ap-note::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, rgba(var(--lv-gs,198,161,91),0), rgb(var(--lv-gs,198,161,91)) 22%, rgb(var(--lv-gbs,233,206,138)) 50%, rgb(var(--lv-gs,198,161,91)) 78%, rgba(var(--lv-gs,198,161,91),0));
}
.ap-note h3{
  margin:0 0 12px; font-family:var(--font-label); font-weight:600;
  font-size:.95rem; letter-spacing:.045em; color:rgb(var(--lv-w14,58,41,25));
}
.ap-note p{
  margin:0 0 10px; font-size:.895rem; line-height:1.78; color:rgb(var(--lv-w148,91,74,56));
  max-width:70ch;
}
.ap-note p:last-child{ margin-bottom:0; }
.ap-note strong{ color:rgb(var(--lv-w14,58,41,25)); font-weight:600; }
.ap-note em{ font-style:italic; color:rgb(var(--lv-w24,74,53,32)); }

/* The cascade wrapper is display:contents — but guard against browsers
   that drop it out of the grid if the property is unsupported. */
.ap-cascade{ display:contents; }

/* ==========================================================================
   HELP LINE under the card
   ========================================================================== */
.ap-help{
  margin:26px auto 0; max-width:62ch; text-align:center;
  font-size:.83rem; line-height:1.75; color:rgb(var(--lv-w149,107,89,70));
}
.ap-help a{
  color:rgb(var(--lv-w78,138,106,46)); text-decoration:none;
  border-bottom:1px solid rgba(var(--lv-w78s,138,106,46),.35);
  transition:border-color .3s ease, color .3s ease;
}
.ap-help a:hover{ color:rgb(var(--lv-w14,58,41,25)); border-bottom-color:rgb(var(--lv-gs,198,161,91)); }

/* ==========================================================================
   FOOTER — slow, luxurious. Nothing here moves fast.
   ========================================================================== */
.ap-foot{
  position:relative; margin-top:96px;
  background:radial-gradient(900px 380px at 12% 0%, rgba(var(--lv-gs,198,161,91),.10), transparent 62%),
    linear-gradient(168deg,rgb(var(--lv-w14s,58,41,25)) 0%, rgb(var(--lv-w150,42,27,12)) 52%, rgb(var(--lv-w79,30,20,8)) 100%);
  color:rgb(var(--lv-w44,232,221,203));
  overflow:hidden;
}
/* the travelling gold thread along the top edge */
.ap-foot-thread{
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,
    rgba(var(--lv-gs,198,161,91),.16) 0%, rgba(var(--lv-gs,198,161,91),.16) 100%);
}
.ap-foot-thread::after{
  content:""; position:absolute; inset:0; width:34%;
  background:linear-gradient(90deg,
    transparent 0%, rgba(var(--lv-gbs,233,206,138),.55) 38%, rgb(var(--lv-w36,255,248,228)) 50%, rgba(var(--lv-gbs,233,206,138),.55) 62%, transparent 100%);
  filter:blur(.2px);
  animation:ap-thread 11s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ap-thread{
  0%   { transform:translateX(-110%); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateX(400%); opacity:0; }
}
/* a very slow warm bloom behind the brand block */
.ap-foot::before{
  content:""; position:absolute; left:-8%; top:-30%;
  width:52vw; height:52vw; max-width:640px; max-height:640px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--lv-gs,198,161,91),.13), transparent 66%);
  animation:ap-bloom 24s ease-in-out infinite alternate;
}
@keyframes ap-bloom{
  from{ transform:translate3d(0,0,0) scale(1); opacity:.75; }
  to  { transform:translate3d(3%,4%,0) scale(1.09); opacity:1; }
}

.ap-foot-in{
  position:relative; z-index:1;
  width:min(1080px, 100% - clamp(1.25rem,5vw,3rem)*2); margin-inline:auto;
  padding:78px 0 54px;
  display:grid; gap:44px 40px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
}
@media (max-width:900px){ .ap-foot-in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ap-foot-in{ grid-template-columns:1fr; padding:58px 0 42px; gap:34px; } }

.ap-foot-brand img{
  width:66px; height:auto; display:block; margin-bottom:18px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
}
.ap-foot-name{
  margin:0; font-family:var(--font-label); font-weight:600;
  font-size:1.05rem; letter-spacing:.05em; color:rgb(var(--lv-w43,246,239,227));
}
.ap-foot-motto{
  margin:10px 0 0; font-family:var(--font-display);
  font-style:italic; font-size:1rem; line-height:1.6; color:rgb(var(--lv-w151,217,190,132));
}
.ap-foot-addr{
  margin:18px 0 0; font-size:.8rem; line-height:1.85; color:rgba(var(--lv-w44,232,221,203),.68);
}
.ap-foot-col h4{
  margin:0 0 16px; font-family:var(--font-label); font-weight:600;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--lv-g,198,161,91));
}
.ap-foot-col ul{ list-style:none; margin:0; padding:0; }
.ap-foot-col li{ margin-bottom:11px; }
.ap-foot-col a{
  position:relative; display:inline-block; text-decoration:none;
  font-size:.855rem; line-height:1.6; color:rgba(var(--lv-w44,232,221,203),.82);
  transition:color .45s var(--ap-ease, cubic-bezier(.16,1,.3,1)), transform .45s var(--ap-ease, cubic-bezier(.16,1,.3,1));
}
.ap-foot-col a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:linear-gradient(90deg,rgb(var(--lv-gs,198,161,91)),rgb(var(--lv-gbs,233,206,138)));
  transform:scaleX(0); transform-origin:left; opacity:.85;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.ap-foot-col a:hover, .ap-foot-col a:focus-visible{ color:rgb(var(--lv-w43,246,239,227)); transform:translateX(3px); }
.ap-foot-col a:hover::after, .ap-foot-col a:focus-visible::after{ transform:scaleX(1); }

.ap-foot-base{
  position:relative; z-index:1;
  width:min(1080px, 100% - clamp(1.25rem,5vw,3rem)*2); margin-inline:auto;
  padding:22px 0 34px; border-top:1px solid rgba(var(--lv-gs,198,161,91),.18);
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between;
}
.ap-foot-base p{
  margin:0; font-size:.74rem; letter-spacing:.02em; color:rgba(var(--lv-w44,232,221,203),.55);
}
.ap-foot-secure{ display:inline-flex; align-items:center; gap:.5rem; }
.ap-foot-secure::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#8FB98A;
  box-shadow:0 0 0 3px rgba(143,185,138,.18);
}

/* ---- reveal on scroll: slow rise, staggered, once ---- */
.ap-foot [data-rise]{
  opacity:0; transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.ap-foot.is-in [data-rise]{ opacity:1; transform:none; }
.ap-foot.is-in [data-rise="1"]{ transition-delay:.06s; }
.ap-foot.is-in [data-rise="2"]{ transition-delay:.16s; }
.ap-foot.is-in [data-rise="3"]{ transition-delay:.26s; }
.ap-foot.is-in [data-rise="4"]{ transition-delay:.36s; }

/* ==========================================================================
   HEADER — a single slow gold pass, then rest. Never a loop that nags.
   ========================================================================== */
.ap-topbar{ overflow:hidden; }
.ap-topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(var(--lv-gs,198,161,91),.25) 18%, rgba(var(--lv-gbs,233,206,138),.85) 50%,
    rgba(var(--lv-gs,198,161,91),.25) 82%, transparent 100%);
  background-size:220% 100%;
  animation:ap-topline 18s ease-in-out infinite;
}
@keyframes ap-topline{
  0%,100%{ background-position:-60% 0; }
  50%    { background-position:160% 0; }
}
.ap-topbar.is-stuck{
  box-shadow:0 16px 44px -30px rgba(0,0,0,.85);
}
.ap-brand img{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.ap-brand:hover img{ transform:rotate(-4deg) scale(1.06); }

/* ==========================================================================
   RESPECT THE READER
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ap-foot-thread::after,
  .ap-foot::before,
  .ap-topbar::after{ animation:none !important; }
  .ap-foot-thread::after{ opacity:0; }
  .ap-foot [data-rise]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --------------------------------------------------------------------------
   A COMPACT CHOICE SET
   The two-column .ap-choice is right for a decision with two or three big
   answers — "day or boarding", "may we publish photographs". It is wrong for
   the ten little conditions on the health step, where each answer is one word
   and the big padded cards turn a glance into a page of scrolling. Same look,
   same states, laid out to fit the answer rather than the pattern.
   -------------------------------------------------------------------------- */
.ap-choice.ap-choice-wrap{
  display:flex; flex-wrap:wrap; gap:10px;
}
.ap-choice.ap-choice-wrap label{
  flex:0 1 auto; padding:11px 17px 11px 44px; border-radius:14px;
}
.ap-choice.ap-choice-wrap label b{ font-size:.86rem; }
/* The mark moves in with the padding. The full-size card sets the circle at
   left:20px against 56px of padding — 16px of clear space. Shrinking the
   padding without moving the circle closes that gap to nothing and the text
   sits on top of the mark, which is exactly what it did on the first try. */
.ap-choice.ap-choice-wrap label::before{
  left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px;
}
.ap-choice.ap-choice-wrap label::after{
  left:20px; top:50%; transform:translateY(-50%);
}
@media (max-width:720px){
  .ap-choice.ap-choice-wrap{ display:flex; }
  .ap-choice.ap-choice-wrap label{ flex:1 1 calc(50% - 5px); }
}