/* ==========================================================================
   TEMERALDS — Design System v2
   Matched to the live temeralds.agency: deep green-black ground, brass accent,
   Didone display, wide-tracked sans labels, and the bevelled "cut corner" that
   appears on every primary button.
   ========================================================================== */

:root{
  /* --- Color ------------------------------------------------------------
     Single-accent palette: a neutral charcoal ground with brass carrying every
     accent role. The secondary button is outlined rather than filled, so only
     one element on screen is ever solid colour. */
  /* Sampled from temeralds.agency rather than estimated. The hero ground is
     the reference; the other two depths are derived from it so the page never
     jumps between sections. */
  /* Fabric palette: Forest Green, Olive Green, Mustard Yellow, Beige Cream,
     Charcoal Black. Every pairing below is measured against WCAG rather than
     chosen by eye — the swatch was made for upholstery, where contrast is not
     a requirement, so the roles had to be assigned rather than copied. */
  --tem-ink:         #142A1D;   /* Forest Green — base ground */
  --tem-ink-deep:    #161616;   /* Charcoal Black — hero, footer, tab strip */
  --tem-ink-lift:    #1E3A2A;   /* derived, keeps the three-step ladder even */
  --tem-panel:       #1E3A2A;
  --tem-panel-2:     #264934;
  /* Olive, darkened twice. The first pass fixed ivory text; it left the
     mustard eyebrow at 3.79:1, which an audit reports and a reader squints at.
     At #26240A the same mustard measures 5.15:1 and nothing else changes. */
  --tem-olive:       #26240A;
  --tem-olive-deep:  #1C1B06;
  --tem-gold:        #CB8509;   /* Mustard — 5.00:1 on forest, passes AA */
  --tem-gold-lit:    #E0A63C;   /* lifted mustard for numerals */
  --tem-cream:       #F6EFEA;   /* Beige Cream, lifted to a paper tone */
  --tem-cream-ink:   #161616;   /* 8.0:1 on beige */
  --tem-ivory:       #EFF0EA;
  --tem-muted:       #A9A99C;   /* secondary text — 6.41:1 on forest */
  --tem-lead-ink:    #D6D9D0;   /* body copy — 10.66:1 on forest */
  --tem-hero-ink:    #C3C6BD;   /* hero lead — quieter than body copy */
  --tem-line:        rgba(239,240,234,.14);
  --tem-line-soft:   rgba(239,240,234,.08);
  --tem-line-strong: rgba(239,240,234,.36);  /* outlined secondary button */

  /* --- Type ------------------------------------------------------------- */
  /* Two display faces, split strictly by size.
     Marcellus is an inscriptional Roman: stroke contrast around 2:1, which is
     why it holds together at 22–32px where most of the site's headings live.
     Playfair reaches 4.5:1 at weight 500 — the drama a hero needs, and the
     reason it is confined to the two places set above 40px. Below that its
     hairlines start breaking on a 1x screen. */
  --tem-display: "Marcellus", Georgia, "Times New Roman", serif;
  --tem-hero-face: "Playfair Display", "Marcellus", Georgia, serif;
  --tem-body:    "Jost", system-ui, -apple-system, sans-serif;
  --tem-label:   "Jost", system-ui, sans-serif;

  --tem-h1: clamp(2.9rem, 6vw, 5.4rem);
  --tem-h2: clamp(2.1rem, 4vw, 3.5rem);
  --tem-h3: clamp(1.2rem, 1.8vw, 1.55rem);
  --tem-lead: clamp(1rem, 1.25vw, 1.12rem);

  --tem-lh-display: 1.1;
  --tem-lh-body: 1.62;

  --tem-track-label: .24em;   /* the wide tracking on every uppercase label */

  /* --- Layout ----------------------------------------------------------- */
  --tem-max: 1280px;
  --tem-gutter: clamp(1.25rem, 4vw, 4rem);
  --tem-section-y: clamp(4.5rem, 8vw, 8rem);
  --tem-header-h: 78px;
  --tem-bevel: 14px;         /* the cut corner */

  --tem-ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::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(--tem-ink);
  color:var(--tem-ivory);
  font-family:var(--tem-body);
  /* Jost has a smaller x-height than Inter, so the same rem reads smaller.
     One notch up restores the intended reading size. */
  font-size:1.04rem;
  font-weight:300;
  line-height:var(--tem-lh-body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.tem-nav-open{overflow:hidden}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tem-gold);outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--tem-display);
  /* Marcellus ships one weight — asking for more triggers a synthetic bold,
     which coarsens the inscriptional letterforms. 400 only, everywhere. */
  font-weight:400;
  line-height:var(--tem-lh-display);
  letter-spacing:.004em;
  margin:0;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ==========================================================================
   Primitives
   ========================================================================== */
.tem-wrap{width:100%;max-width:var(--tem-max);margin-inline:auto;padding-inline:var(--tem-gutter)}
.tem-section{padding-block:var(--tem-section-y);position:relative}
.tem-section--deep{background:var(--tem-ink-deep)}
.tem-section--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.tem-grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.tem-grid--2{grid-template-columns:repeat(2,1fr)}
.tem-grid--3{grid-template-columns:repeat(3,1fr)}
.tem-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.tem-grid--3,.tem-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tem-grid--2,.tem-grid--3,.tem-grid--4{grid-template-columns:1fr}}


.tem-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.tem-glow::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 40%,rgba(201,165,92,.10),transparent 68%);
}

/* ==========================================================================
   Section grounds — one hue, three depths
   Rhythm comes from brightness, not from a second colour. Add
   .tem-ground-deep or .tem-ground-lift to any <section>; leaving it off
   gives the base emerald.
   ========================================================================== */
.tem-ground-deep{background:var(--tem-ink-deep)}
.tem-ground-lift{background:var(--tem-ink-lift)}

/* Olive earns its place as a surface, never as ink. At 2.72:1 it cannot carry
   text at any size; darkened to #3E3A12 it carries ivory at 5.6:1, so it holds
   the two tabbed bands where the type is large and the copy is short. */
.tem-showcase.tem-ground-lift{background:var(--tem-olive)}
.tem-showcase.tem-ground-lift .tem-tabs{background:var(--tem-olive-deep)}
.tem-showcase.tem-ground-lift .tem-card,
.tem-showcase.tem-ground-lift .tem-market{background:rgba(239,240,234,.06)}

.tem-ground-deep .tem-split__body{background:var(--tem-ink-deep)}
.tem-ground-lift .tem-split__body{background:var(--tem-ink-lift)}
.tem-ground-deep .tem-split__media{background:linear-gradient(150deg,#12301F,#071710)}
.tem-ground-lift .tem-split__media{background:linear-gradient(150deg,#264934,#142A1D)}

.tem-ground-deep .tem-tabs{background:#071710}
.tem-ground-lift .tem-tabs{background:#142A1D}

/* Cards lift off whichever depth they sit on rather than carrying a fixed fill */
.tem-ground-deep .tem-card,
.tem-ground-deep .tem-market,
.tem-ground-lift .tem-card,
.tem-ground-lift .tem-market{background:rgba(242,240,232,.05)}
.tem-ground-deep .tem-card:hover,
.tem-ground-deep .tem-market:hover,
.tem-ground-lift .tem-card:hover,
.tem-ground-lift .tem-market:hover{background:rgba(242,240,232,.08)}

.tem-ground-deep .tem-childlist li{background:var(--tem-ink-deep)}
.tem-ground-lift .tem-childlist li{background:var(--tem-ink-lift)}

.tem-ground-deep .tem-post{background:linear-gradient(160deg,#16382A,#071710)}
.tem-ground-lift .tem-post{background:linear-gradient(160deg,#264934,#142A1D)}

/* ==========================================================================
   Labels & headings
   ========================================================================== */
.tem-eyebrow{
  font-family:var(--tem-label);
  font-size:.72rem;font-weight:400;
  letter-spacing:var(--tem-track-label);
  text-transform:uppercase;
  color:var(--tem-gold);
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1.5rem;
}
.tem-eyebrow::before{
  content:"";width:6px;height:6px;background:currentColor;
  transform:rotate(45deg);flex:none;
}

.tem-label{
  font-family:var(--tem-label);font-size:.68rem;font-weight:400;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-muted);
}

.tem-h2{font-size:var(--tem-h2)}
.tem-h3{font-size:var(--tem-h3)}
.tem-lead{font-size:var(--tem-lead);font-weight:300;color:var(--tem-lead-ink);max-width:52ch;line-height:1.7}
.tem-muted{color:var(--tem-muted)}
.tem-num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* Emphasis: the live site sets headlines plain, so emphasis is a colour
   shift rather than an italic. Behaves identically in Arabic. */
.tem-em{color:var(--tem-gold)}

/* ==========================================================================
   Buttons — the bevelled "cut corner" is the signature
   ========================================================================== */
.tem-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1.05rem 1.9rem;
  font-family:var(--tem-label);
  font-size:.74rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  transition:background .35s var(--tem-ease),color .35s var(--tem-ease),border-color .35s var(--tem-ease);
}

.tem-btn--gold{
  background:var(--tem-gold);color:var(--tem-ink-deep);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tem-bevel)),calc(100% - var(--tem-bevel)) 100%,0 100%);
}
.tem-btn--gold:hover{background:#DCBB74}

.tem-btn--outline{
  border:1px solid var(--tem-line-strong);color:var(--tem-ivory);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tem-bevel)),calc(100% - var(--tem-bevel)) 100%,0 100%);
}
.tem-btn--outline:hover{border-color:var(--tem-gold);color:var(--tem-gold)}

.tem-btn--ghost{
  border:1px solid var(--tem-line);color:var(--tem-ivory);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tem-bevel)),calc(100% - var(--tem-bevel)) 100%,0 100%);
}
.tem-btn--ghost:hover{border-color:var(--tem-gold);color:var(--tem-gold)}

/* Pill button with a circular arrow */
.tem-pill{
  display:inline-flex;align-items:center;gap:1.1rem;
  padding:.55rem .55rem .55rem 1.6rem;
  border:1px solid var(--tem-line);border-radius:999px;
  font-family:var(--tem-label);font-size:.72rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  transition:border-color .35s var(--tem-ease);
}
.tem-pill:hover{border-color:var(--tem-gold)}
.tem-pill__dot{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--tem-ivory);color:var(--tem-ink-deep);
  display:grid;place-items:center;
  transition:background .35s var(--tem-ease),transform .35s var(--tem-ease);
}
.tem-pill:hover .tem-pill__dot{background:var(--tem-gold);transform:translateX(3px)}

