/* =========================================================================
   kaseyschram.com: the commercial design (launched 2026-10-27)
   The approved comp. The KC is the hinge: it sits in the hero and crosses
   into the ink band, its colours turning over at the section edge (the
   split mark, references 5 and 6). Consumes tokens.css only.
   ========================================================================= */
.co{
  --m:clamp(20px,3.4vw,48px);
  --kcw:min(42vw,600px);                        /* the mark's width on desktop  */
  --kchalf:calc(var(--kcw) * 1210 / 1743 / 2);  /* half its height: the split */
  --soft:var(--color-soft);
  --pline:var(--color-paper-line);
  --psoft:var(--color-paper-soft);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body.co{background:var(--color-paper);color:var(--color-ink);font:400 17px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
.co img{display:block;max-width:100%}
.co a{color:inherit}
.co .skip{position:absolute;left:-9999px}
.co .skip:focus{left:16px;top:16px;z-index:20;background:var(--color-ink);color:var(--color-paper);padding:8px 12px}
.co :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.co main:focus{outline:none}
.co [hidden]{display:none!important}

.co .wrap{max-width:1440px;margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.co .serif{font-family:var(--font-serif);font-weight:var(--weight-serif);letter-spacing:-.025em;margin:0}
.co .serif em{font-weight:var(--weight-serif-italic)}
/* page titles carry the full display weight; everything below them is lighter */
.co h1.serif{font-weight:var(--weight-display)}
.co .lbl{margin:0;font:400 10px/1.7 var(--font-mark);letter-spacing:.04em;text-transform:uppercase}

/* actions: flat, the press-in signature kept small */
.co .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:4px;border:1.5px solid transparent;
  font:600 15.5px/1 var(--font-sans);text-decoration:none;transition:transform var(--ease-press),box-shadow var(--ease-press)}
.co .btn.dark{background:var(--color-ink);color:var(--color-paper);box-shadow:var(--press-sm) var(--color-accent)}
.co .btn.paper{background:var(--color-paper);color:var(--color-ink);box-shadow:var(--press-sm) var(--color-ink)}
.co .btn.line{border-color:var(--color-ink);color:var(--color-ink)}
.co .btn:hover{transform:translate(2px,2px)}
.co .btn.dark:hover{box-shadow:var(--press-2xs) var(--color-accent)}
.co .btn.paper:hover{box-shadow:var(--press-2xs) var(--color-ink)}
.co .btn.sm{min-height:44px;padding:11px 18px;font-size:14px}
.co .txt{font:600 15.5px var(--font-sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.co .txt:hover{color:var(--color-accent)}
.co .ink .txt:hover,.co .close .txt:hover{color:inherit;opacity:.8}

/* top bar, sticky */
.co .bar{position:sticky;top:0;z-index:10;background:var(--color-paper);border-bottom:1px solid transparent;transition:border-color var(--ease-hover)}
.co .barin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.co .word{font:400 20px/1 var(--font-mark);text-transform:uppercase;text-decoration:none}
.co .bar nav{display:flex;gap:34px;font:500 15px var(--font-sans)}
.co .bar nav a{text-decoration:none}
.co .bar nav a:hover{color:var(--color-accent)}

/* 1. hero: statement across, then the line and buttons beside the rising mark */
.co .hero{position:relative;z-index:2;padding-top:clamp(28px,3.4vw,48px)}
.co .hero>.lbl{color:var(--soft)}
.co .greet{margin:14px 0 0;font:600 18px/1.4 var(--font-sans);color:var(--color-accent)}
.co .hero h1{margin-top:20px;font-size:clamp(3.6rem,7.74vw,7.56rem);line-height:.9;letter-spacing:-.025em;max-width:9em}
.co .hero h1 em{font-style:italic}
.co .under{display:grid;grid-template-columns:minmax(0,1fr) var(--kcw);gap:clamp(24px,4vw,64px)}
.co .say{position:relative;z-index:3;padding-top:clamp(24px,2vw,30px);padding-bottom:clamp(24px,2vw,28px)}
.co .lede{margin:0;max-width:25ch;font:400 21px/1.45 var(--font-sans);color:var(--soft)}
/* hero copy test (2026-10-27): the challenger line sits under the headline
   and above the paragraph, in the sans at about a sixth of the headline's
   size, so it reads as a second voice, not a second headline */
.co .hero .chal{text-wrap:balance;margin:0 0 14px;font:700 clamp(1.15rem,1.5vw,1.4rem)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--color-ink)}
.co .hero .lede{max-width:40ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55}
.co .hero .sig{margin:22px 0 0;font-size:22px;font-style:italic;color:var(--soft)}
.co .cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
/* the room the mark's top half needs, plus a clear gap under the headline */
.co .kcroom{min-height:calc(var(--kchalf) + 60px)}
.co .kcwrap{position:absolute;right:var(--m);bottom:0;width:var(--kcw);aspect-ratio:1743/1210;transform:translateY(50%);z-index:1}
.co .kcwrap>div{position:absolute;inset:0}
.co .kcwrap .kcmark{display:block;width:100%;height:100%}
.co .kcwrap .top{color:var(--color-ink);clip-path:inset(0 0 50% 0)}
.co .kcwrap .bot{color:var(--color-paper);clip-path:inset(50% 0 0 0)}

/* 2. ink: where I can help */
.co .ink{background:var(--color-ink);color:var(--color-paper)}
.co .help{padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(64px,7vw,104px)}
.co .help .head{max-width:calc(100% - var(--kcw) - 64px);min-height:calc(var(--kchalf) - 32px)}
.co .help .lbl{color:var(--psoft)}
.co .help .head h2{margin-top:18px;font-size:clamp(1.89rem,3.1vw,2.92rem);line-height:1}
.co .rows{margin-top:clamp(40px,4vw,64px);border-top:1px solid var(--pline)}
.co .rowi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px) 32px;gap:clamp(24px,4vw,64px);align-items:start;padding:36px 0;
  border-bottom:1px solid var(--pline);text-decoration:none}
.co .rowi h3{font-size:clamp(1.55rem,2.32vw,2.15rem);line-height:1.05;max-width:20em}
.co .rowi p{margin:0;padding-top:6px;font-size:15px;line-height:1.6;color:var(--psoft)}
.co .rowi span{padding-top:4px;font-size:20px;color:var(--psoft);transition:transform var(--ease-hover),color var(--ease-hover)}
.co .rowi:hover span{transform:translateX(6px);color:var(--color-teal-light)}
.co .rowi:hover h3{text-decoration:underline;text-decoration-color:var(--color-teal-light);text-decoration-thickness:1px;text-underline-offset:8px}
.co .help .lbl{color:var(--color-teal-light)}
.co .help .more{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:36px 0 0;color:var(--psoft);font-size:14px}
.co .help .more span a{color:var(--color-teal-light);text-underline-offset:4px}
.co .help .more a{color:var(--color-paper)}

/* 3. demonstrated work */
.co .work{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,64px);padding-top:clamp(72px,8vw,128px);padding-bottom:clamp(48px,5vw,80px)}
.co .work .meta{display:flex;flex-direction:column;gap:18px;padding-top:14px}
.co .work .meta .lbl{color:var(--color-accent)}
.co .work .meta img{align-self:flex-start;height:30px;width:auto;opacity:.9}
.co .work .meta p{margin:0;font-size:14.5px;line-height:1.5;color:var(--soft)}
.co .work h2{font-size:clamp(2.41rem,4.82vw,4.64rem);line-height:.95;max-width:12em}
.co .work h2 em{font-style:italic}
.co .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:44px;padding-top:28px;border-top:1px solid var(--color-line)}
.co .two h3{margin:0 0 10px;font:600 15px var(--font-sans)}
.co .two p{margin:0;color:var(--soft);max-width:40ch}

