@charset "UTF-8";
/*
Theme Name: 2Theta (GeneratePress Child)
Description: Child theme for the Two Theta Technology website. v0.8.0 "brand-first industrial" redesign: white custom header with the real colour 2θ logo, logo-blue #336699 + red double rule, one products dropdown, TH/EN switch; navy #071B3A photo heroes, red #C41230 accents/CTA; Montserrat (English/Latin) + IBM Plex Sans Thai (Thai); flat gridline components.
Author: 2Theta Technology
Template: generatepress
Version: 0.8.0
Text Domain: generatepress-child-2theta
*/

/* ============================================================ tokens */
:root{
  --tt-navy:#071B3A; --tt-navy2:#0C2A54;
  --tt-blue:#163B6E; --tt-blue-link:#1A4FA0;
  --tt-red:#C41230;  --tt-red-dark:#A00F27;
  --tt-ink:#1B2733;  --tt-slate:#3E5166;
  --tt-muted:#566B84; --tt-line:#D4DCE9;
  --tt-soft:#F6F8FC; --tt-band:#EEF1F5;
  --tt-logo-blue:#336699;   /* sampled from logo-2theta-real.png */
  --tt-body:'Montserrat','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tt-mono:var(--tt-body);
  --tt-inner:1040px;
  /* English/Latin = Montserrat (user 2026-10-03); Montserrat has no Thai glyphs so Thai text falls through to Noto Sans Thai (swapped from Sarabun 2026-10-11).
     display/mono tokens are aliases of body so old rules still resolve. */
  --tt-display:var(--tt-body);
  /* motion — one shared "modern" deceleration curve for every reveal/hover/menu
     animation on the site, so the whole page moves with one consistent feel. */
  --tt-ease:cubic-bezier(.22,1,.36,1);
}

/* ============================================================ type
   v0.8: body + Thai in IBM Plex Sans Thai; headings in the display stack at 700, NOT
   uppercase (Thai has no case; the uppercase poster look belonged to v0.7). Thai
   headings keep line-height >= 1.4 so stacked tone/vowel marks never collide
   (BUILD_RUNBOOK Thai-typography rule); tracking stays ~0 for the same reason. */
body,button,input,select,textarea{ font-family:var(--tt-body); }
body{ font-variant-numeric:lining-nums; color:var(--tt-ink); line-height:1.75; font-size:1rem; font-weight:400; -webkit-font-smoothing:antialiased; background:#fff; }

h1,h2,h3,h4,h5,h6,.site-title{
  font-family:var(--tt-display);
  font-weight:600; color:var(--tt-navy); line-height:1.3;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem,1.3rem + 3vw,3.1rem); }
h2{ font-size:clamp(1.6rem,1.2rem + 1.7vw,2.3rem); }
h3{ font-size:1.15rem; }
p,li{ line-height:1.8; }

