[data-sl-page] blockquote{margin:0;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;font-style:normal;text-align:inherit;width:auto} /* the shell also centres a bare blockquote at width:70% (measured 16 Sep 2026) */
[data-sl-page] figure{margin:0}
[data-sl-page] figcaption{display:block;text-align:left;margin-top:0;padding:0} /* the site sheet centres figcaption, makes it a table-caption and pads it 0 7px 5px */
[data-sl-page] p,[data-sl-page] a{white-space:normal} /* the site sheet sets p,a{white-space:pre-wrap} under 768px, which keeps source line breaks */
[data-sl-page] a{font-size:inherit} /* the shell's bare a{font-size:19px} reached every small link in a list (the evidence links on the homepage and this page, measured 16 Sep 2026) */

/* ============================================================
   Structural Learning contact page. Design canon: ~/.claude/design/DESIGN.md
   Ground: white (rule 3, website medium). Accent: teal (brand), one only.
   No decorative edge rails (G8). Teal text under 24px uses --sl-brand-hover (rule 6).
   Motion: ONE touch. The six route cards rise in once on arrival (transform and
   opacity only); reduced motion shows the finished frame. No library: speed matters.
   ============================================================ */
/* GENERATED from ~/.claude/design/tokens.json v1.2.8. Do not hand-edit. */
[data-sl-page] {
  --sl-brand: #128770;
  --sl-brand-hover: #0E6B58;
  --sl-brand-deep: #0C5E4E;
  --sl-build: #128770;        /* same value as brand, deliberately. Paul G5 */
  --sl-say: #D35400;
  --sl-map: #3098DA;
  --sl-say-wash: #FBEDE4;
  --sl-map-wash: #E6F1FA;
  --sl-build-wash: #E4F0EC;
  --sl-say-text: #A5430B;
  --sl-map-text: #1C6EA4;
  --sl-build-text: #0C5E4E;
  --sl-tf-green: #128770;
  --sl-tf-blue: #3098DA;
  --sl-tf-yellow: #F1C206;
  --sl-tf-orange: #D35400;
  --sl-tf-red: #C0392B;
  --sl-tf-yellow-wash: #FBF0DA;   /* the one yellow tint; yellow fails as text at every size */
  --sl-tf-yellow-text: #5C4A12;   /* 8.59:1 on white; the same hue darkened, never a different hue */
  --sl-ink: #24262D;
  --sl-muted: #565E73;
  --sl-faint: #8A8FA0;
  --sl-border: #DFE1E6;
  --sl-border-strong: #D7DAE0;
  --sl-surface: #FFFFFF;
  --sl-ground: #FAF8F5;    /* warm paper. Paul G1. ONE ground, not four */
  --sl-radius-sm: 4px;
  --sl-radius-md: 10px;
  --sl-radius-lg: 14px;
  --sl-radius-pill: 999px;
  --sl-shadow-hover: 0 8px 18px rgba(36, 38, 45, 0.04);
  --sl-font-display: 'Lexend', Inter, ui-sans-serif, system-ui, sans-serif;
  --sl-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ---- extensions. Each carries the measurement that justifies it. ---------- */
[data-sl-page]{
  --ct-maxw:1120px;
  --ct-gut:clamp(16px,4vw,40px);
  /* WHY: the canonical --sl-faint measures 3.22:1 on white, enough for a UI boundary
     (WCAG 1.4.11 needs 3:1) and used here ONLY for input and chip borders, never text. */
  --ct-field-edge:var(--sl-faint);
  /* WHY: error text. --sl-tf-red measures 5.44:1 on white and 4.6:1 on
     --sl-build-wash; errors sit on white field backgrounds or the wash, both over 4.5. */
  --ct-error:var(--sl-tf-red);
}

[data-sl-page] *,[data-sl-page] *::before,[data-sl-page] *::after{box-sizing:border-box}
[data-sl-page]{-webkit-text-size-adjust:100%}
[data-sl-page]{
  margin:0; background:var(--sl-surface); color:var(--sl-ink);
  font-family:var(--sl-font-body) !important; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[data-sl-page] img,[data-sl-page] svg{display:block; max-width:100%}
[data-sl-page] h1,[data-sl-page] h2,[data-sl-page] h3{font-family:var(--sl-font-display) !important; font-weight:600; letter-spacing:-.02em; margin:0; color:var(--sl-ink)}
[data-sl-page] p{margin:0}
[data-sl-page] a{color:var(--sl-brand-hover)}
[data-sl-page] :focus-visible{outline:3px solid var(--sl-brand-hover); outline-offset:3px; border-radius:4px}
[data-sl-page] .wrap{max-width:var(--ct-maxw); margin:0 auto; padding-inline:var(--ct-gut)}
[data-sl-page] .eyebrow{
  font-family:var(--sl-font-mono) !important; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--sl-brand-hover); margin:0 0 14px;
}
[data-sl-page] .acc{color:var(--sl-brand)}   /* headline accent word only; every headline here is 30px and up */
[data-sl-page] .lede{font-size:clamp(17px,1.5vw,19px); line-height:1.6; color:var(--sl-muted); max-width:58ch}

/* ---- mock-up header. Dropped on the site: the site navbar replaces it. ---- */

/* ---- 1. hero + routes ---------------------------------------------------- */
[data-sl-page] .ct-hero{padding:clamp(40px,6vw,76px) 0 clamp(40px,5vw,64px)}
[data-sl-page] .ct-hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.08; margin:0 0 16px}
[data-sl-page] .routes{list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
[data-sl-page] .route{
  display:flex; flex-direction:column; height:100%; gap:8px;
  padding:22px 22px 20px; background:var(--sl-surface);
  border:1px solid var(--sl-border); border-radius:var(--sl-radius-lg);
  color:var(--sl-ink); text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-sl-page] .route:hover{transform:translateY(-2px); box-shadow:var(--sl-shadow-hover); border-color:var(--sl-border-strong)}
[data-sl-page] .route .ico{width:32px; height:32px; color:var(--sl-brand-hover); margin-bottom:6px}
[data-sl-page] .route h2{font-size:19px; line-height:1.3; letter-spacing:-.01em}
[data-sl-page] .route .sub{font-size:15.5px; line-height:1.5; color:var(--sl-muted)}
[data-sl-page] .route .go{margin-top:auto; padding-top:10px; font-size:15px; font-weight:600; color:var(--sl-brand-hover); display:inline-flex; align-items:center; gap:6px}
[data-sl-page] .route .go svg{width:16px; height:16px; transition:transform .18s ease}
[data-sl-page] .route:hover .go svg{transform:translateX(3px)}

/* THE motion: the route cards rise in once, 70ms apart. Transform and opacity only.
   fill-mode is backwards, not both, so after the arrival the card's own :hover
   transform is free to work. */
@keyframes ct-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
[data-sl-page] .routes > li{animation:ct-rise .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(120ms + var(--i,0) * 70ms)}
@media (prefers-reduced-motion: reduce){
  [data-sl-page] .routes > li{animation:none}
  [data-sl-page] .route,[data-sl-page] .route .go svg,[data-sl-page] .chip span{transition:none}
  [data-sl-page] .route:hover{transform:none}
}

/* ---- 2. write, call or visit --------------------------------------------- */
[data-sl-page] .ct-write{padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px); border-top:1px solid var(--sl-border)}
[data-sl-page] .ct-write .grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,72px); align-items:start}
[data-sl-page] .ct-write h2.big{font-size:clamp(30px,3.4vw,40px); line-height:1.12; margin:0 0 14px}
[data-sl-page] .details{margin:28px 0 0; padding:0}
[data-sl-page] .details div{padding:16px 0; border-top:1px solid var(--sl-border)}
[data-sl-page] .details div:last-child{border-bottom:1px solid var(--sl-border)}
[data-sl-page] .details dt{font-family:var(--sl-font-mono) !important; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--sl-muted); margin:0 0 4px}
[data-sl-page] .details dd{margin:0; font-size:17px; line-height:1.5}
[data-sl-page] .details dd a{font-weight:600; text-decoration:none; overflow-wrap:anywhere}
[data-sl-page] .details dd a:hover{text-decoration:underline}
[data-sl-page] .details address{font-style:normal}