/* the schematic: drawn only from the record, captioned as such */
.co .schem{margin:44px 0 0;padding:28px clamp(20px,2.6vw,36px) 24px;background:var(--color-paper-2);border-radius:4px}
.co .flowrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center}
.co .flowrow+.flowrow{margin-top:14px}
.co .flowrow.after:first-of-type,.co .flowrow:not(.after)+.flowrow.after{margin-top:22px;padding-top:22px;border-top:1px dashed var(--color-line-strong)}
.co .flowrow .lbl{color:var(--soft)}
.co .flow{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;margin:0;padding:0;list-style:none}
.co .node{padding:10px 14px;border:1.5px solid var(--color-ink);border-radius:3px;background:var(--color-paper);font:600 14.5px/1.2 var(--font-sans);white-space:nowrap}
.co .flowrow:not(.after) .node{border-style:dashed;color:var(--soft)}
.co .edge{position:relative;height:1.5px;margin:0 10px;background:var(--color-ink)}
.co .edge::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;border-top:1.5px solid var(--color-ink);border-right:1.5px solid var(--color-ink);transform:translateY(-50%) rotate(45deg)}
.co .edge span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;color:var(--soft)}
.co .flowrow:not(.after) .edge{background:repeating-linear-gradient(90deg,var(--color-ink) 0 6px,transparent 6px 11px)}
.co .schem figcaption{margin-top:22px;font-size:13px;color:var(--soft)}

/* 4. the record */
.co .record{padding-top:clamp(40px,4vw,56px);padding-bottom:clamp(72px,8vw,120px)}
.co .record .lbl{color:var(--soft)}
.co .tline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:36px 0 0;padding:0;list-style:none;border-top:1.5px solid var(--color-ink)}
.co .stop{position:relative;padding:26px 28px 0 0}
.co .stop::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--color-ink)}
.co .stop.now::before,.co .stop.own::before{background:var(--color-teal)}
.co .stop.own::before{background:var(--color-paper);box-shadow:inset 0 0 0 2px var(--color-teal)}
.co .stop .did a{color:var(--color-ink);text-underline-offset:3px}
.co .stop p{margin:0}
.co .stop .yr{font-size:clamp(2.06rem,3.1vw,2.92rem);line-height:1}
.co .stop .org{margin:14px 0 2px;font:700 15.5px var(--font-sans)}
.co .stop .did{font-size:15px;color:var(--soft);max-width:24ch}

/* 5. the close */
.co .close{background:var(--color-teal);color:var(--color-paper)}   /* teal, not olive: Kasey, 2026-10-27 */
.co .close .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end;
  padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(64px,7vw,104px)}
.co .close h2{font-size:clamp(2.75rem,5.5vw,5.33rem);line-height:.92;letter-spacing:-.025em}
.co .side{display:flex;flex-direction:column;gap:22px}
.co .who{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:center}
.co .who img{width:60px;height:60px;border-radius:6px;object-fit:cover}
.co .who p{margin:0;font-size:16px;line-height:1.45}
.co .who b{display:block;font-weight:700}
.co .next{margin:0;font-size:16.5px;line-height:1.55;max-width:44ch}
.co .acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.co .fine{margin:0;font-size:14.5px;color:var(--psoft)}
.co .close .fine{color:var(--color-paper)}   /* small text on teal stays full cream: 6.6:1 */
.co .fine a{color:var(--color-paper)}

