/* ==========================================================================
   NOBLE GROUP — 2026
   Ported from the approved mockup v2 (Apple / Tesla register).
   CSS is byte-identical to the mockup that passed 29/29 WCAG contrast checks
   at 1440 / 1024 / 390. Do not "tidy" the tokens without re-running the probe.

   Design decisions of note:
   - No webfonts. The old site blocked rendering on 3 Google font families.
   - Two accent tokens: the bright accent only ever sits on dark (6.8:1).
     On light surfaces and as a button fill it swaps to the darkened token,
     because white-on-bright-orange measures 2.85:1 and fails WCAG AA.
   ========================================================================== */

:root{
  /* surfaces */
  --black:#000000;
  --ink:#0b0b0c;
  --ink-2:#161617;
  --white:#ffffff;
  --grey:#f5f5f7;

  /* type on light */
  --t1:#1d1d1f;            /* 16.1:1 on white */
  --t2:#5a5a5f;            /* secondary — passes on white AND on #f5f5f7 */

  /* type on dark */
  --d1:#f5f5f7;            /* 17.4:1 on --ink */
  --d2:#a1a1a6;            /* secondary on dark */

  /* accent — see the contrast note above */
  --signal:#ff6a3d;        /* dark surfaces only: 6.8:1 on --ink */
  --signal-ink:#c2410c;    /* light surfaces + fills: white on it 5.2:1 */

  --line-l:rgba(0,0,0,.10);
  --line-d:rgba(255,255,255,.14);

  --gut:clamp(20px,4.4vw,56px);
  --maxw:1160px;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:6px;
  --nav-h:52px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--t1);
  font-family:"Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--signal);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.wide{max-width:1440px;margin:0 auto;padding:0 var(--gut);width:100%}

/* ================= global nav ================= */
.gnav{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-l);
}
.gnav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.gnav-links{display:flex;gap:clamp(16px,2.4vw,34px);font-size:.82rem;color:var(--t1);opacity:.86}
.gnav-links a{display:inline-flex;align-items:center;min-height:44px;transition:opacity .3s var(--ease);white-space:nowrap}
/* The logo widened the centre grid column, so the nav needs to compact before
   its labels wrap. nowrap above guarantees a label never splits across lines. */
@media(max-width:1180px){.gnav-links{gap:clamp(12px,1.5vw,20px);font-size:.78rem}}
.gnav-links a:hover{opacity:1}
/* Nested menu items — currently Archive under Company. The submenu stays in the
   DOM at all times, so a screen reader reaches those links normally and there is
   no state to keep in sync; it is revealed on pointer hover or keyboard focus
   within. No JavaScript, and therefore nothing to break. */
.gnav-item{position:relative;display:inline-flex;align-items:center}
.gnav-parent{display:inline-flex;align-items:center;gap:7px}
.gnav-caret{
  width:5px;height:5px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.72;
  transition:transform .28s var(--ease),opacity .28s var(--ease);
}
.has-sub:hover .gnav-caret,.has-sub:focus-within .gnav-caret{transform:rotate(225deg) translate(-1px,-1px);opacity:1}
.gnav-sub{
  position:absolute;top:100%;left:50%;z-index:130;
  display:flex;flex-direction:column;min-width:184px;padding:8px;
  background:rgba(10,10,11,.96);border:1px solid var(--line-d);border-radius:10px;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.72);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);
}
.has-sub:hover .gnav-sub,.has-sub:focus-within .gnav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.gnav-sub a{padding:10px 12px;border-radius:7px;min-height:0;color:var(--d1);opacity:1}
.gnav-sub a:hover,.gnav-sub a:focus-visible{background:rgba(245,245,247,.10);opacity:1}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:.95rem;letter-spacing:-.03em;color:var(--t1)}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--signal-ink);display:block;flex:none}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--t1);margin:4px auto;transition:transform .35s var(--ease),opacity .3s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.sheet{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:119;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-l);
  display:none;flex-direction:column;padding:12px var(--gut) 26px;
  transform:translateY(-8px);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sheet a{padding:15px 0;border-bottom:1px solid var(--line-l);font-size:1.06rem}
/* A nested item in the mobile sheet is indented, since a hover dropdown is not
   a thing at this width. */
.sheet .sheet-sub{padding-left:20px;font-size:.98rem;color:var(--t2)}
body.menu-open .sheet{display:flex;opacity:1;transform:none}
@media(max-width:820px){
  .gnav-links{display:none}
  .burger{display:block}
}
@media(min-width:821px){.sheet{display:none!important}}

