/* Home: same type as the case studies (Anton headings, Open Sauce Sans text) + "What I do" list */
:root{--sans:"Open Sauce Sans",system-ui,sans-serif;--mono:"Open Sauce Sans",system-ui,sans-serif;--head:"Anton","Open Sauce Sans",sans-serif;--accent2:#3346FF}
body{font-family:var(--sans)}
h1,h2{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.95}
h3{font-family:var(--sans)}

/* hero */
.focus-h{font:400 clamp(48px,7.4vw,112px)/.94 var(--head);letter-spacing:0;text-transform:uppercase}
.focus-h em{font:400 clamp(48px,7.4vw,112px)/.94 var(--head);font-style:normal;letter-spacing:0}
.focus-h .sub{font-family:var(--sans);text-transform:none}
.focus-h .intro,.focus-panel span,.tk-no,.tk-stub .row,.tk-cover small,.tk-cover .mono,.poster .pn,.with2 small,.sw-k,.sw dt,.more2 h6,.more2 small,.ldr-line{font-family:var(--sans)!important;letter-spacing:.04em}
.tk h3,.tk-stub .row b{font:400 30px/1 var(--head);font-style:normal;text-transform:uppercase;letter-spacing:0}

/* section heads */
.hx-head h2{font-size:clamp(36px,4vw,56px)}
.hx-head.center .chips2{justify-content:center}
.about2 h2{font-size:clamp(30px,3.6vw,52px);line-height:1}
.about2 h2 .soft{display:block;margin-top:6px}
.more-link{display:inline-block;font:600 15px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;margin-left:4px}
.more-link:hover{text-decoration-thickness:2px}
.about2 .more-link{margin:22px 0 4px;display:block;width:max-content}

/* what I do */
.svc{padding-top:clamp(80px,10vw,130px)}
.svc .hx-head{margin-bottom:clamp(24px,3vw,36px)}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list li{border-bottom:1px solid var(--line)}
.svc-list a{display:grid;grid-template-columns:clamp(40px,4vw,56px) 1fr minmax(240px,380px);align-items:center;gap:16px;padding:clamp(20px,2.4vw,30px) 0;color:var(--ink)}
.svc-list .no{font:500 15px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.svc-list .tt{position:relative;display:inline-flex;align-items:center;justify-self:start}
.svc-list b{font:600 clamp(22px,2.2vw,30px)/1.2 var(--sans);letter-spacing:-.02em;transition:color .35s}
.svc-list p{font-size:16px;line-height:1.5;color:var(--muted);text-align:right;justify-self:end;max-width:34ch}
.svc-list a:hover b,.svc-list a:focus-visible b{color:var(--accent2)}
@media (max-width:900px){
  .svc-list a{grid-template-columns:36px 1fr}
  .svc-list p{grid-column:2;text-align:left;justify-self:start}
  }
/* ticket back: condensed letters anchored to the bottom so they never hit the QR code */
.tk-cover b{font:400 clamp(60px,5.6vw,84px)/.85 var(--head)!important;letter-spacing:.01em!important;top:auto!important;bottom:16px;left:14px;transform:rotate(180deg)!important}
@media (max-width:760px){.tk-cover b{writing-mode:horizontal-tb;transform:none!important;left:auto;right:16px;bottom:12px;font-size:44px!important}}
/* value cards, not tickets: no stub, notches, tear line or flip-over back */
.tk-stub,.tk-cover{display:none!important}
.tk-in{transform:none!important}
.tk-face.tk-info{border-radius:20px}
.tk-main{padding:24px 24px 22px}
@media (max-width:760px){.tk-main{padding:18px 20px}.tk h3{font-size:26px!important}}
/* hero headline: ~12px between the two lines so the comma doesn't touch the line below */
.focus-h{line-height:1.06!important}
.focus-h .l1{margin-bottom:.04em}
.focus-h em{line-height:1.06!important}