.tem-ulink{
  display:inline-block;
  font-family:var(--tem-label);font-size:.68rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-muted);
  padding-bottom:.4rem;border-bottom:1px solid var(--tem-line);
  transition:color .3s var(--tem-ease),border-color .3s var(--tem-ease);
}
.tem-ulink:hover{color:var(--tem-gold);border-color:var(--tem-gold)}

.tem-arrowlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--tem-label);font-size:.68rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-gold-lit);
}
.tem-arrowlink svg{transition:transform .3s var(--tem-ease)}
.tem-arrowlink:hover svg{transform:translateX(4px)}

.tem-status{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--tem-muted)}
.tem-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tem-gold);flex:none}

/* ==========================================================================
   Header
   ========================================================================== */
/* The header carries no ground at the top of the page: it sits directly on the
   hero, which is dark enough to hold the type on its own. The background,
   blur and hairline arrive together on the first scroll, at which point the
   header is passing over content that would otherwise show through it.

   backdrop-filter is switched off while transparent as well — a blur with
   nothing behind it still costs a compositing layer on every frame. */
/* The ground is painted by a pseudo-element whose opacity animates, rather than
   by transitioning the header's own background. Opacity and transform are the
   only two properties a browser can animate without re-running layout or paint
   — animating height and backdrop-filter, as this did, is what an audit means
   by "non-composited animations". */
.tem-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--tem-header-h);display:flex;align-items:center;
  transition:height .4s var(--tem-ease);
}
.tem-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(8,19,15,.94);
  backdrop-filter:blur(14px);
  border-block-end:1px solid var(--tem-line-soft);
  opacity:0;
  transition:opacity .4s var(--tem-ease);
  will-change:opacity;
}
.tem-header.is-stuck{height:66px}
.tem-header.is-stuck::before{opacity:1}

/* The dropdown panel is opaque, so it has to sit clear of a transparent header
   rather than blending into it. */
.tem-nav > ul > li > .sub-menu{box-shadow:0 24px 48px rgba(0,0,0,.42)}
.tem-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%}

.tem-logo{display:inline-flex;align-items:flex-end;gap:.7rem}
.tem-logo__mark{width:30px;flex:none}
.tem-logo__word{font-family:var(--tem-display);font-size:1.42rem;letter-spacing:.06em;line-height:1}
.tem-logo__partner{
  font-family:var(--tem-label);font-size:.52rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tem-gold);
  line-height:1.25;max-width:52px;padding-bottom:.15rem;
}

.tem-nav ul{list-style:none;display:flex;align-items:center;gap:2.1rem;margin:0;padding:0}
.tem-nav > ul > li > a{
  font-family:var(--tem-label);font-size:.72rem;font-weight:400;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  position:relative;padding-block:.5rem;color:var(--tem-ivory);
}
.tem-nav > ul > li > a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:0;
  background:var(--tem-gold);transition:width .35s var(--tem-ease);
}
.tem-nav > ul > li > a:hover::after,
.tem-nav .current-menu-item > a::after{width:100%}

.tem-nav > ul > li.menu-item-has-children{position:relative}

/* Dropdown panel, matched to the live site: a contained block centred under the
   item, no border, no gap to lose the pointer in, two columns of links.
   Measured from the reference — 458px wide, 27px padding, ~50px row rhythm. */
.tem-nav .sub-menu{
  list-style:none;margin:0;padding:0;
  position:absolute;inset-block-start:100%;inset-inline-start:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:458px;
  opacity:0;visibility:hidden;
  transition:opacity .26s var(--tem-ease),transform .26s var(--tem-ease),visibility .26s;
}
[dir="rtl"] .tem-nav .sub-menu{transform:translateX(50%) translateY(6px)}

.tem-nav > ul > li > .sub-menu{
  padding:1.7rem 1.7rem 1.5rem;
  background:var(--tem-ink);
  box-shadow:0 24px 48px rgba(0,0,0,.34);
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:2rem;row-gap:.2rem;
}
.tem-nav > ul > li:hover > .sub-menu,
.tem-nav > ul > li:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
[dir="rtl"] .tem-nav > ul > li:hover > .sub-menu,
[dir="rtl"] .tem-nav > ul > li:focus-within > .sub-menu{transform:translateX(50%) translateY(0)}

/* An invisible bridge across the 3px the panel sits below the header, so the
   pointer never leaves the hover area on its way down. */
.tem-nav > ul > li.menu-item-has-children::after{
  content:"";position:absolute;inset-inline:0;inset-block-start:100%;height:12px;
}

.tem-nav .sub-menu li{list-style:none}
.tem-nav .sub-menu a{
  display:block;padding:.62rem 0;
  font-size:.92rem;font-weight:300;letter-spacing:.01em;
  color:var(--tem-ivory);
  transition:color .25s var(--tem-ease);
}
.tem-nav .sub-menu a:hover{color:var(--tem-gold);background:none}

/* A flat list of eight gets a wider panel and a third column rather than one
   tall column that runs off the screen. */
.tem-nav li.tem-drop--wide > .sub-menu{
  min-width:660px;grid-template-columns:repeat(3,1fr);
}

/* Expertise has five pillars and seventeen pages beneath them. Hiding the
   third level was a mistake: those seventeen are the pages that rank, and a
   link nobody can see is a link that carries almost nothing. The panel now
   spans the container and gives each pillar a column with its pages listed
   under it — reachable in one move, and linked from every page on the site. */
.tem-nav li.tem-mega{position:static}
.tem-nav li.tem-mega > .sub-menu{
  position:fixed;
  inset-inline:0;
  inset-block-start:var(--tem-header-h);
  transform:none;
  min-width:0;width:100%;
  max-width:none;
  padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(1.6rem,2.6vw,2.2rem);
  background:var(--tem-ink);
  box-shadow:0 24px 48px rgba(0,0,0,.4);
  border-block-end:1px solid var(--tem-line-soft);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0 clamp(1rem,2vw,2rem);
  justify-items:stretch;
}
/* The panel is full width but its contents follow the page grid. */
.tem-nav li.tem-mega > .sub-menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.tem-nav li.tem-mega > .sub-menu > li{
  max-width:calc(var(--tem-max) / 5);
  padding-inline:0;
}
.tem-nav li.tem-mega > .sub-menu{
  padding-inline:max(var(--tem-gutter), calc((100vw - var(--tem-max)) / 2));
}
.tem-header.is-stuck .tem-nav li.tem-mega > .sub-menu{inset-block-start:66px}
body.admin-bar .tem-nav li.tem-mega > .sub-menu{inset-block-start:calc(var(--tem-header-h) + 32px)}
body.admin-bar .tem-header.is-stuck .tem-nav li.tem-mega > .sub-menu{inset-block-start:98px}
.tem-nav li.tem-mega:hover > .sub-menu,
.tem-nav li.tem-mega:focus-within > .sub-menu{transform:none}

/* Pillar name as the column heading. */
.tem-nav li.tem-mega > .sub-menu > li > a{
  padding:0 0 .7rem;
  font-family:var(--tem-display);font-size:1.02rem;font-weight:400;
  color:var(--tem-ivory);
  border-block-end:1px solid var(--tem-line);
  margin-block-end:.5rem;
}
.tem-nav li.tem-mega > .sub-menu > li > a:hover{color:var(--tem-gold)}

/* Its pages, listed. */
.tem-nav li.tem-mega .sub-menu .sub-menu{
  display:block;position:static;opacity:1;visibility:visible;transform:none;
  min-width:0;padding:0;background:none;box-shadow:none;border:0;
  grid-template-columns:1fr;
}
.tem-nav li.tem-mega .sub-menu .sub-menu a{
  padding:.42rem 0;font-size:.83rem;color:var(--tem-muted);
}
.tem-nav li.tem-mega .sub-menu .sub-menu a:hover{color:var(--tem-gold);background:none}

@media (max-width:1200px){
  .tem-nav li.tem-mega > .sub-menu{grid-template-columns:repeat(3,1fr);row-gap:1.6rem}
  .tem-nav li.tem-mega > .sub-menu > li{max-width:none}
}

/* ==========================================================================
   Floating contact rail
   Sampled from the reference: two quiet dark buttons with a mint icon and one
   brass button carrying the weight. Platform colours are deliberately not used
   — a bright WhatsApp green beside this palette reads as a third-party widget
   bolted on, which undercuts the whole page.

   Vertical on every screen. On a phone it moves to the lower right and shrinks,
   but it stays a column: a horizontal row across the bottom covers content and
   collides with browser chrome.
   ========================================================================== */
.tem-rail{
  position:fixed;inset-block-start:50%;inset-inline-end:1.1rem;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:.85rem;
}
.tem-rail a{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#1E3A2A;
  border:1px solid rgba(239,240,234,.10);
  color:#D9C9A0;
  transition:transform .3s var(--tem-ease),background .3s var(--tem-ease),
             border-color .3s var(--tem-ease),color .3s var(--tem-ease);
}
.tem-rail a:hover{
  transform:scale(1.06);
  background:#264934;
  border-color:rgba(203,133,9,.6);
  color:var(--tem-gold);
}

/* One of the three carries the brass, so the group has a lead action rather
   than three equal ones. */
/* Three channels as quiet circles, then the ask as a brass capsule. Email is
   the least urgent of the three, so it is the one that goes on small screens —
   it is a tap away in the footer, and four items plus a capsule is too tall for
   a phone. */
.tem-rail__mail{color:var(--tem-muted)}
.tem-rail__mail:hover{color:var(--tem-gold)}
@media (max-width:820px){
  .tem-rail__mail{display:none}
}

/* The fourth item is not a channel, it is the ask. A tall capsule with the word
   set vertically: unmistakably a button rather than a fourth icon, and the rail
   still reads as a single column. */
.tem-rail__cta{
  width:52px;height:auto;border-radius:26px;
  padding-block:1.15rem;gap:.7rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--tem-gold);
  border-color:var(--tem-gold);
  color:var(--tem-ink-deep);
}
.tem-rail__cta-text{
  writing-mode:vertical-rl;
  font-family:var(--tem-label);
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  line-height:1;
}
.tem-rail__cta svg{
  width:16px;height:16px;transform:rotate(90deg);
  transition:transform .3s var(--tem-ease);
}
.tem-rail__cta:hover{
  background:#E09A1F;
  border-color:#E09A1F;
  color:var(--tem-ink-deep);
  transform:scale(1.03);
}
.tem-rail__cta:hover svg{transform:rotate(90deg) translateX(3px)}