/* the form panel: the one wash on the page. Controls inside stay white (rule 4). */
[data-sl-page] .panel{background:var(--sl-build-wash); border-radius:var(--sl-radius-lg); padding:clamp(22px,3.4vw,36px)}
[data-sl-page] .panel h3{font-size:22px; line-height:1.25; margin:0 0 6px}
[data-sl-page] .panel .hint{font-size:15.5px; color:var(--sl-muted); margin:0 0 22px}
[data-sl-page] .field{margin:0 0 18px}
[data-sl-page] .topic legend{padding:0}
[data-sl-page] .field label,[data-sl-page] .topic legend{display:block; font-weight:600; font-size:15.5px; margin:0 0 7px; color:var(--sl-ink)}
[data-sl-page] .opt{font-weight:400; color:var(--sl-muted)}
[data-sl-page] .field input,[data-sl-page] .field textarea{
  width:100%; font:inherit; font-size:17px; color:var(--sl-ink);
  background:var(--sl-surface); border:1px solid var(--ct-field-edge); border-radius:8px;
  padding:12px 14px; line-height:1.4;
}
[data-sl-page] .field textarea{min-height:140px; resize:vertical}
[data-sl-page] .field input:focus-visible,[data-sl-page] .field textarea:focus-visible{outline:3px solid var(--sl-brand-hover); outline-offset:1px; border-color:var(--sl-brand-hover)}
[data-sl-page] .two{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
[data-sl-page] .topic{border:0; margin:0 0 18px; padding:0; min-width:0}
[data-sl-page] .chips{display:flex; flex-wrap:wrap; gap:8px}
[data-sl-page] .chip{position:relative}
[data-sl-page] .chip input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
[data-sl-page] .chip span{
  display:inline-block; padding:9px 15px; border-radius:var(--sl-radius-pill);
  background:var(--sl-surface); border:1px solid var(--ct-field-edge);
  font-size:15px; font-weight:500; line-height:1.3; color:var(--sl-ink); cursor:pointer;
  transition:border-color .15s;   /* fill and text change at once: a half-way frame measured 1.3:1 */
}
[data-sl-page] .chip span:hover{border-color:var(--sl-brand-hover)}
[data-sl-page] .chip input:checked + span{background:var(--sl-brand-hover); border-color:var(--sl-brand-hover); color:var(--sl-surface)}
[data-sl-page] .chip input:focus-visible + span{outline:3px solid var(--sl-brand-hover); outline-offset:2px}
[data-sl-page] .err{display:none; margin:6px 0 0; font-size:14.5px; font-weight:500; color:var(--ct-error)}
[data-sl-page] .invalid .err{display:block}
[data-sl-page] .invalid input,[data-sl-page] .invalid textarea{border-color:var(--ct-error)}
[data-sl-page] .gotcha{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
[data-sl-page] .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sl-font-body) !important; font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  background:var(--sl-brand-hover); color:var(--sl-surface); text-decoration:none;
  transition:background .16s;
}
[data-sl-page] .btn:hover{background:var(--sl-brand-deep)}
[data-sl-page] .btn[disabled]{cursor:progress; opacity:.85}
[data-sl-page] .send-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:6px}
[data-sl-page] .send-row .note{font-size:15px; color:var(--sl-muted)}
[data-sl-page] .fail{display:none; margin:0 0 18px; padding:14px 16px; background:var(--sl-surface); border-radius:8px; font-size:15.5px; line-height:1.5}
[data-sl-page] .fail.on{display:block}
[data-sl-page] .fail strong{color:var(--ct-error)}
[data-sl-page] .thanks{display:none}
[data-sl-page] .panel.sent form{display:none}
[data-sl-page] .panel.sent .thanks{display:block}
[data-sl-page] .thanks h3{font-size:26px}
[data-sl-page] .thanks p{font-size:17px; color:var(--sl-muted); margin-top:10px; max-width:48ch}