/* ================= local sticky bar ================= */
.lnav{
  position:sticky;top:0;z-index:110;margin-top:var(--nav-h);height:52px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.lnav.stuck{border-bottom-color:var(--line-l)}
.lnav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:52px}
.lnav-title{font-weight:600;font-size:1.02rem;letter-spacing:-.025em}
.lnav-links{display:flex;gap:22px;font-size:.82rem;color:var(--t2)}
.lnav-links a{display:inline-flex;align-items:center;min-height:44px;transition:color .3s var(--ease)}
.lnav-links a:hover{color:var(--t1)}
@media(max-width:820px){.lnav-links{display:none}}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  min-height:44px;
  padding:12px 24px;border-radius:4px;font:inherit;font-size:.9rem;font-weight:500;
  background:var(--signal-ink);color:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(194,65,12,.6)}
.btn-ghost{background:transparent;color:var(--t1);border:1px solid var(--line-l)}
.btn-ghost:hover{background:rgba(0,0,0,.04);box-shadow:none}
.on-dark .btn-ghost{color:var(--d1);border-color:var(--line-d)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.09)}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--signal-ink);font-size:.93rem;font-weight:500}
.on-dark .link{color:var(--signal)}
.link .arw{transition:transform .3s var(--ease)}
.link:hover .arw{transform:translateX(3px)}

/* ================= motion ================= */
.js .fx{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .95s var(--ease)}
.js .fx.in{opacity:1;transform:none}
.js .zoom{opacity:0;transform:scale(.97);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .zoom.in{opacity:1;transform:none}
/* The reveal needs a clipping box, but the font's content area is ~1.33em —
   taller than the 1.02 line box this display setting deliberately uses. A plain
   overflow:hidden therefore shears ~0.155em off the top and bottom of every
   glyph, which cut the descender of "Digital" and the comma and let the next
   heading's ascenders start immediately below, reading as overlapping text.
   Pad the clip box out to the font's real height and pull it back with negative
   margin, so the rendered line rhythm is byte-for-byte what it was. */
.js .wl{display:block;overflow:hidden;padding:.18em 0;margin:-.18em 0}
/* Sibling negative margins collapse to the most negative, so the inter-heading
   compensation has to be stated as the sum, not left to collapse. */
.js .wl + .wl{margin-top:-.36em}
/* The clip box is now taller, so the span must travel further to stay out of
   sight before the reveal. 155% of a 1.02em box clears a 1.38em clip box plus
   the 0.155em glyph overshoot above the span. */
.js .wl > span{display:block;transform:translateY(155%);transition:transform 1.1s var(--ease)}
.wl.go > span{transform:none}
.fx[data-d="1"],.zoom[data-d="1"]{transition-delay:.07s}
.fx[data-d="2"],.zoom[data-d="2"]{transition-delay:.14s}
.fx[data-d="3"]{transition-delay:.21s}
.fx[data-d="4"]{transition-delay:.28s}
.fx[data-d="5"]{transition-delay:.35s}

/* ================= hero ================= */
.hero{
  min-height:min(92svh,860px);display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:clamp(64px,9vw,110px) 0 clamp(48px,6vw,80px);
  background:var(--white);position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:min(1100px,120vw);height:min(680px,80vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,106,61,.13),rgba(255,106,61,0) 62%);
}
.hero-in{position:relative;z-index:2}
.hero h1{
  font-size:clamp(2.4rem,7.6vw,5.6rem);font-weight:600;letter-spacing:-.045em;line-height:1.02;
  max-width:19ch;margin:0 auto;
}
.hero h1 em{font-style:normal;color:var(--signal-ink)}
.hero-sub{margin:26px auto 0;max-width:52ch;color:var(--t2);font-size:clamp(1.02rem,1.6vw,1.24rem);line-height:1.5}
.hero-art{
  position:relative;z-index:2;margin:clamp(38px,5vw,58px) auto 0;max-width:940px;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-l);
  background:
    radial-gradient(120% 90% at 15% 10%,rgba(255,106,61,.16),transparent 55%),
    radial-gradient(100% 80% at 85% 90%,rgba(29,29,31,.10),transparent 58%),
    linear-gradient(180deg,#fbfbfd,#ececed);
  aspect-ratio:16/8;display:grid;place-items:center;
}
.hero-art .mock{display:grid;gap:10px;width:min(74%,560px)}
.mock-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mock-cell{height:52px;border-radius:10px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.07);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mock-cell.wide{grid-column:span 2}
.mock-cell.dark{background:var(--ink);border-color:var(--ink)}
.mock-cell.sig{background:var(--signal);border-color:var(--signal)}
.mock-bars{display:grid;gap:7px;margin-top:6px}
.mock-bars i{display:block;height:8px;border-radius:4px;background:rgba(29,29,31,.16)}
.mock-bars i:nth-child(1){width:82%}
.mock-bars i:nth-child(2){width:64%}
.mock-bars i:nth-child(3){width:44%}
.hero-note{position:relative;z-index:2;margin-top:22px;color:var(--t2);font-size:.8rem}