/* footer */
.co .foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:36px;font-size:14px}
.co .foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.co .foot nav a{text-decoration:none}
.co .foot nav a:hover{color:var(--color-accent)}
.co .kcs{display:block;width:34px;color:var(--color-ink)}
.co .kcs .kcmark{display:block;width:100%;height:auto}

/* tablets: the problem rows lose their third column first */
@media(max-width:1100px){
  .co .rowi{grid-template-columns:minmax(0,1fr) auto;gap:10px 24px}
  .co .rowi p{grid-column:1;grid-row:2}
  .co .rowi span{grid-column:2;grid-row:1}
}
/* phones: headline first, then the mark as the hinge into the ink band */
@media(max-width:820px){
  .co{--kcw:min(calc(100vw + var(--m) * .25), 600px)}
  body.co{font-size:16px}
  .co .bar nav{display:none}
  .co .barin{padding-top:14px;padding-bottom:14px}
  .co .word{font-size:15px}
  .co .barin>.btn{white-space:nowrap}
  .co .hero{padding-top:24px}
  .co .hero h1{margin-top:16px;font-size:clamp(2.61rem,12.2vw,3.78rem);line-height:.92}
  .co .under{display:block}
  .co .say{padding-top:22px;padding-bottom:16px}
  .co .lede{font-size:18px}
  .co .hero .lede{font-size:17px}
  .co .hero .sig{margin-top:18px;font-size:20px}
  .co .cta{flex-direction:column;align-items:stretch;gap:16px;margin-top:22px;max-width:420px}
  .co .cta .btn{justify-content:center}
  .co .cta .txt{align-self:flex-start}
  .co .kcroom{min-height:var(--kchalf)}
  .co .kcwrap{right:auto;left:calc(var(--m) * -.25)}
  .co .help{padding-top:calc(var(--kchalf) + 24px)}
  .co .help .head{max-width:none;min-height:0}
  .co .rows{margin-top:32px}
  .co .rowi{padding:22px 0}
  .co .rowi h3{font-size:1.72rem}
  .co .help .more{flex-direction:column;align-items:flex-start;gap:8px}
  .co .work{grid-template-columns:1fr;gap:28px;padding-top:64px}
  .co .work h2{font-size:2.41rem}
  .co .two{grid-template-columns:1fr;gap:22px;margin-top:28px}
  .co .schem{margin-top:32px;padding:22px 16px 18px}
  .co .flowrow{grid-template-columns:1fr;gap:10px}
  .co .flowrow .lbl[aria-hidden]{display:none}
  .co .flow{grid-template-columns:1fr;justify-items:start;gap:0}
  .co .edge{width:1.5px;height:44px;margin:0 0 0 22px}
  .co .flowrow:not(.after) .edge{background:repeating-linear-gradient(180deg,var(--color-ink) 0 6px,transparent 6px 11px)}
  .co .edge::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
  .co .edge span{left:16px;bottom:auto;top:50%;transform:translateY(-50%)}
  .co .tline{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--color-ink);margin-left:5px}
  .co .stop{padding:0 0 30px 26px}
  .co .stop::before{top:8px;left:-6px}
  .co .stop .yr{font-size:2.06rem}
  .co .close .wrap{grid-template-columns:1fr;gap:32px}
  .co .close h2{font-size:2.75rem}
  .co .acts{flex-direction:column;align-items:stretch;max-width:420px}
  .co .acts .btn{justify-content:center}
  .co .acts .txt{align-self:flex-start}
  .co .foot{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(prefers-reduced-motion:reduce){.co *{transition:none!important}}

/* =========================================================================
   Ways of Working as the featured section (architecture approved
   2026-10-27), and the two pages it opens onto: /fix-list/ and /work/.
   ========================================================================= */
/* the featured band: stone, the offer's own surface */
.co .feat{background:var(--color-stone)}
.co .feat>.wrap{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,104px)}
.co .feat .lbl{color:var(--soft)}
.co .feat h2{margin-top:18px;font-size:clamp(2.24rem,4.47vw,4.3rem);line-height:.95;letter-spacing:-.02em;max-width:13em}

/* the three questions: the method's signature, used on home and /fix-list/ */
.co .threeq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none}
.co .threeq li{display:flex;align-items:flex-end;min-height:clamp(150px,14vw,200px);padding:24px clamp(20px,2.4vw,32px)}
.co .threeq .serif{font-size:clamp(1.63rem,2.58vw,2.49rem);line-height:1}
.co .threeq .q1{background:var(--color-paper)}
.co .threeq .q2{background:var(--color-ink);color:var(--color-paper)}
.co .threeq .q3{border:1.5px solid var(--color-ink)}

.co .featbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,4.4vw,64px);align-items:start}
.co .get h3{font-size:clamp(1.55rem,2.24vw,2.06rem);line-height:1.05}
.co .get h3 em{font-style:italic}
.co .gets{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--color-line-strong)}
.co .gets li{padding:13px 0;border-bottom:1px solid var(--color-line-strong);font-size:16.5px}
.co .src{margin:22px 0 0;font-weight:600}
.co .then{margin:8px 0 0;color:var(--soft);max-width:44ch}
.co .get .acts,.co .feat .acts{margin-top:28px}

