/* ==========================================================================
   SET SQUARE STUDIO — design system
   The whole site is a drawing office: warm paper, graphite ink, one amber
   highlighter, mono annotations, ruled lines that draw themselves.
   ========================================================================== */

:root{
  --paper:#F5F1E8;
  --paper-2:#EDE8DA;
  --ink:#22252A;
  --ink-soft:#43474F;
  --amber:#E7A928;
  --amber-deep:#C98F13;
  --dark:#181A1D;
  --dark-2:#212429;
  --line:#C9C2B1;
  --line-faint:#DDD7C8;
  --mid:#7C7669;

  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --measure:66ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --site-max:1280px;

  --bg:var(--paper);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --rule:var(--line);
  --rule-faint:var(--line-faint);
  --card:var(--paper);
}

/* The commercial zone: same bones, different gravity. */
.zone-dark{
  --bg:var(--dark);
  --fg:var(--paper);
  --fg-soft:#C9C4B6;
  --rule:#383B41;
  --rule-faint:#2B2E33;
  --mid:#8E8A7E;
  --card:var(--dark-2);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:"wdth" 100;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink)}

/* ------- type ------- */
h1,h2,h3,h4{
  margin:0 0 .5em;
  line-height:1.02;
  letter-spacing:-.022em;
  font-weight:760;
  font-variation-settings:"wdth" 112;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.15}
p{margin:0 0 1em;max-width:var(--measure)}
p.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--fg-soft)}
strong{font-weight:680}

.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mid);
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 1.1rem;
}
.kicker::before{content:"";width:2rem;height:1.5px;background:var(--amber);flex:none}
.kicker--bare::before{display:none}
.kicker .amber{color:var(--amber)}

.num{ /* section number: 01 — WHY ONE TEAM */
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);margin-bottom:1rem;
}
.num b{color:var(--amber);font-weight:600}

.mono{font-family:var(--mono)}
.accent{color:var(--amber)}

/* ------- layout ------- */
.wrap{max-width:var(--site-max);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(3.2rem,7vw,6.5rem)}
section.tight{padding-block:clamp(2.2rem,4.5vw,3.6rem)}

.grid{display:grid;gap:clamp(1.4rem,3vw,2.6rem)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-38{grid-template-columns:1.1fr 1.6fr}
@media (max-width:860px){.grid-2,.grid-3,.grid-38{grid-template-columns:1fr}}

/* ------- the ruled line that draws itself -------
   Animation-hidden states are gated behind html.js (set by an inline script)
   so content is never invisible if JavaScript doesn't run. */
.rule{
  height:1.5px;background:var(--amber);border:0;margin:0;
  transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,.9,.24,1);
}
.js .rule{transform:scaleX(0)}
.rule.grey{background:var(--rule)}
.in .rule,.rule.in{transform:scaleX(1)!important}

/* reveal on scroll */
.reveal{transition:opacity .7s ease,transform .8s cubic-bezier(.22,.9,.24,1)}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none}
.reveal-img{overflow:hidden}
.reveal-img img{transition:transform 1.4s cubic-bezier(.22,.9,.24,1)}
.js .reveal-img img{transform:scale(1.04)}
.js .reveal-img.in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img img{opacity:1!important;transform:none!important;transition:none!important}
  .rule{transform:scaleX(1)!important;transition:none!important}
}

/* ------- crop ticks: a section framed like a drawing sheet ------- */
.sheet{position:relative;padding:clamp(1.6rem,4vw,3rem)}
.sheet::before{
  content:"";position:absolute;inset:0;border:1.5px solid var(--rule);pointer-events:none;
}
.tick{position:absolute;width:13px;height:13px;pointer-events:none}
.tick::before,.tick::after{content:"";position:absolute;background:var(--fg)}
.tick::before{width:13px;height:1.5px}
.tick::after{width:1.5px;height:13px}
.tick.tl{top:-1px;left:-1px}
.tick.tr{top:-1px;right:-1px;transform:scaleX(-1)}
.tick.bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.tick.br{bottom:-1px;right:-1px;transform:scale(-1)}