@media (max-width:820px){
  .tem-rail{inset-inline-end:.7rem;gap:.6rem}
  .tem-rail a{width:46px;height:46px}
  .tem-rail a svg{width:19px;height:19px}
  .tem-rail__cta{width:46px;height:auto;padding-block:.95rem}
  .tem-rail__cta-text{font-size:.6rem;letter-spacing:.16em}
  .tem-rail__cta svg{width:14px;height:14px}
}
@media (max-width:400px){
  .tem-rail a{width:42px;height:42px}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.tem-hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--tem-header-h) + 3.5rem) 8.5rem;overflow:hidden;
  background:
    radial-gradient(64% 52% at 76% 20%, rgba(96,86,34,.40), transparent 70%),
    radial-gradient(70% 60% at 12% 60%, rgba(18,18,18,.9), transparent 70%),
    #161616;
}
.tem-hero__mark{
  position:absolute;inset-block-start:50%;inset-inline-end:2%;
  width:min(46vw,620px);transform:translateY(-50%);opacity:.16;z-index:0;
}
.tem-hero__inner{position:relative;z-index:2;width:100%}

/* Same principle in the hero: one grid cell for every slide, so the hero does
   not grow and shrink as the headlines change length. */
.tem-slides{display:grid;width:100%}
.tem-slide h1 .tem-w,
.tem-slide .tem-slide__h .tem-w{display:inline-block}
.tem-slide{
  grid-area:1/1;width:100%;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--tem-ease),visibility .5s;
}
.tem-slide.is-active{opacity:1;visibility:visible}

/* ---- Headline line reveal -------------------------------------------------
   Each line sits in its own clipping box and rises into it. The stagger is
   what sells it: lines 90ms apart, then the paragraph, then the buttons — the
   eye follows a sequence instead of watching a block appear. */
.tem-slide h1 .tem-line,
.tem-slide .tem-slide__h .tem-line{display:block;overflow:hidden}
.tem-slide h1 .tem-line > span,
.tem-slide .tem-slide__h .tem-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,.84,.32,1);
  transition-delay:calc(var(--i) * 90ms);
}
.tem-slide.is-revealed h1 .tem-line > span,
.tem-slide.is-revealed .tem-slide__h .tem-line > span{transform:translateY(0)}

.tem-slide .tem-eyebrow,
.tem-slide .tem-lead,
.tem-slide__cta{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--tem-ease),transform .7s var(--tem-ease);
}
.tem-slide .tem-eyebrow{transition-delay:.05s}
.tem-slide .tem-lead{transition-delay:.34s}
.tem-slide__cta{transition-delay:.46s}
.tem-slide.is-revealed .tem-eyebrow,
.tem-slide.is-revealed .tem-lead,
.tem-slide.is-revealed .tem-slide__cta{opacity:1;transform:none}

/* Without JS, or with motion reduced, everything is simply present. */
.no-js .tem-slide h1 .tem-line > span,
.no-js .tem-slide .tem-slide__h .tem-line > span,
.no-js .tem-slide .tem-eyebrow,
.no-js .tem-slide .tem-lead,
.no-js .tem-slide__cta{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .tem-slide h1 .tem-line > span,
.tem-slide .tem-slide__h .tem-line > span{transform:none;transition:none}
  .tem-slide .tem-eyebrow,
  .tem-slide .tem-lead,
  .tem-slide__cta{opacity:1;transform:none;transition:none}
}
/* Hero headline: the one place on the site set large enough for a high-contrast
   face to be an advantage rather than a liability. */
/* Slides two and three are h2 for document structure, so both tags are styled
   here — the hierarchy is semantic, not visual. */
.tem-slide h1,
.tem-slide .tem-slide__h{
  margin:0 0 1.8rem;
  font-family:var(--tem-hero-face);
  font-weight:500;
  font-size:var(--tem-h1);max-width:14ch;margin-bottom:1.8rem;
  letter-spacing:-.012em;
  line-height:1.06;
}
.tem-slide .tem-lead{max-width:46ch;margin-bottom:2.4rem;color:var(--tem-hero-ink)}
.tem-slide__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

.tem-slider__foot{
  position:absolute;inset-block-end:2.5rem;inset-inline:0;z-index:3;
  padding-inline:var(--tem-gutter);max-width:var(--tem-max);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.tem-slider__count{display:flex;align-items:center;gap:1rem;font-family:var(--tem-label);font-size:.7rem;letter-spacing:.14em;color:var(--tem-muted)}
.tem-slider__count b{color:var(--tem-ivory);font-weight:500}
.tem-slider__dots{display:flex;gap:.6rem}
.tem-slider__dots button{width:34px;height:2px;background:var(--tem-line);transition:background .3s var(--tem-ease)}
.tem-slider__dots button.is-active{background:var(--tem-gold)}
.tem-slider__nav{display:flex;gap:.6rem}
.tem-slider__nav button{
  width:48px;height:44px;border:1px solid var(--tem-line);display:grid;place-items:center;
  transition:border-color .3s var(--tem-ease),color .3s var(--tem-ease);
}
.tem-slider__nav button:hover{border-color:var(--tem-gold);color:var(--tem-gold)}
@media (max-width:760px){
  .tem-slider__dots{display:none}
  .tem-slider__foot{inset-block-end:1.5rem}
}
/* Below this height there is not enough room for a full-viewport hero with a
   three-line headline, so let it size to its content instead of clipping. */
@media (max-height:720px){
  .tem-hero{min-height:auto;padding-block:calc(var(--tem-header-h) + 3rem) 8rem}
}

/* ==========================================================================
   Split panel
   ========================================================================== */
.tem-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(78vh,700px)}
.tem-split__media{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--tem-panel),var(--tem-ink-deep))}
.tem-split__media img{width:100%;height:100%;object-fit:cover;opacity:.85}
.tem-split__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,5vw,5rem) clamp(1.5rem,4vw,4.5rem);
  background:var(--tem-ink-deep);
}
.tem-split__body h2{max-width:16ch;margin-bottom:1.5rem}
.tem-split--reverse .tem-split__media{order:2}
@media (max-width:900px){
  .tem-split{grid-template-columns:1fr;min-height:0}
  .tem-split__media{min-height:240px;order:0 !important}
}

.tem-metrics{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem clamp(1.5rem,4vw,3rem);
  margin-top:2.5rem;padding-top:2.2rem;border-top:1px solid var(--tem-line);
}
.tem-metric__value{
  display:block;font-family:var(--tem-display);font-size:clamp(1.9rem,3vw,2.5rem);
  line-height:1;color:var(--tem-gold-lit);margin-bottom:.7rem;
  direction:ltr;unicode-bidi:isolate;
}

/* ==========================================================================
   Tabbed showcase
   ========================================================================== */
.tem-showcase{position:relative;background:var(--tem-ink);overflow:hidden}
.tem-showcase__stage{position:relative;min-height:min(62vh,560px);display:flex;align-items:center;padding-block:clamp(3.5rem,7vw,6rem)}
.tem-showcase__panel{
  position:relative;z-index:2;width:100%;max-width:var(--tem-max);
  margin-inline:auto;padding-inline:var(--tem-gutter);
  display:flex;flex-direction:column;align-items:flex-end;text-align:end;
}
/* Keep content clear of the fixed contact rail.

   The rail is 52px wide plus 1.1rem of inset, and the Request capsule below it
   is taller than the circles — so the reserved column has to be wider than the
   widest item, not equal to it. Measured at 96px, applied to every block that
   can reach the right edge rather than only the right-aligned ones. */
@media (min-width:821px) and (max-width:1500px){
  .tem-showcase__panel,
  .tem-contact__inner,
  .tem-split__body,
  .tem-proofbar__grid,
  .tem-sechead,
  .tem-infostrip{padding-inline-end:calc(var(--tem-gutter) + 96px)}
}
/* Below the rail's own breakpoint it moves and shrinks, so the reservation
   shrinks with it. */
@media (max-width:820px){
  .tem-proofbar__grid{padding-inline-end:0}
}
.tem-showcase--start .tem-showcase__panel{align-items:flex-start;text-align:start}
.tem-showcase__panel h2{max-width:16ch;margin-bottom:1.4rem}
.tem-showcase__panel .tem-lead{margin-bottom:2rem}
.tem-showcase__actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.tem-showcase__stat{min-height:1em;
  font-family:var(--tem-label);font-size:.68rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-gold-lit);margin-bottom:1.6rem;
}

/* All slides share one grid cell, so the stage is as tall as the tallest slide
   and stays that height whichever tab is active. Switching crossfades instead
   of reflowing — no layout shift, and nothing below the section moves. */
.tem-showcase__deck{display:grid;width:100%}
.tem-showcase__slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s var(--tem-ease),transform .45s var(--tem-ease),visibility .45s;
}
.tem-showcase__slide.is-active{opacity:1;visibility:visible;transform:none}
.tem-showcase--start .tem-showcase__deck{justify-items:start}
.tem-showcase__deck{justify-items:end}

.tem-showcase__edge{
  position:absolute;inset-block-start:38%;inset-inline-start:0;z-index:3;
  width:68px;height:84px;background:var(--tem-gold);color:var(--tem-ink-deep);
  border-start-end-radius:999px;border-end-end-radius:999px;
  display:grid;place-items:center;
}
.tem-showcase__edge svg{transform:scaleX(-1)}
@media (max-width:820px){.tem-showcase__edge{display:none}}

.tem-showcase__scroll{position:absolute;inset-block-end:1.6rem;inset-inline-start:50%;transform:translateX(-50%);color:var(--tem-muted);z-index:2}

.tem-tabs{
  position:relative;z-index:4;background:var(--tem-ink-deep);
  border-top:1px solid var(--tem-line-soft);
  display:flex;overflow-x:auto;scrollbar-width:none;
}
.tem-tabs::-webkit-scrollbar{display:none}
.tem-tabs__item{
  flex:1 0 auto;min-width:160px;display:flex;align-items:center;gap:.9rem;
  padding:1.35rem clamp(1rem,2vw,1.6rem);
  border-bottom:2px solid transparent;color:var(--tem-muted);text-align:start;
  transition:color .3s var(--tem-ease),border-color .3s var(--tem-ease),background .3s var(--tem-ease);
}
.tem-tabs__item:hover{color:var(--tem-ivory);background:rgba(245,244,239,.03)}
.tem-tabs__item.is-active{color:var(--tem-ivory);border-bottom-color:var(--tem-gold)}
.tem-tabs__no{font-family:var(--tem-label);font-size:.62rem;font-weight:500;letter-spacing:.1em;color:var(--tem-muted)}
.tem-tabs__item.is-active .tem-tabs__no{color:var(--tem-gold)}
.tem-tabs__name{font-size:.95rem}
/* The thumbnail was an empty gradient box waiting for imagery that will never
   exist for eight sectors. A mark does the same job of anchoring the row, and
   it says something: each one draws what distinguishes that sector
   commercially, not what it sells. */
