/* src/styles/site-chrome.css */
/* Trizone site chrome overrides.
   These live in a code asset rather than site_apply_css, because that tool
   silently drops declarations (colour especially) via the class tree-shaker. */

/* platform badge: unclassed <a> pinned to body, so it needs an attribute selector */
body > a[href^="https://www.contentmetric.com"],
body > a[href^="https://contentmetric.com"]{display:none!important}

/* Nav CTA arrow. Nothing in the template sizes .sm-cta-ic at all, so the black
   block shrank to the glyph on every page. /preview looked right only because a
   one-off .tz-ic class carries the sizing there. Same failure as .sm-h-pill.
   Values taken from .tz-ic so all pages match /preview. */
.sm-cta-ic{color:#ffffff;width:40px;height:40px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1}

/* the icon had border-radius: 4px 4px 8px, so only the bottom-right corner was 8px,
   which read as the black block escaping the button. Matching the template's own
   specificity (.sm-nav .sm-nav-cta .sm-cta-ic) so this actually wins. */
.sm-nav .sm-nav-cta .sm-cta-ic,
.sm-nav-cta .sm-cta-ic,
.sm-cta-ic{border-top-left-radius:4px;border-top-right-radius:4px;
  border-bottom-right-radius:4px;border-bottom-left-radius:4px}

/* Both submit controls were <a href="#">. The platform form script only binds
   'button, input[type=submit], input[type=button]', so neither form could be
   submitted at all. They are real buttons now, which need a UA style reset. */
.sm-cth-sub,.sm-cth-subon,.sm-sc-btn,.sm-sc-bton{
  border:0;font:inherit;text-align:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}

/* contact form submit: was white on white, read as permanently disabled.
   The script REPLACES .sm-cth-sub with .sm-cth-subon once the form validates,
   so both states need the background or the white label vanishes on a white
   button the moment the form becomes valid. */
.sm-cth-sub,.sm-cth-subon{background-color:#C93029;color:#ffffff}
.sm-cth-sub-t1,.sm-cth-sub-t2,
.sm-cth-subon .sm-cth-sub-t1,.sm-cth-subon .sm-cth-sub-t2{color:#ffffff}

/* about circle 1 is light; .sm-a-c3-yrs is white, built for the red circle */
.sm-a-c1 .sm-a-c3-yrs{color:#151515}

/* .sm-h-pill lost its styling when the homepage was restored from rendered HTML,
   so it renders bare everywhere except /preview, where a one-off .tz-pill covers it */
.sm-h-pill{display:inline-flex;align-items:center;gap:6px;width:auto;
  background-color:#ffffff;border-radius:100px;padding:8px 14px;
  font-size:14px;line-height:1.45;margin-bottom:22px}
.sm-h-pill i{width:7px;height:7px;flex:none;display:block;background-color:#C93029}

/* contact hero had padding-bottom:0. The client-logo ticker that was deleted from it
   was the only thing holding the contact details off the footer. */
.sm-cthero{padding-bottom:120px}

/* ---- Quality section (FAT / SAT / partners), added 2026-09-01 ---- */
.tz-q{position:relative;background-color:#F4F5F6;padding:140px 30px}
.tz-q-head{position:relative;max-width:820px;margin:0 auto 56px;text-align:center}
.tz-q-kick{font-size:14px;letter-spacing:.06em;color:#707274;margin:0 0 16px}
.tz-q-h2{font-size:42px;font-weight:600;line-height:1.14;color:#0E1011;margin:0 0 18px}
.tz-q-h2 span{color:#C93029}
.tz-q-lede{font-size:18px;line-height:1.65;color:#707274;margin:0}
.tz-q-grid{position:relative;display:flex;gap:20px;align-items:stretch}
.tz-q-card{flex:1;position:relative;overflow:hidden;border-radius:6px;
  min-height:460px;display:flex;align-items:flex-end;background-color:#0E1011}
.tz-q-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tz-q-scrim{position:absolute;inset:0;
  background-image:linear-gradient(rgba(14,16,17,.15) 0%,rgba(14,16,17,.92) 68%)}
.tz-q-in{position:relative;padding:32px 28px 30px}
.tz-q-h3{font-size:24px;font-weight:600;line-height:1.2;color:#ffffff;margin:0 0 12px}
.tz-q-p{font-size:15px;line-height:1.6;color:#C9CBCC;margin:0}
@media (max-width:900px){
  .tz-q{padding:90px 24px}
  .tz-q-grid{flex-direction:column}
  .tz-q-h2{font-size:32px}
}

/* ---- Film band, 2026-09-01 ----
   Swapped from the switchroom photo to the de-starred elevation banner.
   contain, not cover: the drawings ARE the content and cover crops 25% off
   each side. The image's own black ground makes the letterbox seamless.
   The template's .sm-v-overlay is a 60% black wash built for a bright photo;
   it drops the white line work to mid grey, so it comes down to 20%. */
.tz-film-img{background-image:url("https://media.cmcdn.io/editor/e8d605f5649d41aca82efed3969ace5e/o8eMN0Hh0WAZzqTS0UMMs-trizone-film-banner-v4.png")!important;
  background-size:contain;background-color:#000000;background-position:center center}
.sm-video .sm-v-overlay{background-color:rgba(21,21,21,.2)}
/* The band centred the artwork, which put the byline on top of the drawings.
   Cap the art width so its height is bounded, pin it near the top, and take the
   byline out of flow at the bottom of the band. A padding-top would only line
   up at one viewport width: contain re-fits by height once the band gets wide. */
.tz-film-img{background-size:auto min(640px,72%);background-position:center 92px}
@media (max-width:809px){.tz-film-img{background-size:min(100%,760px) auto;background-position:center center}}
.sm-video .sm-v-in{position:absolute;left:0;right:0;bottom:56px;
  max-width:none;padding:0;z-index:3}
.tz-quote-by{margin-top:0}
/* the inner column is absolute now, so it no longer holds the band open.
   874px is what the band measured while the pull quote was still in it. */
.sm-video{min-height:874px}
@media (max-width:809px){.sm-video{min-height:420px}}

/* /about hero, 2026-09-01: the h1 was removed on request, leaving a 500px band
   holding only the "Who we are" pill. Collapse it rather than invent a new line.
   Revert this when a replacement heading is supplied. */
.sm-abhero{min-height:0;height:auto}
.sm-abhero .sm-abh-in{padding:150px 0 60px;gap:0}

/* Sectors decoration, 2026-09-01: th4/th5 were pinned with fixed top values
   (855px, 805px) sized for the section before the five card paragraphs came
   out. The section lost ~100px, so both spilled past its bottom edge and were
   clipped by the footer. Pin them to the bottom so section height stops mattering. */
.sm-i-th4{top:auto;bottom:100px}
.sm-i-th5{top:auto;bottom:86px}

/* ---- Nav: sticky bar + mobile burger, 2026-09-01 ----
   Two faults. (1) .sm-nav was position:absolute inside the hero so it scrolled
   away; sticky cannot work from there, so it becomes fixed. It was already out of
   flow, so nothing shifts, but it needs its own background now content passes under.
   (2) The template hides .sm-nav-menu under 810px and expects a burger, but no
   burger element exists in this clone, so mobile had no navigation at all. Button
   added to the Nav component, toggled by src/scripts/nav-burger.js.
   Two rules hide the menu (.sm-nav-menu and .sm-nav .sm-nav-menu) so the override
   has to match the higher specificity. */
.sm-nav{position:fixed;left:0;right:0;width:auto;
  padding-left:30px;padding-right:30px;z-index:1000;
  background-color:rgba(244,245,246,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.tz-burger{display:none}

@media (max-width:809px){
  .sm-nav{padding-left:20px;padding-right:20px}

  /* CM12 strips empty <span> children, so the three bars are drawn with the
     button's own background plus ::before/::after rather than child elements */
  .tz-burger{display:block;position:relative;width:44px;height:44px;
    margin-left:12px;padding:0;flex:0 0 auto;border:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background-color:transparent;background-repeat:no-repeat;
    background-image:linear-gradient(#151515,#151515);
    background-size:22px 2px;background-position:11px 21px;
    transition:background-size .18s ease}
  .tz-burger::before,.tz-burger::after{content:"";position:absolute;left:11px;
    width:22px;height:2px;border-radius:2px;background-color:#151515;
    transition:transform .22s ease,top .22s ease}
  .tz-burger::before{top:14px}
  .tz-burger::after{top:28px}
  .sm-nav.tz-open .tz-burger{background-size:0 2px}
  .sm-nav.tz-open .tz-burger::before{top:21px;transform:rotate(45deg)}
  .sm-nav.tz-open .tz-burger::after{top:21px;transform:rotate(-45deg)}

  /* the CTA is absolute at right:0 in the template; it has to move aside for the
     burger, and the burger has to be the rightmost thing in the bar */
  .sm-nav .sm-nav-cta{position:static;margin-left:auto;height:42px;top:auto;right:auto}
  .sm-nav .sm-nav-cta .sm-cta-t{font-size:14px}
  .sm-nav .sm-nav-cta .sm-cta-ic{width:30px;height:30px;font-size:13px}

  /* drawer: full-width panel under the bar, collapsed to zero height when closed
     so it cannot be tabbed into or read out while hidden */
  .sm-nav .sm-nav-menu{display:flex;position:absolute;left:0;right:0;top:100%;
    width:100%;height:auto;flex-direction:column;align-items:stretch;gap:0;
    padding:0 20px;background-color:#F4F5F6;
    border-top:1px solid rgba(21,21,21,.10);
    box-shadow:0 18px 30px rgba(21,21,21,.10);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .26s ease,visibility 0s linear .26s}
  .sm-nav.tz-open .sm-nav-menu{max-height:70vh;overflow-y:auto;visibility:visible;
    transition:max-height .26s ease,visibility 0s}
  .sm-nav .sm-nav-menu a{font-size:17px;padding:15px 0;
    border-bottom:1px solid rgba(21,21,21,.08)}
  .sm-nav .sm-nav-menu a:last-child{border-bottom:0}
}
@media (max-width:400px){
  .sm-nav .sm-nav-cta .sm-cta-t{font-size:13px}
  .sm-nav .sm-nav-cta{gap:10px;padding-left:14px}
}

/* ---- Mobile horizontal scroll, 2026-09-01 ----
   The page scrolled sideways on a 375px screen. Offenders measured on /:
   .sm-h-grid 1380px wide (decorative hero grid lines), .sm-a-c1/.sm-a-c2 430px
   circles, .tz-mark-w 357px. All template pieces still sized for a 1440 canvas. */
@media (max-width:809px){
  .sm-h-grid{left:0;right:0;width:auto;max-width:100%}
  .sm-a-c1,.sm-a-c2,.sm-a-c3{max-width:100%}
  .sm-f-glow,.sm-f-glow-a{max-width:100%}
}
/* backstop for anything still overhanging. clip, not hidden: hidden would make
   the root a scroll container and can break sticky/fixed descendants. */
html{overflow-x:clip}

/* ---- /case-study full project list, 2026-09-01 ----
   The page claimed thirty projects and showed seven, and its own "Load more"
   button resolved to "That's everything for now!". All thirty are in the client's
   Project Reference sheet, so they are published as text rather than as more
   photo cards, which would have meant inventing or reusing 23 images. */
.tz-pl{background-color:#F4F5F6;padding:90px 30px 120px}
.tz-pl-in{max-width:1100px;margin:0 auto}
.tz-pl-h2{font-size:34px;font-weight:600;line-height:1.15;color:#0E1011;margin:0 0 10px}
.tz-pl-lede{font-size:17px;line-height:1.6;color:#707274;margin:0 0 34px}
.tz-pl-list{list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(21,16,17,.12);counter-reset:tzp}
.tz-pl-row{counter-increment:tzp;display:flex;gap:24px;align-items:baseline;
  padding:15px 0 15px 44px;position:relative;
  border-bottom:1px solid rgba(21,16,17,.10)}
.tz-pl-row::before{content:counter(tzp,decimal-leading-zero);position:absolute;left:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#C93029}
.tz-pl-n{flex:1 1 46%;font-size:16px;font-weight:500;color:#0E1011}
.tz-pl-l{flex:1 1 54%;font-size:15px;color:#707274}
@media (max-width:809px){
  .tz-pl{padding:64px 20px 80px}
  .tz-pl-h2{font-size:26px}
  .tz-pl-row{flex-direction:column;gap:3px;padding-left:38px}
  .tz-pl-n,.tz-pl-l{flex:none}
}

/* /about ticker: .sm-ai-strip li is 72px with no mobile breakpoint anywhere in
   the template stylesheet, so on a 375px screen it dominates the page. */
@media (max-width:809px){
  .sm-ai-strip li{font-size:30px;height:30px;line-height:30px}
  .sm-ai-strip{gap:12px}
}
/* footer legal line */
.tz-f-legal{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- Brand marquee under the hero, 2026-09-02 ----
   Restored as a real scrolling marquee. The template's own marquee keyframes
   (sm-ct-marq, sm-w-marq) were orphaned when the fake client-logo tickers came
   out, so this uses its own. Names are the thirty real projects from the client's
   Project Reference sheet, so "and 22 more" is no longer needed.
   Track holds two identical copies; -50% lands exactly on the seam. */
.tz-cl{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;
  gap:0;overflow:hidden}
.tz-cl .tz-cl-k{flex:none;white-space:normal;margin:0 0 8px;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#8E9092}
.tz-cl-sub{margin:0 0 22px;max-width:52ch;
  font-size:19px;line-height:1.45;color:#0E1011;font-weight:500;letter-spacing:-.01em}
.tz-cl-vp{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 72px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 72px),transparent)}
.tz-cl-tr{display:flex;width:max-content;gap:34px;align-items:center;
  animation:tz-cl-marq 64s linear infinite;will-change:transform}
.tz-cl-vp:hover .tz-cl-tr{animation-play-state:paused}
.tz-cl-tr .tz-cl-n{white-space:nowrap;flex:none}
@keyframes tz-cl-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tz-cl-tr{animation:none}
  .tz-cl-vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:809px){
  .tz-cl{margin-top:64px}
  .tz-cl-sub{font-size:17px;margin-bottom:18px}
  .tz-cl-tr{gap:24px;animation-duration:52s}
}

/* ---- Footer wordmark, 2026-09-02 ----
   Fixed at 140px with 30px bars, so it needs 470px. In a 315px row on a 375px
   phone the "TR" sat at left:-83px and the mark read "RIZON", clipped both ends.
   Every part is now driven off one custom property so the whole lockup scales
   together; min() keeps desktop exactly as it was. Ratios are the template's own
   values over 140: bar/dot 30, bar height 100, paddings 14, letter-spacing 5. */
.sm-f-mark{--tzm:min(140px,calc((100vw - 60px) / 3.95));height:calc(var(--tzm) * 1.392)}
.tz-mark-w{font-size:var(--tzm);letter-spacing:calc(var(--tzm) * -0.0357)}
.tz-mark-dot{width:calc(var(--tzm) * 0.214);height:calc(var(--tzm) * 0.214);
  margin-bottom:calc(var(--tzm) * 0.143);border-radius:50%}
.tz-mark-bar{width:calc(var(--tzm) * 0.214);height:calc(var(--tzm) * 0.714)}
.tz-mark-i{padding-left:calc(var(--tzm) * 0.1);padding-right:calc(var(--tzm) * 0.1);
  margin-bottom:calc(var(--tzm) * 0.1)}

/* logo ticker: marks are pre-rendered into a uniform 150x28 box and a single grey,
   so a long wordmark and a tall symbol sit at the same optical weight. */
.tz-cl-logo{height:28px;width:150px;object-fit:contain;flex:none;display:block;
  opacity:.62;transition:opacity .2s}
.tz-cl-vp:hover .tz-cl-logo{opacity:.82}
.tz-cl-tr{gap:26px}
@media (max-width:809px){.tz-cl-logo{height:24px;width:126px}}

/* The hero is a hard height:582px with overflow:hidden. Adding the kicker,
   subline and logo ticker took .tz-cl from ~46px to ~154px, so on any window
   where the subline wraps to two lines the ticker fell past 582px and was
   clipped away entirely. Keep 582 as the designed minimum and let it grow. */
.sm-hero{height:auto;min-height:582px}

/* .sm-a-c1/c2/c3 are fixed 430px in a three-up row, so between roughly 1240 and
   1300 the third one runs past the viewport and the page scrolls sideways by a
   few px. min-width:0 lets them shrink; wrap catches the rest. Was only capped
   under 809px before, which missed every laptop width. */
.sm-a-bottom{flex-wrap:wrap}
.sm-a-c1,.sm-a-c2,.sm-a-c3{min-width:0;max-width:100%}