/* Anton and DM Mono, self-hosted (SIL Open Font License 1.1; licences in /assets/fonts/).
   Same files and unicode ranges Google Fonts served on 2026-10-08, so rendering is unchanged. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- APEX Phase 1: visual convergence. Home only; loaded after site.css.
   Master: TPC_APEX_moody_wall_sign_locked.png. The master governs the look; the site governs the words, links and behaviour.
   Hero copy, CTAs and the Anton headline are the existing ones. Photography is stand-in, cropped from the master. ---------- */

.home-page{--ax-graphite:#0e0e0d;--ax-graphite-2:#121211;--ax-card:#161514;--ax-bone:#ece6da;--ax-stone:#cfc9bd;--ax-hair:#ece6da1a}
.home-page .shell{background:#0e0e0de6;border-bottom-color:var(--ax-hair)}

/* 01 Hero: the headline on the left, the studio still life on the right, one light from the window. */
.home-page .opening-v2{grid-template-rows:auto auto auto 1fr;align-content:start;min-height:min(max(760px,calc(100svh - var(--shell))),980px);background:var(--ax-graphite)}
.home-page .opening-v2 .opening-meta{flex-direction:column;justify-content:flex-start;gap:4px;padding-top:34px}
.home-page .opening-v2 .opening-meta:after{content:'';width:32px;height:1px;margin-top:16px;background:var(--ax-hair)}
.home-page .opening-v2 .opening-copy{grid-row:2;align-self:start;max-width:46%;padding:clamp(48px,6vh,84px) 0 0}
.home-page .opening-v2 h1{font-size:clamp(64px,6.5vw,124px);line-height:.9;color:var(--ax-bone)}
.home-page .opening-v2 h1 .h1-last{color:var(--ax-bone)}
.home-page .opening-v2 .opening-foot-v2{grid-row:3;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:30px;max-width:34%;padding:30px 0 64px;border-top:0}
.home-page .opening-v2 .opening-line{color:#e4ddcf}
.ax-scene{position:absolute;z-index:1;top:0;right:0;bottom:0;width:64%;pointer-events:none}
.ax-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 58%;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 26%);mask-image:linear-gradient(90deg,#0000 0%,#000 26%)}

/* 02 Services: six editorial cards on graphite, titled in Anton (founder-approved option B). Capabilities on Home; the five commercial offerings stay on Services. */
.ax-services{position:relative;padding:clamp(72px,6.4vw,96px) var(--m) clamp(80px,7vw,112px);background:var(--ax-graphite-2);border-top:1px solid var(--ax-hair);color:var(--ax-bone)}
.ax-eyebrow{margin:0;font:400 11px/1.5 var(--ax-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ax-stone)}
.ax-eyebrow:after{content:'';display:block;width:32px;height:1px;margin-top:18px;background:#ece6da40}
.ax-services-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem) minmax(0,1fr);align-items:start;gap:24px 48px;margin-bottom:clamp(36px,3.4vw,52px)}
.ax-services-intro{margin:0;font:400 14.5px/1.6 Inter,Arial,sans-serif;color:var(--ax-stone)}
.ax-all{justify-self:end;display:inline-flex;align-items:center;gap:22px;min-height:44px;padding-bottom:2px;font:400 11px/1 var(--ax-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ax-bone);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:color .18s}
.ax-all:hover{color:var(--copper-lit)}
.ax-cards{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 calc(2vw - var(--m));padding:0}
.ax-cards a{display:flex;flex-direction:column;height:100%;background:var(--ax-card);border:1px solid var(--ax-hair);transition:border-color .2s}
.ax-cards a:hover,.ax-cards a:focus-visible{border-color:#c78c6680}
.ax-cards a:focus-visible{outline:2px solid var(--copper-lit);outline-offset:3px}
.ax-card-img{display:block;aspect-ratio:154/166;overflow:hidden}
.ax-card-img img{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 70%,#0000 100%);mask-image:linear-gradient(180deg,#000 70%,#0000 100%);transition:transform 1.2s var(--ease)}
.ax-cards a:hover img{transform:scale(1.03)}
.ax-card-n{margin:6px 20px 0;font:400 10px/1 var(--ax-mono);letter-spacing:.16em;color:#a9a397}
.ax-cards h3{margin:12px 20px 0;font:400 clamp(17px,1.32vw,20px)/1.06 var(--ax-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ax-bone);text-wrap:balance}
.ax-card-line{margin:12px 20px 26px;font:400 13.5px/1.45 Inter,Arial,sans-serif;color:#bdb7ab}

/* 03 A higher standard: the lobby, the small bronze mark on the wall, the evening through the glass. */
.ax-standard{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,50vw,760px);padding:clamp(80px,8vw,120px) var(--m);overflow:hidden;background:#0d0d0c;color:var(--ax-bone)}
.ax-standard-media{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:32%}
.ax-standard-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:18% 50%;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 7%);mask-image:linear-gradient(90deg,#0000 0%,#000 7%)}
.ax-standard-copy{max-width:min(30%,27rem)}
.ax-standard h2{margin:0;font:400 clamp(40px,3.7vw,58px)/1.04 Cardo,Georgia,serif;letter-spacing:-.02em;color:var(--ax-bone);text-wrap:wrap}
.ax-standard .ax-eyebrow{margin-bottom:34px}
.ax-standard-body{margin:28px 0 0;font:400 15.5px/1.6 Inter,Arial,sans-serif;color:#d6d0c4}
.ax-link{display:inline-flex;align-items:center;gap:26px;min-height:44px;margin-top:30px;font:400 14px/1 Inter,Arial,sans-serif;color:var(--ax-bone);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:color .18s}
.ax-link:hover{color:var(--copper-lit)}

/* Tablet: the scene takes its own row under the first move; cards in threes; the lobby opens its section, then the words. */
@media(max-width:1023px){
  .home-page .opening-v2{grid-template-rows:auto auto auto auto;min-height:0}
  .home-page .opening-v2 .opening-copy,.home-page .opening-v2 .opening-foot-v2{max-width:none}
  .home-page .opening-v2 .opening-foot-v2{padding-bottom:40px}
  .ax-scene{position:relative;grid-column:1;grid-row:4;width:auto;height:clamp(320px,74vw,600px);margin:0 calc(-1 * var(--m))}
  .ax-scene img{object-position:40% 50%;-webkit-mask-image:linear-gradient(180deg,#0000 0%,#000 14%);mask-image:linear-gradient(180deg,#0000 0%,#000 14%)}
  .ax-services-head{grid-template-columns:minmax(0,1fr) auto}
  .ax-services-intro{grid-column:1/-1;grid-row:2;max-width:34rem}
  .ax-cards{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
  .ax-standard{display:block;min-height:0;padding:0}
  .ax-standard-copy{max-width:36rem;padding:clamp(72px,10vw,96px) var(--m) 40px}
  .ax-standard-media{position:relative;z-index:0;left:auto;height:clamp(300px,74vw,560px)}
  .ax-standard-media img{object-position:12% 50%;-webkit-mask-image:linear-gradient(180deg,#0000 0%,#000 12%);mask-image:linear-gradient(180deg,#0000 0%,#000 12%)}
}

/* Phone: headline, line, first move, then the scene; cards in pairs. */
@media(max-width:600px){
  .home-page .opening-v2 .opening-meta{padding-top:22px}
  .home-page .opening-v2 .opening-meta:after{margin-top:12px}
  .home-page .opening-v2 .opening-copy{padding-top:34px}
  .home-page .opening-v2 h1{font-size:min(58px,14.6vw)}
  .home-page .opening-v2 .opening-foot-v2{gap:20px;padding:22px 0 30px}
  .ax-scene{height:clamp(300px,96vw,460px)}
  .ax-services-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .ax-all{justify-self:start;grid-row:3}
  .ax-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 -8px}
  .ax-card-n{margin:4px 14px 0}
  .ax-cards h3{margin:10px 14px 0;font-size:16px}
  .ax-card-line{margin:10px 14px 20px;font-size:13px}
  .ax-standard h2{font-size:min(40px,10.4vw)}
  .ax-standard-body{font-size:16px}
}

@media print{.ax-scene img,.ax-standard-media img,.ax-card-img img{-webkit-mask-image:none;mask-image:none}}

/* Studio-concepts caption: the brands in the still life are fictional. Subordinate, still legible. */
.ax-scene-note{position:absolute;z-index:4;left:var(--m);bottom:26px;display:flex;align-items:center;gap:12px;margin:0;font:400 11px/1.5 var(--ax-mono);letter-spacing:.2em;text-transform:uppercase;color:#d8d2c6b3}
.ax-scene-note:before{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
@media(max-width:1023px){.ax-scene-note{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:5;justify-self:end;padding:14px 0 18px}}
/* Readability: credit sectors to the 11px label size used by every other mono label on Home (was 10px). */
.home-page .cr-sector{font-size:11px}

/* ---------- Editorial rhythm (founder pass, 2026-10-08). Home only; spacing, alignment and rag. No copy, colour or type-family changes. ---------- */
/* Sound familiar?: on wide screens the five lines stack in the right-hand column, under the thesis sub-line, instead of
   running on as one wrapped line with a stray "/" at the start of its second row. */
@media(min-width:1024px){
  .home-page .gap-familiar{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(32px,5vw,80px);align-items:start;padding-top:20px}
  .home-page .gap-familiar-t{padding-top:14px}
  .home-page .gap-familiar ul{display:block}
  .home-page .gap-familiar li{display:block;border-top:1px solid var(--ax-rule)}
  .home-page .gap-familiar li:first-child{border-top:0}
  .home-page .gap-familiar li+li:before{content:none}
}

/* ---------- Editorial simplification (founder pass, 2026-10-08) ---------- */
/* Working with us: one bone-white chapter. Small label, the statement as the dominant line, the existing sub-line beneath. */
.home-page .v2-working{padding:clamp(128px,14vw,216px) var(--m) clamp(136px,15vw,232px)}
.home-page .working-label{margin:0;font:400 11px/1.5 var(--ax-mono);letter-spacing:.22em;text-transform:uppercase;color:#6f6450}
.home-page .working-statement{max-width:16ch;margin:clamp(40px,4.4vw,68px) 0 0;font:400 clamp(46px,6.8vw,112px)/1.02 Cardo,Georgia,serif;letter-spacing:-.04em;color:#111614}
.home-page .working-sub{max-width:40ch;margin:clamp(32px,3vw,44px) 0 0;font:400 clamp(18px,1.4vw,21px)/1.5 Cardo,Georgia,serif;color:#4a4740}
/* Selected work: a short invitation now, straight off the white chapter, so no rule above it. */
.home-page .v2-bridge{border-top:0}
.home-page .v2-bridge .bridge-link{align-items:center}
.home-page .v2-bridge .bridge-arrow{position:relative;top:-.1em}
.home-page .v2-bridge .bridge-text{font-size:clamp(44px,5.2vw,88px);line-height:.94}
@media(max-width:600px){
  .home-page .v2-working{padding:104px var(--m) 120px}
  .home-page .working-statement{font-size:min(44px,11.4vw);line-height:1.04;letter-spacing:-.035em}
  .home-page .working-sub{font-size:18px}
  .home-page .v2-bridge .bridge-text{font-size:min(48px,12vw)}
}

/* APEX convergence candidate: verified presentation corrections only (Home). */
/* Closing row on tablets and phones: site.css stacks it (column) and aligns it left, but a later rule (align-items:last baseline)
   overrides that and centres the width-capped paragraph and links, indenting them ~19px from the headline and rule above. */
@media(max-width:1023px){.home-page .closing-v2 .closing-row{align-items:flex-start}}

/* Trust correction: the fictional-brands disclosure, repeated beside the services the cards illustrate (same style as the hero caption). */
.home-page .ax-services-note{display:flex;align-items:center;gap:12px;margin-top:18px;font:400 11px/1.5 var(--ax-mono);letter-spacing:.2em;text-transform:uppercase;color:#d8d2c6b3}
.home-page .ax-services-note:before{content:'';flex:none;width:22px;height:1px;background:currentColor;opacity:.6}