/* sample previews: always captioned as fictional */
.co .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.co .shots img{width:100%;height:auto;border-radius:3px;box-shadow:0 1px 0 rgba(28,26,22,.12),0 12px 32px -18px rgba(28,26,22,.35)}
.co .shots img:first-child{grid-column:1/-1}
.co .shots.four img:first-child{grid-column:auto}
/* homepage pair: the goal map laid over the corner of the ranked list, like
   two pages of the same document */
.co .shots.pair{display:block;position:relative}
.co .shots.pair img{width:84%}
.co .shots.pair img+img{position:relative;width:64%;margin:-22% 0 0 auto}
.co .shots.pair figcaption{margin-top:16px}
.co .shots figcaption{grid-column:1/-1;font-size:14px;color:var(--soft)}
.co .shots figcaption b{color:var(--color-ink)}
.co .shots figcaption a{color:var(--color-ink);text-decoration:underline;text-underline-offset:4px}

/* the record's heading row on the homepage */
.co .rechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.co .rechead p{margin:0;font-size:15px;color:var(--soft)}
.co .rechead .txt{margin-left:14px;color:var(--color-ink)}

/* inner pages: a statement head, no KC (the mark belongs to home) */
.co .pagehead{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(48px,5vw,80px)}
.co .pagehead .lbl{color:var(--soft)}
.co .pagehead h1{margin-top:20px;font-size:clamp(3.06rem,7.2vw,6.84rem);line-height:.9;letter-spacing:-.025em;max-width:10em}
.co .pagehead h1 em{font-style:italic}
.co .pagehead .lede{margin-top:28px;max-width:34ch}
.co .split2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(56px,6vw,96px);border-top:1px solid var(--color-line)}
.co .split2 h2{margin-top:16px;font-size:clamp(1.89rem,3.1vw,2.92rem);line-height:1;text-wrap:balance}
.co .split2 .lbl{color:var(--soft)}
.co .sub2{margin:0 0 12px;color:var(--soft)}
.co .plain{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.co .plain li{padding:14px 0;border-bottom:1px solid var(--color-line);font:400 clamp(1.12rem,1.63vw,1.46rem)/1.2 var(--font-serif)}
.co .runs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--color-line-strong)}
.co .runs h3{margin:0 0 8px;font:600 15px var(--font-sans)}
.co .runs p{margin:0;color:var(--soft)}
.co .leave{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(56px,6vw,96px)}
.co .leavehead .lbl{color:var(--soft)}
.co .leavehead h2{margin-top:16px;font-size:clamp(1.72rem,2.58vw,2.49rem);line-height:1}
.co .big2{margin:14px 0 0;font:400 clamp(1.29rem,1.89vw,1.72rem)/1.2 var(--font-serif);max-width:24em}
.co .work .meta{padding-top:14px}

@media(max-width:1100px){
  .co .featbody,.co .leave{grid-template-columns:1fr}
}
@media(max-width:820px){
  .co .feat h2{font-size:2.24rem}
  .co .threeq{grid-template-columns:1fr}
  .co .threeq li{min-height:0;padding:22px 20px}
  .co .threeq .serif{font-size:1.72rem}
  .co .shots,.co .shots.four{grid-template-columns:1fr}
  .co .shots img:first-child{grid-column:auto}
  .co .shots.pair img{width:92%}
  .co .shots.pair img+img{width:72%;margin-top:-18%}
  .co .rechead .txt{margin-left:0;display:inline-block;margin-top:6px}
  .co .pagehead h1{font-size:clamp(2.7rem,13.5vw,3.96rem)}
  .co .split2,.co .runs{grid-template-columns:1fr}
  .co .split2{gap:24px}
}

/* =========================================================================
   Services, About, Contact and Thanks on the new design (2026-10-27)
   ========================================================================= */
.co .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* services: how a job runs | why it is safe to say yes */
.co .howjob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);padding-bottom:clamp(64px,7vw,104px);align-items:start}
.co .pkg{padding:clamp(28px,3vw,44px);background:var(--color-paper-2);border-radius:4px}
.co .pkg .lbl{color:var(--soft)}
.co .pkg h2{margin-top:14px;font-size:clamp(1.63rem,2.41vw,2.24rem);line-height:1.05;max-width:18em}
.co .pkg .gets{margin-top:24px}
.co .pkg .gets li{position:relative;padding-left:28px}
.co .pkg .gets li::before{content:"";position:absolute;left:2px;top:21px;width:12px;height:6px;border-left:2px solid var(--color-teal);border-bottom:2px solid var(--color-teal);transform:rotate(-45deg)}
.co .promise{margin:22px 0 0;color:var(--soft)}
.co .promise b{color:var(--color-ink)}
.co .pkg .acts{margin-top:24px}
.co .worth{margin:22px 0 0;font-size:14.5px;color:var(--soft)}
.co .why{display:flex;flex-direction:column;gap:32px;padding-top:8px}
.co .trust{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;font-size:17.5px;line-height:1.45;color:var(--soft)}
.co .trust b{color:var(--color-ink)}
.co .origin{margin:0;font:400 clamp(1.2rem,1.72vw,1.5rem)/1.25 var(--font-serif)}
.co .minimarks{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:0;padding:20px 0 0;list-style:none;border-top:1px solid var(--color-line)}
.co .minimarks img{height:17px;width:auto;opacity:.75}
.co .minimarks img.jan{height:23px}
.co .minimarks img.nbcu{height:12px}