/* ================= sections ================= */
.sec{padding:clamp(76px,11vw,132px) 0}
.sec-grey{background:var(--grey)}
.sec-dark{background:var(--ink);color:var(--d1)}
.on-dark h2,.on-dark h3,.on-dark h4{color:var(--d1)}
.on-dark p{color:var(--d2)}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--signal-ink)}
.on-dark .eyebrow{color:var(--signal)}
h2{font-size:clamp(1.85rem,4.8vw,3.3rem);letter-spacing:-.035em}
.lead{color:var(--t2);max-width:60ch;font-size:clamp(1rem,1.4vw,1.13rem);margin-top:18px}
.on-dark .lead{color:var(--d2)}
.head-center{text-align:center;max-width:760px;margin:0 auto}
.head-center .lead{margin-left:auto;margin-right:auto}

/* ================= bento grid ================= */
.bento{display:grid;gap:14px;margin-top:clamp(40px,6vw,64px);grid-template-columns:repeat(6,1fr)}
.tile{
  border-radius:var(--r);padding:clamp(24px,2.6vw,34px);
  background:var(--white);border:1px solid var(--line-l);
  display:flex;flex-direction:column;justify-content:space-between;min-height:250px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 54px -26px rgba(0,0,0,.34)}
.tile h3{font-size:clamp(1.1rem,1.7vw,1.4rem);margin-bottom:10px}
.tile p{color:var(--t2);font-size:.92rem}
.tile .k{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t2);margin-bottom:14px}
.t-a{grid-column:span 4}
.t-b{grid-column:span 2;background:var(--ink);border-color:var(--ink);color:var(--d1)}
/* .t-b is a dark tile sitting inside a light bento, so it needs the dark-surface
   tokens. `.tile .k` and `.tile p` set the light token explicitly, which left
   the kicker at 2.86:1 against --ink. Inside .on-dark this tile inverts to
   white, and the more specific `.on-dark .tile.t-b` rules still win there. */
.t-b .k,.t-b p{color:var(--d2)}
.t-c{grid-column:span 2}
.t-d{grid-column:span 2}
.t-e{grid-column:span 2;background:linear-gradient(150deg,rgba(255,106,61,.16),rgba(255,106,61,.03));border-color:rgba(255,106,61,.34)}
/* The fourth numbered capability. It spans all six columns on purpose: the two
   rows above already fill the grid exactly (4+2, then 2+2+2), so the only way
   to add a tile without re-spanning and re-flowing the approved layout is to
   give the new one its own row. It reads as a closing band for the bento. */
.t-f{grid-column:span 6}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-a{grid-column:span 2}.t-b{grid-column:span 2}
  .t-c,.t-d,.t-e{grid-column:span 1}
  /* span 1, not 2: at two columns this pairs with .t-e and closes the
     half-empty row that .t-e used to sit alone in. No existing tile moves. */
  .t-f{grid-column:span 1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .t-a,.t-b,.t-c,.t-d,.t-e{grid-column:span 1}
  .t-f{grid-column:span 1}
}