.tem-tabs__thumb{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;
  color:var(--tem-muted);
  transition:color .35s var(--tem-ease),transform .35s var(--tem-ease);
}
.tem-sicon{width:30px;height:30px;display:block}
.tem-tabs__item:hover .tem-tabs__thumb{color:var(--tem-ivory)}
.tem-tabs__item.is-active .tem-tabs__thumb{color:var(--tem-gold);transform:scale(1.06)}
@media (max-width:860px){
  .tem-tabs__thumb{width:36px;height:36px}
  .tem-sicon{width:26px;height:26px}
}
.tem-tabs__item.is-active .tem-tabs__thumb{border-color:var(--tem-gold)}
.tem-tabs__stack{display:flex;flex-direction:column;gap:.25rem}

/* ==========================================================================
   Method — cream panel beside dark
   ========================================================================== */
.tem-method{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
@media (max-width:900px){.tem-method{grid-template-columns:1fr}}
.tem-method__dark{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:1.6rem;
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,4vw,4.5rem);
  background:linear-gradient(150deg,var(--tem-ink),var(--tem-ink-deep));
}
.tem-method__dark h2{max-width:12ch}
.tem-method__cream{
  background:var(--tem-cream);color:var(--tem-cream-ink);
  padding:clamp(3rem,6vw,5.5rem) clamp(1.75rem,4vw,4.5rem);
  text-align:center;display:flex;flex-direction:column;justify-content:center;
}
.tem-method__cream .tem-label{color:#6E4A05}
.tem-method__cream p{color:rgba(15,42,30,.82);max-width:46ch;margin-inline:auto;font-size:1rem}
.tem-method__figures{
  display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:2rem;
  margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid rgba(15,42,30,.14);
}
.tem-method__figures .tem-divider{background:rgba(15,42,30,.14);height:70%;justify-self:center}
.tem-method__fig b{
  display:inline-block;font-family:var(--tem-display);font-weight:400;
  font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;
  direction:ltr;unicode-bidi:isolate;
}
.tem-method__fig span{display:block;margin-top:.6rem;font-size:.85rem;color:rgba(15,42,30,.62)}
.tem-method__fig sup{
  font-family:var(--tem-label);font-size:.6rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(15,42,30,.55);margin-inline-start:.4rem;vertical-align:.6em;
}

.tem-moves{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tem-moves li{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding-block:1rem;border-top:1px solid var(--tem-line);
}
.tem-moves li:last-child{border-bottom:1px solid var(--tem-line)}
.tem-moves b{font-family:var(--tem-label);font-size:.64rem;font-weight:500;letter-spacing:.16em;color:var(--tem-gold)}
.tem-moves span{font-size:.94rem;color:var(--tem-muted)}
.tem-moves strong{color:var(--tem-ivory);font-weight:500;display:block;font-size:1.02rem;margin-bottom:.2rem}

/* ==========================================================================
   Insight grid
   ========================================================================== */
.tem-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tem-insights__feature{grid-row:span 2}
@media (max-width:900px){
  .tem-insights{grid-template-columns:1fr 1fr}
  .tem-insights__feature{grid-row:auto;grid-column:span 2}
}
@media (max-width:620px){
  .tem-insights{grid-template-columns:1fr}
  .tem-insights__feature{grid-column:auto}
}

.tem-post{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:260px;padding:clamp(1.4rem,2.4vw,2rem);
  background:linear-gradient(160deg,var(--tem-panel-2),var(--tem-ink-deep));
  overflow:hidden;transition:transform .45s var(--tem-ease);
}
.tem-insights__feature .tem-post{min-height:100%}
.tem-post::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 35%,rgba(7,23,16,.8));
}
.tem-post > *{position:relative;z-index:2}
.tem-post:hover{transform:translateY(-4px)}
.tem-post__cat{
  font-family:var(--tem-label);font-size:.62rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-gold);margin-bottom:.9rem;
}
.tem-post h2,
.tem-post h3{font-size:1.28rem;margin-bottom:.9rem;max-width:22ch}
.tem-post__meta{font-family:var(--tem-label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tem-muted)}

.tem-offer{
  grid-column:span 2;background:var(--tem-gold);color:var(--tem-ink-deep);
  padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;
}
@media (max-width:620px){.tem-offer{grid-column:auto}}
.tem-offer__tag{
  align-self:flex-start;background:var(--tem-ink-deep);color:var(--tem-gold);
  font-family:var(--tem-label);font-size:.62rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  padding:.45rem .9rem;margin-bottom:1.4rem;
}
.tem-offer h3{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.8rem}
.tem-offer p{color:rgba(10,30,21,.8);max-width:38ch;margin-bottom:1.6rem;font-size:.95rem}
.tem-offer .tem-arrowlink{color:var(--tem-ink-deep)}

/* ==========================================================================
   Contact block & info strip
   ========================================================================== */
.tem-contact{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--tem-ink-deep),var(--tem-ink) 60%,#1D4433)}
.tem-contact__inner{position:relative;z-index:2;padding-block:clamp(4.5rem,8vw,7.5rem)}
.tem-contact h2{max-width:14ch;margin-bottom:1.6rem}
.tem-contact .tem-lead{margin-bottom:2.4rem}
.tem-contact__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.6rem}

.tem-infostrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--tem-line);position:relative;z-index:2}
@media (max-width:760px){.tem-infostrip{grid-template-columns:1fr 1fr}}
.tem-infostrip__cell{padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.8rem);border-inline-end:1px solid var(--tem-line)}
.tem-infostrip__cell:last-child{border-inline-end:0}
.tem-infostrip .tem-label{display:block;margin-bottom:.8rem}
.tem-infostrip p{margin:0;font-size:1rem}
@media (max-width:760px){
  .tem-infostrip__cell:nth-child(2n){border-inline-end:0}
  .tem-infostrip__cell:nth-child(-n+2){border-bottom:1px solid var(--tem-line)}
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.tem-pagehero{
  padding-block:calc(var(--tem-header-h) + clamp(4rem,7vw,6.5rem)) clamp(3rem,5vw,4.5rem);
  border-bottom:1px solid var(--tem-line);position:relative;overflow:hidden;
  background:linear-gradient(130deg,var(--tem-ink-deep),var(--tem-ink) 60%,#1D4433);
}
.tem-pagehero > *{position:relative;z-index:2}
/* Inner page H1 sits between 38px and 64px — still display scale, so it takes
   the same face. Everything below this line stays Marcellus. */
.tem-pagehero h1{
  font-family:var(--tem-hero-face);
  font-weight:500;
  font-size:clamp(2.4rem,4.6vw,4rem);max-width:17ch;margin-bottom:1.4rem;
  letter-spacing:-.01em;
  line-height:1.1;
}
/* Below 40px the hairlines are too thin on a 1x display, so the inscriptional
   face takes over on small screens. */
@media (max-width:640px){
  .tem-pagehero h1{font-family:var(--tem-display);font-weight:400;letter-spacing:.004em}
}
.tem-breadcrumbs{
  font-family:var(--tem-label);font-size:.64rem;letter-spacing:var(--tem-track-label);
  text-transform:uppercase;color:var(--tem-muted);margin-bottom:1.6rem;
  display:flex;flex-wrap:wrap;gap:.55rem;
}
.tem-breadcrumbs a:hover{color:var(--tem-gold)}
.tem-breadcrumbs .sep{color:var(--tem-line)}

a.tem-card,a.tem-insight,a.tem-market,a.tem-work,a.tem-post{text-decoration:none;color:inherit}
.tem-card{
  position:relative;display:flex;flex-direction:column;height:100%;will-change:transform;
  padding:clamp(1.5rem,2.5vw,2.2rem);
  background:var(--tem-panel);border:1px solid var(--tem-line-soft);
  transition:border-color .4s var(--tem-ease),background .4s var(--tem-ease),transform .4s var(--tem-ease);
}
.tem-card:hover{border-color:var(--tem-gold);background:var(--tem-panel-2);transform:translateY(-3px)}
/* Card containing a link plus other clickable content: the overlay must belong
   to the ANCHOR, not the card. On the card it covers the link and swallows the
   click, which looks identical and does nothing. */
.tem-card--link{position:relative}
.tem-card--link > h3 > a::after{content:"";position:absolute;inset:0;z-index:1}
.tem-card--link .tem-arrowlink,
.tem-card--link .tem-card__foot a{position:relative;z-index:2}
/* The card index and the READ link are the smallest brass text on the site,
   and they sit on the lightest card ground — where mustard measures 4.07:1 and
   fails. The lifted value already exists for proof figures and reads as the
   same colour at 5.72:1, so it is used here rather than inventing a sixth
   brass. Larger brass text elsewhere keeps the base value. */
.tem-card__index{font-family:var(--tem-label);font-size:.64rem;font-weight:500;letter-spacing:.16em;color:var(--tem-gold-lit);margin-bottom:1.3rem}
/* A card title is h2 on an archive, where it is the top-level item, and h3
   inside a section that already has one. The level follows the document, the
   size follows the card. */
.tem-card h2,
.tem-card h3{margin-bottom:.7rem;font-size:1.18rem;font-weight:400}
.tem-card p{color:var(--tem-lead-ink);font-size:.94rem;opacity:.92}
.tem-card__foot{
  margin-top:auto;padding-top:1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
a.tem-card .tem-arrowlink svg{transition:transform .3s var(--tem-ease)}
a.tem-card:hover .tem-arrowlink svg{transform:translateX(4px)}
.tem-tag{font-family:var(--tem-label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .65rem;border:1px solid var(--tem-line);color:var(--tem-muted)}

.tem-sechead{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3.5rem)}
.tem-sechead--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.tem-sechead--split .tem-sechead__text{max-width:54ch}
.tem-sechead h2{margin-bottom:1rem}

.tem-pillar-block{border-top:1px solid var(--tem-line);padding-block:clamp(2rem,3.5vw,3rem)}
.tem-pillar-block:last-child{border-bottom:1px solid var(--tem-line)}
a.tem-pillar-block__head{text-decoration:none;color:inherit}
.tem-pillar-block__head{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:start;margin-bottom:1.5rem;
}
a.tem-pillar-block__head:hover h2{color:var(--tem-gold)}
a.tem-pillar-block__head:hover .tem-pillar__go{border-color:var(--tem-gold);background:var(--tem-gold);color:var(--tem-ink-deep)}
.tem-pillar-block__head h2{transition:color .3s var(--tem-ease)}
@media (max-width:700px){
  .tem-pillar-block__head{grid-template-columns:auto 1fr}
  .tem-pillar-block__head .tem-pillar__go{display:none}
}
.tem-pillar-block__head h2{margin-bottom:.5rem}
.tem-pillar-block__head p{max-width:60ch;font-size:.96rem;margin:0;color:var(--tem-lead-ink)}
.tem-pillar__no{font-family:var(--tem-label);font-size:.66rem;font-weight:500;letter-spacing:.16em;color:var(--tem-gold)}
.tem-childlist{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--tem-line-soft);border:1px solid var(--tem-line-soft);
}
.tem-childlist li{background:var(--tem-ink)}
.tem-childlist a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;font-size:.94rem;color:var(--tem-muted);
  transition:background .35s var(--tem-ease),color .35s var(--tem-ease);
}
.tem-childlist a:hover{background:var(--tem-panel);color:var(--tem-ivory)}
.tem-childlist svg{opacity:0;transition:opacity .3s var(--tem-ease)}
.tem-childlist a:hover svg{opacity:1}
.tem-section--deep .tem-childlist li{background:var(--tem-ink-deep)}

.tem-pillar{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.4rem,2.4vw,2rem);padding-inline:1.2rem;
  border-top:1px solid var(--tem-line);
  margin-inline:-1.2rem;
  transition:background .4s var(--tem-ease);
}
.tem-pillar:last-child{border-bottom:1px solid var(--tem-line)}
.tem-pillar:hover{background:rgba(201,165,92,.05)}
.tem-pillar__body h3{margin-bottom:.45rem}
.tem-pillar__body p{color:var(--tem-lead-ink);opacity:.92;font-size:.94rem;max-width:60ch;margin:0}
.tem-pillar__go{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--tem-line);border-radius:50%;
  transition:border-color .4s var(--tem-ease),background .4s var(--tem-ease),color .4s var(--tem-ease);
}
.tem-pillar:hover .tem-pillar__go{border-color:var(--tem-gold);background:var(--tem-gold);color:var(--tem-ink-deep)}
@media (max-width:700px){.tem-pillar{grid-template-columns:auto 1fr}.tem-pillar__go{display:none}}