/* services: the method in one line */
.co .methodline{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(56px,6vw,96px);border-top:1px solid var(--color-line)}
.co .steps{font-size:clamp(2.58rem,5.5vw,5.16rem);line-height:.95;letter-spacing:-.02em}
.co .steps em{font-style:italic}
.co .methodline .say{margin:0;font-size:17.5px;color:var(--soft);max-width:40ch}

/* services: the problem rows without links, and no mark to clear */
.co .help.nokc .head{min-height:0;max-width:none}
.co .help.nokc .rowi{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.co .help.nokc .more{justify-content:flex-start}

/* services: questions */
.co .qa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,112px);align-items:start}
.co .qa h2{font-size:clamp(1.89rem,3.1vw,2.92rem);line-height:1}
.co .faq{border-top:1px solid var(--color-line-strong)}
.co .faq details{border-bottom:1px solid var(--color-line-strong)}
.co .faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;cursor:pointer;list-style:none;font:600 17px/1.35 var(--font-sans)}
.co .faq summary::-webkit-details-marker{display:none}
.co .faq summary::after{content:"+";font:400 26px/1 var(--font-serif);color:var(--color-teal);transition:transform var(--ease-hover)}
.co .faq details[open] summary::after{transform:rotate(45deg)}
.co .faq summary:hover{color:var(--color-teal)}
.co .faq details p{margin:0 0 20px;max-width:58ch;color:var(--soft)}
.co .faq details a{color:var(--color-ink);text-underline-offset:3px}

/* about: an editorial profile (2026-10-27). A balance of the two passes:
   the new arc and air, with the earlier page's structure back (hairline
   rules over each principle and chapter, a ledger of years, the close's
   two-column composition). The portrait is capped at 300px until a larger
   original replaces the 400px file. */
.co .abouthead{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(32px,5vw,96px);align-items:end}
.co .abouthead h1{max-width:8.2em;font-size:clamp(2.88rem,6.3vw,6.3rem);text-wrap:balance}
.co .abouthead .intro{margin-top:32px;max-width:44ch;font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;color:var(--soft)}
.co .abouthead .intro p{margin:0}
.co .abouthead .intro p+p{margin-top:14px}
.co .face{margin:0}
.co .face img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:4px}
.co .face figcaption{margin-top:12px;font-size:14px;color:var(--soft)}
.co .cares{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(56px,7vw,112px);border-top:1px solid var(--color-line)}
.co .cares .lbl,.co .path .lbl{color:var(--soft)}
.co .cares h2,.co .path h2,.co .invite h2{text-wrap:balance}
.co .cares h2,.co .path h2{margin-top:14px;font-size:clamp(2.06rem,3.44vw,3.27rem);line-height:1}
.co .carehead{position:sticky;top:120px;align-self:start}
.co .caregrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px) clamp(28px,4vw,56px)}
.co .caregrid>div{padding-top:18px;border-top:1px solid var(--color-line-strong)}
.co .caregrid h3{font-size:clamp(1.38rem,1.89vw,1.89rem);line-height:1.08}
.co .caregrid p{margin:12px 0 0;max-width:38ch;color:var(--soft)}
.co .path{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,7vw,112px);background:var(--color-paper-2);
  max-width:none;padding-left:max(var(--m),calc((100% - 1440px) / 2 + var(--m)));padding-right:max(var(--m),calc((100% - 1440px) / 2 + var(--m)))}
.co .pathhead{position:sticky;top:120px;align-self:start}
.co .chapters{margin:0;padding:0;list-style:none;max-width:64ch;border-bottom:1px solid var(--color-line-strong)}
.co .chapters li{display:grid;grid-template-columns:4.5em minmax(0,1fr);column-gap:20px;padding:20px 0 24px;border-top:1px solid var(--color-line-strong)}
.co .chapters li>*{grid-column:2}
.co .chapters p{margin:0;line-height:1.6}
.co .chapters .when{display:contents}
.co .chapters .when span{grid-column:1;grid-row:1 / span 3;font:400 clamp(1.29rem,1.72vw,1.63rem)/1 var(--font-serif);color:var(--soft)}
.co .chapters .when b{grid-column:2;margin-bottom:6px;font-weight:600}
.co .chapters li.life{padding:22px 0 26px}
.co .chapters .life p{text-wrap:pretty;font-size:clamp(1.29rem,1.72vw,1.63rem);font-style:italic;line-height:1.2;color:var(--soft)}
.co .chapters a:not(.txt){text-underline-offset:3px}
.co .chapters .links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:2px}
.co .chapters .links .txt{display:inline-flex;align-items:center;min-height:44px}
.co .invite{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px clamp(32px,6vw,96px);align-items:end;padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,104px)}
.co .invite h2{font-size:clamp(2.24rem,4.3vw,4.13rem);line-height:.98;max-width:11em}
.co .invite .side>p{margin:0 0 24px;max-width:36ch;color:var(--soft)}
.co .invite .signoff{grid-column:1/-1;margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid var(--color-line);font-size:22px;font-style:italic;color:var(--soft)}