/* ------- spec strip: the signature title-block component ------- */
.spec{
  display:flex;flex-wrap:wrap;
  border-block:1.5px solid var(--fg);
}
.spec > div{
  flex:1 1 auto;min-width:9.5rem;
  padding:.8rem 1.1rem .85rem;
  border-right:1px solid var(--rule);
}
.spec > div:last-child{border-right:0}
.spec dt{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mid);margin:0 0 .2rem;
}
.spec dd{margin:0;font-weight:680;font-size:.95rem;letter-spacing:-.01em}
.spec.on-image{
  border-color:rgba(245,241,232,.85);color:var(--paper);
  background:rgba(24,26,29,.55);backdrop-filter:blur(6px);
}
.spec.on-image dt{color:rgba(245,241,232,.65)}
.spec.on-image > div{border-color:rgba(245,241,232,.25)}

/* ------- buttons & links ------- */
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--fg);border:1.5px solid var(--fg);
  padding:.85rem 1.5rem;
  background:linear-gradient(var(--amber),var(--amber)) no-repeat left bottom/100% 0;
  transition:background-size .28s ease,color .28s ease;
}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:var(--ink)}
.btn.solid{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.solid:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.zone-dark .btn{color:var(--paper);border-color:var(--paper)}
.zone-dark .btn:hover,.zone-dark .btn:focus-visible{color:var(--ink)}
.zone-dark .btn.solid{color:var(--ink)}

.arrow-link{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--fg);
  border-bottom:1.5px solid var(--amber);padding-bottom:.2rem;white-space:nowrap;
}
.arrow-link::after{content:" →";color:var(--amber)}
.arrow-link:hover{color:var(--amber-deep)}

/* ------- header ------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--fg);
}
.site-head .bar{
  display:flex;align-items:center;gap:1.6rem;
  padding-block:.85rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg);margin-right:auto}
.brand .mark{width:2.1rem;height:2.1rem;object-fit:contain;flex:none}
.site-foot .brand .mark{width:2.4rem;height:2.4rem}
/* dark zone: the mark keeps its original white ground, like a printed sticker */
.zone-dark .brand .mark,.site-foot .brand .mark{background:#fff;padding:2px;border-radius:2px}
.brand .word{font-weight:800;font-size:1.12rem;letter-spacing:-.02em;font-variation-settings:"wdth" 115}
.brand .word span{color:var(--mid);font-weight:500}
nav.primary{display:flex;align-items:center;gap:1.35rem}
nav.primary a{
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--fg-soft);
  padding-bottom:.25rem;border-bottom:1.5px solid transparent;
}
nav.primary a:hover{color:var(--fg);border-color:var(--amber)}
nav.primary a[aria-current]{color:var(--fg);border-color:var(--amber)}
.head-phone{
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.05em;
  text-decoration:none;color:var(--fg);
}
a.zone-switch{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;
  background:var(--dark);color:var(--paper);
  padding:.55rem .95rem;border:1.5px solid var(--dark);
  transition:background .25s,color .25s;
}
a.zone-switch:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.zone-dark a.zone-switch{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.zone-dark a.zone-switch:hover{background:var(--amber);border-color:var(--amber)}

.nav-toggle{display:none}
@media (max-width:960px){
  nav.primary{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1.5px solid var(--fg);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:1rem var(--gutter) 1.4rem;
  }
  nav.primary.open{display:flex}
  nav.primary a{padding:.7rem 0;font-size:.85rem;width:100%;border-bottom:1px solid var(--rule-faint)}
  .head-phone{display:none}
  .nav-toggle{
    display:block;background:none;border:1.5px solid var(--fg);color:var(--fg);
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.5rem .8rem;cursor:pointer;
  }
}

/* ------- hero ------- */
.hero{padding-block:clamp(2.6rem,6vw,5rem) 0}
.hero-split{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:end}
@media (max-width:900px){.hero-split{grid-template-columns:1fr}}
.hero .actions{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center;margin-top:1.9rem}

figure.plate{margin:0;position:relative}
figure.plate img{width:100%;object-fit:cover}
.hero-split figure.plate img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.hero-split figure.plate img[src*="diag-"]{aspect-ratio:4/3;object-fit:contain}
/* real drawing sheets: white ground, hairline frame, never crop the linework */
figure.plate img.dwg{border:1px solid var(--line);background:#fff}
.gallery figure.plate img.dwg{object-fit:contain;background:#fff}
figure.plate figcaption{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mid);padding-top:.6rem;display:flex;gap:.7rem;align-items:baseline;
}
figure.plate figcaption::before{content:"";width:1rem;height:1.5px;background:var(--amber);flex:none;align-self:center}
figure.plate .status{
  position:absolute;top:.85rem;left:.85rem;
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:.35rem .6rem;
}

/* ------- category tiles: editorial, unequal ------- */
.tiles{display:grid;gap:1.6rem;grid-template-columns:repeat(6,1fr)}
.tile{grid-column:span 2;text-decoration:none;color:inherit;display:flex;flex-direction:column;position:relative}
.tile.wide{grid-column:span 3}
@media (max-width:960px){.tile,.tile.wide{grid-column:span 3}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}.tile,.tile.wide{grid-column:auto}}
.tile .img{overflow:hidden;background:var(--paper-2)}
.tile .img img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.9,.24,1)}
.tile.wide .img img{aspect-ratio:16/9}
.tile .img img[src*="diag-"]{object-fit:contain}
.tile:hover .img img{transform:scale(1.045)}
.tile .body{padding-top:1rem;border-top:1.5px solid var(--fg);margin-top:1rem;position:relative}
.tile .body::before{
  content:"";position:absolute;top:-1.5px;left:0;height:1.5px;width:0;background:var(--amber);
  transition:width .45s ease;
}
.tile:hover .body::before{width:100%}
.tile .idx{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;color:var(--mid);text-transform:uppercase;display:block;margin-bottom:.45rem}
.tile h3{margin-bottom:.4rem}
.tile p{font-size:.92rem;color:var(--fg-soft);margin:0}
.tile .go{
  position:absolute;right:0;top:1rem;font-family:var(--mono);color:var(--amber);
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;
}
.tile:hover .go{opacity:1;transform:none}