.tem-work{position:relative;display:block;overflow:hidden;background:var(--tem-panel);border:1px solid var(--tem-line-soft);transition:border-color .4s var(--tem-ease)}
.tem-work:hover{border-color:var(--tem-gold)}
.tem-work__media{aspect-ratio:16/10;overflow:hidden;background:var(--tem-ink-deep)}
.tem-work__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tem-ease)}
.tem-work:hover .tem-work__media img{transform:scale(1.04)}
.tem-work__body{padding:clamp(1.3rem,2.2vw,1.9rem)}
.tem-work__meta{font-family:var(--tem-label);font-size:.64rem;letter-spacing:var(--tem-track-label);text-transform:uppercase;color:var(--tem-gold);margin-bottom:.9rem}
.tem-work__metric{font-family:var(--tem-display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--tem-gold-lit);margin-bottom:.4rem;direction:ltr;unicode-bidi:isolate}
.tem-work__metric small{display:block;font-family:var(--tem-label);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tem-muted);margin-top:.65rem}

.tem-market{
  position:relative;display:flex;flex-direction:column;gap:.7rem;height:100%;
  padding:clamp(1.5rem,2.5vw,2rem);background:var(--tem-panel);border:1px solid var(--tem-line-soft);
  transition:border-color .4s var(--tem-ease),transform .4s var(--tem-ease);
}
.tem-market:hover{border-color:var(--tem-gold);transform:translateY(-3px)}
.tem-market__code{font-family:var(--tem-label);font-size:.66rem;font-weight:500;letter-spacing:.2em;color:var(--tem-gold)}
.tem-market h2,
.tem-market h3{font-size:1.3rem}
.tem-market p{font-size:.92rem;color:var(--tem-lead-ink);opacity:.92;margin:0}

.tem-prose{max-width:70ch;font-size:1.06rem;font-weight:300;color:var(--tem-lead-ink);line-height:1.75}
.tem-prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.6rem 0 1rem;color:var(--tem-ivory)}
.tem-prose h3{margin:2rem 0 .8rem;color:var(--tem-ivory)}
.tem-prose ul,.tem-prose ol{padding-inline-start:1.3rem;margin:0 0 1.4rem;color:var(--tem-lead-ink)}
.tem-prose li{margin-bottom:.55rem}
.tem-prose a{color:var(--tem-gold);box-shadow:inset 0 -1px 0 0 currentColor}
.tem-prose blockquote{margin:2rem 0;padding-inline-start:1.6rem;border-inline-start:2px solid var(--tem-gold);font-family:var(--tem-display);font-size:1.35rem;color:var(--tem-ivory)}
.tem-prose > p:first-of-type{color:var(--tem-ivory);font-size:1.16rem}

.tem-article{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:960px){.tem-article{grid-template-columns:1fr}}
.tem-aside{position:sticky;top:calc(var(--tem-header-h) + 2rem);border:1px solid var(--tem-line-soft);padding:1.7rem;background:var(--tem-panel)}
.tem-aside__h{font-size:1.05rem;margin-bottom:1rem}
.tem-aside ul{list-style:none;margin:0;padding:0}
.tem-aside li{border-top:1px solid var(--tem-line);padding:.65rem 0;font-size:.9rem}
.tem-aside a{color:var(--tem-muted)}
.tem-aside a:hover{color:var(--tem-gold)}

/* ==========================================================================
   Footer
   ========================================================================== */
.tem-footer{background:var(--tem-ink-deep);border-top:1px solid var(--tem-line);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.tem-footer__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);margin-bottom:3.2rem}
@media (max-width:900px){.tem-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tem-footer__top{grid-template-columns:1fr}}
/* Footer column headings. They were h4, which produced a jump from h2 straight
   to h4 with nothing between — the hierarchy error an audit reports. They are
   top-level headings inside the footer landmark, so h2 is the correct level;
   the class keeps them looking like the small labels they are. */
.tem-footer__h{
  font-family:var(--tem-label);font-size:.64rem;font-weight:500;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-muted);margin:0 0 1.2rem;
}
.tem-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.tem-footer a{font-size:.92rem;color:var(--tem-muted)}
.tem-footer a:hover{color:var(--tem-gold)}
.tem-footer__tagline{font-family:var(--tem-display);font-size:1.2rem;max-width:24ch;margin:1rem 0 1.5rem;color:var(--tem-ivory)}
.tem-footer__bottom{
  border-top:1px solid var(--tem-line);padding-top:1.7rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--tem-muted);
}

/* ==========================================================================
   Pagination, reveal, utilities
   ========================================================================== */
.pagination{margin-top:clamp(2.5rem,5vw,4rem);display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{
  min-width:42px;height:42px;display:grid;place-items:center;padding:0 .8rem;
  border:1px solid var(--tem-line);font-family:var(--tem-label);font-size:.8rem;
  transition:border-color .3s var(--tem-ease),color .3s var(--tem-ease);
}
.pagination .page-numbers:hover{border-color:var(--tem-gold);color:var(--tem-gold)}
.pagination .current{background:var(--tem-gold);border-color:var(--tem-gold);color:var(--tem-ink-deep)}

.tem-reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--tem-ease),transform .9s var(--tem-ease)}
.tem-reveal.is-in{opacity:1;transform:none}
.tem-reveal[data-delay="1"]{transition-delay:.08s}
.tem-reveal[data-delay="2"]{transition-delay:.16s}
.tem-reveal[data-delay="3"]{transition-delay:.24s}
.tem-reveal[data-delay="4"]{transition-delay:.32s}
.tem-reveal[data-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .tem-reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.tem-skip{position:absolute;top:-100px;inset-inline-start:1rem;z-index:200;background:var(--tem-gold);color:var(--tem-ink-deep);padding:.8rem 1.2rem}
.tem-skip:focus{top:1rem}

/* ==========================================================================
   Inner page blocks
   ========================================================================== */
.tem-block__lead{
  font-family:var(--tem-display);
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.45;color:var(--tem-ivory);max-width:34ch;margin:0;
}

/* Approach steps */
.tem-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--tem-line-soft);border:1px solid var(--tem-line-soft)}
.tem-step{background:var(--tem-ink);padding:clamp(1.5rem,2.5vw,2.1rem)}
.tem-ground-lift .tem-step{background:var(--tem-ink-lift)}
.tem-ground-deep .tem-step{background:var(--tem-ink-deep)}
.tem-step__no{
  display:block;font-family:var(--tem-label);font-size:.64rem;font-weight:500;
  letter-spacing:.16em;color:var(--tem-gold);margin-bottom:1.1rem;
}
.tem-step h3{font-size:1.15rem;margin-bottom:.65rem}
.tem-step p{color:var(--tem-lead-ink);font-size:.93rem;margin:0;opacity:.92}

/* Proof figures */
.tem-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--tem-line-soft);border:1px solid var(--tem-line-soft)}
.tem-proof__item{background:var(--tem-ink);padding:clamp(1.4rem,2.4vw,2rem)}
.tem-ground-lift .tem-proof__item{background:var(--tem-ink-lift)}
.tem-ground-deep .tem-proof__item{background:var(--tem-ink-deep)}
.tem-proof__value{
  display:block;font-family:var(--tem-display);
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;
  color:var(--tem-gold-lit);margin-bottom:.75rem;
  direction:ltr;unicode-bidi:isolate;
}

/* FAQ */
.tem-faq{border-top:1px solid var(--tem-line);max-width:78ch}
.tem-faq__item{border-bottom:1px solid var(--tem-line)}
.tem-faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:var(--tem-display);font-size:clamp(1.05rem,1.7vw,1.25rem);
  transition:color .3s var(--tem-ease);
}
.tem-faq__item summary::-webkit-details-marker{display:none}
.tem-faq__item summary:hover{color:var(--tem-gold-lit)}
.tem-faq__sign{position:relative;width:14px;height:14px;flex:none}
.tem-faq__sign::before,.tem-faq__sign::after{
  content:"";position:absolute;background:var(--tem-gold);
  transition:transform .3s var(--tem-ease),opacity .3s var(--tem-ease);
}
.tem-faq__sign::before{inset-block-start:6px;inset-inline-start:0;width:14px;height:1px}
.tem-faq__sign::after{inset-block-start:0;inset-inline-start:6px;width:1px;height:14px}
.tem-faq__item[open] .tem-faq__sign::after{transform:rotate(90deg);opacity:0}
.tem-faq__answer{padding:0 0 1.5rem;max-width:70ch}
.tem-faq__answer p{color:var(--tem-lead-ink);font-size:.98rem;margin:0}

/* The child-card foot arrow on expertise pillars */
.tem-card .tem-card__foot{padding-top:1.5rem}

/* ==========================================================================
   Principles — the five verbs
   ========================================================================== */
/* Capability strip. It flows beneath the slide rather than being pinned, so it
   can never land on top of the buttons — and it sits outside the slide deck so
   it stays put while the headlines change. */