a{ color:var(--tt-blue-link); text-decoration:none; transition:color .25s var(--tt-ease); }
a:hover,a:focus{ color:var(--tt-red-dark); }
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }
.entry-content .wp-block-button__link,
.entry-content .wp-block-button__link:hover{ text-decoration:none; color:#fff; }
.tt-hero .tt-lead a{ color:#fff; }

/* ============================================================ buttons
   uppercase / tracked / sharp-cornered — matches the design/ prototype's
   button system (12px, weight 700, letter-spacing ~2px, radius 0). */
.entry-content .wp-block-button__link,
.button,button[type="submit"],input[type="submit"]{
  background-color:var(--tt-red) !important; border:1.5px solid var(--tt-red); color:#fff !important;
  font-family:var(--tt-display); font-weight:700; font-size:.95rem;
  border-radius:0; padding:.85em 1.6em; text-decoration:none; display:inline-block;
  transition:background-color .28s var(--tt-ease), border-color .28s var(--tt-ease),
    transform .28s var(--tt-ease), box-shadow .28s var(--tt-ease);
}
.entry-content .wp-block-button__link:hover,
.button:hover,button[type="submit"]:hover{
  background-color:var(--tt-red-dark) !important; border-color:var(--tt-red-dark); color:#fff !important;
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(7,27,58,.18);
}
.entry-content .wp-block-button__link:active,
.button:active,button[type="submit"]:active{ transform:translateY(0); box-shadow:none; }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent !important; border-color:rgba(255,255,255,.55); color:#fff !important;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color:rgba(255,255,255,.12) !important; border-color:#fff;
}
.wp-block-buttons{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================ header (v0.8.0)
   Custom markup from functions.php (GP's own header is unhooked). White bar, real
   colour logo, menu spread across the middle, quote button, TH/EN switch rightmost,
   then a logo-blue + red double rule. */
.site-header{ display:none; }            /* safety: GP header markup, if any plugin re-adds it */
.tt-header{ background:#fff; position:relative; z-index:50; }
.tt-header__in{
  max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,3vw,32px);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,36px); min-height:84px;
}
.tt-header__logo{ flex:none; display:block; line-height:0; }
.tt-header__logo-img{ height:54px; width:auto; display:block; }
/* 2026-10-03: header rule (blue, then red) removed entirely (user) */

.tt-nav{ flex:1; }
.tt-nav__list{ list-style:none; margin:0 auto; padding:0; display:flex; justify-content:space-between; align-items:center; max-width:720px; }
.tt-nav__list > li{ position:relative; margin:0; }
.tt-nav__list > li > a{
  display:block; padding:30px 4px; font:600 1rem/1 var(--tt-body); color:var(--tt-navy);
  text-decoration:none; position:relative; cursor:pointer; white-space:nowrap;
}
.tt-nav__list > li > a::after{
  content:""; position:absolute; left:4px; right:4px; bottom:20px; height:2px; background:var(--tt-red);
  transform:scaleX(0); transition:transform .22s var(--tt-ease);
}
.tt-nav__list > li:hover > a::after,
.tt-nav__list > li.is-open > a::after,
.tt-nav__list > li.current-menu-item > a::after,
.tt-nav__list > li.current-menu-ancestor > a::after,
.tt-nav__list > li.current-menu-parent > a::after{ transform:scaleX(1); }
.tt-nav__list > li.menu-item-has-children > a{ padding-right:18px; }
.tt-nav__list > li.menu-item-has-children > a::before{
  content:"▾"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-size:.7rem; color:var(--tt-red);
}

/* products dropdown — a 2-column panel: each group header (a "#" label item) over its links */
.tt-nav__list .sub-menu{ list-style:none; margin:0; padding:0; }
.tt-nav__list > li > .sub-menu{
  position:absolute; left:-24px; top:100%; display:none;
  grid-template-columns:repeat(2,minmax(210px,auto)); gap:12px 34px;
  background:#fff; border-top:3px solid var(--tt-red); box-shadow:0 18px 40px rgba(7,27,58,.18);
  padding:22px 26px 18px; min-width:520px;
}
.tt-nav__list > li:hover > .sub-menu,
.tt-nav__list > li:focus-within > .sub-menu,
.tt-nav__list > li.is-open > .sub-menu{ display:grid; }
.tt-nav__list .sub-menu > li > .tt-nav__label{
  display:block; font:600 .78rem/1 var(--tt-display);
  color:var(--tt-muted); padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--tt-line); cursor:default;
}
.tt-nav__list .sub-menu .sub-menu{ display:grid; }
.tt-nav__list .sub-menu a[href]{
  display:block; padding:7px 0; font:500 .95rem/1.45 var(--tt-body); color:var(--tt-navy); text-decoration:none;
}
.tt-nav__list .sub-menu a[href]:hover,
.tt-nav__list .sub-menu .current-menu-item > a{ color:var(--tt-red); }

.tt-header__end{ flex:none; display:flex; align-items:center; gap:14px; }
.tt-header__cta{
  font:700 .92rem/1 var(--tt-display); text-decoration:none;
  background:var(--tt-red); color:#fff !important; padding:14px 18px; transition:background-color .2s var(--tt-ease);
}
.tt-header__cta:hover{ background:var(--tt-red-dark); }
/* language switch — flag dropdown (2026-10-03). Opens on click/Enter/Space (header.js) and on hover for mouse users
   (same as the products dropdown); Escape / outside click closes. */
.tt-lang{ position:relative; }
.tt-lang__btn{ display:inline-flex; align-items:center; gap:8px; background:#fff !important; color:var(--tt-navy) !important;
  border:1px solid var(--tt-line) !important; padding:9px 10px !important; line-height:1 !important; cursor:pointer;
  transition:border-color .2s var(--tt-ease), background-color .2s var(--tt-ease); }
.tt-lang__btn:hover,.tt-lang__btn:focus-visible,.tt-lang.is-open .tt-lang__btn{ border-color:var(--tt-navy) !important; background:var(--tt-band) !important; }
.tt-flag{ display:block; width:24px; height:16px; box-shadow:0 0 0 1px rgba(7,27,58,.22); }
.tt-lang__caret{ transition:transform .2s var(--tt-ease); }
.tt-lang.is-open .tt-lang__caret{ transform:rotate(180deg); }
.tt-lang__menu{ list-style:none; margin:0; padding:6px 0; position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:170px;
  background:#fff; border:1px solid var(--tt-line); border-top:3px solid var(--tt-red); box-shadow:0 12px 28px rgba(7,27,58,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--tt-ease), transform .2s var(--tt-ease), visibility 0s .2s; }
.tt-lang.is-open .tt-lang__menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (hover:hover){ .tt-lang:hover .tt-lang__menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; } .tt-lang:hover .tt-lang__caret{ transform:rotate(180deg); } }
.tt-lang__menu li{ margin:0; }
.tt-lang__opt{ display:flex; align-items:center; gap:12px; padding:10px 16px; font:500 .95rem/1.2 var(--tt-body); color:var(--tt-navy); text-decoration:none !important; }
a.tt-lang__opt:hover,a.tt-lang__opt:focus-visible{ background:var(--tt-band); color:var(--tt-red); }
.tt-lang__opt.is-current{ font-weight:700; background:var(--tt-soft); }
@media (prefers-reduced-motion:reduce){ .tt-lang__menu,.tt-lang__caret{ transition:none; } }

/* smooth in-page scrolling ("Explore Products" -> #products); off for reduced-motion users */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

.tt-header__toggle{ display:none; }

@media (max-width:1080px){
  .tt-header__in{ flex-wrap:wrap; min-height:72px; }
  .tt-header__logo-img{ height:44px; }
  .tt-header__toggle{
    display:inline-flex !important; align-items:center; gap:8px; order:3; margin-left:12px;
    background:#fff !important; color:var(--tt-navy) !important; border:1px solid var(--tt-line) !important;
    padding:10px 12px !important; font:600 .9rem/1 var(--tt-body) !important;
  }
  .tt-header__burger,.tt-header__burger::before,.tt-header__burger::after{
    display:block; width:18px; height:2px; background:var(--tt-navy); position:relative; content:"";
  }
  .tt-header__burger::before{ position:absolute; top:-6px; } .tt-header__burger::after{ position:absolute; top:6px; }
  .tt-header__end{ order:2; margin-left:auto; }
  .tt-nav{ order:4; flex-basis:100%; display:none; }
  .tt-header.is-menu-open .tt-nav{ display:block; animation:tt-menu-in .3s var(--tt-ease) both; }
  .tt-nav__list{ flex-direction:column; align-items:stretch; max-width:none; padding-bottom:14px; }
  .tt-nav__list > li{ border-top:1px solid var(--tt-line); }
  .tt-nav__list > li > a{ padding:15px 2px; }
  .tt-nav__list > li > a::after{ display:none; }
  .tt-nav__list > li > .sub-menu{
    position:static; box-shadow:none; border-top:0; min-width:0; padding:0 0 12px 12px;
    grid-template-columns:1fr; display:none;
  }
  .tt-nav__list > li:hover > .sub-menu,.tt-nav__list > li:focus-within > .sub-menu{ display:none; }
  .tt-nav__list > li.is-open > .sub-menu{ display:grid; }
}
@media (max-width:520px){
  .tt-header__cta{ display:none; }
}
@keyframes tt-menu-in{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================ page shell
   hero pages: hide the theme title (the hero group carries the H1),
   drop all container padding, kill inter-block margin, prevent 100vw scroll. */
.tt-hero-page .entry-header{ display:none; }
.tt-hero-page .site-main,
.tt-hero-page .inside-article,
.tt-hero-page .site-content,
.tt-hero-page .content-area,
.tt-hero-page .entry-content{ padding:0 !important; margin:0 !important; }
.tt-hero-page .site-content{ overflow-x:hidden; }
.tt-hero-page .entry-content > *{ margin:0 !important; }
.tt-hero-page .entry-content > .wp-block-group{ margin:0 !important; }

/* Each band: break out to the full viewport width, then pad the content
   back in so it centres on a 1040px column. No inner wrapper needed —
   works whatever width GeneratePress gives .entry-content. */
.tt-hero,.tt-sec,.tt-cta{
  margin-inline:calc(50% - 50vw);
  padding-inline:max(24px, calc(50vw - (var(--tt-inner) / 2)));
}
/* neutralise theme / core block-gap inside our bands, then set our own rhythm */
.tt-hero-page .entry-content :where(.wp-block-group) > *{ margin-top:0; margin-bottom:0; }
.tt-hero > *,.tt-sec > *,.tt-cta > *{ margin-block:0; }
.tt-sec  > * + *{ margin-top:1rem; }
.tt-sec  > h2:first-child{ margin-top:0; }
.tt-sec  > h2 + *{ margin-top:.75rem; }
.tt-sec  > .wp-block-table,
.tt-sec  > .wp-block-buttons{ margin-top:1.4rem; }
/* consecutive body paragraphs in a section — the block-gap reset above
   (specificity 0,2,1) otherwise zeroes the gap between stacked <p>. */
.tt-hero-page .entry-content .tt-sec > p + p{ margin-top:1rem; }

/* hero */
.tt-hero{ background:var(--tt-navy); color:#fff; padding-block:56px 60px; position:relative; isolation:isolate; }
.tt-hero > * + *{ margin-top:0; }
.tt-hero h1{ color:#fff; max-width:900px; }
.tt-hero .tt-lead{ color:#C6D2E4; font-size:1.15rem; max-width:780px; margin-top:18px; line-height:1.8; }
.tt-hero .tt-lead strong{ color:#fff; }
.tt-hero .wp-block-buttons{ margin-top:28px; }

/* sections */
.tt-sec{ padding-block:46px; }
.tt-sec--band{ background:var(--tt-band); }
.tt-sec > h2{ margin-bottom:.15em; }
.tt-sec > .tt-lead{ font-size:1.1rem; color:var(--tt-slate); }
.tt-sec h3{ margin-top:0; }
.tt-sec > h3{ margin-top:1.4rem; }

/* CTA band — flat solid red, sharp corners, matches the design/ prototype's
   CTA band exactly (no gradient, no angled edge). */
.tt-cta{ background:var(--tt-red); color:#fff; text-align:center; padding-block:56px; }
.tt-cta h2{ color:#fff; }
.tt-cta .tt-lead{ color:#C6D2E4; max-width:640px; margin:12px auto 0; }
.tt-cta .wp-block-buttons{ justify-content:center; margin-top:24px; }
/* on the red band the primary button inverts (white fill / red text) instead
   of red-on-red; the outline button goes white-on-transparent — matches the
   prototype's CTA band exactly. */
.tt-cta .wp-block-button:first-child .wp-block-button__link{
  background:#fff !important; border-color:#fff; color:var(--tt-red) !important;
}
.tt-cta .wp-block-button:first-child .wp-block-button__link:hover{
  background:var(--tt-navy) !important; border-color:var(--tt-navy); color:#fff !important;
}
.tt-cta .wp-block-button.is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.75) !important;
}
.tt-cta .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:#fff; color:#fff !important; background:rgba(255,255,255,.12) !important;
}

/* ============================================================ content elements */
.entry-content table{ border-collapse:collapse; width:100%; margin:1.4em 0; font-size:.96rem; }
.entry-content th,.entry-content td{ border:1px solid var(--tt-line); padding:.6em .85em; text-align:left; vertical-align:top; }
.entry-content td{ font-variant-numeric:tabular-nums; }
.entry-content thead th,.entry-content table tr:first-child th{
  background:var(--tt-navy); color:#fff; font-family:var(--tt-display); font-weight:600;
}
.entry-content tbody tr:nth-child(even){ background:var(--tt-soft); }
.tt-sec--band .entry-content tbody tr:nth-child(even),
.tt-sec--band tbody tr:nth-child(even){ background:#fff; }
.wp-block-table{ overflow-x:auto; }

.entry-content blockquote,.wp-block-quote{
  border-left:4px solid var(--tt-red); background:#fff; margin:1.4em 0; padding:1em 1.2em; color:var(--tt-slate); font-style:normal;
}
.tt-sec:not(.tt-sec--band) .wp-block-quote{ background:var(--tt-soft); }
.wp-block-quote p:last-child{ margin-bottom:0; }

.entry-content ul:not(.wp-block-buttons){ padding-left:1.2em; }
.entry-content ul li{ margin-bottom:.4em; }
.entry-content ol{ padding-left:1.3em; }
.entry-content ol li{ margin-bottom:.5em; }

hr,.wp-block-separator{ border:0; border-top:1px solid var(--tt-line); margin:2.2em 0; }

/* FAQ — <details>/<summary>, collapsed by default. Content is unchanged (still
   full text in the DOM + FAQPage schema), just hidden until clicked, so a long
   Q&A list reads as a short list of questions instead of a wall of text. */
.tt-sec--faq h2{ margin-bottom:.5em; }
.tt-sec--faq > .tt-faq-item{ border-top:1px solid var(--tt-line); margin-top:0; }
.tt-sec--faq > .tt-faq-item:last-child{ border-bottom:1px solid var(--tt-line); }
.tt-faq-item > summary{
  list-style:none; cursor:pointer; padding:16px 0; margin:0;
  font-family:var(--tt-body); font-weight:500; font-size:1.08rem; color:var(--tt-navy);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.tt-faq-item > summary::-webkit-details-marker{ display:none; }
.tt-faq-item > summary::after{
  content:"+"; flex:none; width:1.2rem; text-align:center; font-size:1.3rem;
  font-weight:300; line-height:1; color:var(--tt-red);
  transition:transform .28s var(--tt-ease);
}
.tt-faq-item[open] > summary::after{ transform:rotate(45deg); }
.tt-faq-item > p{ margin:0 0 18px; color:var(--tt-slate); font-size:1rem; }

/* breadcrumbs */
.rank-math-breadcrumb{ font-size:.86rem; color:var(--tt-muted); }
.rank-math-breadcrumb a{ color:var(--tt-muted); text-decoration:underline; text-underline-offset:2px; }
.rank-math-breadcrumb a:hover{ color:var(--tt-red); }

/* ============================================================ footer (v0.8.0 — white) */
.site-footer{ background:#fff; }
.site-info{ display:none; }
.tt-footer{ background:#fff; color:var(--tt-slate); padding:52px 0 26px; border-top:1px solid var(--tt-line); }
.tt-footer__cols{
  max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,3vw,32px);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr .8fr; gap:30px; font-size:.92rem; line-height:1.8;
}
.tt-footer__h3-2{ margin-top:22px !important; }
.tt-footer__logo-img{ display:block; height:56px; width:auto; margin-bottom:14px; }
.tt-footer h3,.tt-footer h2{ color:var(--tt-navy); font:600 .82rem/1 var(--tt-display); margin:4px 0 14px; }
.tt-footer a{ color:var(--tt-slate); display:block; margin-bottom:.35rem; text-decoration:none; }
.tt-footer a:hover{ color:var(--tt-red); }
.tt-footer p{ margin:0; }
.tt-footer__tel{ font-family:var(--tt-mono); font-size:.92rem; color:var(--tt-navy); }
.tt-footer__bar{
  max-width:1200px; margin:30px auto 0; padding:16px clamp(16px,3vw,32px) 0;
  border-top:1px solid var(--tt-line); font:500 .8rem/1.5 var(--tt-mono); color:var(--tt-muted);
}
@media (max-width:1000px){ .tt-footer__cols{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:760px){ .tt-footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tt-footer__cols{ grid-template-columns:1fr; gap:22px; } }

/* ============================================================ components
   emitted by md2blocks.py inside wp:html blocks — the design/ canvas vocabulary:
   eyebrow kickers, icon cards, visual steps, numbered circles, why-columns,
   2-col splits, chips, brand callout, figure / photo-slot, process diagram. */

.tt-eyebrow{
  font-family:var(--tt-display); font-weight:600; font-size:.9rem; color:var(--tt-red);
  margin:0 0 .55rem; display:flex; align-items:center; gap:10px;
}
.tt-sec > .tt-eyebrow:first-child{ margin-top:0; }

/* icon / photo cards — flat gridline cards, matching the design/ prototype's
   .models-grid exactly: the grid's own background shows through a 2px gap as
   hairline dividers between cards (verified against the prototype's computed
   styles: grid gap 2px, bg var(--tt-line) (rgb(212,220,233)), cards themselves
   flat white with 0 radius / 0 shadow / 0 border). This replaces an earlier
   rounded-floating-shadow pass modelled on a different reference site;
   the prototype is the authority now. */
.tt-cards{
  margin-top:1.6rem; display:grid; gap:2px; background:var(--tt-line);
  border:2px solid var(--tt-line);
  grid-template-columns:repeat(var(--tt-cols,2),minmax(0,1fr));
}
.tt-card{
  background:#fff; padding:26px 24px 24px;
  display:flex; flex-direction:column; gap:12px;
  transition:background-color .22s var(--tt-ease), opacity .65s var(--tt-ease);
  position:relative;
}
.tt-card:hover{ background:var(--tt-soft); }
.tt-sec--band .tt-cards{ background:var(--tt-line); }
.tt-sec--band .tt-card{ background:#fff; }
.tt-card__ic{ width:30px; height:30px; color:var(--tt-red); flex:none; }
.tt-card__ic svg{ width:100%; height:100%; display:block; }
.tt-card h3{ margin:0; font-size:1.12rem; font-weight:700; }
.tt-card p{ margin:0; font-size:.94rem; color:var(--tt-slate); line-height:1.7; flex:1; }
.tt-card__link{ font-family:var(--tt-display); font-weight:700; font-size:.9rem; color:var(--tt-red); }
/* in a 2-col grid with an odd card count, the last card fills the row (no empty cell) */
.tt-cards[style*="--tt-cols:2"] > .tt-card:last-child:nth-child(odd){ grid-column:1 / -1; }

/* ribbon badge — {badge=TEXT} on a card title, e.g. "ENTRY LEVEL" / "MOST POPULAR" */
.tt-card__badge{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--tt-navy); color:#fff; font-family:var(--tt-display);
  font-size:.62rem; font-weight:700;
  padding:5px 12px;
}
.tt-card--photo .tt-card__badge{ top:12px; left:0; }

/* photo cards — a real product photo bled to the card's own edge, above the
   icon/title/body. -margin cancels the card's own padding on the three bled
   sides; object-fit:contain keeps the whole product visible on a soft band. */
.tt-card--photo{ padding-top:0; }
.tt-card__img{
  margin:0 -24px 4px; aspect-ratio:4/3; overflow:hidden;
  background:var(--tt-band); display:flex; align-items:center; justify-content:center;
}
.tt-card__img img{ width:100%; height:100%; object-fit:contain; padding:20px; display:block; }
.tt-card--photo h3{ margin-top:22px; }

/* pain cards — red left rule, 2-up, same flat gridline treatment as .tt-card */
.tt-pain{ margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--tt-line); border:2px solid var(--tt-line); }
.tt-pain__item{ background:#fff; padding:22px 24px; border-left:3px solid var(--tt-red);
  transition:background-color .22s var(--tt-ease); position:relative; }
.tt-pain__item:hover{ background:var(--tt-soft); }
.tt-sec--band .tt-pain__item{ background:#fff; }
.tt-pain__item h3{ margin:0 0 .3rem; font-size:1rem; }
.tt-pain__item p{ margin:0; font-size:.92rem; color:var(--tt-slate); line-height:1.6; }

/* visual steps — blue number squares */
.tt-steps{ margin-top:1.5rem; display:flex; flex-direction:column; gap:18px; counter-reset:tt-step; }
.tt-step{ display:flex; gap:16px; }
.tt-step__n{ counter-increment:tt-step; flex:none; width:34px; height:34px; border-radius:3px;
  background:var(--tt-blue); color:#fff; font-family:var(--tt-body); font-weight:500;
  display:flex; align-items:center; justify-content:center; }
.tt-step__n::before{ content:counter(tt-step); }
.tt-step h3{ margin:0 0 .15rem; font-size:1.03rem; }
.tt-step p{ margin:0; font-size:.95rem; color:var(--tt-slate); line-height:1.65; }

/* numbered circles — red outline */
.tt-numlist{ margin-top:1.4rem; display:flex; flex-direction:column; gap:14px; counter-reset:tt-num; }
.tt-numlist__item{ display:flex; gap:14px; align-items:flex-start; }
.tt-numlist__n{ counter-increment:tt-num; flex:none; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--tt-red); color:var(--tt-red); font-family:var(--tt-body);
  font-size:.85rem; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tt-numlist__n::before{ content:counter(tt-num); }
.tt-numlist__item p{ margin:0; font-size:.96rem; color:var(--tt-slate); line-height:1.6; }

/* why — 3 columns, red top rule */
.tt-why{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
.tt-why__col{ border-top:3px solid var(--tt-red); padding-top:16px; }
.tt-why__col h3{ margin:0 0 .4rem; font-size:1.05rem; }
.tt-why__col p{ margin:0; font-size:.94rem; color:var(--tt-slate); line-height:1.7; }

/* 2-column split */
.tt-split{ margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.tt-split__col h3{ margin:0 0 .7rem; }
.tt-split__col ul{ margin:0; padding-left:1.15em; }
.tt-split__col li{ font-size:.95rem; color:var(--tt-slate); margin-bottom:.45em; }
.tt-split__col p{ font-size:.95rem; color:var(--tt-slate); line-height:1.85; }

/* chips */
.tt-chips{ margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:10px; }
.tt-chip{ font-family:var(--tt-body); font-size:.85rem; background:var(--tt-band);
  color:var(--tt-blue); padding:7px 14px; border-radius:2px; }

/* brand callout */
.tt-brandbox{ margin-top:1.4rem; background:var(--tt-band); border-left:4px solid var(--tt-navy);
  padding:24px 26px; }
.tt-brandbox p{ margin:0; color:var(--tt-slate); font-size:.98rem; }
.tt-brandbox p + p{ margin-top:.8rem; color:var(--tt-navy); font-family:var(--tt-body); font-weight:500; }

/* brand-partner logo strip (::: logos) */
.tt-logos{ margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:14px; }
.tt-logos__item{ background:#fff; border:1px solid var(--tt-line); padding:16px 26px;
  display:flex; align-items:center; justify-content:center; flex:1 1 200px; max-width:260px;
  transition:border-color .22s var(--tt-ease), opacity .65s var(--tt-ease); }
.tt-logos__item:hover{ border-color:var(--tt-muted); }
.tt-logos__item img{ max-height:46px; max-width:100%; width:auto; height:auto;
  display:block; filter:grayscale(100%); opacity:.75; transition:filter .3s var(--tt-ease),opacity .3s var(--tt-ease); }
.tt-logos__item img:hover{ filter:none; opacity:1; }
.tt-sec--band .tt-logos__item{ background:#fff; }

/* figure / photo slot / diagram */
.tt-figure{ margin:1.6rem 0 0; }
.tt-figure__slot{ border:1.5px dashed var(--tt-muted); background:var(--tt-soft);
  height:300px; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  background-image:repeating-linear-gradient(-45deg, transparent 0 11px, rgba(122,143,166,.06) 11px 12px); }
.tt-figure__slot::before{ content:""; width:34px; height:34px; flex:none; opacity:.5;
  background:var(--tt-muted);
  -webkit-mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4"><rect x="3" y="5" width="18" height="14" rx="1.5"/><circle cx="8.5" cy="10" r="1.7"/><path d="M4 17l5-5 4 4 3-3 4 4"/></svg>');
          mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4"><rect x="3" y="5" width="18" height="14" rx="1.5"/><circle cx="8.5" cy="10" r="1.7"/><path d="M4 17l5-5 4 4 3-3 4 4"/></svg>'); }
.tt-figure__slot span{ font-family:var(--tt-body); font-size:.98rem; color:var(--tt-slate); max-width:40ch; line-height:1.6; }
.tt-figure figcaption{ font-size:.82rem; color:var(--tt-muted); margin-top:.6rem; font-family:var(--tt-body); }
.tt-diagram{ border:1px solid var(--tt-line); background:#fff; padding:28px 26px 18px; }
.tt-diagram svg{ display:block; width:100%; height:auto; }
.tt-sec--band .tt-diagram{ background:#fff; }

/* MD-pending placeholder */
.tt-pending{ margin-top:1.4rem; border:1.5px dashed var(--tt-red); background:#FFF6F7;
  padding:20px 24px; color:var(--tt-red-dark); font-size:.95rem; line-height:1.7; }
.tt-pending b{ font-family:var(--tt-body); display:block; margin-bottom:.35rem; color:var(--tt-red); }
.tt-pending ul{ margin:.35rem 0 0; padding-left:1.15rem; }
.tt-pending li{ margin:.15rem 0; }

/* split-hero: hero group carrying a figure on the right */
.tt-hero.tt-hero--split{ }
.tt-hero--split > .tt-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.tt-hero--split .tt-hero__text > *{ margin:0; }
.tt-hero--split .tt-hero__text > * + *{ margin-top:18px; }
.tt-hero--split .tt-hero__text .tt-eyebrow{ margin-bottom:0; }
.tt-hero--split .tt-figure{ margin-top:0; }
.tt-hero--split .tt-figure__slot{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); }
.tt-hero--split .tt-figure__slot span{ color:#C6D2E4; }
.tt-hero--split .tt-figure figcaption{ color:#8CA0BC; }
/* a real product photo (not the dashed placeholder) — floats on a soft radial
   glow so it reads on the navy hero instead of looking like a cut-out sticker */
.tt-hero__photo{ position:relative; display:flex; align-items:center; justify-content:center; }
.tt-hero__photo::before{
  content:""; position:absolute; inset:-6%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 72%);
}
.tt-hero__photo img{ position:relative; z-index:1; width:100%; height:auto; max-height:420px;
  object-fit:contain; display:block; filter:drop-shadow(0 24px 40px rgba(0,0,0,.35)); }

/* ============================================================ breadcrumbs
   Rendered on generate_after_header (functions.php). Navy bar that merges the
   header + hero into one block; the JSON-LD BreadcrumbList is Rank Math's. */
.tt-breadcrumbs{ background:var(--tt-navy); }
.tt-breadcrumbs .rank-math-breadcrumb{
  max-width:var(--tt-inner); margin-inline:auto;
  padding:9px max(22px, calc(50vw - (var(--tt-inner) / 2)));
}
.tt-breadcrumbs .rank-math-breadcrumb p{
  margin:0; font-size:.82rem; line-height:1.5; color:#8FA4BE;
  font-family:var(--tt-body); font-weight:400;
}
.tt-breadcrumbs .rank-math-breadcrumb a{ color:#C6D2E4; text-decoration:underline; text-underline-offset:2px; }
.tt-breadcrumbs .rank-math-breadcrumb a:hover,
.tt-breadcrumbs .rank-math-breadcrumb a:focus{ color:#fff; }
.tt-breadcrumbs .rank-math-breadcrumb .separator{ margin:0 .5em; color:#8FA5C2; }
.tt-breadcrumbs .rank-math-breadcrumb .last{ color:#8FA4BE; }
@media (max-width:600px){
  .tt-breadcrumbs .rank-math-breadcrumb{ padding-inline:22px; }
  .tt-breadcrumbs .rank-math-breadcrumb p{ font-size:.78rem; }
}

/* ============================================================ scroll-reveal
   `.tt-reveal` is added to `.tt-sec` / `.tt-cta` by js/animations.js, which also
   toggles `.is-visible` via IntersectionObserver + a scroll/resize sweep (see
   that file for why — a plain IO can skip elements on a fast/instant scroll).
   CSS-only fallback: if JS never runs (blocked/fails), sections stay fully
   visible — this can only ADD motion, never hide content that would show
   otherwise. prefers-reduced-motion turns all of this off, both here and in JS. */
.tt-reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--tt-ease), transform .9s var(--tt-ease);
}
.tt-reveal.is-visible{ opacity:1; transform:none; }

/* staggered children — once a section reveals, its cards/steps/list items cascade
   in one after another instead of popping in together. `:where()` around the
   ancestor condition keeps this rule's specificity at just the child's own class
   (0,1,0) — always lower than that child's own `:hover` rule (0,2,0) — so hover
   never has to fight the reveal state, no !important needed on this side. */
.tt-why__col,.tt-step,.tt-numlist__item,.tt-split__col{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--tt-ease), transform .75s var(--tt-ease);
}
.tt-card,.tt-pain__item,.tt-logos__item{ opacity:0; transform:translateY(26px); }
:where(.tt-sec.is-visible,.tt-cta.is-visible)
  :is(.tt-card,.tt-pain__item,.tt-logos__item,.tt-why__col,.tt-step,.tt-numlist__item,.tt-split__col){
  opacity:1; transform:none;
}
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(1){ transition-delay:0ms; }
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(2){ transition-delay:90ms; }
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(3){ transition-delay:180ms; }
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(4){ transition-delay:270ms; }
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(5){ transition-delay:360ms; }
:where(.tt-cards,.tt-why,.tt-steps,.tt-numlist,.tt-pain,.tt-logos,.tt-split) > *:nth-child(n+6){ transition-delay:450ms; }

/* hero entrance — plays once on page load (not scroll-triggered, it's already
   above the fold), kicker/heading/lead/buttons stepping in one after another. */
.tt-hero > .tt-eyebrow,.tt-hero > h1,.tt-hero .tt-lead,.tt-hero > .wp-block-buttons,
.tt-hero__grid > *{
  animation:tt-hero-in .8s var(--tt-ease) both;
}
.tt-hero > .tt-eyebrow{ animation-delay:.05s; }
.tt-hero > h1{ animation-delay:.15s; }
.tt-hero .tt-lead{ animation-delay:.28s; }
.tt-hero > .wp-block-buttons{ animation-delay:.4s; }
@keyframes tt-hero-in{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .tt-reveal,
  .tt-card,.tt-pain__item,.tt-logos__item,.tt-why__col,.tt-step,.tt-numlist__item,.tt-split__col{
    opacity:1; transform:none; transition:none;
  }
  .main-navigation.toggled .main-nav{ animation:none; }
  .tt-hero > .tt-eyebrow,.tt-hero > h1,.tt-hero .tt-lead,.tt-hero > .wp-block-buttons,
  .tt-hero__grid > *{ animation:none; opacity:1; transform:none; }
  .tt-faq-item > summary::after{ transition:none; }
}

/* ============================================================ v0.8.0 components
   (md2blocks: :bg: photo hero, ::: plate, ::: tiles, ::: process, :photo: / :mark: sections) */
.tt-eyebrow::before{ content:""; width:28px; height:3px; background:var(--tt-red); flex:none; }
.tt-sec{ padding-block:clamp(52px,6vw,84px); }

/* photo hero — real <img> under a left-weighted navy gradient */
.tt-hero--photo{ padding-block:clamp(64px,9vw,120px) clamp(56px,7vw,96px); background:var(--tt-navy); overflow:hidden; }
.tt-hero--photo > .tt-hero__bg,
.tt-hero-page .entry-content .tt-hero--photo > .tt-hero__bg{
  position:absolute !important; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; margin:0 !important;
}
.tt-hero--photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(7,27,58,.96) 0%,rgba(7,27,58,.86) 42%,rgba(7,27,58,.3) 75%,rgba(7,27,58,.12) 100%);
}
.tt-hero--photo > h1{ max-width:900px; }
.tt-hero--photo .tt-lead,.tt-hero--photo > .tt-eyebrow{ max-width:660px; }
.tt-hero .tt-eyebrow{ color:#fff; }
.tt-hero--photo > .wp-block-buttons{ margin-top:28px !important; }
@media (max-width:760px){
  .tt-hero--photo::before{ background:linear-gradient(180deg,rgba(7,27,58,.62) 0%,rgba(7,27,58,.82) 55%,rgba(7,27,58,.92) 100%); }
}

/* spec "nameplate" strip */
.tt-plate{ background:var(--tt-navy2); color:#fff; border-top:1px solid rgba(255,255,255,.14);
  margin-inline:calc(50% - 50vw); padding-inline:max(24px, calc(50vw - (var(--tt-inner) / 2))); }
.tt-plate__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.tt-plate__cell{ padding:22px 20px 20px; border-left:1px solid rgba(255,255,255,.14); }
.tt-plate__cell:first-child{ border-left:0; padding-left:0; }
.tt-plate__v{ font:600 clamp(1.25rem,1rem + 1vw,1.75rem)/1.1 var(--tt-mono); font-variant-numeric:tabular-nums; }
.tt-plate__v small{ font-size:.55em; font-family:var(--tt-body); color:rgba(255,255,255,.6); margin-left:5px; }
.tt-plate__k{ font-size:.82rem; color:rgba(255,255,255,.66); margin-top:8px; line-height:1.55; }
@media (max-width:900px){
  .tt-plate__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-plate__cell:nth-child(3){ border-left:0; padding-left:0; }
  .tt-plate__cell:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
}

/* product-line tiles */
.tt-tiles{ margin-top:2rem !important; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2px;
  background:var(--tt-line); border:2px solid var(--tt-line); }
.tt-tile{ grid-column:span 4; background:#fff; display:flex; flex-direction:column; text-decoration:none !important; color:inherit; position:relative;
  transition:opacity .65s var(--tt-ease), transform .65s var(--tt-ease); }
.tt-tile--wide{ grid-column:span 8; }
.tt-tile__img{ aspect-ratio:16/10; background:var(--tt-band); position:relative; overflow:hidden; }
.tt-tile--wide .tt-tile__img{ aspect-ratio:auto; flex:1; min-height:260px; }
.tt-tile__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--tt-ease); }
.tt-tile:hover .tt-tile__img img{ transform:scale(1.03); }
.tt-tile__img--icon{ display:flex; align-items:center; justify-content:center; background:var(--tt-navy); }
.tt-tile__ic{ width:64px; height:64px; color:#fff; opacity:.9; }
.tt-tile__ic svg{ width:100%; height:100%; display:block; }
.tt-tile__tag{ position:absolute; left:0; top:18px; z-index:2; background:var(--tt-red); color:#fff;
  font:600 .75rem/1 var(--tt-display); padding:8px 12px; }
.tt-tile__body{ padding:22px 24px 24px; }
.tt-tile h3{ margin:0 0 6px; font-size:1.3rem; color:var(--tt-navy); transition:color .2s var(--tt-ease); }
.tt-tile:hover h3{ color:var(--tt-red); }
.tt-tile p{ margin:0; color:var(--tt-slate); font-size:.95rem; line-height:1.7; }
.tt-tile__spec{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font:500 .82rem var(--tt-mono); color:var(--tt-ink); }
.tt-tile__spec span{ border-top:2px solid var(--tt-red); padding-top:6px; }
.tt-tile__more{ display:inline-block; margin-top:14px; font:700 .88rem/1 var(--tt-display); color:var(--tt-red); }
@media (max-width:900px){ .tt-tile,.tt-tile--wide{ grid-column:span 12; } .tt-tile--wide .tt-tile__img{ aspect-ratio:16/9; flex:none; min-height:0; } }

/* 4-step process row */
.tt-proc{ margin-top:2rem !important; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--tt-line); }
.tt-proc__s{ padding:26px 24px 6px 0; border-right:1px solid var(--tt-line); margin-right:24px; }
.tt-proc__s:last-child{ border-right:0; margin-right:0; }
.tt-proc__n{ font:600 .82rem var(--tt-mono); color:var(--tt-red); }
.tt-proc h3{ margin:10px 0 6px; font-size:1.2rem; }
.tt-proc p{ margin:0; color:var(--tt-slate); font-size:.95rem; line-height:1.7; }
@media (max-width:900px){ .tt-proc{ grid-template-columns:1fr 1fr; } .tt-proc__s:nth-child(2){ border-right:0; margin-right:0; } }
@media (max-width:560px){ .tt-proc{ grid-template-columns:1fr; } .tt-proc__s{ border-right:0; margin-right:0; border-bottom:1px solid var(--tt-line); padding-bottom:18px; } }

/* media sections: photo (or big mark) left, eyebrow/h2/body right */
.tt-sec.tt-media{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; }
.tt-sec.tt-media--mark{ grid-template-columns:auto minmax(0,1fr); }
.tt-sec.tt-media > *{ margin:0 !important; }
.tt-media__img{ margin:0; aspect-ratio:4/3; overflow:hidden; }
.tt-media__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-media__mark{ font:700 clamp(7rem,14vw,13rem)/.85 var(--tt-display); color:var(--tt-logo-blue);
  border-right:4px solid var(--tt-red); padding-right:clamp(24px,4vw,56px); }
.tt-media__body > * + *{ margin-top:1rem !important; }
.tt-media__body ul{ list-style:none; padding:0 !important; display:grid; gap:12px; }
.tt-media__body ul li{ position:relative; padding-left:30px; margin:0; }
.tt-media__body ul li::before{ content:""; position:absolute; left:0; top:.8em; width:16px; height:3px; background:var(--tt-red); }
.tt-media__body a{ font-family:var(--tt-display); font-weight:700; color:var(--tt-red); text-decoration:none !important; }
@media (max-width:860px){
  .tt-sec.tt-media,.tt-sec.tt-media--mark{ grid-template-columns:1fr; }
  .tt-media__mark{ border-right:0; border-bottom:4px solid var(--tt-red); padding:0 0 12px; }
}

/* CTA band — left-aligned text, button right (approved mockup) */
.tt-cta{ text-align:left; display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:center; padding-block:44px; }
.tt-cta > h2{ grid-column:1; }
.tt-cta > .tt-lead{ grid-column:1; margin:6px 0 0 !important; max-width:none; color:rgba(255,255,255,.88); }
.tt-cta > .wp-block-buttons{ grid-column:2; grid-row:1 / span 2; margin:0 !important; justify-content:flex-end; }
@media (max-width:700px){ .tt-cta{ grid-template-columns:1fr; } .tt-cta > .wp-block-buttons{ grid-column:1; grid-row:auto; margin-top:18px !important; justify-content:flex-start; } }

/* breadcrumbs sit between the double rule and the hero */
.tt-breadcrumbs{ background:var(--tt-navy2); }

/* reveal: include the new components in the stagger */
.tt-tile,.tt-proc__s{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--tt-ease), transform .75s var(--tt-ease); }
:where(.tt-sec.is-visible) :is(.tt-tile,.tt-proc__s){ opacity:1; transform:none; }
:where(.tt-tiles,.tt-proc) > *:nth-child(2){ transition-delay:90ms; }
:where(.tt-tiles,.tt-proc) > *:nth-child(3){ transition-delay:180ms; }
:where(.tt-tiles,.tt-proc) > *:nth-child(4){ transition-delay:270ms; }
:where(.tt-tiles,.tt-proc) > *:nth-child(5){ transition-delay:360ms; }
@media (prefers-reduced-motion:reduce){ .tt-tile,.tt-proc__s{ opacity:1; transform:none; transition:none; } }

/* ============================================================ responsive */
@media (max-width:900px){
  .tt-why{ grid-template-columns:1fr; gap:22px; }
  .tt-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tt-split,.tt-pain{ grid-template-columns:1fr; }
  .tt-hero--split > .tt-hero__grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:600px){
  .tt-hero{ padding-block:44px 48px; }
  .tt-sec{ padding-block:38px; }
  .tt-hero > .tt-inner,.tt-sec > .tt-inner,.tt-cta > .tt-inner{ padding-inline:22px; }
  .tt-cards{ grid-template-columns:1fr !important; }
}

/* --- CRO: tap-to-call (footer links + floating button on mobile; no number in header by owner request) --- */
.tt-footer__tel a{ display:inline; margin:0; color:inherit; }
.tt-callfab{ display:none; }
@media (max-width:900px){
  .tt-callfab{ display:flex; position:fixed; right:16px; bottom:16px; z-index:50; min-width:56px; height:56px; padding:0 20px;
    align-items:center; justify-content:center; background:var(--tt-red); color:#fff !important; font:700 .95rem/1 var(--tt-display); text-decoration:none !important; border-radius:28px; box-shadow:0 4px 14px rgba(7,27,58,.35); }
}
.tt-form-note{ margin:0 0 4px; font:500 .9rem/1.5 var(--tt-body); color:var(--tt-slate); }

/* --- polish: comfortable reading measure for section prose (was ~130 chars/line on desktop) --- */
.tt-sec > p:not(.tt-eyebrow):not(.tt-lead), .tt-sec > ul, .tt-sec > ol{ max-width:68ch; }
.tt-faq-item > p, .tt-numlist__item p{ max-width:68ch; }
/* Thai glyphs are narrower than the '0' the ch unit measures, so tighten the measure to land near ~75 characters */
:lang(th) .tt-sec > p:not(.tt-eyebrow):not(.tt-lead), :lang(th) .tt-sec > ul, :lang(th) .tt-sec > ol,
:lang(th) .tt-faq-item > p, :lang(th) .tt-numlist__item p{ max-width:54ch; }
/* polish: keep plate numbers on one line on phones; smaller call button + room for it under the footer */
@media (max-width:520px){ .tt-plate__v{ font-size:1rem; white-space:nowrap; } }
@media (max-width:900px){
  .tt-callfab{ min-width:48px; height:48px; padding:0 16px; border-radius:24px; font-size:.85rem; }
  body{ padding-bottom:64px; }
}

/* ============================================================ product carousel (Wix-style home products, v3 — restrained: brand red + navy only) */
#products.tt-sec{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#EEF1F6 0%,#F6F8FB 100%);
}
#products.tt-sec::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55; pointer-events:none;
  background-image:linear-gradient(rgba(7,27,58,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(7,27,58,.04) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%);
}
#products.tt-sec > h2{ position:relative; display:block; width:fit-content; padding-bottom:.55rem; margin-bottom:1.1rem; }
#products.tt-sec > h2::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:4px; background:var(--tt-red); }

.tt-car{ position:relative; margin-top:1.2rem; }
.tt-car__label{
  display:inline-block; margin:0 0 1.2rem; padding:.55rem 1.7rem .55rem 1.05rem; background:var(--tt-navy); color:#fff;
  font:700 clamp(.9rem,.82rem + .4vw,1.1rem)/1.2 var(--tt-display);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
}
.tt-car__label[hidden]{ display:none; }
.tt-car__track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px;
  padding:8px 2px 22px; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline-offset:4px;
}
.tt-car__track::-webkit-scrollbar{ display:none; }
.tt-car__card{
  box-sizing:border-box; flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:none; background:#fff; display:flex; flex-direction:column;
  align-items:stretch; text-align:left; padding:0 0 26px; container-type:inline-size; text-decoration:none !important; color:var(--tt-navy); position:relative;
  border-top:4px solid var(--tt-red); box-shadow:0 3px 16px rgba(7,27,58,.09); transition:transform .3s var(--tt-ease), box-shadow .3s var(--tt-ease);
}
.tt-car__card--first{ scroll-snap-align:start; }
.tt-car__card:hover,.tt-car__card:focus-visible{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(7,27,58,.18); }
.tt-car__img{
  position:relative; display:block; width:100%; aspect-ratio:4/3; margin-bottom:20px; overflow:hidden;
  background:radial-gradient(circle at 50% 44%, #fff 0 38%, #EDF1F6 100%);
}
.tt-car__img img{ position:absolute; inset:5%; width:90%; height:90%; object-fit:contain; display:block; mix-blend-mode:multiply; transition:transform .45s var(--tt-ease); }
.tt-car__card:hover .tt-car__img img{ transform:scale(1.05); }
/* card text (v0.9, matches the design reference's equipment card: title / description / red "learn more →").
   Title = ONE line on every card so all titles sit on the same row; its size scales with the card width (cqi). */
.tt-car__name{ display:block; margin:0 24px 10px; font:700 clamp(.85rem,5.3cqi,1.3rem)/1.3 var(--tt-display); color:var(--tt-navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:lang(en) .tt-car__name{ text-transform:uppercase; letter-spacing:.01em; }
.tt-car__desc{ display:block; margin:0 24px 20px; font:400 .95rem/1.6 var(--tt-body); color:var(--tt-slate); }
.tt-car__btn{ margin:auto 24px 0; display:inline-flex; align-items:center; gap:6px; align-self:flex-start; color:var(--tt-red); font:700 .85rem/1 var(--tt-display);
  transition:gap .2s var(--tt-ease); }
:lang(en) .tt-car__btn{ text-transform:uppercase; letter-spacing:.12em; }
.tt-car__btn::after{ content:"→"; font-size:1.15em; }
.tt-car__card:hover .tt-car__btn{ gap:11px; }
.tt-car__arrow{
  position:absolute; top:46%; transform:translateY(-50%); z-index:2; width:58px; height:58px; border-radius:50%;
  border:0; background:var(--tt-navy); color:#fff; font-size:2.3rem; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(7,27,58,.28); display:flex; align-items:center; justify-content:center; padding:0 0 4px;
  transition:background-color .2s var(--tt-ease), transform .2s var(--tt-ease);
}
.tt-car__arrow[hidden]{ display:none; }
.tt-car__arrow:hover:not(:disabled){ background:var(--tt-red); transform:translateY(-50%) scale(1.06); }
.tt-car__arrow:disabled{ opacity:.3; cursor:default; }
.tt-car__arrow--prev{ left:-82px; } .tt-car__arrow--next{ right:-82px; }
@media (max-width:1320px){ .tt-car__arrow--prev{ left:-10px; } .tt-car__arrow--next{ right:-10px; } }
.tt-car__foot{ display:flex; align-items:center; justify-content:center; margin-top:4px; }
.tt-car__dots{ display:flex; gap:10px; align-items:center; }
.tt-car__dot{ width:12px; height:12px; border-radius:6px; border:0; padding:0; background:rgba(7,27,58,.2); cursor:pointer; transition:width .3s var(--tt-ease), background-color .3s var(--tt-ease); }
.tt-car__dot.is-active{ width:34px; background:var(--tt-navy); }
@media (max-width:900px){ .tt-car__card{ flex-basis:calc((100% - 24px) / 2); scroll-snap-align:start; } }
@media (max-width:560px){ .tt-car__card{ flex-basis:78%; } .tt-car__arrow{ width:46px; height:46px; font-size:1.8rem; } .tt-car__arrow--prev{ left:-6px; } .tt-car__arrow--next{ right:-6px; } }
@media (prefers-reduced-motion:reduce){ .tt-car__card,.tt-car__img img,.tt-car__dot{ transition:none; } }

/* ============================================================ brand hero (Wix-style: big two-colour wordmark + barred tagline + arrow button) */
.tt-hero--brand > h1.tt-hero__brand{
  font-family:var(--tt-body); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.7rem,1.2rem + 6.4vw,6.1rem); line-height:1.02; letter-spacing:-.01em; max-width:none; margin:0 0 .35em;
  text-wrap:wrap;
}
.tt-hero__brand-red{ color:var(--tt-red); display:block; }
.tt-hero--brand .tt-lead--bar{
  border-left:4px solid var(--tt-red); padding-left:1.1rem; max-width:760px; font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.5; color:#fff;
}
.tt-hero--brand .wp-block-button__link::after{ content:" →"; }


/* home brand hero: one even navy wash over the whole photo (user 2026-10-03) */
.tt-hero--brand::before{ background:rgba(7,27,58,.85) !important; }

/* ============================================================ brand wall (home "Brands" — full-colour logos, each linking to its product page) */
#brands.tt-sec > h2{ text-align:center; margin-bottom:.4rem; }
#brands.tt-sec > h2::after{ content:""; display:block; width:64px; height:4px; background:var(--tt-red); margin:.7rem auto 0; }
.tt-brandwall{ display:flex; flex-wrap:wrap; justify-content:center; gap:44px 36px; margin:2.4rem auto 1.6rem; max-width:1100px; }
.tt-brandwall__item{ display:flex; align-items:center; justify-content:center; flex:0 0 calc((100% - 5 * 36px) / 6); height:84px; padding:6px 4px; transition:transform .3s var(--tt-ease), filter .3s var(--tt-ease); text-decoration:none !important; }
a.tt-brandwall__item:hover,a.tt-brandwall__item:focus-visible{ transform:translateY(-4px) scale(1.05); }
.tt-brandwall__item img{ max-width:100%; max-height:68px; width:auto; height:auto; object-fit:contain; display:block; }
#brands.tt-sec > p{ text-align:center; color:var(--tt-muted); font-size:.95rem; margin:0 auto; }
@media (max-width:1000px){ .tt-brandwall{ gap:34px 26px; } .tt-brandwall__item{ flex-basis:calc((100% - 3 * 26px) / 4); } }
@media (max-width:700px){ .tt-brandwall{ gap:26px 18px; } .tt-brandwall__item{ flex-basis:calc((100% - 2 * 18px) / 3); height:70px; } }
@media (max-width:480px){ .tt-brandwall__item{ flex-basis:calc((100% - 18px) / 2); } }

/* ============================================================ product-first page top (2026-10-03)
   User: product pages = product first, explain later, no big navy hero (reference: qualityreport.co.th product page).
   Emitted by md2blocks for intros that carry `:product: ![alt](src)`. White band: photo left, text right. */
.tt-prod{
  margin-inline:calc(50% - 50vw);
  padding-inline:max(24px, calc(50vw - (var(--tt-inner) / 2)));
  padding-block:36px 52px; background:#fff; color:var(--tt-ink);
}
.tt-prod__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; }
.tt-prod__photo{ margin:0; display:flex; align-items:center; justify-content:center; }
.tt-prod__photo img{ display:block; width:auto; max-width:100%; height:auto; max-height:480px; object-fit:contain; }
.tt-prod__text > *{ margin:0; }
.tt-prod__text > * + *{ margin-top:16px; }
.tt-prod h1{ font-size:clamp(1.55rem,1.1rem + 1.3vw,2.1rem); line-height:1.35; max-width:none; text-wrap:pretty; }
.tt-prod .tt-lead{ font-size:1.05rem; color:var(--tt-slate); line-height:1.8; }
.tt-prod .wp-block-buttons{ margin-top:24px; }
.tt-prod .wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent !important; border-color:var(--tt-navy); color:var(--tt-navy) !important;
}
.tt-prod .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color:var(--tt-navy) !important; color:#fff !important;
}
/* light breadcrumb strip + light spec plate when the page uses the product top */
body:has(.tt-prod) .tt-breadcrumbs{ background:#fff; border-bottom:1px solid var(--tt-line); }
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb p{ color:var(--tt-muted); }
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb a{ color:var(--tt-muted); }
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb a:hover,
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb a:focus{ color:var(--tt-red); }
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb .separator{ color:var(--tt-muted); }
body:has(.tt-prod) .tt-breadcrumbs .rank-math-breadcrumb .last{ color:var(--tt-ink); }
.tt-prod + .tt-plate{ background:var(--tt-soft); color:var(--tt-ink); border-top:1px solid var(--tt-line); border-bottom:1px solid var(--tt-line); }
.tt-prod + .tt-plate .tt-plate__cell{ border-left-color:var(--tt-line); }
.tt-prod + .tt-plate .tt-plate__cell:nth-child(n+3){ border-top-color:var(--tt-line); }
.tt-prod + .tt-plate .tt-plate__v{ color:var(--tt-navy); }
.tt-prod + .tt-plate .tt-plate__v small,
.tt-prod + .tt-plate .tt-plate__k{ color:var(--tt-slate); }
@media (max-width:860px){
  .tt-prod{ padding-block:24px 36px; }
  .tt-prod__grid{ grid-template-columns:1fr; gap:24px; }
  .tt-prod__photo img{ max-height:340px; }
}
.tt-prod h1,.tt-prod .tt-lead{ word-break:auto-phrase; }

/* ============================================================ v0.9 — "Why" navy value cards + hover wipe
   (ported from design reference "2Theta Homepage.html": dark section, 2-line eyebrow + heading,
   hairline-divided numbered cards, red underline that wipes across on hover). 2026-10-03 */
.tt-sec--navy{ background:var(--tt-navy); color:#fff; }
.tt-sec--navy h2,.tt-sec--navy h3{ color:#fff; }
.tt-sec--navy .tt-eyebrow{ color:var(--tt-red); }        /* user 2026-10-03: exact page red (2.4:1 on navy — below AA, owner-approved) */
.tt-sec--navy .tt-eyebrow::before{ background:var(--tt-red); }
.tt-sec--navy .tt-why{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:2rem;
  background:rgba(255,255,255,.10); counter-reset:tt-why; }
.tt-sec--navy .tt-why__col{ position:relative; overflow:hidden; border-top:0; background:var(--tt-navy2);
  padding:38px 36px 40px; counter-increment:tt-why; }
.tt-sec--navy .tt-why__col::before{ content:counter(tt-why, decimal-leading-zero) / ""; display:block;
  font:800 3.4rem/1 var(--tt-display); letter-spacing:-.04em; color:var(--tt-red); margin-bottom:14px; }
.tt-sec--navy .tt-why__col h3{ font-size:1.25rem; margin:0 0 .5rem; }
.tt-sec--navy .tt-why__col p{ color:#C6D2E4; font-size:.98rem; }
@media (max-width:760px){ .tt-sec--navy .tt-why{ grid-template-columns:1fr; } .tt-sec--navy .tt-why__col{ padding:30px 24px 32px; } }

/* red underline wipe on hover (reference .eq-card::after) — tiles, carousel cards, icon cards, why cards */
.tt-card,.tt-tile,.tt-car__card{ overflow:hidden; }
.tt-card::after,.tt-tile::after,.tt-car__card::after,.tt-sec--navy .tt-why__col::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--tt-red);
  transition:width .35s var(--tt-ease); pointer-events:none; }
.tt-card:hover::after,.tt-tile:hover::after,.tt-car__card:hover::after,.tt-car__card:focus-visible::after,
.tt-sec--navy .tt-why__col:hover::after{ width:100%; }
@media (prefers-reduced-motion:reduce){ .tt-card::after,.tt-tile::after,.tt-car__card::after,.tt-sec--navy .tt-why__col::after{ transition:none; } }

/* ============================================================ v0.10 — bigger product hero, brand logos, "Product Details" divider (2026-10-03)
   User: hero "too small — make it big", no stats strips, brand logo on each product, "รายละเอียดสินค้า" heading when scrolling down. */
.tt-prod{ padding-inline:max(24px, calc(50vw - 640px)); padding-block:64px 80px; }
.tt-prod__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,88px); min-height:min(560px, 62vh); }
.tt-prod__photo img{ max-height:620px; }
.tt-prod h1{ font-size:clamp(1.55rem,1.1rem + 1.3vw,2.2rem); line-height:1.3; }
.tt-prod .tt-eyebrow{ font-size:.95rem; }
.tt-prod .tt-lead{ font-size:1.2rem; line-height:1.75; }
.tt-prod .wp-block-buttons{ margin-top:32px; gap:16px; }
.tt-prod .wp-block-button__link{ font-size:1.05rem !important; padding:1em 2em !important; }
.tt-prod__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; margin-bottom:22px !important; }
.tt-prod__logos img{ display:block; height:54px; width:auto; max-width:210px; object-fit:contain; }
/* product pages: every body section white, hairline between them (user 2026-10-03) */
body:has(.tt-prod) .tt-sec{ background:#fff; }
body:has(.tt-prod) .tt-sec + .tt-sec{ border-top:1px solid var(--tt-line); }
/* manufacturer block: flag (no box) left, text + 3 stats right */
.tt-sec.tt-media--flag{ grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.tt-origin{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:8px; width:clamp(120px,14vw,190px); }
.tt-origin svg{ display:block; width:100%; height:auto; aspect-ratio:3/2; }
.tt-origin span{ font:600 .78rem/1 var(--tt-display); letter-spacing:.14em; text-transform:uppercase; color:var(--tt-muted); }
.tt-media--flag .tt-media__body > h2{ font-size:clamp(1.7rem,1.2rem + 1.5vw,2.4rem); }
.tt-pstats{ display:flex; flex-wrap:wrap; gap:20px 44px; margin-top:26px !important; padding-top:24px; border-top:1px solid var(--tt-line); }
.tt-pstat{ display:flex; flex-direction:column; gap:4px; }
.tt-pstat b{ font:800 clamp(1.7rem,1.3rem + 1.2vw,2.3rem)/1 var(--tt-display); color:var(--tt-navy); }
.tt-pstat span{ font:600 .8rem/1.2 var(--tt-display); letter-spacing:.1em; text-transform:uppercase; color:var(--tt-muted); }
@media (max-width:860px){
  .tt-prod{ padding-block:28px 40px; }
  .tt-prod__grid{ grid-template-columns:1fr; min-height:0; }
  .tt-prod__photo img{ max-height:360px; }
  .tt-prod__logos img{ height:44px; max-width:170px; }
  .tt-sec.tt-media--flag{ grid-template-columns:1fr; }
  .tt-origin{ flex-direction:row; justify-content:flex-start; }
  .tt-origin{ width:auto; } .tt-origin svg{ width:96px; }
}

/* ============================================================ v0.11 — About page, layout of "2Theta About.html" (2026-10-03)
   banner + stat cells · overview + navy facts panel · numbered navy cards (existing .tt-why) · partner rows · industry cards */
.tt-hero--about > .tt-hero__grid{ grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.tt-bstats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.10); }
.tt-bstats > div{ background:rgba(255,255,255,.05); padding:28px 24px; display:flex; flex-direction:column; gap:8px; }
.tt-bstats b{ font:800 clamp(1.7rem,1.2rem + 1.3vw,2.4rem)/1 var(--tt-display); color:#fff; letter-spacing:-.02em; overflow-wrap:anywhere; }
.tt-bstats span{ font:600 .74rem/1.35 var(--tt-display); letter-spacing:.08em; text-transform:uppercase; color:#8CA0BC; }
.tt-sec--navy .tt-why:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .tt-sec--navy .tt-why:has(> :nth-child(3):last-child){ grid-template-columns:1fr; } .tt-hero--about > .tt-hero__grid{ grid-template-columns:1fr; } }

.tt-ov{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:start; margin-top:2rem !important; }
.tt-ov__body > * + *{ margin-top:1.1rem; }
.tt-ov__body p{ color:var(--tt-slate); line-height:1.8; }
.tt-ov__facts{ background:var(--tt-navy); padding:34px 36px; }
.tt-fact{ display:flex; gap:20px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.tt-fact:first-child{ padding-top:0; } .tt-fact:last-child{ border-bottom:0; padding-bottom:0; }
.tt-fact__k{ flex:0 0 118px; font:700 .7rem/1.5 var(--tt-display); letter-spacing:.12em; text-transform:uppercase; color:#8CA0BC; padding-top:3px; }
.tt-fact__v{ color:#fff; font-size:.95rem; line-height:1.55; }
@media (max-width:900px){ .tt-ov{ grid-template-columns:1fr; } .tt-fact{ flex-direction:column; gap:4px; } }

.tt-pcards{ display:flex; flex-direction:column; gap:2px; background:var(--tt-line); margin-top:2.2rem !important; }
.tt-pcard{ display:grid; grid-template-columns:268px minmax(0,1fr); background:#fff; }
.tt-pcard__l{ background:var(--tt-navy); padding:30px 28px; display:flex; flex-direction:column; gap:18px; transition:background .25s; }
.tt-pcard:hover .tt-pcard__l{ background:var(--tt-navy2); }
.tt-pcard__logo{ background:#fff; height:88px; display:flex; align-items:center; justify-content:center; padding:10px 14px; }
.tt-pcard__logo img{ display:block; max-width:100%; max-height:64px; width:auto; height:auto; object-fit:contain; }
.tt-pcard__l .tt-origin{ width:auto; flex-direction:row; justify-content:flex-start; gap:10px; padding:0; }
.tt-pcard__l .tt-origin svg{ width:38px; }
.tt-pcard__l .tt-origin span{ color:#C6D2E4; font-size:.7rem; }
.tt-pcard__auth{ margin:0; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); font:700 .72rem/1.5 var(--tt-display); letter-spacing:.06em; text-transform:uppercase; color:#E8EDF5; }
.tt-pcard__r{ padding:30px 40px; display:flex; flex-direction:column; gap:14px; }
.tt-pcard__r > *{ margin:0; }
.tt-pcard__r h3{ font-size:1.25rem; }
.tt-pcard__r p{ color:var(--tt-slate); line-height:1.7; font-size:.95rem; }
.tt-pcard__chips,.tt-ind__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tt-pchip{ font:700 .72rem/1 var(--tt-display); letter-spacing:.06em; text-transform:uppercase; color:var(--tt-navy); background:var(--tt-band); border:1px solid var(--tt-line); padding:7px 12px; text-decoration:none !important; transition:background .2s,color .2s; }
.tt-pchip:hover{ background:var(--tt-navy); color:#fff; border-color:var(--tt-navy); }
.tt-pcard__stats{ display:flex; flex-wrap:wrap; gap:14px 36px; padding-top:16px; border-top:1px solid var(--tt-line); }
.tt-pcard__stats > div{ display:flex; flex-direction:column; gap:3px; }
.tt-pcard__stats b{ font:800 1.35rem/1 var(--tt-display); color:var(--tt-navy); }
.tt-pcard__stats span{ font:600 .7rem/1.3 var(--tt-display); letter-spacing:.08em; text-transform:uppercase; color:var(--tt-muted); }
@media (max-width:760px){ .tt-pcard{ grid-template-columns:1fr; } .tt-pcard__r{ padding:24px 22px; } }

.tt-inds{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; background:var(--tt-line); margin-top:2.2rem !important; }
.tt-ind{ grid-column:span 2; position:relative; isolation:isolate; overflow:hidden; min-height:300px; background:var(--tt-navy); color:#fff; padding:30px 28px; display:flex; flex-direction:column; gap:14px; }
.tt-ind:nth-child(n+4){ grid-column:span 3; }
.tt-ind > *{ margin:0; }
.tt-ind__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--tt-ease); }
.tt-ind::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(7,27,58,.92) 0%, rgba(7,27,58,.72) 42%, rgba(7,27,58,.30) 100%); }
.tt-ind:hover .tt-ind__bg{ transform:scale(1.05); }
.tt-ind h3{ font-size:1.25rem; line-height:1.35; color:#fff; text-shadow:0 1px 14px rgba(7,27,58,.45); }
.tt-ind p{ color:#E8EDF5; font-size:.92rem; line-height:1.6; }
.tt-ind__ic{ width:42px; height:42px; background:var(--tt-red); display:flex; align-items:center; justify-content:center; }
.tt-ind__ic i{ display:block; width:14px; height:14px; background:#fff; }
@media (prefers-reduced-motion:reduce){ .tt-ind__bg{ transition:none; } }
@media (max-width:900px){ .tt-inds{ grid-template-columns:1fr 1fr; } .tt-ind,.tt-ind:nth-child(n+4){ grid-column:auto; } }
@media (max-width:560px){ .tt-inds{ grid-template-columns:1fr; } .tt-ind{ min-height:240px; } }

/* chooser page (family page that lists products; 2026-10-04) */
.tt-prod--chooser .tt-prod__grid{ grid-template-columns:1fr; min-height:0; }
.tt-prod--chooser{ padding-block:48px 56px; padding-inline:max(24px, calc(50vw - 520px)); } /* same column as .tt-sec below */
.tt-prod--chooser .tt-lead{ max-width:68ch; }
@media (max-width:900px){ .tt-prod--chooser{ padding-block:24px 32px; } }

/* plain chooser tiles (2026-10-04): same look as the home carousel card — red top bar, soft photo well, name / description / red link */
.tt-tiles--plain{ gap:28px; background:none; border:0; }
.tt-tiles--plain .tt-tile{ background:#fff; border-top:4px solid var(--tt-red); box-shadow:0 3px 16px rgba(7,27,58,.09);
  transition:opacity .65s var(--tt-ease), transform .3s var(--tt-ease), box-shadow .3s var(--tt-ease); }
.tt-tiles--plain .tt-tile:hover,.tt-tiles--plain .tt-tile:focus-visible{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(7,27,58,.18); }
.tt-tiles--plain .tt-tile__img{ aspect-ratio:4/3; overflow:hidden; background:radial-gradient(circle at 50% 44%, #fff 0 38%, #EDF1F6 100%); }
.tt-tiles--plain .tt-tile__img img{ position:absolute; inset:5%; width:90%; height:90%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s var(--tt-ease); }
.tt-tiles--plain .tt-tile:hover .tt-tile__img img{ transform:scale(1.05); }
.tt-tiles--plain .tt-tile__body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 26px; }
.tt-tiles--plain .tt-tile h3{ margin:0 0 10px; font-size:1.3rem; line-height:1.3; }
.tt-tiles--plain .tt-tile p{ margin:0 0 20px; font-size:.95rem; line-height:1.6; color:var(--tt-slate); }
.tt-tiles--plain .tt-tile__more{ margin-top:auto; align-self:flex-start; }
#models{ padding-top:0 !important; }
#models > .tt-eyebrow, #models > h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; } /* heading kept for outline/SEO, hidden visually (user: delete that text) */
@media (max-width:900px){ .tt-tiles--plain{ gap:20px; } }
.tt-sec--notitle{ padding-top:0 !important; }
.tt-sec--notitle > .tt-eyebrow, .tt-sec--notitle > h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; }

/* family-page "How it works" + "Applications" (::: science / ::: apps; 2026-10-05, layout from 2Theta XRD.html) */
.tt-sci{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; margin-top:2rem !important; }
.tt-sci__l > * + *{ margin-top:1.2rem; }
.tt-sci__l p{ color:var(--tt-slate); line-height:1.8; }
.tt-sci__law{ display:flex; flex-direction:column; gap:12px; background:var(--tt-navy); padding:32px 36px 34px; margin-top:1.8rem !important; }
.tt-sci__lawk{ font:700 .72rem/1.3 var(--tt-display); letter-spacing:.14em; text-transform:uppercase; color:#8CA0BC; }
.tt-sci__eq{ font:800 clamp(1.8rem,1.3rem + 1.6vw,2.6rem)/1.15 var(--tt-display); color:#fff; letter-spacing:.02em; overflow-wrap:anywhere; }
.tt-sci__lawn{ color:#B9C6DA; font-size:.9rem; line-height:1.65; }
.tt-sci__flow{ display:flex; align-items:center; gap:12px; background:var(--tt-band); padding:34px 22px 44px; }
.tt-sci__box{ position:relative; flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--tt-line); padding:20px 10px; text-align:center; display:flex; flex-direction:column; gap:6px; }
.tt-sci__box--key{ border:2px solid var(--tt-red); }
.tt-sci__boxk{ font:700 .68rem/1.3 var(--tt-display); letter-spacing:.14em; text-transform:uppercase; color:var(--tt-muted); }
.tt-sci__box b{ font:700 1rem/1.35 var(--tt-display); color:var(--tt-navy); overflow-wrap:anywhere; }
.tt-sci__angle{ position:absolute; left:50%; top:calc(100% + 12px); transform:translateX(-50%); white-space:nowrap; font:700 .72rem/1 var(--tt-display); letter-spacing:.14em; text-transform:uppercase; color:var(--tt-red); }
.tt-sci__arrow{ flex:0 0 auto; color:var(--tt-red); font-size:1.3rem; line-height:1; }
.tt-sci__feats{ list-style:none; margin:2rem 0 0 !important; padding:0 !important; display:flex; flex-direction:column; gap:22px; }
.tt-sci__feats li{ position:relative; padding-left:30px; color:var(--tt-slate); line-height:1.7; }
.tt-sci__feats li::before{ content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; background:var(--tt-red); }
.tt-sci__feats strong{ color:var(--tt-navy); }
@media (max-width:900px){ .tt-sci{ grid-template-columns:1fr; } }
@media (max-width:520px){ .tt-sci__flow{ flex-direction:column; padding:24px 20px 44px; } .tt-sci__box{ width:100%; flex:none; } .tt-sci__arrow{ transform:rotate(90deg); } .tt-sci__law{ padding:26px 24px 28px; } }

.tt-apps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--tt-line); margin-top:2.2rem !important; }
.tt-app{ background:#fff; padding:40px 40px 44px; display:flex; flex-direction:column; gap:12px; }
.tt-app > *{ margin:0; }
.tt-app__ic{ width:60px; height:60px; background:var(--tt-band); border:1px solid var(--tt-line); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.tt-app__ic i{ display:block; width:24px; height:24px; background:var(--tt-navy2); }
.tt-app h3{ font-size:1.1rem; line-height:1.35; color:var(--tt-navy); }
.tt-app p{ color:var(--tt-slate); font-size:.95rem; line-height:1.7; }
@media (max-width:900px){ .tt-apps{ grid-template-columns:1fr 1fr; } .tt-app{ padding:30px 28px 34px; } }
@media (max-width:560px){ .tt-apps{ grid-template-columns:1fr; } }

/* science figure + application photo cells (2026-10-05, same box size as the plain cells) */
.tt-sci{ align-items:stretch; }
.tt-sci__l{ display:flex; flex-direction:column; }
.tt-sci__photo{ flex:1 1 auto; min-height:220px; margin:1.8rem 0 0 !important; position:relative; overflow:hidden; background:var(--tt-band); }
.tt-sci__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
.tt-sci__photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 14px 8px; font-size:.68rem; line-height:1.4; color:#DCE4F0; background:linear-gradient(0deg, rgba(7,27,58,.78), rgba(7,27,58,0)); }
.tt-sci__photo figcaption a{ color:#fff; text-decoration:underline; }
@media (max-width:900px){ .tt-sci__photo{ flex:none; aspect-ratio:16/9; min-height:0; } }
.tt-app--photo{ position:relative; isolation:isolate; overflow:hidden; background:var(--tt-navy); }
.tt-app__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--tt-ease); }
.tt-app--photo::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(7,27,58,0) 0%, rgba(7,27,58,.06) 34%, rgba(7,27,58,.82) 58%, rgba(7,27,58,.93) 100%); }
.tt-app--photo:hover .tt-app__bg{ transform:scale(1.05); }
.tt-app--photo h3{ color:#fff; text-shadow:0 1px 14px rgba(7,27,58,.45); }
.tt-app--photo p{ color:#E8EDF5; }
.tt-app--photo .tt-app__ic{ visibility:hidden; }  /* keeps the box height; the photo shows instead */
@media (prefers-reduced-motion:reduce){ .tt-app__bg{ transition:none; } }

/* textbook diagram under the Bragg panel (::: science :diagram:) */
.tt-sci__photo--diagram{ display:flex; align-items:center; justify-content:center; padding:clamp(10px,1.4vw,16px); background:var(--tt-band); }
.tt-sci__photo--diagram svg{ display:block; width:100%; height:auto; max-height:100%; overflow:visible; }
.tt-sci__eq sup{ font-size:.55em; line-height:0; vertical-align:super; letter-spacing:0; }

/* ---- family pages: varied "How it works" (steps / facts / wide) + varied Applications (bento / strip / tall / rows) — 2026-10-05 ---- */
.tt-how{ margin-top:2rem !important; }
.tt-how__fig{ margin:0 !important; background:var(--tt-band); padding:clamp(14px,2vw,26px); display:flex; align-items:center; justify-content:center; }
.tt-how__fig svg{ display:block; width:100%; height:auto; overflow:visible; }
.tt-how__txt > p{ color:var(--tt-slate); line-height:1.8; margin:0 0 1.4rem; max-width:64ch; }
/* steps: numbered list left, diagram right */
.tt-how--steps{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.tt-how__steps{ list-style:none; margin:0 !important; padding:0 !important; counter-reset:tts; display:flex; flex-direction:column; }
.tt-how__steps li{ counter-increment:tts; display:grid; grid-template-columns:58px minmax(0,1fr); gap:6px 14px; padding:20px 0; border-top:1px solid var(--tt-line); }
.tt-how__steps li:last-child{ border-bottom:1px solid var(--tt-line); }
.tt-how__steps li::before{ content:counter(tts, decimal-leading-zero) / ""; font:800 2rem/1 var(--tt-display); color:var(--tt-red); letter-spacing:-.02em; }
.tt-how__steps b{ display:block; color:var(--tt-navy); font-size:1.05rem; margin-bottom:4px; }
.tt-how__steps p{ margin:0; color:var(--tt-slate); font-size:.95rem; line-height:1.7; }
.tt-how__chips{ margin-top:1.4rem; }
/* facts: diagram left, intro + 2x2 fact tiles right */
.tt-how--facts{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4.5vw,64px); align-items:center; }
.tt-how__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tt-how__tiles > div{ background:#fff; border:1px solid var(--tt-line); border-top:3px solid var(--tt-red); padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; }
.tt-how__tiles b{ color:var(--tt-navy); font-size:1.12rem; line-height:1.3; }
.tt-how__tiles span{ color:var(--tt-slate); font-size:.9rem; line-height:1.6; }
/* wide: intro, full-width diagram band, columns underneath */
.tt-how--wide .tt-how__fig{ margin:0 0 30px !important; padding:clamp(18px,3vw,38px); }
.tt-how--wide .tt-how__fig svg{ max-width:760px; margin:0 auto; }
.tt-how__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; }
.tt-how__cols > div{ border-top:3px solid var(--tt-red); padding-top:14px; }
.tt-how__cols b{ display:block; color:var(--tt-navy); font-size:1.05rem; margin-bottom:6px; }
.tt-how__cols p{ margin:0; color:var(--tt-slate); font-size:.93rem; line-height:1.7; }
@media (max-width:900px){ .tt-how--steps,.tt-how--facts{ grid-template-columns:1fr; } .tt-how--facts .tt-how__fig{ order:2; } }
@media (max-width:520px){ .tt-how__tiles{ grid-template-columns:1fr; } }

/* applications layouts */
.tt-apps--n4:not(.tt-apps--bento):not(.tt-apps--tall):not(.tt-apps--rows){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tt-apps--bento,.tt-apps--strip,.tt-apps--tall,.tt-apps--rows{ gap:16px; background:none; }
/* bento + strip: overlay cards, text pinned to the bottom */
.tt-apps--bento .tt-app,.tt-apps--strip .tt-app{ justify-content:flex-end; padding:24px 26px 26px; gap:8px; }
.tt-apps--bento .tt-app__ic,.tt-apps--strip .tt-app__ic{ display:none; }
.tt-apps--bento .tt-app--photo::before,.tt-apps--strip .tt-app--photo::before{ background:linear-gradient(180deg, rgba(7,27,58,0) 30%, rgba(7,27,58,.62) 62%, rgba(7,27,58,.93) 100%); }
.tt-apps--bento.tt-apps--n5{ grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:repeat(2,minmax(228px,auto)); }
.tt-apps--bento.tt-apps--n5 .tt-app:first-child{ grid-row:1 / span 2; }
.tt-apps--bento.tt-apps--n5 .tt-app:first-child h3{ font-size:1.4rem; }
.tt-apps--bento.tt-apps--n4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tt-apps--bento.tt-apps--n4 .tt-app{ min-height:230px; }
.tt-apps--bento.tt-apps--n4 .tt-app:first-child{ grid-column:1 / -1; min-height:290px; }
.tt-apps--bento.tt-apps--n4 .tt-app:first-child h3{ font-size:1.4rem; }
.tt-apps--strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tt-apps--strip .tt-app{ min-height:410px; }
.tt-apps--strip .tt-app h3{ font-size:1.25rem; }
/* tall: photo on top, caption below */
.tt-apps--tall.tt-apps--n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tt-apps--tall.tt-apps--n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tt-apps--tall.tt-apps--n6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tt-apps--tall .tt-app--card{ padding:0; gap:0; background:#fff; border:1px solid var(--tt-line); }
.tt-apps--tall .tt-app__fig{ margin:0; aspect-ratio:4 / 5; overflow:hidden; background:var(--tt-band); }
.tt-apps--tall.tt-apps--n3 .tt-app__fig,.tt-apps--tall.tt-apps--n6 .tt-app__fig{ aspect-ratio:4 / 3; }
.tt-apps--tall .tt-app__fig img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--tt-ease); }
.tt-apps--tall .tt-app--card:hover .tt-app__fig img,.tt-apps--rows .tt-app--card:hover .tt-app__fig img{ transform:scale(1.05); }
.tt-app__txt{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; }
.tt-app__txt h3{ font-size:1.08rem; line-height:1.35; color:var(--tt-navy); margin:0; }
.tt-app__txt p{ color:var(--tt-slate); font-size:.92rem; line-height:1.65; margin:0; }
.tt-apps--tall .tt-app__txt{ border-top:3px solid var(--tt-red); }
/* rows: photo left, text right (2 columns of cards, or one full-width column for 3) */
.tt-apps--rows.tt-apps--n4,.tt-apps--rows.tt-apps--n6{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tt-apps--rows.tt-apps--n3{ grid-template-columns:1fr; }
.tt-apps--rows .tt-app--card{ padding:0; gap:0; flex-direction:row; background:#fff; border:1px solid var(--tt-line); min-height:190px; }
.tt-apps--rows .tt-app__fig{ margin:0; flex:0 0 40%; overflow:hidden; background:var(--tt-band); }
.tt-apps--rows .tt-app__fig img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--tt-ease); }
.tt-apps--rows .tt-app__txt{ justify-content:center; padding:22px 26px; border-left:3px solid var(--tt-red); }
.tt-apps--rows.tt-apps--n3 .tt-app__fig{ flex-basis:34%; }
@media (max-width:900px){
  .tt-apps--bento.tt-apps--n5,.tt-apps--bento.tt-apps--n4,.tt-apps--strip,.tt-apps--tall.tt-apps--n3,.tt-apps--tall.tt-apps--n4,.tt-apps--tall.tt-apps--n6,.tt-apps--rows.tt-apps--n4,.tt-apps--rows.tt-apps--n6{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .tt-apps--bento .tt-app:first-child{ grid-column:1 / -1; grid-row:auto !important; min-height:260px; }
  .tt-apps--strip .tt-app{ min-height:320px; }
}
@media (max-width:560px){
  .tt-apps--bento.tt-apps--n5,.tt-apps--bento.tt-apps--n4,.tt-apps--strip,.tt-apps--tall.tt-apps--n3,.tt-apps--tall.tt-apps--n4,.tt-apps--tall.tt-apps--n6,.tt-apps--rows.tt-apps--n4,.tt-apps--rows.tt-apps--n6,.tt-apps--n4:not(.tt-apps--bento){ grid-template-columns:1fr; }
  .tt-apps--rows .tt-app--card{ flex-direction:column; } .tt-apps--rows .tt-app__fig{ flex:none; aspect-ratio:16 / 9; } .tt-apps--rows .tt-app__txt{ border-left:0; border-top:3px solid var(--tt-red); }
}
@media (prefers-reduced-motion:reduce){ .tt-apps--tall .tt-app__fig img,.tt-apps--rows .tt-app__fig img{ transition:none; } }

/* ============================================================ UX audit 2026-10-07 (ui-ux-pro-max)
   1) visible keyboard focus on the Fluent Forms RFQ controls (plugin CSS removed the outline)
   2) tap-target sizes: hit areas only, visuals unchanged. Backup: style.css.pre-uxaudit.bak */
.fluentform .ff-el-form-control:focus-visible,
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff_btn_style:focus-visible,
.fluentform .ff-el-group input[type="checkbox"]:focus-visible,
.fluentform .ff-el-group input[type="radio"]:focus-visible{
  outline:3px solid var(--tt-navy) !important; outline-offset:2px !important; }
.fluentform .ff-el-form-control:focus-visible{ border-color:var(--tt-navy) !important; background:#fff !important; }
.fluentform .ff-el-form-control{ min-height:44px; }
.fluentform .ff-btn-submit{ min-height:44px; }
.tt-lang__btn{ min-height:44px; }
.tt-header__toggle{ min-height:44px; min-width:44px; }
.tt-car__dots{ gap:14px; }
.tt-car__dot{ position:relative; }
.tt-car__dot::after{ content:""; position:absolute; inset:-6px; }
.rank-math-breadcrumb a{ display:inline-block; padding:14px 6px; margin:-14px -6px; }
.tt-split__col p > a[href^="tel:"]{ display:inline-block; padding:12px 4px; margin:-12px -4px; }

/* ============================================================ UX audit 2026-10-07 (cont.)
   3) StirLIN process diagram: landscape SVG on desktop, portrait twin on phones/tablets (labels were ~3px at 390px)
   2) red on navy: user 2026-10-07 OVERRIDES the 2026-10-03 "exact page red" decision (was 2.83:1) — lighter tints on #071B3A only.
      Eyebrow = small text (>=4.5:1): #EE4A62 = 4.7:1. Hero "TECHNOLOGY" = large text (>=3:1): #E0334F = 3.9:1.
   Backup: style.css.pre-diagram-red.bak */
.tt-diagram svg.tt-diagram__m{ display:none; }
.tt-diagram{ container-type:inline-size; }
/* critique 2026-10-07: pick landscape vs portrait by the diagram's own width (labels must render >= 13px): landscape needs ~970px of
   svg width (14.2-unit labels x 0.915), so anything narrower gets the portrait twin — covers tablets and ~1090px laptops too. */
@container (max-width:969px){
  .tt-diagram svg.tt-diagram__d{ display:none; }
  .tt-diagram svg.tt-diagram__m{ display:block; max-width:420px; margin:0 auto; }
}
@media (max-width:860px){
  .tt-diagram:has(.tt-diagram__m){ padding:20px 14px 14px; }
}
:root{ --tt-red-on-navy:#EE4A62; --tt-red-on-navy-lg:#E0334F; }
.tt-sec--navy .tt-eyebrow{ color:var(--tt-red-on-navy); }
.tt-hero__brand-red{ color:var(--tt-red-on-navy-lg); }

/* ============================================================ UX audit 2026-10-07 (cont. 2)
   family-page diagrams (xrf, micro-xrf, ct, fusion, pressing, chiller, e-learning, ev, xrd Bragg): landscape svg on
   >=561px, phone twin (bigger labels / portrait flow) on <=560px. Twins come from scripts/diagrams/*.m.svg via md2blocks _svg_inline.
   Backup: style.css.pre-phonetwins.bak */
figure svg.tt-dgm__m{ display:none; }
@media (max-width:560px){
  figure svg.tt-dgm__d{ display:none; }
  figure svg.tt-dgm__m{ display:block; max-width:420px; margin:0 auto; }
}

/* ============================================================ UX audit 2026-10-07 (cont. 3): small-text floor
   Floor = 14px for readable UI/body-ish text, 13px for the small uppercase/letter-spaced micro-labels (they were 10.9–13.6px).
   Only font-size is overridden; weights, tracking and colours are unchanged. Backup: style.css.pre-smalltext.bak */
.tt-footer h3,.tt-footer h2{ font-size:.875rem; }
.tt-footer__bar{ font-size:.875rem; }
.tt-car__btn{ font-size:.9rem; }
.tt-chip{ font-size:.875rem; }
.tt-proc__n{ font-size:.875rem; }
.tt-figure figcaption{ font-size:.875rem; }
.tt-breadcrumbs .rank-math-breadcrumb p, .rank-math-breadcrumb{ font-size:.875rem; }
.tt-origin span, .tt-pcard__l .tt-origin span{ font-size:.8125rem; }
.tt-pchip, .tt-pcard__auth, .tt-fact__k, .tt-pstat span{ font-size:.8125rem; }
.tt-sci__boxk, .tt-sci__lawk, .tt-sci__angle, .tt-sci__photo figcaption, .tt-tile__tag{ font-size:.8125rem; }
.tt-bstats span, .tt-pcard__stats span{ font-size:.8125rem; }
@media (max-width:900px){ .tt-callfab{ font-size:.875rem; } }

/* ============================================================ UX audit 2026-10-07 (cont. 4): lazy-image dimensions (CLS)
   Author CSS `width:auto;height:auto` cancelled the HTML width/height attributes, so lazy logos that had not loaded yet were 0x0
   and pushed the layout when they arrived (Chrome: "Lazy-loaded images should have explicit dimensions").
   Brand wall: definite width + the attributes' aspect ratio gives the box a height before load; object-fit:contain keeps the logo
   the same visible size. Footer logo: explicit ratio of its 300x180 attributes. Backup: style.css.pre-lazydims.bak */
.tt-brandwall__item img{ width:100%; height:68px; }   /* box = item width x 68px (the old max-height); object-fit:contain draws the logo exactly as before */
.tt-footer__logo-img{ aspect-ratio:5 / 3; }
.tt-pcard__logo img{ width:100%; height:64px; }   /* same fix for the partner-card logos (About + product pages): explicit box, object-fit:contain draws them as before */

/* ============================================================ impeccable critique 2026-10-07: RFQ flow + form polish
   context banner ("You are requesting a quote for: …"), placeholder contrast (was 3.2:1), required-star colour (was ~2.7:1),
   submit radius = the site's square buttons, taller message box. Backup: style.css.pre-rfqcontext.bak */
.tt-rfq-ctx{ margin:0 0 22px; padding:14px 18px; background:#fff; border:1px solid var(--tt-line); font-size:1rem; line-height:1.5; color:var(--tt-navy); }
.tt-rfq-ctx strong{ font-weight:700; }
.tt-rfq-ctx__hint{ font-size:.875rem; color:var(--tt-muted); }
.fluentform .ff-el-form-control::placeholder{ color:#5F6B7A; opacity:1; }
.fluentform{ --fluentform-danger:#C41230; }   /* plugin's danger colour (#F56C6C, ~2.7:1) drives the required star AND the error messages/borders; brand red = 5.0:1 on the band, 5.9:1 on white */
.fluentform .ff-btn-submit{ border-radius:0; }
.fluentform textarea.ff-el-form-control{ min-height:140px; }
.tt-sec > p.tt-rfq-ctx{ max-width:none !important; box-sizing:border-box; margin:0 0 24px; }   /* deliberate: beats the 68ch / :lang(th) 54ch prose cap so the banner is as wide as the form */

/* ============================================================ impeccable critique 2026-10-07: mobile product pages + bottom bar
   1) Phones: logo/eyebrow/H1, then the quote + spec-sheet buttons, then the paragraph, then the photo (buttons were ~900px down).
   2) The floating call circle covered body text -> slim bottom bar: [Request a quote | Call]. Backup: style.css.pre-mbar.bak */
@media (max-width:860px){
  .tt-prod__text{ display:flex; flex-direction:column; }
  .tt-prod__text > .wp-block-buttons{ order:1; }
  .tt-prod__text > .tt-lead{ order:2; }
  .tt-prod__grid > .tt-prod__text{ order:1; }
  .tt-prod__grid > .tt-prod__photo{ order:2; }
}
.tt-mbar{ display:none; }
@media (max-width:900px){
  .tt-mbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--tt-navy); box-shadow:0 -2px 12px rgba(7,27,58,.2); padding-bottom:env(safe-area-inset-bottom); }
  .tt-mbar > a, .tt-mbar .tt-callfab{ position:static; flex:1 1 0; display:flex; align-items:center; justify-content:center; min-width:0; height:56px; padding:0 12px;
    border-radius:0; box-shadow:none; background:var(--tt-navy); color:#fff !important; font:700 1rem/1 var(--tt-display); text-decoration:none !important; }
  .tt-mbar .tt-mbar__quote{ flex:1.7 1 0; background:var(--tt-red); }
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
}

/* spec tables on phones (impeccable critique 2026-10-07): row labels stay in view while the table scrolls sideways, and a hint appears
   only when the table actually overflows (class set by a few lines of JS in functions.php). Backup: style.css.pre-tables.bak */
@media (max-width:860px){
  figure.wp-block-table th:first-child, figure.wp-block-table td:first-child{ position:sticky; left:0; z-index:1; }
  figure.wp-block-table td:first-child{ background:#fff; box-shadow:1px 0 0 var(--tt-line); }              /* opaque so scrolling cells slide under it; keep the zebra of the rows */
  figure.wp-block-table tbody tr:nth-child(even) td:first-child{ background:var(--tt-soft); }
  .tt-sec--band figure.wp-block-table td:first-child{ background:var(--tt-band); }
  .tt-sec--band figure.wp-block-table tbody tr:nth-child(even) td:first-child{ background:#fff; }
  figure.wp-block-table.is-scrollable::before{ display:block; position:sticky; left:0; width:min(100%, 342px); padding:0 0 8px; font:600 .8125rem/1.4 var(--tt-body); color:var(--tt-muted); }
  :lang(th) figure.wp-block-table.is-scrollable::before{ content:"เลื่อนตารางไปทางขวาเพื่อดูข้อมูลทั้งหมด →"; }
  :lang(en) figure.wp-block-table.is-scrollable::before{ content:"Swipe the table sideways to see all columns →"; }
}

/* RFQ validation messages: keep above the 13px small-text floor (impeccable follow-up 2026-10-07) */
.frm-fluent-form .ff-el-is-error .error.text-danger,
.frm-fluent-form .error.text-danger{font-size:14px;line-height:1.4;}

/* RFQ form fields: square corners like the rest of the system (Fluent Forms default is 7px). DESIGN.md Shapes, 2026-10-07 */
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input.ff-el-form-control,
.frm-fluent-form select.ff-el-form-control,
.frm-fluent-form textarea.ff-el-form-control{ border-radius:0; }

/* Thai font swap 2026-10-07 (Plex -> Sarabun), 2026-10-11 (Sarabun -> Noto Sans Thai): diagram SVGs are inlined with font-family="'IBM Plex Sans Thai'…" baked in;
   CSS beats the presentation attribute, so no page rebuild is needed. Stack kept per diagram type so Latin width is unchanged. */
.tt-diagram text, .tt-diagram tspan{ font-family:'Noto Sans Thai',sans-serif; }
.tt-dgm text, .tt-dgm tspan, .tt-bragg text, .tt-bragg tspan{ font-family:'Montserrat','Noto Sans Thai',sans-serif; }

/* ============================================================ critique fixes 2026-10-07 (cont.)
   (a) phone tables: short cells (marked .tt-nw by the footer script in functions.php) stay on one line, so a model row is ~44px instead
       of ~100px and units never split ("2.9 / ล. / ชม."). Wide tables already scroll sideways with a sticky first column.
   (b) RFQ form fields: border #DADBDD was 1.4:1 on white; #7D8CA3 = 3.4:1 (WCAG 1.4.11 needs 3:1). Fill + focus ring unchanged.
   (c) footer phone numbers on phones: 18px-tall links -> 44px hit areas (rows spaced apart, no overlap).
   Backups: style.css.pre-critique2.bak, functions.php.pre-tablenw.bak */
@media (max-width:860px){
  figure.wp-block-table .tt-nw{ white-space:nowrap; }
  .tt-footer__tel a{ display:inline-block; padding:13px 0; }
}
.frm-fluent-form .ff-el-form-control{ border-color:#7D8CA3; }
/* (d) phone menu: the 11px "▾" glyph was the only cue that "สินค้าและโซลูชัน" expands — now a 10px red chevron that flips when open */
@media (max-width:900px){
  .tt-nav__list > li.menu-item-has-children > a{ padding-right:34px; }
  .tt-nav__list > li.menu-item-has-children > a::before{
    content:""; font-size:0; width:10px; height:10px; right:12px; top:50%;
    border-right:2.5px solid var(--tt-red); border-bottom:2.5px solid var(--tt-red);
    transform:translateY(-70%) rotate(45deg); transition:transform .2s var(--tt-ease);
  }
  .tt-nav__list > li.menu-item-has-children.is-open > a::before{ transform:translateY(-30%) rotate(225deg); }
}
#rfq{ scroll-margin-top:96px; }   /* contact page: the quote-form heading; quote links/bottom bar jump here (header is 72px) */

/* ============================================================ critique fixes 2026-10-07 (cont. 2): family diagrams by container width
   Half-column figures on desktop (~456px wide) and phones both need the larger-label twin (20-unit labels, >= 13px at 0.68 scale);
   the landscape svg only shows when its figure is wide (x-ray/chiller 'wide' layout, single-column tablets). The Bragg svg (class tt-bragg,
   no .tt-dgm) keeps its viewport switch at <=560px above. Backup: style.css.pre-diagcq.bak */
figure.tt-how__fig, figure.tt-sci__photo--diagram{ container-type:inline-size; }
@container (max-width:599px){
  svg.tt-dgm.tt-dgm__d{ display:none; }
  svg.tt-dgm.tt-dgm__m{ display:block; max-width:420px; margin:0 auto; }
}
@container (min-width:440px) and (max-width:599px){ svg.tt-dgm.tt-dgm__m{ max-width:380px; } }
@media (max-width:560px){ figure.tt-how__fig{ padding-left:8px; padding-right:8px; } figure.tt-sci__photo--diagram{ padding-left:8px; padding-right:8px; } }
@media (max-width:560px){ .tt-how .tt-how__fig{ padding-left:8px; padding-right:8px; } }   /* beats .tt-how--wide .tt-how__fig clamp() padding */
/* Bragg (xrd): landscape labels are 13.4px at ~450px wide; below ~420px of figure width switch to its larger-label twin */
@container (max-width:419px){
  svg.tt-bragg.tt-dgm__d{ display:none; }
  svg.tt-bragg.tt-dgm__m{ display:block; max-width:420px; margin:0 auto; }
}

/* --- 2026-10-13 wider prose (revised same day: 1040px -> 900px cap, + justified edges like Word's Justify).
   Section paragraphs/lists run up to 900px (supersedes the 68ch / :lang(th) 54ch reading-measure caps and the 64ch / 68ch caps set earlier in this file). --- */
.tt-sec > p:not(.tt-eyebrow):not(.tt-lead), .tt-sec > ul, .tt-sec > ol,
:lang(th) .tt-sec > p:not(.tt-eyebrow):not(.tt-lead), :lang(th) .tt-sec > ul, :lang(th) .tt-sec > ol,
.tt-faq-item > p, .tt-numlist__item p,
:lang(th) .tt-faq-item > p, :lang(th) .tt-numlist__item p,
.tt-how__txt > p, .tt-prod--chooser .tt-lead{ max-width:900px; }
/* plain (non-photo) page heroes: lead gets the same 900px; photo heroes keep their narrower text column */
.tt-hero:not(.tt-hero--photo) > .tt-lead{ max-width:900px; }
/* justified paragraphs (flush left AND right edge; last line stays left). text-align:justify only widens at word/phrase gaps,
   it does not spread letters (that is Word's "Thai Distributed", which the user rejected 2026-10-12). Desktop only: narrow phone columns make rivers. */
@media (min-width:701px){
  .tt-sec > p:not(.tt-eyebrow):not(.tt-lead):not(.tt-rfq-ctx):not(.has-text-align-center):not(.has-text-align-right),
  .tt-faq-item > p, .tt-numlist__item p, .tt-how__txt > p,
  .tt-hero:not(.tt-hero--photo) > .tt-lead{ text-align:justify; }   /* product hero lead (.tt-prod .tt-lead, 518px column) deliberately NOT justified: sweep 2026-10-13 showed word gaps up to 90px there */
}

/* --- 2026-10-13 product hero lead (beside the photo): narrowed to ~ the width of the h1's last line (user: "narrower, to around the r of Cryogenerator").
   27em of the 1.2rem lead = ~518px; two-column layout only (>=861px), chooser pages keep their full-width lead. --- */
@media (min-width:861px){
  .tt-prod:not(.tt-prod--chooser) .tt-prod__text > .tt-lead{ max-width:27em; }
}

/* --- 2026-10-13 product H1 "Name — descriptor": main title + quieter second line (markup added by the_content filter in functions.php) --- */
.tt-prod h1 .tt-h1-dash{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tt-prod h1 .tt-h1-sub{ display:block; margin-top:.4em; font-size:.62em; font-weight:500; line-height:1.4; color:var(--tt-slate); }

/* --- 2026-10-13 follow-up: system name in the H1 second line gets the brand red; product-hero eyebrow dash hangs in the column gap
   so the eyebrow text, title, subtitle and lead share ONE left edge (two-column layout only; chooser pages and phones keep the inline dash). --- */
.tt-prod h1 .tt-h1-sub--brand{ color:var(--tt-red); }   /* whole 2nd line (replaced the earlier partial .tt-h1-hl span) */
@media (min-width:861px){
  .tt-prod:not(.tt-prod--chooser) .tt-prod__text > .tt-eyebrow{ position:relative; }
  .tt-prod:not(.tt-prod--chooser) .tt-prod__text > .tt-eyebrow::before{ position:absolute; left:-34px; top:50%; width:22px; margin-top:-1.5px; }
}

/* short bold figure phrases in product hero leads (class added by the_content filter) never wrap; phones may wrap them */
@media (min-width:600px){ .tt-prod .tt-lead .tt-keep{ white-space:nowrap; } }

/* 2026-10-13: links inside photo application cards were unreadable (default blue on the navy overlay) */
.tt-app--photo p a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.tt-app--photo p a:hover{ color:#fff; text-decoration-thickness:2px; }

/* 2026-10-13: every product title's 2nd line uses the StirLIN hub treatment (brand red), not only "<x> จาก/by <y>" */
.tt-prod h1 .tt-h1-sub{ color:var(--tt-red); }

/* 2026-10-13: industries cards — clear photo on top (no navy overlay), red rule, title below; same look as .tt-apps--tall */
.tt-inds{ gap:16px; background:none; }
.tt-ind{ min-height:0; padding:0; gap:0; background:#fff; color:var(--tt-navy); border:1px solid var(--tt-line); }
.tt-ind::before{ content:none; }
.tt-ind__bg{ position:static; inset:auto; z-index:auto; display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-bottom:3px solid var(--tt-red); }
.tt-ind:nth-child(n+4) .tt-ind__bg{ aspect-ratio:16 / 9; }
.tt-ind__ic{ display:none; }
.tt-ind h3{ color:var(--tt-navy); text-shadow:none; padding:20px 24px 24px; font-size:1.12rem; }
.tt-ind p{ color:var(--tt-slate); padding:0 24px 22px; }
@media (max-width:900px){ .tt-ind:nth-child(n+4) .tt-ind__bg{ aspect-ratio:4 / 3; } }

/* 2026-10-13: photo cards with a title only (no description) — shorter, lighter overlay so the photo stays clear */
.tt-app--photo:has(> p:empty)::before{ background:linear-gradient(180deg, rgba(7,27,58,0) 52%, rgba(7,27,58,.55) 78%, rgba(7,27,58,.82) 100%) !important; }
.tt-app--photo:has(> p:empty){ justify-content:flex-end; }
.tt-app--photo > p:empty{ display:none; }

/* 2026-10-13: apps "panels" — full-height photo panels in one row; the hovered panel widens, the first is open by default */
.tt-apps--panels{ display:flex; gap:10px; background:none; height:clamp(380px,40vw,540px); }
.tt-apps--panels .tt-app{ flex:1 1 0; min-width:0; min-height:0; padding:22px 20px 24px; justify-content:flex-end; transition:flex-grow .6s var(--tt-ease); }
.tt-apps--panels .tt-app__ic,.tt-apps--panels .tt-app > p{ display:none; }
.tt-apps--panels .tt-app h3{ font-size:1.08rem; line-height:1.4; }
.tt-apps--panels .tt-app:first-child{ flex-grow:2.3; }
.tt-apps--panels:hover .tt-app{ flex-grow:1; }
.tt-apps--panels .tt-app:hover{ flex-grow:2.3; }
@media (max-width:860px){
  .tt-apps--panels{ display:grid; grid-template-columns:1fr 1fr; height:auto; gap:12px; }
  .tt-apps--panels .tt-app{ min-height:220px; }
  .tt-apps--panels .tt-app:last-child{ grid-column:1 / -1; }
}
@media (max-width:560px){ .tt-apps--panels{ grid-template-columns:1fr; } .tt-apps--panels .tt-app:last-child{ grid-column:auto; } }
@media (prefers-reduced-motion:reduce){ .tt-apps--panels .tt-app{ transition:none; } }
.tt-apps--panels .tt-app:nth-child(4) .tt-app__bg{ object-position:68% 50%; }
.tt-apps--panels .tt-app:nth-child(5) .tt-app__bg{ object-position:88% 50%; }

/* 2026-10-13: clear-photo look for the remaining overlay application cards (default / grid / bento / strip):
   photo on top, red rule, text on white, no navy overlay — same look as tall / rows / industries.
   `panels` (homepage) keeps its full-bleed overlay. */
.tt-apps:not(.tt-apps--panels) > .tt-app--photo{ background:#fff; padding:0; gap:0; justify-content:flex-start; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo::before{ content:none; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo > .tt-app__bg{ position:static; inset:auto; z-index:auto; display:block; width:100%; height:auto; aspect-ratio:4 / 3; flex:none; object-fit:cover; border-bottom:3px solid var(--tt-red); transition:none; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo:hover > .tt-app__bg{ transform:none; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo > .tt-app__ic{ display:none; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo > h3{ color:var(--tt-navy); text-shadow:none; padding:18px 22px 8px; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo > p{ color:var(--tt-slate); padding:0 22px 22px; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo:has(> p:empty) > h3{ padding-bottom:22px; }
.tt-apps:not(.tt-apps--panels) > .tt-app--photo > p a{ color:var(--tt-blue-link); text-decoration:underline; text-underline-offset:2px; }
/* bento + strip: one photo ratio so the red rules line up across a row; only the bento lead tile fills its taller cell */
.tt-apps.tt-apps--bento:not(.tt-apps--panels) > .tt-app--photo > .tt-app__bg,.tt-apps.tt-apps--strip:not(.tt-apps--panels) > .tt-app--photo > .tt-app__bg{ aspect-ratio:16 / 10; }
.tt-apps.tt-apps--bento:not(.tt-apps--panels) > .tt-app--photo:first-child > .tt-app__bg{ aspect-ratio:auto; height:0; flex:1 1 auto; min-height:170px; }
.tt-apps--bento > .tt-app--photo,.tt-apps--strip > .tt-app--photo{ border:1px solid var(--tt-line); }
/* 2x2 photo grids (chillers hub, cryocoolers): shorter photo; one column on phones so the text column isn't ~130px wide */
.tt-apps--n4:not(.tt-apps--bento):not(.tt-apps--tall):not(.tt-apps--rows):not(.tt-apps--panels) > .tt-app--photo > .tt-app__bg{ aspect-ratio:16 / 9; }
@media (max-width:560px){
  .tt-apps.tt-apps--n4:not(.tt-apps--bento):not(.tt-apps--tall):not(.tt-apps--rows):has(> .tt-app--photo){ grid-template-columns:1fr; }
}

/* 2026-10-13: ::: sidecard — prose left, one linked photo card right (APD 2000 PRO "Installation and cooling water"); stacks on tablets/phones */
.tt-sidecard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:clamp(28px,4vw,64px); align-items:start; margin-top:1rem; }
.tt-sidecard__txt > p{ margin:0 0 1.2rem; max-width:900px; }
.tt-sidecard__txt > p:last-child{ margin-bottom:0; }
@media (min-width:701px){ .tt-sidecard__txt > p{ text-align:justify; } }
.tt-sidecard .tt-tiles{ display:block; margin-top:0 !important; }
.tt-sidecard .tt-tile{ grid-column:auto; }
@media (max-width:860px){ .tt-sidecard{ grid-template-columns:1fr; } .tt-sidecard .tt-tiles{ max-width:420px; } }

/* 2026-10-13: ::: tiles plain quad — four cards in a row ("other models" sections); 2 per row on tablets, 1 on phones */
.tt-tiles--quad .tt-tile{ grid-column:span 3; }
@media (max-width:900px){ .tt-tiles--quad .tt-tile{ grid-column:span 6; } }
@media (max-width:560px){ .tt-tiles--quad .tt-tile{ grid-column:span 12; } }
.tt-tiles--quad + p{ margin-top:1.6rem; }

/* 2026-10-13: ::: tiles plain duo / solo — 2 or 1 sibling cards (half-width, 16:9 photo); keep 2-up on tablets, 1-up on phones */
.tt-tiles--duo .tt-tile,.tt-tiles--solo .tt-tile{ grid-column:span 6; }
.tt-tiles--duo .tt-tile__img,.tt-tiles--solo .tt-tile__img{ aspect-ratio:16 / 9; }
@media (max-width:560px){ .tt-tiles--duo .tt-tile,.tt-tiles--solo .tt-tile{ grid-column:span 12; } }

/* 2026-10-13: ::: sidecard card = compact horizontal card (photo left, text right) so it no longer towers over a 3-line paragraph (user: "not too spacey"); vertical again on phones */
.tt-sidecard{ grid-template-columns:minmax(0,1fr) minmax(320px,440px); align-items:start; }
.tt-sidecard .tt-tile{ flex-direction:row; align-items:stretch; }
.tt-sidecard .tt-tiles--plain .tt-tile__img{ flex:0 0 40%; aspect-ratio:auto; min-height:150px; }
.tt-sidecard .tt-tiles--plain .tt-tile__body{ padding:16px 18px 18px; justify-content:center; }
.tt-sidecard .tt-tiles--plain .tt-tile h3{ font-size:1.1rem; margin:0 0 6px; }
.tt-sidecard .tt-tiles--plain .tt-tile p{ font-size:.88rem; line-height:1.55; margin:0 0 10px; }
@media (max-width:860px){ .tt-sidecard{ grid-template-columns:1fr; } .tt-sidecard .tt-tiles{ max-width:480px; } }
@media (max-width:560px){
  .tt-sidecard .tt-tile{ flex-direction:column; }
  .tt-sidecard .tt-tiles--plain .tt-tile__img{ flex:none; aspect-ratio:16 / 9; min-height:0; }
  .tt-sidecard .tt-tiles--plain .tt-tile__body{ padding:18px 20px 20px; }
}

/* No-hero page top (2026-11-07): About + Contact start with a light first section that carries the H1 (no navy band). */
.tt-sec--page > h1, .tt-sec--page .tt-media__body > h1{ font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem); margin-bottom:.15em; }
.tt-sec--page > h1:first-child{ margin-top:0; }
.tt-sec--page > h1 + *{ margin-top:.75rem; }
.tt-sec--page > h1 + p{ margin-top:.9rem !important; }
.tt-sec--page > p + p{ margin-top:1rem !important; }
.tt-sec--page > .fluentform{ margin-top:2rem !important; }

/* No-hero pages (About, Contact): light breadcrumb strip, same as the product-top pages (2026-11-07) */
body:has(.tt-sec--page) .tt-breadcrumbs{ background:#fff; border-bottom:1px solid var(--tt-line); }
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb p{ color:var(--tt-muted); }
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb a{ color:var(--tt-muted); }
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb a:hover,
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb a:focus{ color:var(--tt-red); }
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb .separator{ color:var(--tt-muted); }
body:has(.tt-sec--page) .tt-breadcrumbs .rank-math-breadcrumb .last{ color:var(--tt-ink); }

/* About: people cards replace the facts panel (2026-11-07). */
.tt-ov__people{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); align-items:start; }
.tt-person{ margin:0; }
.tt-person__img{ aspect-ratio:4 / 5; overflow:hidden; background:var(--tt-soft); }
.tt-person__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.tt-person__img--ph{ display:grid; place-items:center; background:linear-gradient(160deg,#E7EBF2,#D5DCE8); }
.tt-person__img--ph{ color:#B9C3D4; }
.tt-person__img--ph svg{ width:58%; height:auto; display:block; }
.tt-person figcaption{ border-top:3px solid var(--tt-red); padding-top:12px; display:flex; flex-direction:column; gap:2px; }
.tt-person figcaption b{ font:700 1.0625rem/1.35 var(--tt-display); color:var(--tt-ink); }
.tt-person figcaption span{ font-size:.9375rem; color:var(--tt-slate); }
@media (max-width:900px){ .tt-ov__people{ max-width:520px; } }
@media (max-width:420px){ .tt-ov__people{ gap:12px; } .tt-person figcaption b{ font-size:.9375rem; } }

/* About people: stacked, photo left + text right (2026-11-07) */
.tt-ov__people{ grid-template-columns:1fr; gap:22px; max-width:460px; }
.tt-person{ display:grid; grid-template-columns:minmax(110px,42%) 1fr; gap:20px; align-items:center; }
.tt-person figcaption{ border-top:0; border-left:3px solid var(--tt-red); padding:6px 0 6px 16px; }
@media (max-width:420px){ .tt-person{ gap:14px; } .tt-person figcaption{ padding-left:12px; } }
/* About: vision + mission sit under the H1 in the first section (2026-11-07) */
.tt-sec--page > h1 + .tt-split{ margin-top:1.6rem !important; }
.tt-sec--page > .tt-split + .tt-ov{ margin-top:2.6rem !important; }
/* About: bold Vision / Mission panels (2026-11-07) */
.tt-sec--page > .tt-split{ gap:clamp(14px,2vw,28px); }
.tt-sec--page > .tt-split .tt-split__col{ background:var(--tt-navy); border-top:5px solid var(--tt-red); padding:clamp(24px,3vw,40px); }
.tt-sec--page > .tt-split h3{ margin:0 0 1rem; font:700 1.05rem/1.2 var(--tt-display); color:var(--tt-red-on-navy); }
.tt-sec--page > .tt-split p{ margin:0; color:#fff; font-weight:600; font-size:clamp(1.15rem,.95rem + .85vw,1.6rem); line-height:1.55; max-width:none; }
.tt-sec--page > .tt-split{ align-items:stretch; }
/* About: Vision / Mission redesigned softer (2026-11-07) — light tiles, slim red edge, navy text (overrides the bold navy panels above) */
.tt-sec--page > .tt-split .tt-split__col{ background:var(--tt-soft); border-top:0; border-left:4px solid var(--tt-red); padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,38px); }
.tt-sec--page > .tt-split h3{ margin:0 0 .6rem; font:700 .95rem/1.2 var(--tt-display); color:var(--tt-red); }
.tt-sec--page > .tt-split p{ margin:0; color:var(--tt-navy); font-weight:500; font-size:clamp(1.05rem,.95rem + .4vw,1.25rem); line-height:1.7; }
/* About: shorter Vision / Mission, bolder text (2026-11-07) */
.tt-sec--page > .tt-split p{ font-weight:700; font-size:clamp(1.25rem,1rem + 1vw,1.75rem); line-height:1.5; }
/* About: Vision / Mission text back to normal body size, still bold (2026-11-07) */
.tt-sec--page > .tt-split p{ font-size:1.0625rem; line-height:1.7; font-weight:700; }
/* About: Vision / Mission without boxes, larger headings (2026-11-07) */
.tt-sec--page > .tt-split .tt-split__col{ background:none; border:0; padding:0; }
.tt-sec--page > .tt-split h3{ font:700 clamp(1.6rem,1.2rem + 1.6vw,2.4rem)/1.2 var(--tt-display); margin:0 0 .5rem; color:var(--tt-red); }
.tt-sec--page > .tt-split + .tt-ov{ margin-top:2.2rem !important; }

/* 2026-11-07 About: three-item split (Since 2008 / Vision / Mission) — 3 columns on desktop, stacks <=900px via the existing rule */
@media (min-width:901px){
  .tt-sec--page > .tt-split:has(> .tt-split__col:nth-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tt-sec--page > .tt-split:has(> .tt-split__col:nth-child(3)) h3{ font-size:clamp(1.5rem,1rem + 1.2vw,2.1rem); }
}

/* 2026-11-07 About: wider gap between the three vision/mission columns */
@media (min-width:901px){
  .tt-sec--page > .tt-split:has(> .tt-split__col:nth-child(3)){ gap:clamp(32px,5vw,80px); }
}

/* 2026-11-07 Contact: two columns like qualityreport.co.th/contact — eyebrow + H1 + company/address/phones on the left, compact form on the right */
.tt-contactcol{ margin-top:1.4rem; }
.tt-contactcol .tt-cc-name{ margin:0 0 1rem; font:700 1.15rem/1.4 var(--tt-display); color:var(--tt-navy); max-width:none; }
.tt-contactcol .tt-cc-line{ position:relative; margin:0 0 .9rem; padding-left:2.2rem; font-size:1.0625rem; line-height:1.7; color:var(--tt-navy); max-width:none; text-align:left; }
.tt-contactcol .tt-cc-line::before{ content:""; position:absolute; left:0; top:.3em; width:1.35rem; height:1.35rem; background:var(--tt-red);
  -webkit-mask:var(--cc-icon) center/contain no-repeat; mask:var(--cc-icon) center/contain no-repeat; }
.tt-contactcol .tt-cc-addr{ --cc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.tt-contactcol .tt-cc-tel{ --cc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); margin-bottom:.4rem; }
.tt-contactcol .tt-cc-tel a{ color:var(--tt-navy); font-weight:600; }
@media (min-width:901px){
  .tt-sec--page:has(> .tt-contactcol){ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(40px,6vw,88px); align-items:start; grid-template-rows:auto auto 1fr; }
  .tt-sec--page:has(> .tt-contactcol) > .tt-eyebrow,
  .tt-sec--page:has(> .tt-contactcol) > h1,
  .tt-sec--page:has(> .tt-contactcol) > .tt-contactcol{ grid-column:1; }
  .tt-sec--page:has(> .tt-contactcol) > .fluentform{ grid-column:2; grid-row:1 / span 3; margin-top:0; }
  /* compact form: email + phone and the two selects side by side, everything else full width */
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form fieldset{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; border:0; padding:0; margin:0; min-width:0; }
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form .ff-el-group{ grid-column:1 / -1; margin-bottom:14px; }
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form fieldset > .ff-field_container{ grid-column:1 / -1; margin-bottom:14px; }
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form .ff-el-group:has(input[type=email]),
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form .ff-el-group:has(input[type=tel]),
  .tt-sec--page:has(> .tt-contactcol) .frm-fluent-form .ff-el-group:has(select){ grid-column:auto; }
}

/* 2026-11-07 Contact: full-width map under the two columns */
.tt-map{ margin-top:3.5rem; }
.tt-map iframe{ display:block; width:100%; height:clamp(280px,38vw,420px); border:0; background:var(--tt-soft); }
@media (min-width:901px){ .tt-sec--page:has(> .tt-contactcol) > .tt-map{ grid-column:1 / -1; } }

/* 2026-11-07 Contact: email rows in the left column */
.tt-contactcol .tt-cc-mail{ --cc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4.2l-8 5-8-5V6l8 5 8-5v2.2z'/%3E%3C/svg%3E"); margin-bottom:.4rem; overflow-wrap:anywhere; }
.tt-contactcol .tt-cc-mail a{ color:var(--tt-navy); font-weight:600; }
.tt-contactcol .tt-cc-tel + .tt-cc-mail{ margin-top:1rem; }

/* 2026-11-07 breathing room for a sentence that follows a tiles block (Service page) */
.tt-sec .tt-tiles + p, .tt-sec .tt-tiles + .wp-block-paragraph{ margin-top:2rem; }

/* 2026-11-07 Service page redesign: static (non-clickable) equipment cards */
.tt-tiles--static .tt-tile{ cursor:default; }
.tt-tiles--static .tt-tile:hover{ transform:none; box-shadow:none; }
.tt-tiles--static .tt-tile:hover .tt-tile__img img{ transform:none; }

/* 2026-11-07 Service page: six-card bento = 3x2 equal photo cards, numbered 01-06 (datasheet feel) */
.tt-apps--bento.tt-apps--n6{ grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:ttsvc; }
.tt-apps.tt-apps--bento.tt-apps--n6:not(.tt-apps--panels) > .tt-app--photo:first-child > .tt-app__bg{ aspect-ratio:16 / 10; height:auto; flex:0 0 auto; min-height:0; }
.tt-apps--bento.tt-apps--n6 .tt-app--photo h3::before{ counter-increment:ttsvc; content:counter(ttsvc,decimal-leading-zero); display:block; margin-bottom:.35rem; font:600 .85rem/1 var(--tt-display); color:var(--tt-red); }
@media (max-width:900px){ .tt-apps--bento.tt-apps--n6{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tt-apps--bento.tt-apps--n6{ grid-template-columns:1fr; } }

/* back-to-top button (2026-11-07). Backup: style.css.pre-totop.bak */
.tt-totop{ position:fixed; right:20px; bottom:24px; z-index:49; width:48px; height:48px; padding:0; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:var(--tt-navy); color:#fff; cursor:pointer; box-shadow:0 4px 14px rgba(7,27,58,.28);
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s, background .15s; }
.tt-totop[hidden]{ display:none; }
.tt-totop.is-on{ opacity:1; transform:none; }
.tt-totop:hover{ background:var(--tt-red); }
.tt-totop:focus-visible{ outline:3px solid var(--tt-red); outline-offset:3px; }
@media (max-width:900px){ .tt-totop{ right:14px; bottom:calc(56px + env(safe-area-inset-bottom) + 14px); width:44px; height:44px; } }
@media (prefers-reduced-motion:reduce){ .tt-totop{ transition:none; } }
@media print{ .tt-totop{ display:none !important; } }

/* flags that are real image files (Spain, with coat of arms) get the same hairline frame as the inline-SVG flags (2026-11-07). Backup: style.css.pre-esflag.bak */
.tt-origin img{ display:block; width:100%; height:auto; aspect-ratio:3/2; box-shadow:0 0 0 1px #C9D1DE; }

/* ==========================================================================
 * 2026-11-07 heading order (audit): the first section of :nohero: pages and the footer column titles are now <h2>.
 * Each rule re-states the final h3 look so nothing changes visually (verified by computed-style diff).
 * ========================================================================== */
.tt-card h2{ margin:0; font-size:1.12rem; font-weight:700; }
.tt-sec--page > .tt-split h2{ font:700 clamp(1.6rem,1.2rem + 1.6vw,2.4rem)/1.2 var(--tt-display); margin:0 0 .5rem; color:var(--tt-red); }
@media (min-width:901px){
  .tt-sec--page > .tt-split:has(> .tt-split__col:nth-child(3)) h2{ font-size:clamp(1.5rem,1rem + 1.2vw,2.1rem); }
}
/* text sub-headings directly inside the page-top section (privacy notice) */
.tt-hero-page .entry-content .tt-sec--page > h2{ font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem); margin:2.2rem 0 .4rem; color:var(--tt-navy); }
.tt-hero-page .entry-content .tt-sec--page > h2 + p, .tt-hero-page .entry-content .tt-sec--page > h2 + ul{ margin-top:.4rem; }
.tt-hero-page .entry-content .tt-sec--page > ul{ margin:.6rem 0 1rem 1.2rem; padding:0; }
.tt-hero-page .entry-content .tt-sec--page > ul li{ margin:.25rem 0; }
.tt-hero-page .entry-content .tt-sec--page > p + p, .tt-hero-page .entry-content .tt-sec--page > ul + p{ margin-top:.9rem; }

/* footer bottom bar: © left, privacy link right */
.tt-footer__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 24px; }
.tt-footer__bar a.tt-footer__legal{ display:inline-block; margin:0; padding:6px 0; color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* 2026-11-08 Contact route (impeccable critique 2026-11-07): 44px tap targets for phone/email links and a full-width submit on phones */
@media (max-width:900px){
  .tt-contactcol .tt-cc-tel a,.tt-contactcol .tt-cc-mail a{ display:inline-flex; align-items:center; min-height:44px; }
  .tt-contactcol .tt-cc-tel,.tt-contactcol .tt-cc-mail{ margin-bottom:.15rem; }
  .tt-contactcol .tt-cc-tel::before,.tt-contactcol .tt-cc-mail::before{ top:calc(22px - .675rem); }   /* centre the icon on the 44px row */
}
@media (max-width:600px){
  .tt-sec--page:has(> .tt-contactcol) .fluentform .ff-btn-submit{ width:100%; }
}

/* 2026-11-08 Service page (impeccable critique 2026-11-07): non-clickable "equipment we service" cards must not look clickable —
   flat white card with a hairline outline instead of the red top bar + lifted shadow used by linked product tiles */
.tt-tiles--static .tt-tile{ border:1px solid var(--tt-line); border-top:1px solid var(--tt-line); box-shadow:none; }
.tt-tiles--static .tt-tile::after{ display:none; }
.tt-tiles--static .tt-tile:hover h3{ color:inherit; }
/* 2026-11-08 phone numbers in running text never break across lines */
.tt-sec a[href^="tel:"]{ white-space:nowrap; }

/* 2026-11-08 typography (impeccable re-critique): Thai text is never letter-spaced (DESIGN.md "Plain Case Rule" — spaced Thai reads
   "ร ะ บ บ"); the narrow English home sector panels hyphenate long words ("Petro-chemicals") instead of cutting them mid-letter */
:lang(th) .tt-origin span, :lang(th) .tt-pstat span, :lang(th) .tt-bstats span, :lang(th) .tt-fact__k, :lang(th) .tt-pcard__auth,
:lang(th) .tt-pchip, :lang(th) .tt-pcard__stats span, :lang(th) .tt-sci__lawk, :lang(th) .tt-sci__boxk, :lang(th) .tt-sci__angle{ letter-spacing:0; }
:lang(en) .tt-apps--panels .tt-app{ padding-inline:16px; }
:lang(en) .tt-apps--panels .tt-app h3{ font-size:.9rem; }   /* longest words ("Petrochemicals", "Manufacturing") now fit the 127px collapsed panel */
@media (min-width:861px) and (max-width:1100px){   /* panels get too narrow for any label: use the existing 2-column tablet layout up to 1100px */
  .tt-apps--panels{ display:grid; grid-template-columns:1fr 1fr; height:auto; gap:12px; }
  .tt-apps--panels .tt-app{ min-height:220px; }
  .tt-apps--panels .tt-app:last-child{ grid-column:1 / -1; }
}

/* 2026-11-08 phone layout (impeccable re-critique): brand wall, footer links, carousel dots */
/* brand wall: items were content-box, so 162px + 8px padding never fit two per row in 342px -> one logo per row (1,054px). border-box gives the 2/3 columns the rules already ask for. Phones only: desktop layout is unchanged. */
@media (max-width:700px){ .tt-brandwall__item{ box-sizing:border-box; } }
/* footer links: 44px touch rows on touch-size screens (were 26px) */
@media (max-width:900px){
  .tt-footer a{ display:flex; align-items:center; box-sizing:border-box; min-height:44px; margin-bottom:0; }
}
/* carousel dots: 44px-tall touch targets, painted dot unchanged (12px; active 34px) */
.tt-car__dots{ gap:0; margin-block:-16px; }
.tt-car__dot{ width:26px; height:44px; background:none; display:flex; align-items:center; justify-content:center; transition:width .3s var(--tt-ease); }
.tt-car__dot::before{ content:""; display:block; width:12px; height:12px; border-radius:6px; background:rgba(7,27,58,.2); transition:width .3s var(--tt-ease), background-color .3s var(--tt-ease); }
.tt-car__dot.is-active{ width:46px; background:none; }
.tt-car__dot.is-active::before{ width:34px; background:var(--tt-navy); }
.tt-car__dot::after{ inset:0; }
@media (prefers-reduced-motion:reduce){ .tt-car__dot,.tt-car__dot::before{ transition:none; } }
@media (max-width:900px){ body.tt-cta-in-view .tt-mbar .tt-mbar__quote{ display:none; } }

/* 2026-11-08 product page on phones (impeccable re-critique): photo directly under the title, THEN the quote/spec-sheet buttons, then the long lead
   (was logo/title -> buttons -> ~10-line lead -> photo, so the machine was below the fold). display:contents lets the text block's children and the photo share one flex column. */
@media (max-width:860px){
  .tt-prod__grid{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .tt-prod__text{ display:contents; }
  .tt-prod__text > h1{ order:1; }
  .tt-prod__grid > .tt-prod__photo{ order:2; margin:18px 0 4px; }
  .tt-prod__text > .wp-block-buttons{ order:3; }
  .tt-prod__text > .tt-lead{ order:4; }
}