/* ================= product rows (Apple register) ================= */
.row{display:grid;gap:clamp(26px,4vw,60px);align-items:center;grid-template-columns:1fr}
.row + .row{margin-top:clamp(64px,9vw,116px)}
.row-visual{
  border-radius:var(--r);border:1px solid var(--line-l);overflow:hidden;
  aspect-ratio:16/9;position:relative;
  background:linear-gradient(180deg,#fbfbfd,#e9e9ea);
}
.row-visual .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:44px 44px}
.row-visual .pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:4px;padding:11px 20px;font-size:.82rem;color:var(--t2);box-shadow:0 12px 34px -14px rgba(0,0,0,.3);white-space:nowrap}
.row-visual .chip{position:absolute;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 26px -14px rgba(0,0,0,.28)}
.row-visual .chip.a{width:34%;height:22%;left:8%;top:14%}
.row-visual .chip.b{width:26%;height:34%;right:9%;bottom:13%;background:var(--ink);border-color:var(--ink)}
.row-visual .chip.c{width:20%;height:15%;left:12%;bottom:18%;background:var(--signal);border-color:var(--signal)}
@media(min-width:860px){
  .row{grid-template-columns:1fr 1fr}
  .row.rev .row-copy{order:2}
}
.row-num{font-size:.82rem;font-weight:600;color:var(--t2);letter-spacing:.1em}
.row h3{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:14px 0 0}
.row p{color:var(--t2);margin-top:16px;font-size:1rem;max-width:48ch}
.row ul{margin-top:22px;display:grid;gap:9px}
.row ul li{color:var(--t2);font-size:.92rem;padding-left:20px;position:relative}
.row ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--signal-ink)}
.row .link{margin-top:26px}

/* ================= horizontal scroller (Tesla register) ================= */
.scroller{display:flex;gap:16px;overflow-x:auto;padding:34px var(--gut) 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.sc{flex:0 0 min(78vw,340px);scroll-snap-align:start;border-radius:var(--r);padding:30px;background:rgba(255,255,255,.055);border:1px solid var(--line-d);min-height:230px;display:flex;flex-direction:column;justify-content:space-between}
.sc h4{font-size:1.16rem}
.sc p{font-size:.9rem;margin-top:10px}
.sc .k{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--signal)}

/* ================= stats ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:34px;margin-top:clamp(38px,5vw,56px)}
.stat b{display:block;font-size:clamp(2.1rem,5vw,3.4rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.stat span{display:block;color:var(--t2);font-size:.87rem;margin-top:10px}
.on-dark .stat span{color:var(--d2)}

/* ================= steps ================= */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(38px,5vw,58px)}
.stp .n{font-size:.8rem;font-weight:600;color:var(--signal-ink);letter-spacing:.1em}
.stp h4{font-size:1.08rem;margin:12px 0 9px}
.stp p{color:var(--t2);font-size:.92rem}
/* The steps component is also used inside dark sections (services, contact).
   Without these, the numerals measured 3.80:1 and the body copy 2.86:1
   against --ink — both fail WCAG AA. */
.on-dark .stp .n,.sec-dark .stp .n{color:var(--signal)}
.on-dark .stp h4,.sec-dark .stp h4{color:var(--d1)}
.on-dark .stp p,.sec-dark .stp p{color:var(--d2)}

/* ================= CTA ================= */
.cta{text-align:center;padding:clamp(84px,12vw,150px) 0;background:var(--black);color:var(--d1)}
.cta h2{color:var(--d1);max-width:18ch;margin:0 auto}
.cta p{color:var(--d2);max-width:48ch;margin:22px auto 0}
.cta .btns{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.cta .fine{color:var(--d2);font-size:.82rem;margin-top:22px}
/* .cta deliberately has no .on-dark class, so the eyebrow would inherit the
   light-surface accent token: #c2410c on black measures 4.06:1. The bright
   accent is the correct token on a dark surface (7.38:1). */
.cta .eyebrow{color:var(--signal)}
/* Same reasoning as the eyebrow above: .cta is a dark band that carries no
   .on-dark class, so a ghost button inherits --t1 (#1d1d1f) on black = 1.25:1. */
.cta .btn-ghost{color:var(--d1);border-color:var(--line-d)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.09)}

/* ================= footer ================= */
.site-footer{background:var(--grey);border-top:1px solid var(--line-l);padding:60px 0 36px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:34px;margin-bottom:44px}
.f-col h5{font-size:.78rem;font-weight:600;color:var(--t1);margin:0 0 14px;letter-spacing:-.01em}
.f-col a,.f-col p{display:block;color:var(--t2);font-size:.85rem;margin-bottom:9px}
.f-col a:hover{color:var(--t1)}
/* WCAG 2.5.8 (AA) requires 24x24 CSS px; 44 on touch. display:flex rather than
   inline-flex so the links keep stacking vertically inside each column. */
.f-col a,.site-footer .brand{display:flex;align-items:center;min-height:24px}
@media(max-width:820px){.f-col a,.site-footer .brand{min-height:44px}}
.f-legal{border-top:1px solid var(--line-l);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--t2);font-size:.79rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .fx,.js .zoom{opacity:1;transform:none}
  .js .wl > span{transform:none}
}

