/* Contacts (contact.php), 404 (404.php) and thank you (page-thank-you.php) (Website/Design/projects/contact-404-thanks,
   2026-10-21), from the prototype proto/_template.html, scoped to the three pages' roots; built by
   tools/build_c4t_css.py, edit the source and rebuild. <main> also has .ct (base.css); the tokens are aliased. */
.ctc,.c404,.cty{--navy:var(--ct-navy);--ink:var(--ct-ink);--text:var(--ct-text);--line:var(--ct-line);--rule:var(--ct-rule);--grey:var(--ct-grey);--muted:var(--ct-muted);--serif:var(--ct-serif);--sans:var(--ct-sans);--rb:var(--ct-rb);--rc:var(--ct-rc);--px:var(--ct-px)}
:is(.ctc,.c404,.cty) .wrap{max-width:1264px;margin:0 auto;padding:0 var(--px)}
:is(.ctc,.c404,.cty) .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the navy band (all three) ---------- */
:is(.ctc,.c404,.cty) .band{position:relative;overflow:hidden;background:var(--navy);color:#fff}
:is(.ctc,.c404,.cty) .band .wrap{position:relative;max-width:720px;padding-top:26px;padding-bottom:30px}
:is(.ctc,.c404,.cty) .halo2{position:absolute;right:-200px;top:-170px;width:460px;height:460px;color:#fff;opacity:.06;pointer-events:none}
:is(.ctc,.c404,.cty) .h1{margin:0;font:400 32px/1.1 var(--serif);color:#fff;text-wrap:balance}
:is(.ctc,.c404,.cty) .lead{margin:12px 0 0;font:400 16px/1.55 var(--sans);color:rgba(255,255,255,.88)}
:is(.ctc,.c404,.cty) .band a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}
:is(.ctc,.c404,.cty) .band a:hover{text-decoration-color:#fff}
:is(.ctc,.c404,.cty) .band a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
:is(.ctc,.c404,.cty) .mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;font:400 21px/1.2 var(--serif)}
:is(.ctc,.c404,.cty) .mail svg{width:22px;height:22px;flex:none;opacity:.8}

:is(.ctc,.c404,.cty) .body{background:#fff;padding:28px 0 52px}
:is(.ctc,.c404,.cty) .body .wrap{max-width:720px}
:is(.ctc,.c404,.cty) .body h2{margin:0 0 14px;font:400 26px/1.15 var(--serif);color:var(--navy);text-wrap:balance}

/* the site button (as the type page): ink, volume, the running spark */

/* ======================= CONTACTS ======================= */
/* the form: a framed sheet; 48 px fields, 16 px text (no zoom on iOS), labels above */
:is(.ctc,.c404,.cty) .cf{margin:0;padding:20px 18px 22px;border:1px solid var(--line);border-radius:var(--rc);background:#fff;box-shadow:0 18px 40px -34px rgba(40,66,87,.45)}
:is(.ctc,.c404,.cty) .cf .row{margin:0 0 16px}
:is(.ctc,.c404,.cty) .cf label{display:block;margin:0 0 6px;font:500 14px/1.3 var(--sans);color:var(--navy)}
:is(.ctc,.c404,.cty) .cf input,:is(.ctc,.c404,.cty) .cf select,:is(.ctc,.c404,.cty) .cf textarea{display:block;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:11px 14px;border:1px solid var(--rule);border-radius:var(--rb);background:#fff;color:var(--text);font:400 16px/1.4 var(--sans);appearance:none;-webkit-appearance:none}
:is(.ctc,.c404,.cty) .cf textarea{min-height:150px;resize:vertical}
:is(.ctc,.c404,.cty) .cf select{padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23284257' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
:is(.ctc,.c404,.cty) .cf :is(input,select,textarea):hover{border-color:#B9BEC5}
:is(.ctc,.c404,.cty) .cf :is(input,select,textarea):focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,76,142,.16)}
:is(.ctc,.c404,.cty) .cf :is(input,select,textarea):user-invalid{border:2px solid var(--ink);background-color:rgba(25,76,142,.05);box-shadow:inset 4px 0 0 var(--ink)}
:is(.ctc,.c404,.cty) .cf .ct-btn{margin-top:6px}
:is(.ctc,.c404,.cty) .cf .spin{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ctcSpin .8s linear infinite}
:is(.ctc,.c404,.cty) .cf .ct-btn[aria-disabled="true"] .spin{display:block}
@keyframes ctcSpin{to{transform:rotate(360deg)}}
/* the result line: errors with the ink rule (as the test's missed questions), success as a confirmation panel */
:is(.ctc,.c404,.cty) .cf .err{margin:12px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--ink);font:400 15px/1.45 var(--sans);color:var(--navy)}
:is(.ctc,.c404,.cty) .cf .err:empty{display:none}
:is(.ctc,.c404,.cty) .okp{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;align-items:center;padding:22px 18px;border:1px solid var(--line);border-radius:var(--rc);background:var(--grey)}
:is(.ctc,.c404,.cty) .okp svg{width:56px;height:56px;color:var(--navy)}
:is(.ctc,.c404,.cty) .okp p{margin:0;font:400 17px/1.45 var(--sans);color:var(--navy)}
:is(.ctc,.c404,.cty) .okp[hidden]{display:none}
:is(.ctc,.c404,.cty) .okp:focus{outline:none}
:is(.ctc,.c404,.cty) .okp:focus-visible{outline:none}

/* FAQ: groups; on phones each question folds (one open at a time), on the desktop all open */
:is(.ctc,.c404,.cty) .faq{scroll-margin-top:24px}
:is(.ctc,.c404,.cty) .fgp{margin:26px 0 0}
:is(.ctc,.c404,.cty) .fgp h3{margin:0 0 4px;font:400 21px/1.2 var(--serif);color:var(--navy)}
:is(.ctc,.c404,.cty) .fq{border-bottom:1px solid var(--line)}
:is(.ctc,.c404,.cty) .fq h4{margin:0;padding:14px 0 10px;font:500 16px/1.4 var(--sans);color:var(--navy)}
:is(.ctc,.c404,.cty) .fq h4:has(button){padding:0}
:is(.ctc,.c404,.cty) .fq button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:12px;align-items:center;width:100%;min-height:52px;padding:12px 0;cursor:pointer;font:500 16px/1.4 var(--sans);color:var(--navy)}
:is(.ctc,.c404,.cty) .fq button svg{width:20px;height:20px;transition:transform .2s}
:is(.ctc,.c404,.cty) .fq button[aria-expanded="true"] svg{transform:rotate(180deg)}
:is(.ctc,.c404,.cty) .fq button:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
:is(.ctc,.c404,.cty) .fa{padding:0 0 16px;font:400 16px/1.6 var(--sans);color:var(--text)}
:is(.ctc,.c404,.cty) .fa[hidden]{display:none}
:is(.ctc,.c404,.cty) .fa p{margin:0 0 10px}:is(.ctc,.c404,.cty) .fa p:last-child{margin:0}
:is(.ctc,.c404,.cty) .fa a{color:var(--ink);text-underline-offset:3px}
:is(.ctc,.c404,.cty) .sec+.sec{margin-top:40px}

/* ======================= 404 ======================= */
:is(.ctc,.c404,.cty) .b404 .wrap{padding-top:34px;padding-bottom:36px;text-align:center}
:is(.ctc,.c404,.cty) .lens404{position:relative;display:grid;place-items:center;width:200px;height:200px;margin:0 auto 22px}
:is(.ctc,.c404,.cty) .lens404 svg{position:absolute;inset:0;width:100%;height:100%;color:#fff}
:is(.ctc,.c404,.cty) .lens404 b{position:relative;font:400 58px/1 var(--serif);letter-spacing:.02em;font-variant-numeric:lining-nums;color:#fff}
:is(.ctc,.c404,.cty) .b404 .lead{max-width:22em;margin-inline:auto}
:is(.ctc,.c404,.cty) .routes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
:is(.ctc,.c404,.cty) .routes a.row{touch-action:manipulation;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:14px;min-height:64px;padding:10px 16px 10px 12px;border:1px solid var(--line);border-radius:var(--rc);color:var(--navy);text-decoration:none;font:400 20px/1.2 var(--serif)}
:is(.ctc,.c404,.cty) .routes a.row svg{width:44px;height:44px}
:is(.ctc,.c404,.cty) .routes a.row .ar{width:20px;height:20px}
:is(.ctc,.c404,.cty) .routes a.row:hover{border-color:var(--navy)}
:is(.ctc,.c404,.cty) .routes a.row:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ======================= THANK YOU ======================= */
:is(.ctc,.c404,.cty) .bty .wrap{padding-top:30px}
:is(.ctc,.c404,.cty) .seal{width:76px;height:76px;margin:0 0 18px;color:#fff}
:is(.ctc,.c404,.cty) .seal svg{width:100%;height:100%}
:is(.ctc,.c404,.cty) .bty .lead{font-size:17px;color:#fff}
:is(.ctc,.c404,.cty) .bty .sub{margin:14px 0 0;font:400 15px/1.55 var(--sans);color:rgba(255,255,255,.8)}
:is(.ctc,.c404,.cty) .shr{padding:20px 18px 22px;border:1px solid var(--line);border-radius:var(--rc);background:var(--grey)}
:is(.ctc,.c404,.cty) .shr h2{font-size:22px;margin-bottom:14px}
:is(.ctc,.c404,.cty) .blog h2{margin-top:40px}
:is(.ctc,.c404,.cty) ul.strip{display:flex;gap:12px;margin:0 calc(-1 * var(--px));padding:4px var(--px) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--px);scrollbar-width:none;list-style:none}
:is(.ctc,.c404,.cty) ul.strip::-webkit-scrollbar{display:none}
:is(.ctc,.c404,.cty) ul.strip>li{flex:0 0 84%;display:flex;scroll-snap-align:start}
/* the blog card: as the Knowledge Base (card A + the pair mark) */

/* tablet 600-899: the site's 640 column (as base.css) */
@media (min-width:600px) and (max-width:899px){:is(.ctc,.c404,.cty) .band .wrap,:is(.ctc,.c404,.cty) .body .wrap{max-width:calc(640px + 2*var(--px))}
 :is(.ctc,.c404,.cty) ul.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;overflow:visible}:is(.ctc,.c404,.cty) ul.strip>li{flex:none}
 :is(.ctc,.c404,.cty) .shr .ct-btn{width:auto;min-width:240px}}

/* ===== DESKTOP (≥900) ===== */
@media (min-width:900px){
 :is(.ctc,.c404,.cty) .band .wrap{max-width:1264px;padding-top:64px;padding-bottom:68px}
 :is(.ctc,.c404,.cty) .halo2{right:-60px;top:-260px;width:640px;height:640px}
 :is(.ctc,.c404,.cty) .h1{font-size:52px;line-height:1.06}
 :is(.ctc,.c404,.cty) .lead{margin-top:18px;font-size:18px;line-height:1.6;max-width:34em}
 :is(.ctc,.c404,.cty) .body{padding:64px 0 104px}
 :is(.ctc,.c404,.cty) .body .wrap{max-width:1264px}
 :is(.ctc,.c404,.cty) .body h2{font-size:34px;margin-bottom:18px}

 /* contacts: words left, the email right in the band; below — the form (sticky) left, all the answers open right */
 :is(.ctc,.c404,.cty) .bc .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:end}
 :is(.ctc,.c404,.cty) .bc .mail{margin:0 0 4px;font-size:26px}
 :is(.ctc,.c404,.cty) .cgrid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:80px;align-items:start}
 :is(.ctc,.c404,.cty) .cgrid .sec+.sec{margin-top:0}
 :is(.ctc,.c404,.cty) .cf{padding:28px 28px 30px}
 :is(.ctc,.c404,.cty) .cf .ct-btn{width:100%}
 :is(.ctc,.c404,.cty) .faq{max-width:680px}
 :is(.ctc,.c404,.cty) .faq>h2{margin-top:-6px}
 :is(.ctc,.c404,.cty) .fgp{margin-top:36px}
 :is(.ctc,.c404,.cty) .fgp:first-of-type{margin-top:22px}
 :is(.ctc,.c404,.cty) .fgp h3{font-size:24px;margin-bottom:8px}
 :is(.ctc,.c404,.cty) .fq h4{padding:14px 0 6px;font-size:17px}
 :is(.ctc,.c404,.cty) .fa,:is(.ctc,.c404,.cty) .fa[hidden]{display:block;padding-bottom:18px;font-size:16.5px}

 /* 404: centred; the three routes side by side */
 :is(.ctc,.c404,.cty) .b404 .wrap{padding-top:72px;padding-bottom:76px}
 :is(.ctc,.c404,.cty) .lens404{width:260px;height:260px;margin-bottom:30px}
 :is(.ctc,.c404,.cty) .lens404 b{font-size:76px}
 :is(.ctc,.c404,.cty) .b404 .ct-btn{width:auto}
 :is(.ctc,.c404,.cty) .routes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto}
 :is(.ctc,.c404,.cty) .routes a.row{min-height:88px;padding:16px 22px 16px 18px;font-size:22px}

 /* thank you: the words left, the check lens large on the right; the share sheet one line; articles 3 × 2 */
 :is(.ctc,.c404,.cty) .bty .wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:80px;align-items:center}
 :is(.ctc,.c404,.cty) .bty .seal{grid-column:2;grid-row:1/5;width:240px;height:240px;margin:0;justify-self:end}
 :is(.ctc,.c404,.cty) .bty .h1,:is(.ctc,.c404,.cty) .bty .lead,:is(.ctc,.c404,.cty) .bty .sub{grid-column:1}
 :is(.ctc,.c404,.cty) .bty .lead{font-size:19px;max-width:32em}
 :is(.ctc,.c404,.cty) .bty .sub{font-size:16px;max-width:38em}
 :is(.ctc,.c404,.cty) .shr{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px}
 :is(.ctc,.c404,.cty) .shr h2{margin:0;font-size:28px}
 :is(.ctc,.c404,.cty) .shr .ct-btn{flex:none}
 :is(.ctc,.c404,.cty) .blog h2{margin-top:72px}
 :is(.ctc,.c404,.cty) ul.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;margin:0;padding:0;overflow:visible}
 :is(.ctc,.c404,.cty) ul.strip>li{flex:none}
 }