/* ---- 3. elsewhere (small, the page's own footer area) --------------------- */
[data-sl-page] .ct-else{padding:0 0 clamp(40px,5vw,64px)}
[data-sl-page] .ct-else p{font-size:15px; color:var(--sl-muted); display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
[data-sl-page] .ct-else a{font-weight:600; text-decoration:none}
[data-sl-page] .ct-else a:hover{text-decoration:underline}

/* ---- phones and tablets ---------------------------------------------------- */
@media (max-width:960px){
  [data-sl-page] .routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-sl-page] .ct-write .grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  [data-sl-page] .routes{grid-template-columns:minmax(0,1fr); gap:10px}
  /* compact rows: icon beside the words, the whole card is the link */
  [data-sl-page] .route{display:grid; grid-template-columns:32px minmax(0,1fr) 16px; column-gap:14px; row-gap:2px; align-items:start; padding:16px}
  [data-sl-page] .route .ico{grid-row:1 / span 2; margin:2px 0 0}
  [data-sl-page] .route h2{grid-column:2; font-size:17.5px}
  [data-sl-page] .route .sub{grid-column:2; font-size:15px}
  [data-sl-page] .route .go{grid-column:3; grid-row:1 / span 2; align-self:center; margin:0; padding:0}
  [data-sl-page] .route .go .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  [data-sl-page] .two{grid-template-columns:minmax(0,1fr)}
  [data-sl-page] .btn{width:100%}
}

[data-sl-page] .ct-book{margin:22px 0 0}
[data-sl-page] .mail-text{font-weight:600; user-select:all; overflow-wrap:anywhere}

/* seams where the build split a section into more than one embed */
[data-sl-page] [data-sl-cut~="top"]{padding-top:0}
[data-sl-page] [data-sl-cut~="bottom"]{padding-bottom:0}

/* SPEED 3: the hero lede is the mobile LCP element; it stays painted and Motion only slides it */