/* ==========================================================================
   WordPress additions — not present in the static mockup
   ========================================================================== */

/* admin bar offset */
body.admin-bar .gnav{top:32px}
body.admin-bar .sheet{top:calc(var(--nav-h) + 32px)}
@media(max-width:782px){
  body.admin-bar .gnav{top:46px}
  body.admin-bar .sheet{top:calc(var(--nav-h) + 46px)}
}
body.admin-bar .lnav{margin-top:calc(var(--nav-h) + 32px)}
@media(max-width:782px){body.admin-bar .lnav{margin-top:calc(var(--nav-h) + 46px)}}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* ---- editorial shell: pages, posts, archives ---- */
.page-head{padding:calc(var(--nav-h) + clamp(56px,8vw,96px)) 0 clamp(30px,4vw,48px);text-align:center}
.page-head .eyebrow{display:block;margin-bottom:14px}
.page-head h1{font-size:clamp(2rem,5.4vw,3.6rem);max-width:26ch;margin:0 auto;letter-spacing:-.04em}
.page-head .lead{margin-left:auto;margin-right:auto}

.entry{padding-bottom:clamp(64px,9vw,110px)}
.entry-in{max-width:760px;margin:0 auto}

.entry-in p{margin:0 0 1.25em;color:var(--t2);font-size:1.06rem;line-height:1.68}
.entry-in h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2em 0 .7em}
.entry-in h3{font-size:clamp(1.15rem,2vw,1.4rem);margin:1.7em 0 .6em}
.entry-in h4{font-size:1.08rem;margin:1.5em 0 .5em}
.entry-in ul,.entry-in ol{list-style:disc;padding-left:1.3em;margin:0 0 1.25em;color:var(--t2)}
.entry-in ol{list-style:decimal}
.entry-in li{margin-bottom:.5em;font-size:1.02rem}
.entry-in a{color:var(--signal-ink);text-decoration:underline;text-underline-offset:2px}
.entry-in img{border-radius:var(--r);margin:1.6em 0;height:auto}
.entry-in blockquote{border-left:3px solid var(--signal);padding-left:18px;margin:1.5em 0;color:var(--t2);font-style:italic}
.entry-in table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.95rem}
.entry-in th,.entry-in td{border-bottom:1px solid var(--line-l);padding:10px 12px;text-align:left}
.entry-meta{color:var(--t2);font-size:.86rem;margin-top:16px}
.entry-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:26px;color:var(--signal-ink);font-size:.9rem}

/* ---- archive / blog list ---- */
.plist{display:grid;gap:12px;padding-bottom:clamp(56px,8vw,90px)}
.pcard{display:block;border:1px solid var(--line-l);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 20px 48px -26px rgba(0,0,0,.3)}
.pcard h2,.pcard h3{font-size:clamp(1.05rem,1.7vw,1.34rem);letter-spacing:-.028em}
.pcard p{color:var(--t2);font-size:.93rem;margin-top:9px;line-height:1.55}
.pcard .d{color:var(--t2);font-size:.78rem;margin-top:13px;letter-spacing:.05em;text-transform:uppercase}
.pcard .cat{color:var(--signal-ink);font-weight:600}
.pager{display:flex;gap:18px;justify-content:center;padding-bottom:clamp(56px,8vw,90px);color:var(--t2);font-size:.9rem}
.pager a{color:var(--signal-ink)}
.pager a,.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line-l);border-radius:4px;
}
.pager .current{border-color:var(--ink);background:var(--ink);color:var(--d1)}
.empty-note{color:var(--t2);text-align:center;padding:0 0 80px}

/* ==========================================================================
   TESLA PASS — dark-dominant register, centred brand, full-height hero,
   squarer geometry. Added after the mockup was approved.
   Every colour pairing introduced here is re-measured by the ?qa=1 probe;
   none of these values are eyeballed.
   ========================================================================== */

/* ---- centred brand nav, sparse links ---- */
.gnav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.gnav-left{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.gnav-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.gnav-brand{
  font-weight:600;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d1);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
}
/* Logo replaces the wordmark. The artwork is light (--d1) on the dark bar.
   20px tall keeps the centre grid column narrow enough that the nav labels
   stay on one line; the aspect ratio is 999:88. */