/* contact: note heading | the form */
.co .note{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(72px,8vw,120px);border-top:1px solid var(--color-line)}
.co .notehead .lbl{color:var(--soft)}
.co .notehead h2{margin-top:16px;font-size:clamp(1.89rem,3.1vw,2.92rem);line-height:1}
.co .notehead p:not(.lbl){margin:18px 0 0;color:var(--soft)}
.co .notehead .fine2 a{color:var(--color-ink);text-underline-offset:3px}
.co .cform{max-width:680px}
.co .cform .hp{position:absolute;left:-9999px}
.co .cform .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.co .cform .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.co .cform label{font:600 14px var(--font-sans)}
.co .cform .opt{font-weight:400;color:var(--soft)}
.co .cform input,.co .cform select,.co .cform textarea{width:100%;padding:13px 14px;border:1.5px solid var(--color-ink);border-radius:4px;background:var(--color-paper);
  color:var(--color-ink);font:400 16px/1.4 var(--font-sans)}
.co .cform textarea{resize:vertical;min-height:120px;line-height:1.5}
.co .cform ::placeholder{color:var(--soft);opacity:.8}
.co .cform input:focus,.co .cform select:focus,.co .cform textarea:focus{outline:2px solid var(--color-teal);outline-offset:2px}
.co .cform .captcha{margin:4px 0 18px}
.co .cform button{cursor:pointer}

/* thanks */
.co .thanks{min-height:52vh}
.co .thanks .back{margin:28px 0 0}

@media(max-width:980px){
  .co .howjob,.co .methodline,.co .qa,.co .path,.co .cares,.co .invite,.co .note{grid-template-columns:1fr}
  .co .pathhead,.co .carehead{position:static}
}
@media(max-width:820px){
  .co .help.nokc .rowi{grid-template-columns:1fr}
  .co .abouthead{grid-template-columns:1fr;gap:40px}
  .co .face{max-width:280px}
  .co .caregrid{grid-template-columns:1fr}
  .co .cform .pair{grid-template-columns:1fr;gap:0}
  .co .steps{font-size:2.58rem}
}

/* =========================================================================
   Phone menu (2026-10-27, revised). A <details> element: opens without
   script and from the keyboard (Enter or Space on the button). Open, it
   fills the screen below the bar on a solid surface, so nothing on the page
   shows through or can be tapped by mistake; the page behind stops
   scrolling; the button reads "Close". site.js adds Escape to close and
   returns focus to the button.
   ========================================================================= */
.co .menu{display:none}
@media(max-width:820px){
  .co .barin{position:relative;gap:12px;height:72px;padding-top:0;padding-bottom:0}
  .co .barin>.btn{margin-left:auto}
  .co .menu{display:block}
  .co .menu summary{display:flex;align-items:center;gap:8px;min-width:48px;min-height:44px;padding:0 4px;cursor:pointer;list-style:none;font:600 15px var(--font-sans)}
  .co .menu summary::-webkit-details-marker{display:none}
  .co .menu .ico{position:relative;width:18px;height:12px;border-top:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink)}
  .co .menu .ico::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--color-ink)}
  .co .menu[open] .ico{border:0;height:18px}
  .co .menu[open] .ico::before,.co .menu[open] .ico::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--color-ink);transform:rotate(45deg)}
  .co .menu[open] .ico::after{transform:rotate(-45deg)}
  .co .menu .lab-open,.co .menu[open] .lab-closed{display:none}
  .co .menu[open] .lab-open{display:inline}
  .co .menu nav{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:30;display:flex;flex-direction:column;overflow-y:auto;
    padding:12px var(--m) 32px;background:var(--color-paper);border-top:1px solid var(--color-line-strong)}
  .co .menu nav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--color-line);font:400 28px/1.1 var(--font-serif);text-decoration:none}
  .co .menu nav a:focus-visible{outline-offset:-2px}
  html:has(.menu[open]){overflow:hidden}
}

/* =========================================================================
   Services and Contact, art direction pass (2026-10-27). Related to the
   homepage without repeating it: no KC, no stone band. The one italic
   word is ink here too (2026-10-28, with the move to Fraunces).
   ========================================================================= */
.co .pagehead.inner h1{font-size:clamp(2.7rem,5.76vw,5.58rem);line-height:.94;max-width:13.5em}
.co .inner h1 em,.co .eng h2 em,.co .together h2 em,.co .choose h2 em{font-style:italic}
.co .pagehead.inner .lede{max-width:46ch;font-size:clamp(18px,1.5vw,21px)}

/* engagements: two sections, two proportions */
.co .eng{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px);border-top:1px solid var(--color-line)}
.co .eng .lbl{color:var(--color-teal)}
.co .eng h2{margin-top:16px;font-size:clamp(2.06rem,3.78vw,3.61rem);line-height:.98;letter-spacing:-.02em}
.co .eng p:not(.lbl):not(.qline){margin:18px 0 0;max-width:44ch;color:var(--soft)}
.co .eng .acts{margin-top:30px}
/* discovery: words left, the real sample right and larger */
.co .flx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center}
.co .qline{margin:24px 0 0;padding:18px 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);font-size:clamp(1.29rem,1.89vw,1.72rem);line-height:1.25}
.co .qline span{display:block}
.co .flx .shots a.cover{display:block;border-radius:3px}
.co .flx .shots a.cover img{width:100%}
/* implementation: set as type, three columns of different weight */
.co .impl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);align-items:start}
.co .kindlist{margin:6px 0 0;padding:0;list-style:none;border-top:1.5px solid var(--color-ink)}
.co .kindlist li{padding:14px 0;border-bottom:1px solid var(--color-line);font-size:clamp(1.38rem,2.06vw,1.89rem);line-height:1.1}
.co .howbuild{padding-top:6px}
.co .howbuild p{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--soft)}
.co .howbuild b{color:var(--color-ink)}
.co .howbuild .lbl{color:var(--soft)}
/* how the two relate */
.co .together{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:end;padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px);background:transparent;border-top:1px solid var(--color-line)}
.co .together h2{font-size:clamp(1.89rem,3.27vw,3.1rem);line-height:1}
.co .together p{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;max-width:46ch}
.co .qa{border-top:1px solid var(--color-line)}

