/* access: "See it on your own fields." + footer (E2, SPEC 4.10). Selectors start with #access,
   #access-lead (the seam + satellite strip just before the section) or #footer.
   Morning paper. Copy cols 1-6, the form card cols 8-12 (stacked under 1100). */

/* ---------- lead: a short dawn seam, then the satellite strip rising out of the dark, then paper ----------
   No long gradient band: the photo carries the light. The strip sits on --dawn with a static top fade,
   so the ground comes up into full colour; --paper starts straight under it. */
#access-lead{position:relative;background:var(--paper)}
#access-lead .access-seam{height:16vh;height:16svh;background:var(--dawn)}
#access-lead .access-strip{position:relative;height:30vh;height:30svh;min-height:200px;overflow:clip;background:var(--dawn)}
/* a native lazy <img> (shows without JS); 112% wide so access.js can drift it translateX 0 -> -6% */
#access-lead .access-strip-img{position:absolute;top:0;left:0;display:block;width:112%;max-width:none;height:100%;
  object-fit:cover;object-position:0% 7%}
#access-lead .access-strip::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,var(--dawn) 0%,rgba(27,26,18,.8) 24%,rgba(27,26,18,.42) 56%,rgba(27,26,18,.12) 84%,rgba(27,26,18,0) 100%)}
/* nav surface: the seam and this zone are "dawn" (night nav); the nav turns paper once most of the fade has
   cleared, while the rest of the strip and the paper are under it. #access itself is always paper. */
#access-lead .access-zone{position:absolute;left:0;right:0;top:0;height:28%;visibility:hidden;pointer-events:none}
@media (max-width:519px){
  /* phones: a shorter dawn seam (trust already ends in dawn) and a slightly lower strip */
  #access-lead .access-seam{height:9vh;height:9svh}
  #access-lead .access-strip{height:27vh;height:27svh;min-height:180px}
  #access-lead .access-strip-img{object-position:50% 60%}
}

/* ---------- content ---------- */
#access{--err:#A23F24;padding-block:clamp(88px,12vh,136px) clamp(96px,13vh,152px)}
#access .access-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:var(--gap);align-items:start}
#access .access-copy{grid-column:1 / span 6;grid-row:1;min-width:0;padding-top:6px}
#access .access-side{grid-column:8 / span 5;grid-row:1 / span 2;min-width:0}
#access .access-eyebrow{color:var(--ink-p2);margin-bottom:22px}
#access .access-h{color:var(--ink-p)}
#access .access-sub{margin-top:clamp(20px,3vh,28px);color:var(--ink-p2);max-width:34ch}

/* the form card: --paper-2, 1px --hair-p, 16px radius */
#access .access-card{background:var(--paper-2);border:1px solid var(--hair-p);border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px)}
#access .access-form{display:grid;gap:18px}
#access .fld{display:grid;gap:8px;min-width:0;align-content:start}
#access .fld label{font:600 1.125rem/1.3 var(--f-sans);color:var(--ink-p)}
#access .fld input{width:100%;min-height:52px;padding:12px 14px;border:1px solid #CFCEC2;border-radius:var(--r-btn);
  background:var(--paper);color:var(--ink-p);font:400 1.125rem/1.3 var(--f-sans);transition:border-color .2s,background-color .2s}
#access .fld input:hover{border-color:#B6B5A8}
#access .fld input:focus{border-color:var(--brand);background:#fff}
#access .fld input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#access .fld input[aria-invalid=true]{border-color:var(--err)}
#access .fld-err{font:600 .9375rem/1.4 var(--f-sans);color:var(--err)}  /* 600: a self-hosted weight (no 500 face) */
#access .fld-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
#access .access-submit{width:100%;min-height:56px;margin-top:6px;font-size:1.0625rem}
#access .access-submit[disabled]{opacity:.72;cursor:progress}
#access .access-note{font:400 1rem/1.45 var(--f-sans);color:var(--ink-p2)}
#access .access-note:empty{display:none}

/* success state (D5): swaps in for the form */
#access .access-done{display:grid;gap:18px;justify-items:start;padding:6px 0 4px;outline:none}
#access .access-check{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--brand);
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#access .access-done-t{font:600 clamp(1.4rem,2vw,1.75rem)/1.2 var(--f-display);letter-spacing:-.025em;color:var(--ink-p);max-width:22ch}

/* the two contact lines: bottom of the copy column on desktop (level with the card's foot),
   straight under the form below 1100 */
#access .access-alt{grid-column:1 / span 5;grid-row:2;align-self:end;display:grid;gap:8px;margin-top:40px;padding-top:20px;
  border-top:1px solid var(--hair-p);color:var(--ink-p2);min-width:0}
#access .access-alt a{color:var(--ink-p);text-decoration-color:rgba(32,36,30,.35)}
#access .access-alt a:hover{text-decoration-color:currentColor}
#access .access-cost{grid-column:1 / span 6;margin-top:16px;color:var(--ink-p3)}

@media (max-width:1099px){
  #access .access-in{grid-template-rows:none}
  #access .access-copy{grid-column:1 / -1;grid-row:auto}
  #access .access-side{grid-column:1 / span 8;grid-row:auto;margin-top:48px}
  #access .access-alt{grid-column:1 / span 8;grid-row:auto;align-self:start;margin-top:22px;padding-top:0;border-top:0}
}
@media (max-width:759px){
  #access{padding-block:clamp(64px,8.5vh,104px) clamp(64px,9vh,112px)}
  #access .access-eyebrow{margin-bottom:18px}
  #access .access-side,#access .access-alt,#access .access-cost{grid-column:1 / -1}
  #access .access-side{margin-top:32px}
  #access .access-card{padding:22px 20px}
}
@media (max-width:359px){
  #access .fld-row{grid-template-columns:minmax(0,1fr)}
}

/* ---------- footer (paper) ---------- */
#footer{padding-block:40px 56px;border-top:1px solid var(--hair-p)}
#footer .foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
#footer .foot-brand{display:inline-flex;align-items:center;gap:10px;font:600 1.1875rem/1 var(--f-display);letter-spacing:-.02em;
  color:var(--ink-p);text-decoration:none;border-radius:4px}
#footer .foot-mark{width:28px;height:28px;border-radius:8px}
#footer .foot-copy{font:400 1rem/1.5 var(--f-sans);color:var(--ink-p2)}
/* numbered notes: our own counter, so the numbers sit on the content edge (no hanging markers)
   and a wrapped line lines up after its number. Two CSS columns that fill top to bottom, so each
   column reads in order (a row-by-row grid put 1/3/5 left and 2/4 right). The 8px between notes is
   padding, not margin, so it never gets dropped at the column break; the last note carries none.
   display:block overrides the shell's .foot ol grid in base.css. */
#footer .foot-notes{margin-top:28px;padding:24px 0 0;border-top:1px solid var(--hair-p);display:block;
  column-count:2;column-gap:56px;list-style:none;counter-reset:fn;color:var(--ink-p3)}
#footer .foot-notes li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.7em;counter-increment:fn;
  padding-bottom:8px;break-inside:avoid}
#footer .foot-notes li:last-child{padding-bottom:0}
#footer .foot-notes li::before{content:counter(fn) ".";font-variant-numeric:tabular-nums}
@media (max-width:759px){
  #footer{padding-block:32px 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  #footer .foot-notes{column-count:1;margin-top:22px;padding-top:20px}
}