.tem-hero__strip{
  margin-block-start:clamp(2.5rem,5vw,3.75rem);
  padding-block-start:1.3rem;
  border-block-start:1px solid var(--tem-line);
  max-width:52ch;
}
.tem-hero__strip .tem-label{margin:0;color:var(--tem-hero-ink);opacity:.72;line-height:1.8}
@media (max-width:760px){
  .tem-hero__strip{margin-block-start:2rem;padding-block-start:1.1rem;max-width:none}
  .tem-hero__strip .tem-label{font-size:.6rem;letter-spacing:.16em}
}

.tem-drivers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--tem-line-soft);border:1px solid var(--tem-line-soft);
}
.tem-driver{
  background:var(--tem-ink);padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:background .4s var(--tem-ease);
}
.tem-ground-lift .tem-driver{background:var(--tem-ink-lift)}
.tem-ground-deep .tem-driver{background:var(--tem-ink-deep)}
.tem-driver:hover{background:var(--tem-panel-2)}
.tem-driver__no{
  display:block;font-family:var(--tem-label);font-size:.64rem;font-weight:500;
  letter-spacing:.16em;color:var(--tem-gold);margin-bottom:1.2rem;
}
.tem-driver h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.7rem}
.tem-driver p{color:var(--tem-lead-ink);opacity:.92;font-size:.9rem;margin:0;line-height:1.65}

/* ==========================================================================
   Light reading body
   Applied to inner pages via body.tem-page--light. The header, the page hero
   (.tem-pagehero), the closing contact band (.tem-contact) and the footer all
   set their own dark backgrounds, so they are untouched by this — the light
   area is exactly the reading area.

   The whole flip is done by redefining the ground tokens inside the scope, so
   every component follows automatically instead of needing a light twin.
   ========================================================================== */
.tem-page--light .tem-section{
  /* Beige Cream, lifted. The swatch value #C1A892 is an upholstery tone: on a
     screen, at paragraph length, it reads as dim rather than warm. Raised to
     #E1D6CC it keeps the same hue and warmth and gains four points of contrast
     on body copy, which is what a reading surface is for.

     Chroma falls as the value rises. A very light tint holding the same
     saturation turns pink; #F6EFEA keeps a red-to-blue spread of 12, which is
     what still reads as paper rather than as white.

     Mustard is not usable as ink here at any lightness — reaching 4.5:1 would
     need a background luminance above 1.0, which does not exist. It stays a
     button fill, where dark ink over it measures 5.94:1. */
  --tem-ink:         #F6EFEA;   /* the reading surface — warm paper, not white */
  --tem-ink-deep:    #F1E8E1;
  --tem-ink-lift:    #EDE2D9;   /* alternating bands */
  --tem-panel:       #FFFFFF;   /* cards lift by going pure white */
  --tem-panel-2:     #FFFFFF;

  --tem-ivory:       #161616;   /* headings — 15.90:1 */
  --tem-lead-ink:    #33322C;   /* body copy — 11.30:1 */
  --tem-muted:       #56534A;   /* secondary — 7.6:1 */
  --tem-gold:        #6E4A05;   /* accent — 6.98:1 */
  --tem-gold-lit:    #161616;   /* proof figures read as ink */

  --tem-line:        rgba(22,22,22,.14);
  --tem-line-soft:   rgba(22,22,22,.075);
  --tem-line-strong: rgba(22,22,22,.38);

  background:var(--tem-ink);
  color:var(--tem-lead-ink);
}