/* contact: choose | the note */
.co .begin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(72px,8vw,120px);border-top:1px solid var(--color-line)}
.co .choose h2{font-size:clamp(1.89rem,3.1vw,2.92rem);line-height:1}
.co .choose>p{margin:18px 0 0;max-width:40ch;color:var(--soft)}
.co .choose .acts{margin-top:28px}
.co .prompts{margin-top:clamp(40px,4vw,64px);padding-top:28px;border-top:1px solid var(--color-line)}
.co .prompts h3{font-size:clamp(1.29rem,1.89vw,1.72rem);line-height:1.1}
.co .prompts p{margin:10px 0 0;color:var(--soft)}
.co .prompts ul{margin:10px 0 0;padding:0;list-style:none}
.co .prompts li{padding:9px 0 9px 18px;position:relative;font-size:16.5px}
.co .prompts li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1.5px;background:var(--soft)}
.co .notepanel{padding:clamp(24px,3vw,44px);background:var(--color-paper-2);border-radius:4px;scroll-margin-top:96px}
.co .notepanel h2{font-size:clamp(1.89rem,3.1vw,2.75rem);line-height:1}
.co .notepanel .sub3{margin:10px 0 24px;color:var(--soft)}
.co .notepanel .cform{max-width:none}
.co .cform .field.lead label{font-size:16px}
.co .cform .field.lead textarea{min-height:168px;font-size:17px}
.co .notepanel .fine2{margin:18px 0 0;color:var(--soft)}
.co .notepanel .fine2 a{color:var(--color-ink);text-underline-offset:3px}

/* touch targets: links standing alone in action rows get 44px of height */
.co .acts .txt,.co .cta .txt,.co figcaption .txt{display:inline-flex;align-items:center;gap:6px;min-height:44px}

@media(max-width:980px){
  .co .flx,.co .begin,.co .together{grid-template-columns:1fr}
  .co .impl{grid-template-columns:1fr 1fr}
  .co .impl-head{grid-column:1/-1}
}
@media(max-width:820px){
  .co .pagehead.inner h1{font-size:clamp(2.34rem,10.4vw,3.24rem)}
  .co .eng h2{font-size:2.15rem}
  .co .impl{grid-template-columns:1fr}
  .co .flx .shots{order:2}
  .co .notepanel{margin:0 calc(var(--m) * -1);border-radius:0}
}

/* =========================================================================
   Refinement pass (2026-10-27): one teal emphasis per page, the sample as a
   real preview at every width, mobile Services recomposed for 390px.
   ========================================================================= */
/* teal is for the one emphasis word in each page's headline, and for
   things you can press; section labels go back to the soft ink */
.co .eng .lbl{color:var(--soft)}

/* the sample: the cover is the link; the caption names it and links again */
.co .shots.sample .cover{display:block;border-radius:3px;transition:transform var(--ease-hover)}
.co .shots.sample .cover:hover{transform:translateY(-2px)}
.co .shots.sample figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px}
.co .shots.sample figcaption .txt{color:var(--color-ink);font-size:15px;white-space:nowrap}

/* the contact form's routing question explains itself */
.co .cform .why{margin:6px 0 0;font-size:14px;color:var(--soft)}

@media(max-width:820px){
  /* readable body copy on phones */
  .co .eng p:not(.lbl):not(.qline),.co .howbuild p,.co .faq details p,.co .choose>p,.co .prompts li{font-size:17px;line-height:1.6}
  .co .pagehead.inner .lede{font-size:18px;line-height:1.55}
  .co .eng{padding-top:48px;padding-bottom:56px}
  .co .eng h2{font-size:2.24rem}
  .co .qline{font-size:1.46rem;line-height:1.3}
  /* the sample on a phone: the cover alone, full width, then its caption and
     link; the ranked-list page is unreadable at this size, so it waits for
     the full sample */
  .co .shots.sample{display:block;margin:8px calc(var(--m) * -1) 0}
  .co .shots.sample .cover img{width:100%;border-radius:0;box-shadow:none}
  .co .shots.sample .cover img.second{display:none}
  .co .shots.sample figcaption{display:block;margin:14px var(--m) 0}
  .co .shots.sample figcaption>span{display:block;font-size:14.5px}
  .co .shots.sample figcaption .txt{margin-top:4px}
  .co .flx .engtext .acts{margin-top:28px}
  .co .kindlist li{font-size:1.5rem;padding:12px 0}
  .co .faq summary{font-size:17px;padding:16px 0;min-height:56px}
}
/* tablets: the sample keeps both pages, side by side under the text */
@media(min-width:821px) and (max-width:980px){
  .co .shots.sample .cover img{width:100%}
}

/* =========================================================================
   Final refinement (2026-10-27): the sample preview is one clear link; the
   contact form loses its routing question; the open menu makes the page
   behind it inert.
   ========================================================================= */