@media (min-width:900px) and (min-height:760px){:is(.ctc,.c404,.cty) .cgrid>.sec:first-child{position:sticky;top:32px}}
@media (min-width:900px) and (max-width:1099px){
 :is(.ctc,.c404,.cty) .h1{font-size:44px}
 :is(.ctc,.c404,.cty) .cgrid{grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:48px}
 :is(.ctc,.c404,.cty) .bty .wrap{grid-template-columns:minmax(0,1fr) 200px;column-gap:48px}
 :is(.ctc,.c404,.cty) .bty .seal{width:190px;height:190px}
 :is(.ctc,.c404,.cty) ul.strip{gap:24px 20px}
}
@media (prefers-reduced-motion:reduce){:is(.ctc,.c404,.cty) .fq button svg{transition:none}:is(.ctc,.c404,.cty) .cf .spin{animation-duration:2s}}
@media (forced-colors:active){:is(.ctc,.c404,.cty) .cf :is(input,select,textarea):focus{outline:2px solid Highlight}}


/* the buttons are base.css's .ct-btn; full width where the prototype had them so */
:is(.ctc,.c404,.cty) .cf .ct-btn,:is(.ctc,.c404,.cty) .shr .ct-btn,:is(.ctc,.c404,.cty) .cta .ct-btn{width:100%}
:is(.ctc,.c404,.cty) .ct-btn[aria-disabled="true"]{cursor:progress;opacity:.85}
:is(.ctc,.c404,.cty) .ct-btn[aria-disabled="true"]::after{display:none}
:is(.ctc,.c404,.cty) .band .ct-btn{text-decoration:none}
:is(.ctc,.c404,.cty) .cta{margin:22px auto 0;max-width:340px}
/* base.css spaces every p+p by 14 px; inside an answer it is 10 */
:is(.ctc,.c404,.cty) .fa p+p{margin-top:10px}
@media (min-width:600px) and (max-width:899px){ :is(.ctc,.c404,.cty) .shr .ct-btn{width:auto;min-width:240px} }
@media (min-width:900px){ :is(.ctc,.c404,.cty) .shr .ct-btn{width:auto;min-width:220px} :is(.ctc,.c404,.cty) .b404 .cta .ct-btn{width:auto} }
@media (forced-colors:active){
 :is(.ctc,.c404,.cty) .cf select{appearance:auto;background-image:none;padding-right:14px}
 :is(.ctc,.c404,.cty) .cf :is(input,select,textarea):user-invalid{border:2px solid Highlight}
}