.tem-page--light .tem-section.tem-ground-lift{background:#EDE2D9}
.tem-page--light .tem-section.tem-ground-deep{background:#F1E8E1}

/* Surfaces that were translucent white have to invert, or they vanish. */
.tem-page--light .tem-ground-lift .tem-card,
.tem-page--light .tem-ground-lift .tem-market,
.tem-page--light .tem-ground-deep .tem-card,
.tem-page--light .tem-ground-deep .tem-market{background:#FFFFFF}
.tem-page--light .tem-ground-lift .tem-card:hover,
.tem-page--light .tem-ground-lift .tem-market:hover,
.tem-page--light .tem-ground-deep .tem-card:hover,
.tem-page--light .tem-ground-deep .tem-market:hover{background:#FFFFFF}
.tem-page--light .tem-card,
.tem-page--light .tem-market,
.tem-page--light .tem-aside{background:var(--tem-panel)}
.tem-page--light .tem-card:hover,
.tem-page--light .tem-market:hover{background:var(--tem-panel-2)}

.tem-page--light .tem-step,
.tem-page--light .tem-proof__item,
.tem-page--light .tem-driver{background:var(--tem-ink)}
.tem-page--light .tem-ground-lift .tem-step,
.tem-page--light .tem-ground-lift .tem-proof__item,
.tem-page--light .tem-ground-lift .tem-driver{background:#EDE2D9}
.tem-page--light .tem-childlist li{background:var(--tem-ink)}
.tem-page--light .tem-ground-lift .tem-childlist li{background:#EDE2D9}
.tem-page--light .tem-childlist a:hover{background:#FFFFFF;color:var(--tem-ivory)}

/* Buttons keep dark text on brass, and the outlined one needs an ink border. */
.tem-page--light .tem-section .tem-btn--gold{background:#CB8509;color:#161616}
.tem-page--light .tem-section .tem-btn--gold:hover{background:#E09A1F}
.tem-page--light .tem-section .tem-btn--outline,
.tem-page--light .tem-section .tem-btn--ghost{border-color:rgba(22,22,22,.42);color:#161616}
.tem-page--light .tem-section .tem-btn--outline:hover,
.tem-page--light .tem-section .tem-btn--ghost:hover{border-color:#6E4A05;color:#6E4A05}
.tem-page--light .tem-section .tem-pill__dot{background:#161616;color:#F6EFEA}

/* Prose links and quotes take the light-safe brass. */
.tem-page--light .tem-prose a{color:#6E4A05}
.tem-page--light .tem-prose blockquote{border-inline-start-color:#6E4A05;color:#161616}
.tem-page--light .tem-prose > p:first-of-type{color:#161616}
.tem-page--light .tem-prose h2,
.tem-page--light .tem-prose h3{color:#161616}

/* The FAQ plus/minus and the eyebrow diamond both ride on --tem-gold, which is
   already redefined above, so they need no separate rule. */

/* ==========================================================================
   Drawing system
   Marks taken from the instruments of the work: an auction, a bid staircase,
   a pruned plan, a learning curve, a creative test, a matrix, a daypart grid.
   Opacity is set per placement, because a mark behind copy and a mark that
   *is* the content cannot share a value.
   ========================================================================== */

/* Fills an otherwise empty media panel — here the drawing is the content. */
.tem-panelart{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:min(84%,420px);color:var(--tem-muted);opacity:.5;z-index:1;
}

/* Sits behind copy in a full-bleed stage — must stay a background. */
.tem-stageart{
  position:absolute;inset-block-start:50%;inset-inline-start:6%;
  transform:translateY(-50%);
  width:min(38%,380px);color:var(--tem-ivory);opacity:.12;z-index:1;
}

/* Bleeds out of a corner, so the mark reads as part of something larger. */
.tem-cornerart{
  position:absolute;inset-block-end:-10px;inset-inline-end:-24px;
  width:min(46%,320px);color:var(--tem-muted);opacity:.3;z-index:0;
  pointer-events:none;
}
.tem-cornerart--start{inset-inline-end:auto;inset-inline-start:-24px;inset-block-end:auto;inset-block-start:-16px}
/* Corner art bleeds, so sections that carry it clip — but not the ones with a
   sticky sidebar, where overflow:hidden would break the stickiness. */
.tem-section:has(.tem-cornerart),
.tem-section:has(.tem-stageart){overflow:hidden}
.tem-showcase,.tem-method__dark{overflow:hidden}
.tem-method__dark > div,
.tem-method__dark > ul{position:relative;z-index:1}
@media (max-width:760px){
  .tem-cornerart,.tem-stageart{display:none}
  .tem-panelart{width:70%;opacity:.4}
}

/* Hero mark: the auction, ivory so it never competes with the brass eyebrow. */
.tem-hero__mark{color:var(--tem-ivory)}

/* Pillar icons */
.tem-picon{width:44px;height:auto;color:var(--tem-gold);display:block}
.tem-pillar__mark{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.tem-pillar__mark .tem-pillar__no{display:block}
.tem-page--light .tem-picon{color:var(--tem-gold)}
.tem-page--light .tem-panelart,
.tem-page--light .tem-cornerart{color:#56534A;opacity:.24}
.tem-page--light .tem-stageart{color:#161616;opacity:.07}

/* ==========================================================================
   Inner page blocks — added set
   ========================================================================== */

/* Label beside a paragraph: the eyebrow sits in its own column on wide screens
   so the reading measure stays short without centring anything. */
.tem-two{display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:clamp(1rem,3vw,3rem);align-items:start}
.tem-two .tem-eyebrow{margin:0}
.tem-two__body{
  font-family:var(--tem-display);
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.5;
  color:var(--tem-ivory);max-width:40ch;margin:0;
}
@media (max-width:760px){.tem-two{grid-template-columns:1fr;gap:1.2rem}}

/* The line. One sentence, given a whole band. */
.tem-thesis{
  margin:0;padding:0;border:0;max-width:34ch;
  font-family:var(--tem-display);
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.3;
  color:var(--tem-ivory);position:relative;
  padding-inline-start:clamp(1.5rem,4vw,3rem);
}
.tem-thesis::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:.35em auto;
  width:clamp(1rem,2.5vw,2rem);height:1px;background:var(--tem-gold);
}

/* What goes wrong. Numbered, because a list of five patterns reads as research
   and a list of five bullets reads as filler. */
.tem-mistakes{list-style:none;margin:0;padding:0;counter-reset:m;max-width:82ch}
.tem-mistakes li{
  counter-increment:m;
  display:grid;grid-template-columns:auto 1fr;gap:.3rem clamp(1rem,2.5vw,2rem);
  padding-block:1.15rem;border-block-start:1px solid var(--tem-line);
}
.tem-mistakes li:last-child{border-block-end:1px solid var(--tem-line)}
.tem-mistakes li::before{
  content:counter(m,decimal-leading-zero);
  grid-row:span 2;
  font-family:var(--tem-label);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  color:var(--tem-gold);padding-block-start:.35rem;
}
.tem-mistakes strong{font-family:var(--tem-display);font-weight:400;font-size:1.08rem;color:var(--tem-ivory)}
.tem-mistakes span{color:var(--tem-lead-ink);opacity:.92;font-size:.94rem;line-height:1.65}

/* What arrives, and when. Two columns with a leader between them. */
.tem-deliver{list-style:none;margin:0;padding:0;max-width:76ch}
.tem-deliver li{
  display:flex;align-items:baseline;gap:1rem;
  padding-block:.95rem;border-block-start:1px solid var(--tem-line);
}
.tem-deliver li:last-child{border-block-end:1px solid var(--tem-line)}
.tem-deliver__what{flex:1 1 auto;color:var(--tem-ivory);font-size:1rem}
.tem-deliver__when{
  flex:none;font-family:var(--tem-label);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tem-gold);
}

/* Right fit / wrong fit. The second column is deliberately not styled as a
   warning — declining work is a statement of confidence, not an apology. */
.tem-fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tem-line-soft);border:1px solid var(--tem-line-soft)}
@media (max-width:760px){.tem-fit{grid-template-columns:1fr}}
.tem-fit__col{background:var(--tem-ink);padding:clamp(1.5rem,2.6vw,2.1rem)}
.tem-ground-lift .tem-fit__col{background:var(--tem-ink-lift)}
.tem-page--light .tem-ground-lift .tem-fit__col{background:#EDE2D9}
.tem-fit__head{display:block;margin-bottom:1.2rem;color:var(--tem-gold)}
.tem-fit__col--no .tem-fit__head{color:var(--tem-muted)}
.tem-fit ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.tem-fit li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline;
  font-size:.95rem;color:var(--tem-lead-ink);line-height:1.6;
}
.tem-fit li::before{
  content:"";width:6px;height:6px;background:var(--tem-gold);
  transform:rotate(45deg);margin-block-start:.45rem;
}
.tem-fit__col--no li::before{background:none;box-shadow:inset 0 0 0 1px var(--tem-muted)}

/* ==========================================================================
   Proof bar — the band beneath the hero
   Figures on the left, the means of checking them on the right, one hairline
   across the top. It replaced two stacked rows that together filled a screen
   and pushed the first real section below the fold.
   ========================================================================== */
.tem-proofbar{background:var(--tem-ink-deep);padding-block:0 clamp(2.6rem,5vw,4.2rem)}
.tem-proofbar__grid{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(1.6rem,4vw,3.4rem);
  border-block-start:1px solid var(--tem-gold);
  padding-block-start:clamp(1.5rem,2.6vw,2.2rem);
}

.tem-proofbar__figures{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,2.6vw,2.2rem) clamp(1rem,2vw,1.8rem);
}
.tem-figure__value{
  display:block;font-family:var(--tem-display);
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;
  color:var(--tem-ivory);margin-block-end:.7rem;
  direction:ltr;unicode-bidi:isolate;
}
.tem-figure__label{
  display:block;font-family:var(--tem-label);
  font-size:.64rem;font-weight:400;letter-spacing:var(--tem-track-label);
  text-transform:uppercase;color:var(--tem-muted);line-height:1.5;
}

/* The verify column. Each claim is underlined in brass so it reads as
   something to open rather than a badge to admire. */
.tem-proofbar__verify{
  border-inline-start:1px solid var(--tem-line);
  padding-inline-start:clamp(1.4rem,3vw,2.4rem);
}
.tem-proofbar__head{
  margin:0 0 1.1rem;font-family:var(--tem-label);
  font-size:.64rem;font-weight:400;letter-spacing:var(--tem-track-label);
  text-transform:uppercase;color:var(--tem-gold);
}
.tem-proofbar__verify ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tem-proofbar__verify a{
  display:block;padding-block-end:.5rem;
  border-block-end:1px solid rgba(203,133,9,.38);
  font-size:.86rem;line-height:1.5;
  transition:border-color .3s var(--tem-ease);
}
.tem-proofbar__verify a strong{font-weight:400;color:var(--tem-ivory)}
.tem-proofbar__verify a span{color:var(--tem-muted)}
.tem-proofbar__verify a:hover{border-block-end-color:var(--tem-gold)}
.tem-proofbar__verify a:hover strong{color:var(--tem-gold)}
.tem-proofbar__foot{
  margin:1.1rem 0 0;font-size:.78rem;line-height:1.6;color:var(--tem-muted);
}

@media (max-width:900px){
  .tem-proofbar__grid{grid-template-columns:1fr;gap:2rem}
  .tem-proofbar__verify{
    border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid var(--tem-line);padding-block-start:1.6rem;
  }
}
@media (max-width:480px){
  .tem-proofbar__figures{grid-template-columns:1fr;gap:1.4rem}
}

/* ==========================================================================
   Hero wash — one gradient per slide
   Three stacked layers cross-fading rather than one background being swapped:
   background-image cannot be transitioned, opacity can. Each wash stays inside
   the brand — the hue never leaves the emerald-to-brass range, so the slides
   read as one stone catching light differently rather than three themes.
   ========================================================================== */
.tem-hero__wash{position:absolute;inset:0;z-index:0;pointer-events:none}
.tem-hero__wash i{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.2s var(--tem-ease);
}
.tem-hero__wash i.is-on{opacity:1}

/* 01 — Growth: mustard light gathering high and to the right. */
.tem-hero__wash i:nth-child(1){
  background:
    radial-gradient(58% 46% at 78% 20%, rgba(203,133,9,.15), transparent 68%),
    radial-gradient(46% 40% at 88% 34%, rgba(96,86,34,.35), transparent 70%);
}
/* 02 — Strategy: forest, cooler and lower, weight to the left of the headline. */
.tem-hero__wash i:nth-child(2){
  background:
    radial-gradient(64% 52% at 24% 34%, rgba(30,58,42,.80), transparent 70%),
    radial-gradient(50% 44% at 82% 72%, rgba(20,42,29,.60), transparent 72%);
}
/* 03 — Performance: an olive ember low and right, warmest of the three. */
.tem-hero__wash i:nth-child(3){
  background:
    radial-gradient(58% 50% at 74% 68%, rgba(107,95,19,.34), transparent 68%),
    radial-gradient(60% 46% at 30% 18%, rgba(30,58,42,.50), transparent 70%);
}

@media (prefers-reduced-motion:reduce){
  .tem-hero__wash i{transition:none}
}

/* ==========================================================================
   Contact page
   Two columns: what happens on the left, the form on the right. The sequence
   answers the question the form provokes — what am I actually signing up for —
   before the visitor has to ask it.
   ========================================================================== */
.tem-contactgrid{
  display:grid;grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:900px){.tem-contactgrid{grid-template-columns:1fr;gap:2.5rem}}

/* Numbered sequence */
.tem-steps--num{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:s}
.tem-steps--num li{
  counter-increment:s;
  display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.1rem;
  padding-block:1.05rem;border-block-start:1px solid var(--tem-line);
}
.tem-steps--num li:last-child{border-block-end:1px solid var(--tem-line)}
.tem-steps--num li::before{
  content:counter(s,decimal-leading-zero);grid-row:span 2;
  font-family:var(--tem-label);font-size:.64rem;font-weight:500;
  letter-spacing:.16em;color:var(--tem-gold);padding-block-start:.3rem;
}
.tem-steps--num strong{font-family:var(--tem-display);font-weight:400;font-size:1.05rem;color:var(--tem-ivory)}
.tem-steps--num span{color:var(--tem-lead-ink);opacity:.92;font-size:.9rem;line-height:1.6}

.tem-contactgrid__direct{margin-block-start:2.2rem}
.tem-contactgrid__direct ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem}
.tem-contactgrid__direct a{
  font-size:.95rem;color:var(--tem-ivory);
  border-block-end:1px solid rgba(203,133,9,.4);padding-block-end:.2rem;
  transition:border-color .3s var(--tem-ease),color .3s var(--tem-ease);
}
.tem-contactgrid__direct a:hover{color:var(--tem-gold);border-block-end-color:var(--tem-gold)}
.tem-contactgrid__note{margin:1.1rem 0 0;font-size:.82rem;color:var(--tem-muted);line-height:1.6}

/* Form */
.tem-formwrap{
  background:var(--tem-ink-lift);
  padding:clamp(1.6rem,3.2vw,2.6rem);
  border:1px solid var(--tem-line-soft);
}
.tem-page--light .tem-formwrap{background:var(--tem-panel);border-color:var(--tem-line)}

.tem-form{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:560px){.tem-form{grid-template-columns:1fr}}
.tem-field--span2{grid-column:1 / -1}
@media (max-width:560px){.tem-field--span1,.tem-field--span2{grid-column:auto}}

.tem-field__label{
  display:block;margin-block-end:.5rem;
  font-family:var(--tem-label);font-size:.68rem;font-weight:400;
  letter-spacing:var(--tem-track-label);text-transform:uppercase;
  color:var(--tem-muted);
}
.tem-field__label i{font-style:normal;color:var(--tem-gold)}

.tem-form input[type="text"],
.tem-form input[type="email"],
.tem-form input[type="url"],
.tem-form select,
.tem-form textarea{
  width:100%;box-sizing:border-box;
  background:transparent;
  border:0;border-block-end:1px solid var(--tem-line);
  padding:.65rem 0;
  font-family:var(--tem-body);font-size:1rem;font-weight:300;
  color:var(--tem-ivory);
  border-radius:0;                    /* iOS rounds inputs by default */
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--tem-ease);
}
.tem-form textarea{resize:vertical;min-height:3.4rem;line-height:1.6}
.tem-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--tem-gold) 50%),
                   linear-gradient(135deg,var(--tem-gold) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.15rem,calc(100% - 7px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-end:2rem;cursor:pointer;
}
[dir="rtl"] .tem-form select{
  background-position:12px 1.15rem,17px 1.15rem;
  padding-inline-end:0;padding-inline-start:2rem;
}
.tem-form select option{background:var(--tem-ink-deep);color:var(--tem-ivory)}
.tem-form input:focus,.tem-form select:focus,.tem-form textarea:focus{
  outline:none;border-block-end-color:var(--tem-gold);
}
.tem-form input:focus-visible,.tem-form select:focus-visible,.tem-form textarea:focus-visible{
  outline:2px solid var(--tem-gold);outline-offset:4px;
}
.tem-form ::placeholder{color:var(--tem-muted);opacity:.7}

/* Checkboxes as a row of small squares, matching the diamond motif. */
.tem-checks{display:flex;flex-wrap:wrap;gap:.6rem .9rem}
.tem-check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;font-weight:300;color:var(--tem-lead-ink)}
.tem-check input{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;margin:0;flex:none;
  border:1px solid var(--tem-line-strong);
  transition:background .25s var(--tem-ease),border-color .25s var(--tem-ease);
}
.tem-check input:checked{background:var(--tem-gold);border-color:var(--tem-gold)}
.tem-check input:focus-visible{outline:2px solid var(--tem-gold);outline-offset:3px}

.tem-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-block-start:.6rem}
.tem-form__legal{margin:0;font-size:.78rem;color:var(--tem-muted);line-height:1.6;max-width:38ch}

/* The honeypot: off-screen rather than display:none, because some bots skip
   anything hidden and a screen reader user never reaches it either way. */
.tem-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* Result notices */
.tem-formnote{padding:1.3rem 1.5rem;border-inline-start:2px solid var(--tem-gold);margin-block-end:1.6rem}
.tem-formnote p{margin:.4rem 0 0;color:var(--tem-lead-ink);font-size:.95rem;line-height:1.65}
.tem-formnote--ok{background:rgba(203,133,9,.09)}
.tem-formnote--err{border-inline-start-color:#D98A5A;background:rgba(217,138,90,.10)}
.tem-formnote--err p{margin:0}

/* ==========================================================================
   Footer channels
   Icons, not the number written a second time. Outlined rather than filled so
   they read as quiet links in a footer instead of competing with the fixed
   rail, which is the loud version of the same three actions.
   ========================================================================== */
.tem-footer__channels{display:flex;gap:.7rem;margin-block-start:1.5rem}
.tem-footer__channels a{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--tem-line);
  color:var(--tem-muted);
  transition:color .3s var(--tem-ease),border-color .3s var(--tem-ease),
             background .3s var(--tem-ease);
}
.tem-footer__channels a:hover{
  color:var(--tem-gold);
  border-color:var(--tem-gold);
  background:rgba(203,133,9,.08);
}
.tem-footer__channels a:focus-visible{outline:2px solid var(--tem-gold);outline-offset:3px}
.tem-footer__channels svg{width:18px;height:18px}

/* ==========================================================================
   Mobile navigation
   The burger and its panel existed in the markup and the script but had no
   styles at all — the button was invisible and the menu never opened on a
   phone. Built here rather than patched, and scoped to the same breakpoint the
   rest of the header uses.
   ========================================================================== */
.tem-burger{
  display:none;
  width:44px;height:44px;padding:0;flex:none;
  background:none;border:0;cursor:pointer;
  position:relative;color:var(--tem-ivory);
}
.tem-burger::before,
.tem-burger::after,
.tem-burger span{
  content:"";position:absolute;inset-inline:11px;height:1px;
  background:currentColor;
  transition:transform .35s var(--tem-ease),opacity .25s var(--tem-ease),
             inset-block-start .35s var(--tem-ease);
}
.tem-burger::before{inset-block-start:16px}
.tem-burger span{inset-block-start:22px}
.tem-burger::after{inset-block-start:28px}

.tem-burger[aria-expanded="true"]::before{inset-block-start:22px;transform:rotate(45deg)}
.tem-burger[aria-expanded="true"] span{opacity:0}
.tem-burger[aria-expanded="true"]::after{inset-block-start:22px;transform:rotate(-45deg)}

@media (max-width:1080px){
  .tem-burger{display:block;order:3}
  .tem-header__cta{display:none}

  /* The panel drops from under the header and takes the deepest ground, so it
     reads as a surface rather than as a translucent overlay on the hero. */
  .tem-nav{
    position:fixed;
    inset-block-start:var(--tem-header-h);
    inset-inline:0;
    max-height:calc(100dvh - var(--tem-header-h));
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--tem-ink-deep);
    border-block-start:1px solid var(--tem-line-soft);
    padding:1.4rem var(--tem-gutter) 2.4rem;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--tem-ease),transform .3s var(--tem-ease),visibility .3s;
  }
  .tem-header.is-stuck + .tem-nav,
  .tem-header.is-stuck .tem-nav{inset-block-start:66px}
  body.admin-bar .tem-nav{inset-block-start:calc(var(--tem-header-h) + 46px)}

  .tem-nav.is-open{opacity:1;visibility:visible;transform:none}

  .tem-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .tem-nav > ul > li{border-block-end:1px solid var(--tem-line-soft)}
  .tem-nav > ul > li:last-child{border-block-end:0}
  .tem-nav > ul > li > a{
    display:block;padding-block:1rem;font-size:.92rem;letter-spacing:.1em;
  }
  .tem-nav > ul > li > a::after{display:none}

  /*
   * Dropdowns must be dismantled here, not merely restyled. Every desktop rule
   * has to be undone explicitly — position, width, centring transform, grid
   * columns, background and shadow — or the panel keeps floating over the list
   * it is supposed to sit inside. Leaving any one of them is what produced the
   * overlap.
   */
  .tem-nav .sub-menu,
  .tem-nav li.tem-mega > .sub-menu,
  .tem-nav li.tem-drop--wide > .sub-menu{
    position:static;
    inset:auto;
    inset-inline-start:auto;
    inset-block-start:auto;
    transform:none;
    min-width:0;
    max-width:none;
    margin:0;
    padding:0 0 .9rem;
    display:block;
    background:none;
    box-shadow:none;
    border:0;
    opacity:1;visibility:visible;
    grid-template-columns:1fr;
    transition:none;
  }
  [dir="rtl"] .tem-nav .sub-menu{transform:none}

  /* Sub-items are indented rather than bordered: a border on every level makes
     a phone menu read as a table. */
  .tem-nav .sub-menu li{border:0}
  .tem-nav .sub-menu a{
    padding:.55rem 0 .55rem 1rem;
    font-size:.86rem;
    color:var(--tem-muted);
    border-inline-start:1px solid var(--tem-line-soft);
  }
  .tem-nav .sub-menu a:hover{color:var(--tem-gold);background:none}

  /* Third level: the expertise leaves, indented once more. */
  .tem-nav li.tem-mega .sub-menu .sub-menu{display:block;padding-block-end:.4rem}
  .tem-nav li.tem-mega .sub-menu .sub-menu a{
    padding-inline-start:2rem;font-size:.82rem;opacity:.85;border-inline-start:0;
  }

  /* Nothing opens on hover on a touch screen — everything is already open. */
  .tem-nav > ul > li:hover > .sub-menu,
  .tem-nav > ul > li:focus-within > .sub-menu{transform:none}
  .tem-nav > ul > li.menu-item-has-children::after{display:none}

  /* A mobile CTA at the end of the list, since the header button is hidden. */
  .tem-nav__cta{
    display:block;margin-block-start:1.6rem;text-align:center;
  }
}
@media (min-width:1081px){
  .tem-nav__cta{display:none}
}

/* ==========================================================================
   Cross-links
   The block that connects a discipline to the sectors and markets it runs in.
   Set as a list of rules rather than cards: these are navigational, and cards
   would compete with the evidence blocks above them.
   ========================================================================== */
.tem-crosslinks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tem-crosslinks li{border-block-start:1px solid var(--tem-line)}
.tem-crosslinks li:last-child{border-block-end:1px solid var(--tem-line)}
.tem-crosslinks a{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) 1fr auto;
  gap:.4rem clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding-block:clamp(1rem,2vw,1.35rem);
  transition:padding-inline-start .35s var(--tem-ease);
}
.tem-crosslinks a:hover{padding-inline-start:.7rem}
.tem-crosslinks__name{
  font-family:var(--tem-display);font-size:1.08rem;color:var(--tem-ivory);
  transition:color .3s var(--tem-ease);
}
.tem-crosslinks__note{color:var(--tem-muted);font-size:.9rem;line-height:1.55}
.tem-crosslinks__arrow{
  color:var(--tem-gold);opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s var(--tem-ease),transform .3s var(--tem-ease);
}
.tem-crosslinks a:hover .tem-crosslinks__name{color:var(--tem-gold)}
.tem-crosslinks a:hover .tem-crosslinks__arrow{opacity:1;transform:none}
[dir="rtl"] .tem-crosslinks__arrow{transform:scaleX(-1) translateX(-6px)}
[dir="rtl"] .tem-crosslinks a:hover .tem-crosslinks__arrow{transform:scaleX(-1)}

@media (max-width:760px){
  .tem-crosslinks a{grid-template-columns:1fr auto}
  .tem-crosslinks__note{grid-column:1/-1}
}

/* ==========================================================================
   Contact page — the plain-speaking block
   Two facts about the model that a buyer will ask about anyway. On the page
   rather than in the contract, because a term discovered after payment reads
   as concealment however clearly the contract stated it.
   ========================================================================== */
.tem-contactgrid__note-block{
  margin-block-start:2rem;
  padding:1.4rem 1.5rem;
  border-inline-start:2px solid var(--tem-gold);
  background:rgba(203,133,9,.06);
}
.tem-contactgrid__note-block p{
  margin:0 0 .9rem;font-size:.88rem;line-height:1.65;color:var(--tem-lead-ink);
}
.tem-contactgrid__note-block p:last-child{margin-block-end:0}
.tem-contactgrid__note-block strong{color:var(--tem-ivory);font-weight:500}
.tem-contactgrid__note-block .tem-label{margin-block-end:.9rem;color:var(--tem-gold)}

/* ==========================================================================
   Pricing block
   The figure is large because it is the thing people came to find, and the
   list sits directly under it because a number read alone gets compared with
   whoever is cheapest.
   ========================================================================== */
.tem-pricing{
  margin-block-start:2rem;
  padding:1.6rem 1.7rem;
  border:1px solid var(--tem-line);
  background:rgba(203,133,9,.05);
}
.tem-pricing .tem-label{margin-block-end:1rem;color:var(--tem-gold)}

.tem-pricing__figure{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .9rem;
}
.tem-pricing__figure strong{
  font-family:var(--tem-display);font-weight:400;
  font-size:clamp(2rem,4vw,2.7rem);line-height:1;
  color:var(--tem-ivory);
  direction:ltr;unicode-bidi:isolate;
}
.tem-pricing__figure span{
  font-size:.86rem;color:var(--tem-muted);
}

.tem-pricing__qualifier{
  margin:0 0 1.3rem;padding-block-end:1.2rem;
  border-block-end:1px solid var(--tem-line-soft);
  font-size:.86rem;line-height:1.65;color:var(--tem-lead-ink);
}

.tem-pricing__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tem-pricing__list li{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;
  font-size:.87rem;line-height:1.6;color:var(--tem-lead-ink);
}
/* An open ring, matching the verification marks: it points at something rather
   than asserting it, which is the right register for a list of inclusions. */
.tem-pricing__list li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  border:1px solid var(--tem-gold);
  transform:translateY(.45rem);
}

/* The note distinguishing this site's pricing from the Saudi one. Quieter than
   the inclusions list — it answers a question rather than making a claim. */
.tem-pricing__sibling{
  margin:0 0 1.3rem;
  font-size:.82rem;line-height:1.6;color:var(--tem-muted);
}
.tem-pricing__sibling a{color:var(--tem-gold-lit);border-block-end:1px solid rgba(224,166,60,.35)}
.tem-pricing__sibling a:hover{border-block-end-color:var(--tem-gold-lit)}