.co .shots.sample .cover{position:relative;display:block;color:inherit;text-decoration:none}
.co .shots.sample .cover img{display:block}
.co .shots.sample .cover .chip{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:var(--color-paper);color:var(--color-ink);font:600 13.5px/1 var(--font-sans);box-shadow:0 1px 0 rgba(28,26,22,.15),0 8px 18px -10px rgba(28,26,22,.45);transition:background var(--ease-hover),color var(--ease-hover)}
.co .shots.sample .cover:hover .chip,.co .shots.sample .cover:focus-visible .chip{background:var(--color-teal);color:var(--color-paper)}
.co .shots.sample .cover:hover{transform:none}
.co .shots.sample .cover:hover img:first-child{transform:translateY(-2px)}
.co .shots.sample .cover img{transition:transform var(--ease-hover)}
.co .shots.sample figcaption{margin-top:18px;gap:12px 24px}
.co .shots.sample figcaption .btn{white-space:nowrap}
@media(max-width:820px){
  .co .shots.sample figcaption .btn{display:flex;justify-content:center;width:100%;margin-top:14px;white-space:normal}
  .co .shots.sample .cover .chip{top:12px;left:auto;right:calc(var(--m) + 2px)}
}
/* the email link under the form stands alone on its line: give it a 44px
   tap area without moving the text */
.co .notepanel .fine2 a,.co .close .fine a{display:inline-block;padding:12px 0;margin:-12px 0}

/* about on phones: the year sits above the chapter, so the text keeps the
   full width */
@media(max-width:600px){
  .co .chapters li{grid-template-columns:1fr}
  .co .chapters li>*,.co .chapters .when span,.co .chapters .when b{grid-column:1;grid-row:auto}
  .co .chapters .when span{margin-bottom:6px}
}

/* =========================================================================
   Work as the evidence layer (2026-10-27). A problem index, then three
   examples with the same fields on three existing surfaces (stone, cream,
   ink) instead of cards. "to confirm" tags mark what waits on Kasey; none
   may ship.
   ========================================================================= */
.co .evindex{display:block;padding-bottom:clamp(56px,6vw,96px)}
.co .evindex a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;min-height:56px;padding:18px 0;border-top:1px solid var(--color-line-strong);text-decoration:none}
.co .evindex a:last-child{border-bottom:1px solid var(--color-line-strong)}
.co .evindex span{font-size:clamp(1.38rem,2.24vw,2.06rem);line-height:1.1}
.co .evindex b{font:600 15px var(--font-sans);white-space:nowrap}
.co .evindex b::after{content:"\2193";margin-left:10px;color:var(--soft)}
.co .evindex a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.co .ev>.wrap{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,112px)}
.co .ev+.ev:not(.evstone):not(.ink)>.wrap,.co .evstone+.ev>.wrap{border-top:0}
.co .evstone{background:var(--color-stone)}
.co .ev .lbl{color:var(--soft)}
.co .ev.ink .lbl{color:var(--psoft)}
.co .ev h2{margin-top:16px;font-size:clamp(2.24rem,4.3vw,4.13rem);line-height:.96;letter-spacing:-.02em;max-width:14em;text-wrap:balance}
.co .evbody{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,5vw,88px);margin-top:clamp(36px,4vw,56px);align-items:start}
.co .evfacts{margin:0;border-top:1px solid var(--color-line-strong)}
.co .ev.ink .evfacts{border-color:var(--pline)}
.co .evfacts div{padding:14px 0;border-bottom:1px solid var(--color-line)}
.co .ev.ink .evfacts div{border-color:var(--pline)}
.co .evfacts dt{font:400 10px/1.7 var(--font-mark);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.co .ev.ink .evfacts dt{color:var(--psoft)}
.co .evfacts dd{margin:4px 0 0;font-size:15.5px;line-height:1.5}
.co .halves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.co .ev h3{margin:0 0 10px;font:600 15px var(--font-sans)}
.co .halves p{margin:0;max-width:40ch;color:var(--soft)}
.co .halves p+p{margin-top:12px}
.co .ev .shots.sample,.co .ev .schem{margin-top:clamp(32px,3.6vw,48px)}
.co .evstone .schem{background:var(--color-paper)}
.co .today{margin:clamp(32px,3.6vw,48px) 0 0;padding-top:20px;border-top:1px solid var(--color-line-strong);max-width:62ch;line-height:1.6}
.co .ev.ink .today{border-color:var(--pline)}
.co .today a{display:inline-flex;align-items:center;min-height:44px;margin-right:22px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.co .today b{display:block;margin-bottom:4px}
.co .ev.ink h3{color:var(--color-paper)}
.co .ev.ink .today a.out{color:var(--color-teal-light)}
@media(max-width:820px){
  .co .evindex a{grid-template-columns:1fr;gap:6px}
  .co .evbody,.co .halves{grid-template-columns:1fr}
  .co .evbody{gap:28px}
  .co .halves p{font-size:17px;line-height:1.6}
  .co .ev h2{font-size:2.24rem}
  }

/* stand-alone text links keep a full tap target (launch check, 2026-10-27) */
.co .help .more .txt,.co .rechead .txt,.co .thanks .back .txt{display:inline-flex;align-items:center;min-height:44px}

/* the smallest phones (320 to 360px): the bar keeps one line. "Book a call"
   does not wrap and loses its arrow; the menu shows its icon, and its word
   stays for screen readers. Found by _build/qa/site.js, 2026-10-27. */
@media(max-width:360px){
  .co .barin{gap:10px}
  .co .word{font-size:13px}
  .co .barin>.btn{padding:11px 14px;white-space:nowrap}
  .co .barin>.btn span[aria-hidden]{display:none}
  .co .menu .lab-closed,.co .menu .lab-open{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}