/* text-only tile (no photo yet) — honest, never faked */
.tile.flat .img{display:none}
.tile.flat{justify-content:flex-end;background:var(--paper-2);padding:1.4rem;min-height:14rem}
.zone-dark .tile.flat{background:var(--dark-2)}
.tile.flat .body{border-top:0;margin-top:0;padding-top:0}
.tile.flat .body::before{display:none}

/* ------- process ------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
.steps.v6{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.steps,.steps.v6{grid-template-columns:1fr}}
.step{border-top:1.5px solid var(--fg);padding-top:1.1rem;position:relative}
.step .n{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  color:var(--amber);display:block;margin-bottom:.55rem;
}
.step h3{font-size:1.15rem;margin-bottom:.45rem}
.step p{font-size:.94rem;color:var(--fg-soft);margin:0}

/* ------- logo wall ------- */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;align-items:center}
@media (max-width:900px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
.logo-wall img{
  width:100%;max-height:64px;object-fit:contain;
  mix-blend-mode:multiply;filter:grayscale(1) contrast(.9) opacity(.72);
  transition:filter .3s;
}
.logo-wall img:hover{filter:grayscale(0) contrast(1) opacity(1)}

/* ------- doorway band (commercial gateway) ------- */
.doorway{position:relative;color:var(--paper);isolation:isolate;overflow:hidden}
.doorway img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.doorway::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(24,26,29,.92) 22%,rgba(24,26,29,.55) 58%,rgba(24,26,29,.35));z-index:-1}
.doorway .wrap{padding-block:clamp(3.4rem,8vw,7rem)}
.doorway .kicker{color:rgba(245,241,232,.7)}
.doorway p{color:rgba(245,241,232,.85)}

/* ------- project cards / index ------- */
.filter-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem}
.filter-tabs button{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:1.5px solid var(--rule);color:var(--fg-soft);
  padding:.55rem 1rem;cursor:pointer;transition:all .25s;
}
.filter-tabs button:hover{border-color:var(--fg);color:var(--fg)}
.filter-tabs button.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
@media (max-width:820px){.proj-grid{grid-template-columns:1fr}}
.proj-card{text-decoration:none;color:inherit;display:block}
.proj-card.feature{grid-column:1/-1}
.proj-card .img{overflow:hidden}
.proj-card .img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s cubic-bezier(.22,.9,.24,1)}
.proj-card.feature .img img{aspect-ratio:21/9}
.proj-card:hover .img img{transform:scale(1.04)}
.proj-card .spec{margin-top:0;border-top:0}
.proj-card h3{margin:.9rem 0 .35rem}
.proj-card p{color:var(--fg-soft);font-size:.95rem}