.gnav-logo{display:block;height:20px;width:auto;flex:none}
/* Notice on the English-only legal documents. Deliberately bilingual and
   printed at the top of the document rather than in a footnote, because the
   /es/ URL redirects here instead of showing Spanish chrome around English
   legal text. */
.legal-note{
  display:flex;flex-direction:column;gap:4px;
  margin:0 0 28px;padding:14px 18px;
  border-left:3px solid var(--signal-ink);background:#f5f5f7;
  font-size:.94rem;line-height:1.5;
}
.legal-note strong{font-weight:600}
.legal-note [lang="es"]{color:var(--t2)}
/* Language switcher on the dark header bar. Colours come from --d1 (the dark
   surface token) rather than --t1, which would be unreadable here. Width is
   kept deliberately small: the header is a 1fr auto 1fr grid and this sits in
   the right column, so every pixel it takes is a pixel the nav does not get. */
.gnav-lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:40px;padding:0 10px;flex:none;
  color:var(--d1);font-size:.75rem;font-weight:600;letter-spacing:.09em;
  border:1px solid rgba(245,245,247,.34);border-radius:999px;text-decoration:none;
}
.gnav-lang:hover,.gnav-lang:focus-visible{border-color:var(--d1);background:rgba(245,245,247,.10)}
/* The mobile sheet is a light panel, so the pill is re-toned there. This
   selector has to beat `.sheet a`, which sets its own padding and border. */
.sheet .gnav-lang{align-self:flex-start;margin-top:16px;padding:10px 16px;font-size:.86rem;color:var(--t1);border-color:var(--line-l)}
@media(max-width:820px){
  /* The sheet carries the switcher on small screens, so the header pill is
     dropped rather than competing with the logo for the centre column. */
  .gnav-right .gnav-lang{display:none}
}
.gnav-dark{background:rgba(0,0,0,.72);border-bottom-color:var(--line-d)}
.gnav-dark .gnav-links{color:var(--d1);opacity:.88}
.gnav-dark .burger span{background:var(--d1)}
.btn-sm{padding:8px 15px;font-size:.78rem;min-height:44px}
@media(max-width:820px){
  .gnav-right .btn-sm{display:none}
  .gnav-in{grid-template-columns:1fr auto 1fr}
}

/* ---- full-height dark hero ---- */
.hero-dark{
  background:var(--black);color:var(--d1);
  min-height:100svh;justify-content:flex-end;
  padding:clamp(120px,18vh,210px) 0 clamp(54px,8vh,92px);
}
.hero-dark h1{color:var(--d1)}
.hero-dark h1 em{color:var(--signal)}
.hero-dark .hero-sub{color:var(--d2)}
.hero-dark .hero-note{color:var(--d2)}
.hero-dark::after{background:radial-gradient(circle,rgba(255,106,61,.17),rgba(255,106,61,0) 62%)}
.hero-dark .hero-art{
  border-color:var(--line-d);
  background:
    radial-gradient(120% 90% at 15% 10%,rgba(255,106,61,.22),transparent 55%),
    radial-gradient(100% 80% at 85% 90%,rgba(255,255,255,.07),transparent 58%),
    linear-gradient(180deg,#161617,#0d0d0e);
}
.hero-dark .mock-cell{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11);box-shadow:none}
.hero-dark .mock-cell.dark{background:#000;border-color:rgba(255,255,255,.11)}
.hero-dark .mock-cell.sig{background:var(--signal);border-color:var(--signal)}
.hero-dark .mock-bars i{background:rgba(255,255,255,.16)}
.hero-dark .btn-ghost{color:var(--d1);border-color:var(--line-d)}
.hero-dark .btn-ghost:hover{background:rgba(255,255,255,.09)}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* Tesla stacks full-width buttons on narrow screens */
@media(max-width:600px){
  .hero-cta a,.cta .btns a{width:100%}
}

/* ---- dark sticky sub-bar ---- */
.lnav-dark{background:rgba(0,0,0,.8);border-bottom-color:transparent}
.lnav-dark.stuck{border-bottom-color:var(--line-d)}
.lnav-dark .lnav-title{color:var(--d1)}
.lnav-dark .lnav-links{color:var(--d2)}
.lnav-dark .lnav-links a:hover{color:var(--d1)}

/* ---- dark capabilities band: tiles invert to glass ---- */
.on-dark .tile{
  background:rgba(255,255,255,.055);
  border-color:var(--line-d);
}
.on-dark .tile:hover{box-shadow:0 22px 54px -26px rgba(0,0,0,.75)}
.on-dark .tile p{color:var(--d2)}
.on-dark .tile .k{color:var(--d2)}
.on-dark .tile h3{color:var(--d1)}
/* one tile inverts back to solid white for rhythm */
.on-dark .tile.t-b{background:var(--white);border-color:var(--white)}
.on-dark .tile.t-b h3{color:var(--t1)}
.on-dark .tile.t-b p{color:var(--t2)}
.on-dark .tile.t-b .k{color:var(--t2)}
.on-dark .tile.t-e{border-color:rgba(255,106,61,.34)}

/* ---- tighter, squarer section rhythm ---- */
.sec{padding:clamp(80px,11vw,140px) 0}
.tile{border-radius:var(--r)}
.row-visual{border-radius:var(--r)}
.hero-art{border-radius:var(--r)}

/* ==========================================================================
   INNER PAGES — short dark hero, enquiry form, listings, contact rail
   ========================================================================== */

/* short dark page hero (inner pages: not full-height) */
.phero{
  background:var(--black);color:var(--d1);position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(64px,9vw,108px)) 0 clamp(52px,7vw,84px);
}
.phero::after{
  content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(920px,112vw);height:min(520px,70vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,106,61,.16),rgba(255,106,61,0) 62%);
}
.phero-in{position:relative;z-index:2;max-width:920px}
.phero .eyebrow{display:block;color:var(--signal);margin-bottom:15px}
.phero h1{color:var(--d1);font-size:clamp(2.05rem,5.6vw,3.7rem);letter-spacing:-.042em;max-width:24ch}
.phero p{color:var(--d2);margin-top:20px;max-width:58ch;font-size:clamp(1rem,1.5vw,1.16rem)}
.phero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.phero .btn-ghost{color:var(--d1);border-color:var(--line-d)}
.phero .btn-ghost:hover{background:rgba(255,255,255,.09)}
@media(max-width:600px){.phero-cta a{width:100%}}

