/* =====================================================================================================
   ConstruBIM Template v1 (template.css) — the home page's design language, for EVERY page.
   Loaded LAST in <head> on every page. Palette, type, hero and components come from the home page (newsroom.css).
   Page authors: use the .tp-* components below (see TEMPLATE.md). Old pages are brought in line by layers 1-4.
   Opt out of the serif headline on one element with class="tp-keep".
   ===================================================================================================== */

/* 1. Tokens: the home page palette. theme-apple.css variables are re-pointed so every page that uses them follows. */
:root{
  --tp-ink:#0e1116; --tp-paper:#faf9f6; --tp-paper2:#f2f0ea; --tp-line:#e2dfd6; --tp-mute:#6b6f76;
  --tp-accent:#0066cc; --tp-cyan:#2ed8ff; --tp-red:#d9482b; --tp-night:#06080c;
  --tp-serif:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --tp-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --tp-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --tp-ease:cubic-bezier(.2,.7,.1,1);
  --tp-night-bg:radial-gradient(1100px 760px at 68% 62%,#11203a 0%,#0a1220 38%,#06080c 72%);
  /* theme-apple.css */
  --bg:#faf9f6; --ink:#0e1116; --muted:#6b6f76; --line:#e2dfd6; --gray:#f2f0ea; --card:rgba(255,255,255,.92);
  --shadow:0 18px 50px rgba(14,17,22,.07); --radius:16px; --accent:#0066cc;
  --h1:clamp(46px,6.6vw,92px); --h2:clamp(32px,4.6vw,56px); --lead:clamp(17px,1.7vw,20px);
}
html{ background:var(--tp-paper) !important; }
body{ background:var(--tp-paper) !important; color:var(--tp-ink); font-family:var(--tp-sans); }

/* 2. Type: serif display headlines, as on the home page. Header, footer and widgets are left alone. */
body :is(h1,h2):not(.tp-keep):not(#site-header *):not(#site-footer *):not(.cb-chat-section *):not(.cb-panel *){
  font-family:var(--tp-serif) !important; font-weight:400 !important; letter-spacing:-.02em !important; text-wrap:balance;
}
body :is(h1):not(.tp-keep):not(#site-header *):not(#site-footer *):not(.cb-panel *){
  line-height:.98 !important; font-size:clamp(46px,6.4vw,96px) !important;
}
body :is(h2):not(.tp-keep):not(#site-header *):not(#site-footer *):not(.cb-panel *){ line-height:1.04 !important; font-size:clamp(34px,4.4vw,60px) !important; }
body :is(h2):not(.tp-keep) b, body :is(h1):not(.tp-keep) b, body :is(h1,h2):not(.tp-keep) strong{ font-weight:400 !important; }
/* smaller h1/h2 used inside cards, forms and side panels stay readable */
body :is(.card,.cs-card,.rq-card,.q-card,.faq,details,aside,form) :is(h1,h2):not(.tp-keep){ font-size:clamp(24px,2.4vw,34px) !important; line-height:1.1 !important; }
html:lang(ar) body :is(h1,h2):not(.tp-keep), html:lang(zh) body :is(h1,h2):not(.tp-keep), html:lang(ja) body :is(h1,h2):not(.tp-keep), html:lang(ko) body :is(h1,h2):not(.tp-keep){
  letter-spacing:0 !important; line-height:1.15 !important; }

/* 3. Hero: every page opens like the home page. 'night' = the navy studio hero, 'paper' = the cream hero. */
.tp-hero{ position:relative; isolation:isolate; }
.tp-hero--night{ background:var(--tp-night-bg) !important; color:#fff !important; border:0 !important; }
.tp-hero--night::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(120,170,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 66% 58%,#000 20%,transparent 78%); mask-image:radial-gradient(ellipse 70% 80% at 66% 58%,#000 20%,transparent 78%); }
.tp-hero--night h1{ color:#fff !important; }   /* only the headline: the page's own text colours already suit its hero (cards inside heroes stay as designed) */
.tp-hero--paper{ background:var(--tp-paper) !important; background-image:none !important; border-bottom:1px solid var(--tp-line) !important; color:var(--tp-ink); }
.tp-hero--paper h1{ color:var(--tp-ink) !important; }
.tp-hero :is(.eyebrow,.kicker,.tag,.pre,[class$="-eyebrow"],[class$="-kicker"],[class$="-eb"]){
  font-size:12px !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; }

/* 4. Body sections and shared parts follow the paper palette. */
.section--gray,.gray,section.gray,.home-sec.gray,.s-alt{ background:var(--tp-paper2) !important; border-color:var(--tp-line) !important; }
main.svc-page,main.ct-page,.q-page,main.bl{ background:var(--tp-paper) !important; }   /* page wrappers with a hard-coded grey follow the paper palette */
.btn,.btn.primary{ border-radius:999px; }
.card,.cs-card{ border-color:var(--tp-line); border-radius:16px; }
::selection{ background:var(--tp-ink); color:var(--tp-paper); }

/* =====================================================================================================
   TEMPLATE COMPONENTS (for new pages; same look as the home page)
   ===================================================================================================== */
.tp-wrap{ max-width:1320px; margin:0 auto; padding:0 28px; }
.tp-narrow{ max-width:820px; margin:0 auto; padding:0 28px; }

/* Hero */
.tp-hero-in{ position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:clamp(56px,9vh,120px) 28px clamp(56px,8vh,96px); }
.tp-meta{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 26px; }
.tp-hero--paper .tp-meta{ color:var(--tp-mute); }
.tp-meta .tp-dot{ width:7px; height:7px; border-radius:50%; background:var(--tp-cyan); box-shadow:0 0 0 0 rgba(46,216,255,.6); animation:tpPulse 2.4s infinite; }
.tp-hero--paper .tp-meta .tp-dot{ background:var(--tp-red); }
@keyframes tpPulse{ 0%{box-shadow:0 0 0 0 rgba(46,216,255,.55)} 70%{box-shadow:0 0 0 12px rgba(46,216,255,0)} 100%{box-shadow:0 0 0 0 rgba(46,216,255,0)} }
.tp-title{ font-family:var(--tp-serif); font-weight:400; font-size:clamp(52px,8vw,128px); line-height:.92; letter-spacing:-.025em; margin:0; max-width:12ch; text-wrap:balance; }
.tp-lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:52ch; margin:26px 0 0; }
.tp-hero--night .tp-lead{ color:rgba(255,255,255,.74); } .tp-hero--paper .tp-lead{ color:#3b3f46; }
.tp-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
.tp-stats{ display:flex; flex-wrap:wrap; gap:18px clamp(22px,4vw,54px); margin:38px 0 0; }
.tp-stat b{ display:block; font-family:var(--tp-serif); font-weight:400; font-size:clamp(38px,4vw,56px); line-height:1; letter-spacing:-.02em; }
.tp-stat span{ display:block; margin-top:6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tp-mute); }
.tp-hero--night .tp-stat span{ color:rgba(255,255,255,.55); }

/* Buttons */
.tp-btn{ display:inline-flex; align-items:center; gap:10px; font:600 14px/1 var(--tp-sans); padding:14px 22px; border-radius:999px; border:1px solid var(--tp-ink); background:var(--tp-ink); color:var(--tp-paper); cursor:pointer; transition:transform .2s var(--tp-ease),background .2s; }
.tp-btn:hover{ transform:translateY(-1px); }
.tp-btn--blue{ background:var(--tp-accent); border-color:var(--tp-accent); color:#fff; }
.tp-btn--ghost{ background:transparent; color:inherit; border-color:currentColor; }
.tp-hero--night .tp-btn{ background:#fff; border-color:#fff; color:var(--tp-ink); }
.tp-hero--night .tp-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.tp-link{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--tp-ink); }
.tp-link::after{ content:"→"; transition:transform .3s var(--tp-ease); } .tp-link:hover::after{ transform:translateX(5px); }

/* Chip bar (like the home page's Top stories / BIM / ... bar) */
.tp-bar{ position:sticky; top:var(--cb-nav-h,74px); z-index:40; background:rgba(250,249,246,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--tp-line); }
.tp-bar-in{ max-width:1320px; margin:0 auto; padding:10px 28px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.tp-bar a{ white-space:nowrap; font-size:14px; font-weight:500; padding:8px 13px; border-radius:999px; color:var(--tp-ink); }
.tp-bar a:hover{ background:var(--tp-paper2); } .tp-bar a.on{ background:var(--tp-ink); color:var(--tp-paper); }

/* Sections */
.tp-sec{ padding:clamp(56px,7vw,104px) 0; background:var(--tp-paper); }
.tp-sec--alt{ background:var(--tp-paper2); }
.tp-sec--night{ background:var(--tp-night-bg); color:#fff; }
.tp-kicker{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tp-accent); margin:0 0 12px; }
.tp-h{ font-family:var(--tp-serif); font-weight:400; font-size:clamp(34px,4.4vw,60px); line-height:1.04; letter-spacing:-.02em; margin:0; text-wrap:balance; color:var(--tp-ink); }
.tp-sec--night .tp-h{ color:#fff; }
.tp-dek{ font-size:16px; line-height:1.6; color:#3b3f46; margin:14px 0 0; max-width:62ch; }
.tp-sec--night .tp-dek{ color:rgba(255,255,255,.72); }
.tp-rule{ border:0; border-top:2px solid var(--tp-ink); margin:0 0 14px; }

/* Cards and grids */
.tp-grid{ display:grid; gap:34px 28px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.tp-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tp-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tp-card{ min-width:0; }
.tp-card .tp-img{ display:block; aspect-ratio:3/2; overflow:hidden; border-radius:14px; background:var(--tp-paper2); margin-bottom:18px; }
.tp-card .tp-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--tp-ease); }
.tp-card:hover .tp-img img{ transform:scale(1.03); }
.tp-card h3{ font-family:var(--tp-serif); font-weight:400; font-size:clamp(24px,2.2vw,30px); line-height:1.1; letter-spacing:-.015em; margin:0; }
.tp-card p{ font-size:14.5px; line-height:1.55; color:#3b3f46; margin:10px 0 0; }
.tp-by{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tp-mute); margin-top:14px; }

/* Numbered list (like the home page's Latest rail) */
.tp-list{ list-style:none; margin:0; padding:0; counter-reset:tp; border-top:2px solid var(--tp-ink); }
.tp-list li{ border-bottom:1px solid var(--tp-line); counter-increment:tp; display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 12px; padding:15px 0; }
.tp-list li::before{ content:counter(tp,decimal-leading-zero); grid-row:span 2; font-family:var(--tp-serif); font-size:30px; line-height:.95; color:#c9c5ba; }
.tp-list b{ font-size:15.5px; font-weight:600; line-height:1.3; }
.tp-list span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tp-mute); }

/* Call to action band */
.tp-cta{ background:var(--tp-night-bg); color:#fff; text-align:center; padding:clamp(64px,8vw,112px) 28px; }
.tp-cta .tp-h{ color:#fff; max-width:18ch; margin:0 auto; }
.tp-cta .tp-actions{ justify-content:center; }

@media (max-width:900px){ .tp-grid,.tp-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tp-wrap,.tp-narrow,.tp-hero-in{ padding-left:16px; padding-right:16px; } .tp-grid,.tp-grid--2,.tp-grid--4{ grid-template-columns:1fr; } .tp-bar-in{ padding:8px 16px; } }
@media (prefers-reduced-motion:reduce){ .tp-meta .tp-dot{ animation:none; } .tp-btn,.tp-card .tp-img img{ transition:none; } }

/* 5. Section colours (classes added by js/template.js to full-width blocks): white -> paper, light grey -> paper2, charcoal -> night */
.tp-bg-paper{ background:var(--tp-paper) !important; }
.tp-bg-paper2{ background:var(--tp-paper2) !important; }
.tp-bg-night{ background:var(--tp-night-bg) !important; }