/* ------- case study ------- */
.case-hero{position:relative}
.case-hero img{width:100%;max-height:72vh;object-fit:cover}
.case-body{max-width:820px}
.case-body h2{margin-top:2.6em}
.case-body .num{margin-top:0}
blockquote.pull{
  margin:2.6rem 0;padding:1.6rem 0 1.6rem 1.8rem;border-left:3px solid var(--amber);
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.4;font-weight:560;
  letter-spacing:-.01em;max-width:34ch;text-wrap:balance;
}
ul.delivers{list-style:none;margin:1.4rem 0;padding:0;columns:2;column-gap:2.4rem}
@media (max-width:680px){ul.delivers{columns:1}}
ul.delivers li{
  break-inside:avoid;padding:.65rem 0 .65rem 1.4rem;position:relative;
  border-bottom:1px solid var(--rule-faint);font-size:.95rem;
}
ul.delivers li::before{content:"◣";position:absolute;left:0;top:.68rem;font-size:.6rem;color:var(--amber)}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media (max-width:680px){.gallery{grid-template-columns:1fr}}
.gallery figure.plate.tall{grid-row:span 2}
.gallery figure.plate img{aspect-ratio:4/3;object-fit:cover;width:100%;height:100%}
.gallery figure.plate.tall img{aspect-ratio:3/4}

/* is-this-you list */
ul.you{list-style:none;margin:1.2rem 0;padding:0;max-width:var(--measure)}
ul.you li{
  padding:.9rem 0 .9rem 2rem;position:relative;border-bottom:1px solid var(--rule-faint);
  font-size:1.02rem;font-style:italic;color:var(--fg-soft);
}
ul.you li::before{content:"—";position:absolute;left:0;color:var(--amber);font-style:normal}

/* FAQ */
details.faq{border-top:1px solid var(--rule);max-width:var(--measure)}
details.faq:last-of-type{border-bottom:1px solid var(--rule)}
details.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;font-weight:640;font-size:1rem;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--amber);font-weight:600;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq p{padding-bottom:1.1rem;color:var(--fg-soft);font-size:.97rem}

/* capability spec list */
ul.caps{list-style:none;margin:0;padding:0;columns:2;column-gap:3rem}
@media (max-width:680px){ul.caps{columns:1}}
ul.caps li{
  break-inside:avoid;font-size:.93rem;padding:.6rem 0;
  border-bottom:1px solid var(--rule-faint);
  display:flex;gap:.75rem;align-items:baseline;
}
ul.caps li::before{content:"";width:.45rem;height:.45rem;background:var(--amber);flex:none;align-self:center;clip-path:polygon(0 0,0 100%,100% 100%)}

/* ------- forms ------- */
form.enquiry{max-width:720px}
.intent-toggle{display:flex;gap:0;margin-bottom:2rem;border:1.5px solid var(--fg);width:fit-content}
.intent-toggle button{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;color:var(--fg-soft);padding:.8rem 1.4rem;cursor:pointer;
}
.intent-toggle button.active{background:var(--fg);color:var(--bg)}
.field{margin-bottom:1.4rem}
.field label{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mid);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:1.5px solid var(--rule);
  padding:.85rem 1rem;font-family:var(--sans);font-size:1rem;color:var(--fg);
  border-radius:0;appearance:none;
}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}

/* ------- footer: the title block ------- */
.site-foot{background:var(--dark);color:var(--paper);margin-top:clamp(3rem,7vw,6rem)}
.zone-dark .site-foot{border-top:1.5px solid var(--rule)}
.site-foot .cols{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem;
  padding-block:clamp(2.6rem,5vw,4rem) 2.4rem;
}
@media (max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h4{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid);margin-bottom:1rem;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.55rem}
.site-foot a{color:rgba(245,241,232,.82);text-decoration:none;font-size:.92rem}
.site-foot a:hover{color:var(--amber)}
.site-foot .brand .word{color:var(--paper)}
.site-foot .tagline{color:var(--mid);font-size:.95rem;margin-top:.9rem;max-width:26ch}
.site-foot .spec{border-color:#383B41;color:var(--paper)}
.site-foot .spec dt{color:var(--mid)}
.site-foot .spec > div{border-color:#2B2E33}
.site-foot .legal{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--mid);
  padding-block:1.3rem 1.6rem;line-height:1.8;
}

/* dark-zone banner over header for the way back */
.zone-note{
  background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  text-align:center;padding:.45rem var(--gutter);
}
.zone-note a{color:inherit}

/* small helpers */
.stack-lg > * + *{margin-top:clamp(2rem,4vw,3rem)}
.maxw{max-width:var(--measure)}
.mt-0{margin-top:0}.mb-2{margin-bottom:2rem}
.center{text-align:center}
.tnum{font-variant-numeric:tabular-nums}