/* section intro that is not centred */
.head-left{max-width:760px}

/* ---- enquiry form ---- */
.enq{display:grid;gap:17px;max-width:660px}
.enq-row{display:grid;gap:17px}
@media(min-width:640px){.enq-row.two{grid-template-columns:1fr 1fr}}
.enq label{display:block;font-size:.82rem;font-weight:600;color:var(--t1);margin-bottom:7px}
.enq .req{color:var(--signal-ink)}
.enq input[type=text],.enq input[type=email],.enq select,.enq textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--t1);background:var(--white);
  border:1px solid rgba(0,0,0,.2);border-radius:4px;padding:12px 14px;min-height:46px;
}
.enq textarea{min-height:152px;resize:vertical}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:2px solid var(--signal-ink);outline-offset:1px;border-color:var(--signal-ink);
}
.enq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.enq-note{color:var(--t2);font-size:.82rem;margin:0;max-width:60ch}
.enq-submit{justify-self:start}

.notice{border-radius:4px;padding:15px 17px;font-size:.93rem;border:1px solid;margin-bottom:24px;max-width:660px}
.notice-ok{background:rgba(0,128,96,.07);border-color:rgba(0,128,96,.36);color:#0b5f47}
.notice-err{background:rgba(194,65,12,.07);border-color:rgba(194,65,12,.42);color:#8a2f08}

/* ---- contact layout ---- */
.cgrid{display:grid;gap:clamp(34px,5vw,60px);grid-template-columns:1fr}
@media(min-width:900px){.cgrid{grid-template-columns:1.3fr .7fr}}
.cinfo{
  border:1px solid var(--line-l);border-radius:var(--r);
  padding:clamp(24px,3vw,32px);background:var(--grey);align-self:start;
}
.cinfo h3{font-size:1.02rem;margin-bottom:16px}
.cinfo dl{margin:0;display:grid;gap:18px}
.cinfo dt{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t2)}
.cinfo dd{margin:6px 0 0;font-size:.97rem}
.cinfo a{color:var(--signal-ink)}
.cinfo a:hover{text-decoration:underline}

/* ---- topic / listing cards ---- */
.topic-grid{display:grid;gap:14px;margin-top:clamp(32px,4vw,50px)}
@media(min-width:760px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
.topic{
  border:1px solid var(--line-l);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;justify-content:space-between;min-height:172px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.topic:hover{transform:translateY(-3px);box-shadow:0 20px 48px -26px rgba(0,0,0,.3)}
.topic .k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t2)}
.topic h3{font-size:clamp(1.06rem,1.6vw,1.24rem);margin:11px 0 9px}
.topic p{color:var(--t2);font-size:.92rem}
.on-dark .topic{background:rgba(255,255,255,.055);border-color:var(--line-d)}
.on-dark .topic h3{color:var(--d1)}
.on-dark .topic p,.on-dark .topic .k{color:var(--d2)}

/* ---- archive filters ---- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.filters a{
  border:1px solid var(--line-l);border-radius:4px;padding:8px 14px;
  font-size:.82rem;color:var(--t2);min-height:44px;display:inline-flex;align-items:center;
}
.filters a:hover{color:var(--t1);border-color:rgba(0,0,0,.24)}
.filters a.on{background:var(--ink);border-color:var(--ink);color:var(--d1)}

/* ---- cookie / policy tables ---- */
.entry-in table.policy{font-size:.92rem;margin:1.4em 0}
.entry-in table.policy th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);font-weight:600}
.entry-in table.policy td{vertical-align:top}
.updated{color:var(--t2);font-size:.83rem;margin-top:14px}

/* ==========================================================================
   CONVERSION SECTIONS — problems, proof, FAQ, investor band
   ========================================================================== */

/* ---- problem statements ("sound familiar?") ---- */
.sym{list-style:none;margin:clamp(36px,5vw,58px) 0 0;padding:0;display:grid;gap:2px 40px;grid-template-columns:1fr}
@media(min-width:820px){.sym{grid-template-columns:repeat(2,1fr)}}
.sym li{border-left:2px solid var(--signal-ink);padding:18px 0 18px 22px}
.sym li b{display:block;font-size:clamp(1rem,1.5vw,1.1rem);color:var(--t1);font-weight:600;margin-bottom:7px;letter-spacing:-.02em}
.sym li span{color:var(--t2);font-size:.93rem;line-height:1.6}
.on-dark .sym li{border-left-color:var(--signal)}
.on-dark .sym li b{color:var(--d1)}
.on-dark .sym li span{color:var(--d2)}
.sym-foot{margin-top:clamp(32px,4vw,46px);text-align:center;color:var(--t2);font-size:.95rem}
.on-dark .sym-foot{color:var(--d2)}

/* ---- coverage proof: competitions actually reported on ---- */
.proof{margin-top:clamp(38px,5vw,58px)}
.proof h3{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--d2);font-weight:600;text-align:center;margin-bottom:20px}
.proof-list{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;list-style:none;margin:0;padding:0}
.proof-list li{
  border:1px solid var(--line-d);border-radius:4px;padding:9px 15px;
  font-size:.82rem;color:var(--d1);background:rgba(255,255,255,.05);
}

/* ---- FAQ ---- */
.faq{max-width:840px;margin:clamp(36px,5vw,56px) auto 0;border-top:1px solid var(--line-l)}
.qa{border-bottom:1px solid var(--line-l)}
.qa summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 46px 20px 0;min-height:44px;
  display:flex;align-items:center;
  font-weight:600;font-size:clamp(1rem,1.5vw,1.1rem);
  color:var(--t1);letter-spacing:-.02em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.35rem;font-weight:400;line-height:1;color:var(--signal-ink);
}
.qa[open] summary::after{content:"\2013"}
.qa summary:hover{color:var(--signal-ink)}
.qa summary:focus-visible{outline:2px solid var(--signal-ink);outline-offset:2px}
.qa p{color:var(--t2);font-size:.95rem;line-height:1.65;max-width:70ch;padding:0 0 22px}

/* ---- about page: fact rows ---- */
.facts{border-top:1px solid var(--line-l);margin-top:clamp(34px,4vw,50px)}
.facts div{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--line-l)}
@media(min-width:760px){.facts div{grid-template-columns:230px 1fr;gap:24px;align-items:baseline}}
.facts dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.facts dd{margin:0;color:var(--t1);font-size:1rem}
.facts dd a{color:var(--signal-ink)}

/* ---- investor / partner band ---- */
.inv{
  border:1px solid var(--line-d);border-radius:var(--r);
  background:rgba(255,255,255,.055);padding:clamp(28px,4vw,44px);
}
.inv h3{color:var(--d1);font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.03em;margin-bottom:14px}
.inv p{color:var(--d2);max-width:62ch}
.inv .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media(max-width:600px){.inv .btns a{width:100%}}