/* LUMINUM Partners — web layer.
   Palette and wordmark constants from LUMINUM_Identity_Specification_v1.md.
   Type and spacing scale from claude/LUMINUM_Website_Architecture_v01.md §1. */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Archivo:wght@400;500;600&display=swap");

:root{
  --ink:#2E2A23; --ivory:#F6F2EA; --gold:#C9A227; --body:#47433A;
  --greige:#B9B4A6; --ivory2:#EDE7DA; --muted:#9A9384; --card:#FBF8F1; --rule:rgba(46,42,35,.16);
  --line:#FFFFFF;                     /* the plan overlay colour — one switch */
  --shell:1120px; --gutter:clamp(20px,5vw,56px); --band:clamp(64px,9vw,120px);
  /* exactly the distance from a shell-aligned edge to the window edge, so a band can
     bleed to the edge and no further — no overshoot to clip, and clipping an ancestor
     would silently break position:sticky for the pinned section inside it */
  --bleed:calc(max(0px, (100vw - var(--shell)) / 2) + var(--gutter));
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:1.1875rem;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);position:relative}
.band{padding:var(--band) 0;position:relative}
.band.tight{padding-top:0}
hr{border:0;height:1px;background:var(--rule);margin:0}
h1,h2,h3{font-weight:400;margin:0;text-wrap:pretty}
h1{font-size:clamp(1.9rem,3.9vw,2.85rem);line-height:1.15;letter-spacing:-.004em}
h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2}
h3{font-size:1.3125rem;line-height:1.34}
p{margin:0 0 1.05em 0;max-width:64ch}
.lede{font-size:clamp(1.12rem,2.1vw,1.42rem);line-height:1.5;color:var(--body);max-width:52ch}
.kicker{font-family:Archivo,system-ui,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.155em;text-transform:uppercase;color:var(--body)}
.meta{font-family:Archivo,system-ui,sans-serif;font-size:.78rem;line-height:1.6;color:var(--body)}
.big{font-size:clamp(3rem,7vw,4.75rem);line-height:.98;letter-spacing:-.01em}
.dark{background:var(--ink);color:var(--ivory2)}
.dark .kicker,.dark .meta{color:var(--muted)}
.dark h1,.dark h2,.dark .big{color:var(--ivory)}
.todo{color:#B05B2E}

/* ── wordmark, built from the identity constants ─────────────────────────── */
.lock{display:flex;align-items:center;gap:15px}
.icon{width:38px;height:38px;display:block;flex:0 0 auto}
.icon .src{transition:opacity .6s ease}
body.away .icon .src{opacity:0}
.wm{font-family:"EB Garamond",Georgia,serif;font-weight:400;line-height:1;display:inline-block}
.wm .pn{font-weight:500;display:block}
.wm .k1{margin-right:-.030em}.wm .k3{margin-right:.014em}.wm .k4{margin-right:.018em}
.wm .k5{margin-right:.006em}.wm .k7{margin-right:-.026em}

/* ── navigation ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(246,242,234,.93);
  backdrop-filter:saturate(1.1) blur(10px);border-bottom:1px solid var(--rule)}
.nav .in{max-width:var(--shell);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.navlinks{display:flex;gap:26px;font-family:Archivo,system-ui,sans-serif;font-size:.78rem;
  letter-spacing:.055em;text-transform:uppercase;color:var(--body);flex-wrap:wrap}
.navlinks a{padding-bottom:3px;border-bottom:1px solid transparent}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.navtoggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.navtoggle svg{display:block}

/* ── the composite: photograph + plan, with a hole kept over the subject ──── */
.comp{position:relative;overflow:hidden;background:#141210}
.comp .plate{position:absolute;inset:0;will-change:transform}
.comp .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clear{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(var(--hole,60% 66%) at var(--hx,50%) var(--hy,50%),
     transparent 0%,transparent 38%,#000 78%);
          mask-image:radial-gradient(var(--hole,60% 66%) at var(--hx,50%) var(--hy,50%),
     transparent 0%,transparent 38%,#000 78%)}
.maplayer{position:absolute;inset:-14%;background:var(--line);mix-blend-mode:screen;
  opacity:var(--mapop,.6);will-change:transform;
  -webkit-mask-image:url(plan_mask.webp);mask-image:url(plan_mask.webp);
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* The hero is framed around one thing: the two lit figures, at 49% across and 51% down
   in the photograph. The plate is deliberately wider than its window and anchored to the
   left, which walks the pair rightwards out from behind the headline and into the empty
   half of the frame. The arithmetic: screen x = -left + 0.49 * (1 + left + right). */
.herowrap{position:relative;overflow:hidden;height:min(86vh,720px)}
.herowrap .comp{position:absolute;inset:0;height:100%}
.herowrap .plate{inset:-9% -47% -9% -4%}        /* puts the pair at ~70% of the width */
.herowrap .plate img{object-position:49% 50%}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,11,9,.9) 0%,rgba(12,11,9,.68) 38%,rgba(12,11,9,.18) 78%)}
.herocopy{position:absolute;inset:0;display:flex;align-items:center}
.herofoot{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,36px)}

/* ── the two pillars ───────────────────────────────────────────────────────
   The band is one grid so that on a phone each figure can be ordered to follow
   its own pillar. On a wide screen the pillars sit in a pinned stage spanning
   both columns, and the two figures take a column each underneath. */
.pillarband{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4.5vw,64px)}
.pinwrap{grid-column:1/-1}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4.5vw,64px)}
.pillar{position:relative;align-self:start;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pillar .comp{aspect-ratio:3/2;height:auto;margin-bottom:26px}
.tilelabel{display:block;margin-bottom:14px;color:#8A8377}
/* the whole tile is the link, so it has to say so without shouting */
.pillar .more{border-bottom-color:rgba(46,42,35,.18);transition:border-color .4s ease}
.pillar .comp .plate{transition:filter .5s ease}
@media (hover:hover){
  .pillar:hover{transform:translateY(-3px)}
  .pillar:hover .comp .plate{filter:brightness(1.09)}
  .pillar:hover .more{border-bottom-color:var(--gold)}
  .pillar:hover .tilelabel{color:var(--body)}
}
.pillar:focus-visible{outline:2px solid var(--gold);outline-offset:8px}

/* ── the pin ───────────────────────────────────────────────────────────────
   The stage sticks while the wrapper's extra height is consumed. Scroll input
   is never intercepted: the scrollbar, the keyboard and trackpad momentum all
   behave normally, the section simply holds still. Only where it fits. */
.pinspace{height:0}
@media (min-width:901px) and (min-height:820px){
  /* The extra travel has to sit INSIDE the wrapper's content box. Padding on the wrapper
     does not work: a sticky element's containing block is its parent's content box, so
     padding leaves it exactly zero room to move and it never sticks at all. */
  .pinspace{height:300px}
  .pinstage{position:sticky;top:112px}   /* clear of the sticky nav, not flush against it */
}
@media (prefers-reduced-motion:reduce){
  .pinspace{height:0!important}
  .pinstage{position:static!important}
}

/* ── the room: held below its exposure, given back where the light falls ──── */
/* Two Lightroom operations, in order: the global exposure comes down about a stop and a
   half, and a radial gradient gives it back. The second one is a full-exposure copy of the
   same photograph shown through the mask below, so the people brighten rather than merely
   stop being dimmed. */
.roomwrap{position:relative}
.roomwrap .comp{aspect-ratio:2.95/1}
.roomwrap .plate img{filter:brightness(.38) contrast(1.05) saturate(.86)}
/* The room does not get a pool of light dragged across it. The light drops onto the
   partner who is standing, and at that moment the whole group comes up together —
   one fixed, soft-edged ellipse laid along the table, its opacity driven by how near
   the travelling light is. Nothing about the mask changes as you scroll, only how
   strongly it is showing, which is also the one thing every browser animates cheaply.
   The shape is an SVG ellipse rather than a CSS gradient because it has to be tilted
   to follow the table, and preserveAspectRatio='none' lets it stretch with the frame. */
.lift{position:absolute;inset:0;pointer-events:none;opacity:var(--on,0);
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 609' preserveAspectRatio='none'><defs><filter id='b' x='-25%25' y='-60%25' width='150%25' height='220%25'><feGaussianBlur stdDeviation='78'/></filter></defs><ellipse cx='905' cy='290' rx='760' ry='196' fill='%23fff' filter='url(%23b)' transform='rotate(8 905 290)'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 609' preserveAspectRatio='none'><defs><filter id='b' x='-25%25' y='-60%25' width='150%25' height='220%25'><feGaussianBlur stdDeviation='78'/></filter></defs><ellipse cx='905' cy='290' rx='760' ry='196' fill='%23fff' filter='url(%23b)' transform='rotate(8 905 290)'/></svg>");
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.lift img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.06) saturate(1.05)}
/* With no travelling light there is nothing to follow, so the room simply sits a little
   under its exposure rather than staying dark for ever. */
@media (prefers-reduced-motion:reduce){
  .roomwrap .plate img{filter:brightness(.62)}
  .lift{opacity:.75}
}
.stat{position:relative;color:var(--ivory2);padding:var(--band) 0;margin-top:var(--band)}
.waypt{position:absolute;width:0;height:0}
.stat::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));
  background:var(--ink);z-index:-1}
.stat .kicker{color:var(--muted)}
.stat .big{color:var(--ivory)}
.stat .meta{color:var(--muted);margin-top:22px}
/* The ink bands bleed past their own box to the window edges, which has to be contained
   somewhere. NOT on body: making body a clip container silently breaks position:sticky for
   everything inside it, which is what the pinned pillar section depends on. On the root the
   value propagates to the viewport instead, so no clip container appears in the chain. */


/* the two doors */
/* Both doors share one grid track and one height, so the two theme images render at
   identical dimensions however differently they were shot. */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,64px);
  align-items:start}
.door{position:relative}
.door .comp{height:min(46vh,380px);margin-bottom:26px}
.panwrap .plate{inset:0;width:auto;height:100%}
.panwrap .plate img{position:relative;height:100%;width:auto;max-width:none;object-fit:fill}
.sectionhero .comp{height:min(58vh,520px)}

/* ── the travelling light ────────────────────────────────────────────────── */
.torch{position:fixed;left:0;top:0;width:0;height:0;z-index:30;pointer-events:none;
  opacity:0;transition:opacity .6s ease}
body.lighton .torch{opacity:1}
.torch span{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);display:block}
/* A warm fade that only comes up over dark ground — a light moving through darkness,
   rather than a marker pinned on ivory. JS sets its opacity, so it crosses smoothly. */
.torch .glow{width:420px;height:420px;opacity:0;
  background:radial-gradient(circle closest-side,
    rgba(255,234,182,.29) 0%, rgba(241,199,101,.19) 22%,
    rgba(201,162,39,.085) 46%, rgba(201,162,39,.028) 68%, transparent 100%)}
.torch .core{width:9px;height:9px;background:var(--gold)}
.torch .r1{width:30px;height:30px;border:1px solid var(--gold);opacity:0;transition:opacity .45s ease}
.torch .r2{width:52px;height:52px;border:1px solid var(--gold);opacity:0;transition:opacity .45s ease}
.torch.at .r1{opacity:.36}.torch.at .r2{opacity:.16}

.krow{display:flex;align-items:center;margin-bottom:22px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--gold);opacity:.15;
  transition:opacity .6s ease;flex:0 0 auto;position:relative}
.rule-g{width:56px;height:1px;background:var(--gold);margin:0 12px;opacity:.26;
  transition:opacity .6s ease;flex:0 0 auto}
body.lighton .dot{opacity:0}
body.lighton .lit .dot{opacity:1}
.lit .rule-g{opacity:.62}
.wash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(40% 58% at 16% 46%,rgba(201,162,39,.10),transparent 70%)}
.lit>.wash{opacity:1}
[data-light]{position:relative}
.iconwrap{display:block;position:relative;flex:0 0 auto}
/* a bare point in the gutter, so the light has somewhere to be beside a block of text */
.gut{position:absolute!important;left:calc(var(--gutter) * -0.55);width:0;height:0}
.pillar h2{position:relative}
.tbeacon{position:absolute!important;left:calc(var(--gutter) * -0.55);top:.62em;width:0;height:0}

/* ── components ──────────────────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.offer{position:relative;padding-top:34px;border-top:1px solid var(--rule)}
.offer.first{border-top:2px solid var(--ink)}
.offer h3{margin-top:10px}
.offer .line{font-size:1.15rem;margin-top:8px}
.ph{border:1px dashed rgba(46,42,35,.32);background:rgba(46,42,35,.035);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font-family:Archivo,system-ui,sans-serif;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8A8377}
.portrait{width:120px;height:150px}
/* the real portraits, once they exist: same box as the placeholder, object-fit so a
   slightly different crop can never stretch a face */
img.portrait{object-fit:cover;display:block;border:0;padding:0;background:none;
  filter:none;border-radius:2px}
.grouphead{padding:34px 0 6px;border-top:2px solid var(--ink);margin-top:48px}
.grouphead:first-of-type{margin-top:0}
.grouphead + .people{border-top:0}
.people{position:relative;display:grid;grid-template-columns:400px minmax(0,1fr);
  gap:clamp(28px,5vw,64px);padding:34px 0;border-top:1px solid var(--rule)}
.people:first-of-type{border-top:2px solid var(--ink)}
.who{display:flex;gap:22px;align-items:flex-start}
.who .ph{flex:0 0 auto}                 /* never let a long name squeeze the portrait */
.role{font-family:Archivo,system-ui,sans-serif;font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#8A8377;margin-top:8px}
.cta{display:inline-block;margin-top:24px;font-size:1.38rem;border-bottom:1px solid var(--gold);
  padding-bottom:5px}
.more{font-family:Archivo,system-ui,sans-serif;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:1px solid rgba(46,42,35,.3);padding-bottom:4px;
  display:inline-block;margin-top:6px}
.dark .more{border-bottom-color:rgba(246,242,234,.4)}
.article{max-width:720px;margin:0 auto}
.article p{font-size:1.25rem;line-height:1.7;max-width:none}
.foot{background:var(--ink);color:var(--ivory2);padding:96px 0 48px}
.footrow{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:104px;flex-wrap:wrap}

@media (max-width:900px){
  .doors,.grid3{grid-template-columns:1fr}
  .pillarband{grid-template-columns:1fr}
  .pinwrap,.pinstage,.pillars{display:contents}   /* so all four can be ordered together */
  .pillar[data-p="ai"]{order:1} .stat[data-p="ai"]{order:2}
  .pillar[data-p="tr"]{order:3} .stat[data-p="tr"]{order:4}
  .pillar[data-p="tr"]{margin-top:var(--band)}
  /* the pan needs height to read as two rooms; 3:2 is too short once full width */
  .pillar.panwrap .comp{aspect-ratio:4/3}
  /* a small frame cannot go as dark before it stops reading as a photograph at all */
  .roomwrap .comp{aspect-ratio:16/10}
  .roomwrap .plate img{filter:brightness(.47) contrast(1.04) saturate(.9)}
  .tbeacon{left:6px}
  .split,.people{grid-template-columns:1fr;gap:20px}
  .navlinks{display:none}
  .navlinks.open{display:flex;flex-direction:column;gap:14px;width:100%;padding-top:16px}
  .nav .in{flex-wrap:wrap}
  .navtoggle{display:block}
  .gut{left:6px}          /* the light comes inside the column; there is no gutter to sit in */
  .herowrap{height:min(78vh,620px)}
  /* On a phone the frame is taller than it is wide, so the crop is horizontal and the pair
     is moved by the plate's HEIGHT instead: screen y = -top + 0.51 * (1 + top + bottom).
     Here that drops them to ~72% — into the gap between the sentence and the locator. */
  /* Once the layout stacks, a left-to-right scrim darkens the pair as much as the
     headline — they sit near the middle of the width, not at 70%. It runs top to
     bottom instead: strong behind the text, gone by the time you reach them. */
  .scrim{background:linear-gradient(180deg,
     rgba(12,11,9,.88) 0%, rgba(12,11,9,.72) 26%,
     rgba(12,11,9,.34) 48%, rgba(12,11,9,.10) 66%, rgba(12,11,9,.28) 100%)}
  .herowrap .plate{inset:-9% -4% -18% -4%}
  /* the horizontal crop only exists at this width, so object-position only matters here */
  .herowrap .plate img{object-position:56% 50%}
  .herocopy{align-items:flex-start;padding-top:9%}
  .herowrap .clear{--hx:56%!important;--hy:57%!important}
  /* a small touch, on top of the +1 EV grade of the photograph itself */
  .herowrap .plate img{filter:brightness(1.05)}   /* the clear zone follows them */
  .herowrap [data-pic="1"]{left:56%!important;top:57%!important}   /* and so does the light */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .torch{display:none!important}
  .plate,.maplayer{transform:none!important}
  body.lighton .dot{opacity:1}.rule-g{opacity:.62}.wash{opacity:1}
}

/* The palette is the brand's, not the viewer's. Tokens are redefined under both
   dark-mode guards so a dark-mode viewer still gets the page as it was designed,
   rather than a user-agent inversion of it. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#2E2A23; --ivory:#F6F2EA; --gold:#C9A227; --body:#47433A;
    --greige:#B9B4A6; --ivory2:#EDE7DA; --muted:#9A9384; --card:#FBF8F1;
    --rule:rgba(46,42,35,.16); --line:#FFFFFF;
  }
  :root:not([data-theme="light"]) body{background:var(--ivory);color:var(--ink)}
}
:root[data-theme="dark"]{
  --ink:#2E2A23; --ivory:#F6F2EA; --gold:#C9A227; --body:#47433A;
  --greige:#B9B4A6; --ivory2:#EDE7DA; --muted:#9A9384; --card:#FBF8F1;
  --rule:rgba(46,42,35,.16); --line:#FFFFFF;
}
:root[data-theme="dark"] body{background:var(--ivory);color:var(--ink)}
/* LUMINUM service cards — v1, 24 Sept 2026. Self-contained; no libraries. */
.lc-grid{display:grid;gap:24px;margin-top:56px}
.lc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.lc-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.lc-grid--2,.lc-grid--3{grid-template-columns:1fr}}
.lc-card{box-sizing:border-box;padding:36px 32px 40px;display:flex;flex-direction:column;align-items:center;gap:22px;background:#FFFDF8;border:1.5px solid #E4DECF;border-radius:28px;overflow:hidden;text-align:center}
.lc-kicker{min-height:20px;margin:0;font-family:Archivo,system-ui,sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8377}
.lc-title{margin:0;font-weight:400;font-size:26px;line-height:1.25;color:#2E2A23;text-wrap:balance}
.lc-art{width:100%;max-width:300px}
.lc-art svg{display:block;width:100%;height:auto;overflow:visible}
.lc-desc{margin:0;max-width:40ch;color:#47433A}
/* play once when the card comes into view, then stay lit */
.lc-once *{animation-duration:7.36s!important;animation-iteration-count:1!important;animation-fill-mode:both!important;animation-play-state:paused!important}
.lc-once.is-on *{animation-play-state:running!important}
/* diagnostics: the glass is tied to scroll position (--p from 0 to 1, set by the script) */
.lc-scrub{--p:0}
.lc-scrub *{animation-play-state:paused!important;animation-delay:calc(var(--p) * -7.2s)!important}
@media (prefers-reduced-motion: reduce){
  .lc-once *,.lc-once.is-on *{animation-delay:-7.36s!important;animation-play-state:paused!important}
  .lc-scrub{--p:.72!important}
}
@keyframes lc-dA{0%,17%{fill:#B9B4A6}22%,38%{fill:#C9A227}43%,100%{fill:#B9B4A6}}.lc-dA{fill:#B9B4A6;animation:lc-dA 8s ease-in-out infinite}@keyframes lc-dB{0%,53%{fill:var(--u)}58%,72%{fill:#C9A227}77%,100%{fill:var(--u)}}.lc-dB{fill:var(--u);animation:lc-dB 8s ease-in-out infinite}@keyframes lc-dlens{0%{transform:translate(-170px,-40px);opacity:0}8%{transform:translate(-120px,-30px);opacity:1}20%{transform:translate(0,0)}40%{transform:translate(0,0)}56%{transform:translate(126px,-54px)}72%{transform:translate(126px,-54px)}86%{transform:translate(300px,-110px);opacity:1}90%{transform:translate(320px,-120px);opacity:0}100%{transform:translate(-170px,-40px);opacity:0}}.lc-dlens{animation:lc-dlens 8s ease-in-out infinite}
@keyframes lc-gw0{0%,10.87%{stroke-dashoffset:40}19.57%,100%{stroke-dashoffset:0}}.lc-gw0{stroke-dasharray:40;stroke-dashoffset:40;animation:lc-gw0 8s linear infinite}@keyframes lc-gw1{0%,19.57%{stroke-dashoffset:40}28.26%,100%{stroke-dashoffset:0}}.lc-gw1{stroke-dasharray:40;stroke-dashoffset:40;animation:lc-gw1 8s linear infinite}@keyframes lc-gw2{0%,28.26%{stroke-dashoffset:30}36.96%,100%{stroke-dashoffset:0}}.lc-gw2{stroke-dasharray:30;stroke-dashoffset:30;animation:lc-gw2 8s linear infinite}@keyframes lc-gw3{0%,36.96%{stroke-dashoffset:40}45.65%,100%{stroke-dashoffset:0}}.lc-gw3{stroke-dasharray:40;stroke-dashoffset:40;animation:lc-gw3 8s linear infinite}@keyframes lc-gw4{0%,45.65%{stroke-dashoffset:40}54.35%,100%{stroke-dashoffset:0}}.lc-gw4{stroke-dasharray:40;stroke-dashoffset:40;animation:lc-gw4 8s linear infinite}@keyframes lc-gw5{0%,54.35%{stroke-dashoffset:30}63.04%,100%{stroke-dashoffset:0}}.lc-gw5{stroke-dasharray:30;stroke-dashoffset:30;animation:lc-gw5 8s linear infinite}@keyframes lc-groom{0%{opacity:0}10.87%{opacity:0}63.04%{opacity:1}100%{opacity:1}}.lc-groom{animation:lc-groom 8s ease-in-out infinite;animation-timing-function:linear}@keyframes lc-gp1{0%,10.87%{fill:#6E675B}63.04%,100%{fill:#C9A227}}.lc-gp1{fill:#6E675B;animation:lc-gp1 8s linear infinite}@keyframes lc-gp2{0%,10.87%{fill:#B9B4A6}63.04%,100%{fill:#C9A227}}.lc-gp2{fill:#B9B4A6;animation:lc-gp2 8s linear infinite}@keyframes lc-glp{0%,10.87%{fill:#D3CDBF}63.04%,100%{fill:#E3CC80}}.lc-glp{fill:#D3CDBF;animation:lc-glp 8s linear infinite}@keyframes lc-gdesk{0%,10.87%{fill:#C2BBAB}63.04%,100%{fill:#D2B962}}.lc-gdesk{fill:#C2BBAB;animation:lc-gdesk 8s linear infinite}
@keyframes lc-elight{0%{transform:translate(150px,-140px);opacity:0}10.87%{transform:translate(120px,-110px);opacity:1}41.3%{transform:translate(0,0);opacity:1}50%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:0}}.lc-elight{animation:lc-elight 8s ease-in-out infinite}@keyframes lc-ehalo{0%{opacity:0}41.3%{opacity:0}54.35%{opacity:1}100%{opacity:1}}.lc-ehalo{animation:lc-ehalo 8s ease-in-out infinite}@keyframes lc-e1{0%,40.22%{fill:#B9B4A6}45.65%,100%{fill:#C9A227}}.lc-e1{fill:#B9B4A6;animation:lc-e1 8s ease-in-out infinite}@keyframes lc-e2{0%,44.57%{fill:#6E675B}50%,100%{fill:#E3CC80}}.lc-e2{fill:#6E675B;animation:lc-e2 8s ease-in-out infinite}
@keyframes lc-tlight{0%{transform:translate(0,-190px);opacity:0}10.87%{transform:translate(0,-150px);opacity:1}32.61%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}.lc-tlight{animation:lc-tlight 8s ease-in-out infinite}@keyframes lc-tspread{0%{transform:scale(0.08);opacity:0}32.61%{transform:scale(0.08);opacity:0}34.78%{transform:scale(0.1);opacity:1}54.35%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}.lc-tspread{animation:lc-tspread 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes lc-tlap{0%,45.65%{fill:#D3CDBF}51.09%,100%{fill:#E3CC80}}.lc-tlap{fill:#D3CDBF;animation:lc-tlap 8s ease-in-out infinite}@keyframes lc-tfa{0%,45.65%{fill:#6E675B}51.09%,100%{fill:#C9A227}}.lc-tfa{fill:#6E675B;animation:lc-tfa 8s ease-in-out infinite}@keyframes lc-tfb{0%,45.65%{fill:#B9B4A6}51.09%,100%{fill:#C9A227}}.lc-tfb{fill:#B9B4A6;animation:lc-tfb 8s ease-in-out infinite}
@keyframes lc-xA{0%,17%{fill:var(--u)}22%,38%{fill:#C9A227}43%,100%{fill:var(--u)}}.lc-xA{fill:var(--u);animation:lc-xA 8s ease-in-out infinite}@keyframes lc-xB{0%,53%{fill:var(--u)}58%,72%{fill:#C9A227}77%,100%{fill:var(--u)}}.lc-xB{fill:var(--u);animation:lc-xB 8s ease-in-out infinite}@keyframes lc-xlens{0%{transform:translate(-170px,-40px);opacity:0}8%{transform:translate(-120px,-30px);opacity:1}20%{transform:translate(0,0)}40%{transform:translate(0,0)}56%{transform:translate(136px,-60px)}72%{transform:translate(136px,-60px)}86%{transform:translate(300px,-110px);opacity:1}90%{transform:translate(320px,-120px);opacity:0}100%{transform:translate(-170px,-40px);opacity:0}}.lc-xlens{animation:lc-xlens 8s ease-in-out infinite}
@keyframes lc-cwalk{0%{transform:translate(150px,0);opacity:0}4.35%{transform:translate(146px,0);opacity:1}34.78%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}.lc-cwalk{animation:lc-cwalk 8s ease-in-out infinite}@keyframes lc-clight{0%{transform:translate(-150px,-120px);opacity:0}4.35%{transform:translate(-140px,-112px);opacity:1}41.3%{transform:translate(0,0);opacity:1}50%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:0}}.lc-clight{animation:lc-clight 8s ease-in-out infinite}@keyframes lc-chalo{0%{opacity:0}41.3%{opacity:0}52.17%{opacity:1}100%{opacity:1}}.lc-chalo{animation:lc-chalo 8s ease-in-out infinite}@keyframes lc-cring{0%{transform:scale(0.5);opacity:0}52.17%{transform:scale(0.5);opacity:0}69.57%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}.lc-cring{animation:lc-cring 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes lc-cl{0%,40.22%{fill:#6E675B}45.65%,100%{fill:#C9A227}}.lc-cl{fill:#6E675B;animation:lc-cl 8s ease-in-out infinite}
@keyframes lc-plight{0%{transform:translate(0,-190px);opacity:0}10.87%{transform:translate(0,-150px);opacity:1}32.61%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}.lc-plight{animation:lc-plight 8s ease-in-out infinite}@keyframes lc-pspread{0%{transform:scale(0.08);opacity:0}32.61%{transform:scale(0.08);opacity:0}34.78%{transform:scale(0.1);opacity:1}54.35%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}.lc-pspread{animation:lc-pspread 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes lc-pf{0%,45.65%{fill:var(--u)}51.09%,100%{fill:#C9A227}}.lc-pf{fill:var(--u);animation:lc-pf 8s ease-in-out infinite}

/* ── lockup: the approved SVG file (05-icon-plus-wordmark), inlined — 24 Sept ──
   Clear space is built into the file. Sized by height only; the negative left margin
   puts the icon's edge on the page gutter (the clear space then sits in the page margin).
   The .iconwrap overlay sits exactly on the icon so the travelling light still starts there. */
.lock{--h:86px;position:relative;display:block;line-height:0}
.lockup{display:block;height:var(--h);width:auto;margin-left:calc(var(--h) * -0.27153)}
.lock .iconwrap{position:absolute;left:0;top:calc(var(--h) * .27386);
  width:calc(var(--h) * .45228);height:calc(var(--h) * .45228)}
.lock .src{transition:opacity .6s ease}
body.away .lock .src{opacity:0}
.nav .in{padding-top:0;padding-bottom:0}
@media (max-width:900px){.nav .lock{--h:72px}}

/* ── navigation: between the menu button and the full row, labels break inside
   themselves (AI / ADOPTION) so all five stay side by side ── */
@media (min-width:901px) and (max-width:1100px){
  .navlinks{flex-wrap:nowrap;gap:22px;align-items:flex-end;line-height:1.35}
  .navlinks a span{display:block}
}

/* ── service cards, wide: title on top, illustration left, both copies right ── */
.lc-rows{margin-top:44px;display:flex;flex-direction:column;gap:32px}
.lc-card.lc-wide{align-items:stretch;text-align:left;gap:28px;padding:40px clamp(24px,4vw,48px) 44px}
.lc-wide .lc-head{display:flex;flex-direction:column;gap:10px}
.lc-wide .lc-kicker{min-height:0}
.lc-wide .lc-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,56px);align-items:start}
.lc-wide .lc-art{max-width:300px}
.lc-wide .lc-desc{max-width:60ch;margin:0 0 1em;font-size:1.2rem;line-height:1.5;color:var(--ink)}
.lc-wide .lc-text p{max-width:60ch;color:var(--body)}
.lc-wide .lc-text p:last-child{margin-bottom:0}
@media (max-width:720px){.lc-wide .lc-body{grid-template-columns:1fr}
  .lc-wide .lc-art{margin:0 auto;width:100%}}

/* ── two figures side by side on the dark band ── */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
.figs>div{position:relative}
@media (max-width:900px){.figs{grid-template-columns:1fr;gap:56px}}

/* ── legal pages ── */
.legal{max-width:720px}
.legal h1{margin-bottom:48px}
.legal h2{font-size:1.5rem;line-height:1.3;margin:52px 0 12px}
.legal address{font-style:normal;margin:0 0 1.05em}
.legal p,.legal address{font-size:1.125rem;line-height:1.66;color:var(--body)}
.legal a{border-bottom:1px solid var(--rule)}
.legal a:hover{border-bottom-color:var(--gold)}
.legal-date{margin-top:64px}
/* footer legal links: they read as plain text; only the pointer gives them away */
a.quiet,a.quiet:hover{color:inherit;text-decoration:none;cursor:pointer}
a.quiet:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* ── cards the travelling light walks into (see site.js §4) ──
   The whole drawing is one paused timeline, set by --t (0..1 of its 8 s). */
.lc-torch{--t:0}
.lc-torch *{animation-duration:8s!important;animation-iteration-count:1!important;
  animation-fill-mode:both!important;animation-play-state:paused!important;
  animation-delay:calc(var(--t) * -8s)!important}
.lc-torch .lc-elight,.lc-torch .lc-tlight,
.lc-torch .lc-clight,.lc-torch .lc-plight{display:none}   /* one light: the site's own */
.lc-dlens circle,.lc-dlens line,.lc-xlens circle,.lc-xlens line{transition:stroke .35s ease}
.lc-held .lc-dlens circle,.lc-held .lc-dlens line,
.lc-held .lc-xlens circle,.lc-held .lc-xlens line{stroke:#C9A227}

/* ── service cards pin while the light works in them ──
   Same pin as the home pillars: the card sticks while the wrapper's extra height (--pin)
   is scrolled through. Only where a whole card fits under the nav; elsewhere the cards
   scroll normally and the animation still follows the scroll. */
.lc-pinwrap .pinspace{height:0}
@media (min-width:901px) and (min-height:700px){
  .lc-pinwrap .pinspace{height:var(--pin)}
  .lc-pinwrap .pinstage{position:sticky;top:112px}
}
@media (prefers-reduced-motion:reduce){
  .lc-pinwrap .pinspace{height:0!important}
  .lc-pinwrap .pinstage{position:static!important}
}

/* ── get in touch ── */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);
  margin-top:40px;align-items:start}
.contact-copy h2{margin-bottom:24px;max-width:18ch}
.contact-copy p{color:var(--body)}
.contact-mail{color:var(--body);margin-bottom:22px}
.contact-mail a,.cf-note a{border-bottom:1px solid var(--rule)}
.contact-mail a:hover,.cf-note a:hover{border-bottom-color:var(--gold)}
.cform{display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:7px}
.cf-field>span{font-family:Archivo,system-ui,sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body)}
.cf-field em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:6px}
.cf-field input,.cf-field textarea{font:inherit;font-size:1.06rem;color:var(--ink);background:#FFFDF8;
  border:1.5px solid #E4DECF;border-radius:12px;padding:11px 14px;width:100%;box-sizing:border-box}
.cf-field textarea{resize:vertical;min-height:140px;line-height:1.5}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--gold)}
.cf-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cf-send{font-family:Archivo,system-ui,sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);background:var(--ink);border:0;border-radius:999px;padding:13px 28px;cursor:pointer}
.cf-send:hover{background:#45403A}
.cf-send:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cf-send[disabled]{opacity:.55;cursor:default}
.cf-note{font-family:Archivo,system-ui,sans-serif;font-size:.74rem;line-height:1.5;color:var(--body);margin:0;max-width:40ch}
.cf-status{margin:0;min-height:1.4em;color:var(--body)}
.cf-status.ok{color:var(--ink)}
.cf-status.err{color:#8A4B2A}
@media (max-width:900px){.contact{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}}

/* ── perspectives ── */
.soon{font-family:Archivo,system-ui,sans-serif;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);vertical-align:.18em;margin-right:.35em}
.article h2{font-size:1.55rem;line-height:1.3;margin:72px 0 22px}
.article h1+.byline{margin-top:20px}
.article sup.fn{font-size:.62em;line-height:0;margin-left:1px}
.article sup.fn a{color:var(--gold)}
.article p.meta,.article p.fnote{font-size:.88rem;line-height:1.6}
.article .fnote{margin-bottom:10px}
.article .fnote a{color:var(--muted)}

/* ── articles: opening photograph, subheadline stops, thumbnails (build 22) ──── */
/* the opening photograph sits below the lede in the full shell, as on the main pages */
.arthero .arthero-ph{height:min(58vh,520px);position:relative}
.noplan .clear{display:none}
/* every subheadline is a stop for the light: in the margin beside its first line;
   on a phone, where there is no margin, in the space above it */
.article h2{position:relative}
.hstop{position:absolute!important;left:-34px;top:.62em;width:0;height:0}
@media (max-width:900px){.hstop{left:4px;top:-30px}}
/* the small version, wherever articles are listed */
.thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:#141210}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .5s ease}
.thumb.ph{background:rgba(46,42,35,.035);padding:8px}
.thumb.blank{background:var(--ivory2)}
@media (hover:hover){a:hover .thumb img{filter:brightness(1.09)}}
.grid3 .thumb{margin-bottom:22px}
.arow{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:clamp(24px,4vw,48px);align-items:start}
.arow-pic{display:block;margin-top:6px}
@media (max-width:720px){
  .arow{grid-template-columns:1fr;gap:20px}
  .arow-pic{order:-1;margin-top:0}
}
/* the article photograph keeps its own proportions rather than the viewport's: 2:1 on a
   wide screen, 3:2 on a phone, so the subject never depends on how tall the window is */
.arthero .comp,.arthero .arthero-ph{height:auto;aspect-ratio:2/1}
@media (max-width:900px){.arthero .comp,.arthero .arthero-ph{aspect-ratio:3/2}}
/* title and credit line under the opening photograph */
.artfig{margin:0}
.artcap,.imgcap{margin:12px 0 0;color:var(--muted);letter-spacing:.02em;font-size:.72rem;max-width:none}
/* on the home hero the line sits inside the photograph, opposite the locator */
.herofoot .shell{display:flex;justify-content:space-between;align-items:baseline;gap:6px 32px;flex-wrap:wrap}
.herocap{color:#A39B8B;font-size:.72rem;letter-spacing:.02em}
/* on a phone the frame is 3:2, so the light's landing point moves with the crop */
@media (max-width:900px){.arthero .comp>[data-pic]{left:var(--wxm)!important;top:var(--wym)!important}}

/* ── Perspectives: the AI disclaimer (Jan, 29 Sep) — one format throughout, no bold,
   across the full width of the list (text and thumbnail column) ── */
.disclaimer{max-width:none;margin-top:28px;font-size:.88rem;color:var(--muted)}
/* a link inside running text: marked as the legal pages mark theirs */
a.inl{border-bottom:1px solid var(--rule)}
a.inl:hover{border-bottom-color:var(--gold)}
/* footnote sources with long addresses must wrap on a phone */
.fnote a.fnurl{overflow-wrap:anywhere}

/* ── Leadership transitions: the two pillars (build 30) ── */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.pcard{display:flex;flex-direction:column;gap:14px;padding:32px 32px 40px;background:#FFFDF8;
  border:1.5px solid #E4DECF;border-radius:28px}
.pcard-art svg{display:block;width:100%;height:auto}
.pcard .lc-kicker{margin-top:10px;min-height:0}
.pcard-title{font-size:1.75rem;line-height:1.22;font-weight:400;text-wrap:balance}
.pcard-text{margin:0;color:var(--body);font-size:1.125rem;line-height:1.55}
@media (max-width:900px){.pcards{grid-template-columns:1fr}}

/* ── Leadership transitions: the LUMINUM Transition Arc (build 30, 32; site.js §6) ── */
.arc{margin-top:0}
/* the heading travels with the pinned chart, so it is kept to one line */
.arc-head{padding-top:4px}
.arc-head .krow{margin-bottom:12px}
.arc-head h2{margin:0 0 12px}
.arc-hit{cursor:pointer}
.arc-pinwrap .pinspace{height:0}
.arc-pinned .arc-pinwrap .pinspace{height:var(--pin)}
.arc-pinwrap .arc-stage{position:static}
.arc-pinned .arc-pinwrap .arc-stage{position:sticky;top:92px}
.arc-fig{margin:0}
.arc-svg{display:block;width:100%;height:auto;overflow:visible}
.arc-tabs{display:grid;margin-top:-4px}
.arc-tab{background:none;border:0;border-bottom:2px solid transparent;margin:0;padding:6px 4px 8px;
  min-height:56px;cursor:pointer;font:inherit;font-size:1.02rem;line-height:1.25;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  transition:color .3s ease,border-color .3s ease}
.arc-tabn{font-family:Archivo,system-ui,sans-serif;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8A8377;margin-bottom:3px}
.arc-tab[aria-pressed="true"]{border-bottom-color:var(--gold)}
.arc.is-phase .arc-tab:not([aria-pressed="true"]){color:#8A8377}
.arc-tab:hover{color:var(--ink)}
.arc-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.arc-dim{opacity:0;transition:opacity .4s ease}
.arc.is-phase .arc-dim{opacity:1}
.arc.is-phase .arc-dim.on{opacity:0}
.arc-oc,.arc-gap{transition:opacity .4s ease}
.arc-oc.off,.arc-gap.off{opacity:0}
.arc-light{opacity:0;transition:transform .6s ease,opacity .4s ease}
.arc.is-phase .arc-light{opacity:1}
.arc-pinned .arc-light{display:none}          /* one light: the site's own walks the line */
.arc-callout{position:relative;margin-top:10px;padding:20px clamp(22px,3.4vw,40px) 22px;
  background:#FFFDF8;border:1.5px solid #E4DECF;border-radius:28px}
.arc-ptr{display:none}
.arc-panel+.arc-panel{margin-top:30px;padding-top:26px;border-top:1px solid #E4DECF}
.arc-js .arc-callout{display:grid}
.arc-js .arc-panel{grid-area:1/1;margin:0;padding:0;border:0;visibility:hidden;opacity:0;transition:opacity .4s ease}
.arc-js .arc-panel.on{visibility:visible;opacity:1}
.arc-js .arc-ptr{display:block;position:absolute;top:-12px;left:calc(var(--ptr,50%) - 10px);width:20px;height:12px;
  opacity:0;transition:left .4s ease,opacity .3s ease}
.arc-js.is-phase .arc-ptr{opacity:1}
.arc-ptr::before{content:"";position:absolute;inset:0;background:#E4DECF;clip-path:polygon(0 100%,50% 0,100% 100%)}
.arc-ptr::after{content:"";position:absolute;left:1.8px;right:1.8px;top:2.3px;bottom:-2px;background:#FFFDF8;
  clip-path:polygon(0 100%,50% 0,100% 100%)}
.arc-intro{margin:0;max-width:62ch;color:var(--body);font-size:1.125rem;line-height:1.55}
.arc-title{font-size:1.5rem;line-height:1.2;font-weight:400}
.arc-desc{margin:8px 0 0;max-width:78ch;font-style:italic;color:var(--body);font-size:1rem;line-height:1.45}
.arc-outcome{margin:10px 0 0;max-width:78ch;color:var(--body);font-size:1rem;line-height:1.45}
.arc-outcome strong{font-weight:600;color:var(--ink)}
.arc-bullets{list-style:none;margin:6px 0 0;padding:0;max-width:78ch}
.arc-bullets li{position:relative;padding-left:20px;margin-top:3px;color:var(--body);font-size:.98rem;line-height:1.42}
.arc-bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:3px;background:var(--gold)}
.arc-src{margin:14px 0 0;color:var(--muted);max-width:none}
.arc-more{margin:22px 0 0;font-family:Archivo,system-ui,sans-serif;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body);max-width:none}
.pc-lead{margin:48px 0 0;max-width:64ch;color:var(--body)}
/* on a phone the chart keeps a readable size and scrolls sideways with its phase row */
@media (max-width:900px){
  .arc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .arc-fig,.arc-tabs{min-width:860px}
  .arc-js .arc-ptr{display:none}
}
@media (prefers-reduced-motion:reduce){
  .arc-pinwrap .pinspace{height:0!important}
  .arc-stage{position:static!important}
  .arc-dim,.arc-oc,.arc-gap,.arc-light,.arc-tab,.arc-js .arc-panel,.arc-ptr{transition:none!important}
}

/* ── the two pillars meet the light (Jan, 29 Sep; site.js §4b) ──
   --p runs 0..1 while the light rests on the figure: the figure turns gold over the first
   40 %, the light around it spreads over the rest. Without JavaScript: the end state. */
.pc-torch{--p:1}
.pc-torch .pc-gold{opacity:clamp(0, calc(var(--p) / .4), 1)}
.pc-torch .pc-unlit{opacity:clamp(0, calc(1 - var(--p) / .4), 1)}
.pc-torch .pc-halo{opacity:clamp(0, calc((var(--p) - .3) / .7), 1);
  transform:scale(clamp(.35, calc(.35 + (var(--p) - .3) / .7 * .65), 1));
  transform-box:fill-box;transform-origin:center}

/* ── AI adoption: the Corporate AI Journey & Maturity Framework (DRAFT 2 Oct; site.js §AIF) ── */
.aif-step{margin-top:clamp(56px,7vw,88px)}
.aif-stepk{font-family:Archivo,system-ui,sans-serif;font-size:.6875rem;font-weight:600;letter-spacing:.155em;
  text-transform:uppercase;color:var(--body);margin:0 0 10px}
.aif-step h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.25;max-width:34ch;margin:0 0 30px}
.aif-svg{display:block;width:100%;height:auto;overflow:visible}
.aif-small{font-family:Archivo,system-ui,sans-serif;font-size:.625rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#8A8377;margin:0}
.aif-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px}
.aif-col{border-top:3px solid var(--hue);padding:14px 24px 0 0}
.aif-col:last-child{padding-right:0}
.aif-colname{display:none;font-family:Archivo,system-ui,sans-serif;font-size:.84rem;line-height:1.35;margin:0 0 8px}
.aif-colname span{font-size:.7rem;font-weight:600;letter-spacing:.12em;margin-right:6px}
.aif-colline{font-size:1.03rem;line-height:1.45;margin:0 0 12px}
.aif-col ul,.aif-moves ol{margin:6px 0 0;padding-left:18px;font-size:.95rem;line-height:1.45;color:var(--body)}
.aif-levels-list{display:none;list-style:none;padding:0;margin:20px 0 0}
.aif-levels-list li{padding:10px 0;border-top:1px solid var(--rule);font-size:1rem;line-height:1.45;color:var(--body)}
.aif-levels-list strong{font-weight:500;color:var(--ink)}
.aif-after{margin-top:30px;color:var(--body)}
.aif-hint{margin:-18px 0 24px;font-family:Archivo,system-ui,sans-serif;font-size:.8rem;color:#8A8377}
.aif-area{cursor:pointer;transition:fill-opacity .4s ease;outline:none}
.aif-area:focus-visible{stroke:var(--gold);stroke-width:2}
.aif-x .aif-area.small{fill-opacity:.55}
.aif-line{pointer-events:none;transition:stroke .4s ease}
.aif-band{fill:transparent;cursor:pointer;transition:fill .25s ease}
.aif-band.on{fill:rgba(255,253,248,.62)}
.aif-x .aif-bands{display:none}
.aif-x.has-sel .aif-bands{display:inline}
.aif-wl{cursor:pointer}
.aif-wl-up{display:none}
.aif-wl.small .aif-wl-full{display:none}
.aif-wl.small .aif-wl-up{display:inline}
.aif-con{display:block;width:100%;height:auto;overflow:visible;margin-top:-3.676%;pointer-events:none}
.aif-con-fill{fill:#E4DECF;fill-opacity:0;transition:fill .4s ease,fill-opacity .4s ease}
.aif-con-bar{fill:none;stroke-width:3;stroke:#E4DECF;stroke-opacity:0;transition:stroke .4s ease}
.aif-box{background:#FFFDF8;border:1px solid #E4DECF;border-top:3px solid #E4DECF;padding:22px clamp(20px,3vw,32px) 24px;
  min-height:230px;transition:border-color .4s ease}
.aif-ovtext{margin:10px 0 0;max-width:78ch;font-size:1.06rem;line-height:1.55;color:var(--body)}
.aif-wk{font-family:Archivo,system-ui,sans-serif;font-size:.6875rem;font-weight:600;letter-spacing:.12em;margin:0}
.aif-wdesc{margin:6px 0 0;font-size:1.03rem;line-height:1.45;max-width:none}
.aif-grid{margin-top:18px;padding-top:16px;border-top:1px solid #E4DECF;display:grid;
  grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:32px}
.aif-grid.noex{grid-template-columns:200px minmax(0,2fr)}
.aif-grid.noex .aif-exw{display:none}
.aif-ln{color:#56514A;font-size:.656rem}
.aif-lname{font-size:1.25rem;line-height:1.2;margin:3px 0 0}
.aif-text,.aif-ex{margin:6px 0 0;font-size:1rem;line-height:1.45;color:var(--body)}
.aif-ex{font-style:italic}
.aif-moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:28px;
  padding-top:18px;border-top:1px solid var(--rule)}
.aif-moves ol{font-size:1.06rem;line-height:1.6;color:var(--ink)}
.aif-pillars{margin-top:64px}
.aif-ul{margin:-4px 0 0;padding-left:20px}
.aif-src{margin-top:40px;max-width:80ch}
@media (max-width:900px){.aif-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .aif-grid,.aif-grid.noex{grid-template-columns:1fr;gap:16px}}
@media (max-width:720px){
  .aif-hide-narrow{display:none}
  .aif-colname{display:block}
  .aif-cols{grid-template-columns:1fr;margin-top:0}
  .aif-col{padding-right:0}
  .aif-ldesc{display:none}
  .aif-levels-list{display:block}
  .aif-scroll{overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .aif-scroll .aif-x{min-width:640px}
  .aif-con{display:none}
  .aif-box{margin-top:14px}
  .aif-moves{grid-template-columns:1fr}
  .aif-hint::after{content:" Swipe sideways to see the whole chart."}
}

/* the light walks the waves (Step 1) and climbs the levels (Step 2): without JS or with
   reduced motion everything shows its lit end state; .aif-anim holds the unlit state */
.aif-s1a,.aif-s1l,.aif-wl,.aif-gold{transition:fill-opacity .7s ease,stroke-opacity .7s ease,opacity .7s ease}
.aif-col{transition:border-color .7s ease}
.aif-anim .aif-s1a:not(.on){fill-opacity:.2}
.aif-anim .aif-s1l:not(.on){stroke-opacity:.28}
.aif-anim .aif-wl[data-lit]:not(.on){opacity:.35}
.aif-anim .aif-col:not(.on){border-top-color:rgba(46,42,35,.12)}
.aif-anim .aif-s1l.on{animation:aif-flash 1.1s ease-out}
@keyframes aif-flash{0%{stroke-width:2}25%{stroke-width:4.5}100%{stroke-width:2}}
.aif-lk[data-lit]{fill:#9C7C14;transition:fill .5s ease}
.aif-anim .aif-lk[data-lit]:not(.on){fill:#56514A}
.aif-anim .aif-gold:not(.on){opacity:0}
.aif-anim .aif-gold.on{animation:aif-glow 1s ease-out}
@keyframes aif-glow{0%{filter:brightness(1)}30%{filter:brightness(1.25)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.aif-anim .aif-s1l.on,.aif-anim .aif-gold.on{animation:none}}

/* Step 3: wave tabs above the chart, level list in the call-out */
.aif-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 26px}
.aif-tab{font:inherit;font-family:Archivo,system-ui,sans-serif;font-size:.78rem;line-height:1.2;color:var(--ink);
  background:transparent;border:1px solid #D9D2C3;border-radius:999px;padding:8px 15px;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.aif-tabn{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-right:4px}
.aif-tab[data-w="-1"]{color:var(--body)}
.aif-tab:hover{border-color:var(--hue,var(--greige));background:#FFFDF8}
.aif-tab[aria-pressed="true"]{background:#FFFDF8;border-color:var(--hue,var(--ink));box-shadow:inset 0 0 0 1px var(--hue,var(--ink))}
.aif-tab:focus-visible,.aif-lb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.aif-x:not(.has-sel) .aif-area:hover{fill-opacity:.8}
.aif-levlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.aif-lb{font:inherit;font-size:1.02rem;line-height:1.25;color:var(--body);background:none;border:0;padding:5px 8px 5px 0;
  cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;width:100%}
.aif-lb span{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid #D9D2C3;display:inline-flex;
  align-items:center;justify-content:center;font-family:Archivo,system-ui,sans-serif;font-size:.68rem;font-weight:600;color:var(--body);
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.aif-lb:hover{color:var(--ink)}
.aif-lb[aria-pressed="true"]{color:var(--ink);font-size:1.12rem}
.aif-lb[aria-pressed="true"] span{background:var(--hue,var(--ink));border-color:var(--hue,var(--ink));color:#FFFDF8}
.aif-grid{grid-template-columns:230px minmax(0,1fr) minmax(0,1fr)}
.aif-grid.noex{grid-template-columns:230px minmax(0,2fr)}
@media (max-width:900px){.aif-grid,.aif-grid.noex{grid-template-columns:1fr}
  .aif-levlist{flex-direction:row;flex-wrap:wrap;gap:6px}
  .aif-lb{width:auto;border:1px solid #E4DECF;border-radius:999px;padding:4px 12px 4px 4px;font-size:.92rem}
  .aif-lb[aria-pressed="true"]{font-size:.92rem;border-color:var(--hue,var(--ink))}}

/* pillars: the light rests on each; a diagnostic teaser under each (DRAFT 2 Oct) */
.aif-pcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.aif-pc{position:relative;flex:1}
.aif-pwp{position:absolute;left:15px;top:49px;width:2px;height:2px}
.aif-teaser{background:#FFFDF8;border:1.5px solid #E4DECF;padding:28px 32px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.aif-teaser h3{font-size:1.6rem;line-height:1.2;font-weight:500;margin:0}
.aif-teaser p{margin:0;color:var(--body);font-size:1.08rem;line-height:1.5}
.aif-tbtn{margin-top:8px;font-family:Archivo,system-ui,sans-serif;font-size:.86rem;font-weight:500;line-height:1.2;
  color:var(--ivory);background:var(--ink);border:1.5px solid var(--ink);padding:14px 22px;transition:background .25s ease,color .25s ease}
.aif-tbtn:hover{background:transparent;color:var(--ink)}
.aif-tbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:560px){.aif-tbtn{align-self:stretch;text-align:center}}

/* keep the call-out a steady height so the page does not jump while levels are explored */
@media (min-width:901px){.aif-box{min-height:400px}}

/* the test invitation sits at the foot of each pillar card; the light stops on its button */
.aif-pc .aif-cta{margin-top:auto;padding-top:22px;border-top:1px solid #E4DECF;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.aif-pc .pcard-text+.aif-cta,.aif-pc .aif-ul+.aif-cta{margin-top:auto}
.aif-cta-h{margin:12px 0 0;font-size:1.4rem;line-height:1.25;color:var(--ink)}
.aif-tbtn{position:relative;transition:background .25s ease,color .25s ease,box-shadow .6s ease}
.aif-tbtn.lit{box-shadow:0 0 0 5px rgba(201,162,39,.28),0 0 28px 6px rgba(201,162,39,.38)}
.aif-bwp{position:absolute;right:-26px;top:50%;width:2px;height:2px;margin-top:-1px;pointer-events:none}

/* desktop: the light reads both pillar kickers, then both buttons; one column: card by card */
.aif-pillars{position:relative}
.aif-pwp-d{position:absolute;left:15px;top:49px;width:2px;height:2px}
.aif-pwp-d2{left:calc(50% + 12px + 15px)}
.aif-pwp-m{display:none}
@media (max-width:900px){.aif-pwp-d{display:none}.aif-pwp-m{display:block}}

.aif-moves ul{margin:6px 0 0;padding-left:18px;font-size:1.06rem;line-height:1.6;color:var(--ink)}
.aif-wwo{margin-top:72px}
.aif-wwo+.aif-pillars{margin-top:28px}

/* Step 1 on narrow screens: the chart stays (numbers instead of names, which sit in the
   columns below); each wave's column is two columns: its line left, what you see right */
.aif-wnum{display:none}
@media (max-width:720px){
  .aif-s1chart .aif-wl-full{display:none}
  .aif-s1chart .aif-wnum{display:inline}
  .aif-s1chart{margin-bottom:22px}
  .aif-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:16px;padding-bottom:6px}
  .aif-colname{grid-column:1/-1}
  .aif-colline{font-size:.98rem;margin:0}
  .aif-see ul{font-size:.9rem;padding-left:16px}
  .aif-see .aif-small{font-size:.58rem}
}

/* Step 3 · the moves (option B, 3 Oct): two small diagrams side by side, stacked on phones */
.aif-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px)}
.aif-mhead{font-family:Archivo,system-ui,sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#8A8377;padding-bottom:10px;border-bottom:1px solid #E4DECF;margin:0 0 18px}
.aif-mlist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:1.06rem;line-height:1.35}
.aif-mlist li{display:flex;gap:12px;align-items:baseline}
.aif-mnum{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#C9A227;color:#FFFDF8;font-family:Archivo,system-ui,sans-serif;
  font-size:.66rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;position:relative;top:-2px}
.aif-mwhere{font-family:Archivo,system-ui,sans-serif;font-size:.7rem;color:#8A8377;white-space:nowrap}
.aif-credit{margin-top:6px;max-width:80ch}
.aif-mv{transition:opacity .5s ease}
.aif-anim .aif-mv:not(.on){opacity:.25}
.aif-bridge{max-width:60ch;margin-top:20px}
.aif-more{margin-top:36px}
@media (max-width:720px){.aif-mgrid{grid-template-columns:1fr}}
.aif-bridge2{max-width:62ch;color:var(--body);margin-top:14px}

/* framework teaser on the AI adoption page */
.aif-fwt{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;
  margin-top:clamp(56px,7vw,80px);padding:32px clamp(24px,4vw,44px);background:#FFFDF8;border:1.5px solid #E4DECF;border-radius:28px;
  transition:border-color .3s ease,box-shadow .3s ease}
.aif-fwt:hover{border-color:#D9D2C3;box-shadow:0 10px 30px -18px rgba(46,42,35,.35)}
.aif-fwt:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.aif-mini{display:block;width:100%;height:auto}
.aif-fwt-text h3{font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.22;margin:8px 0 10px}
.aif-fwt-text p{color:var(--body);margin:0 0 18px;max-width:52ch}
.aif-fwt-btn{position:relative;display:inline-block;font-family:Archivo,system-ui,sans-serif;font-size:.86rem;font-weight:500;line-height:1.2;
  color:var(--ivory);background:var(--ink);padding:14px 22px;transition:background .25s ease,color .25s ease,box-shadow .6s ease}
.aif-fwt:hover .aif-fwt-btn{background:#47433A}
.aif-fwt-btn.lit{box-shadow:0 0 0 5px rgba(201,162,39,.28),0 0 28px 6px rgba(201,162,39,.38)}
@media (max-width:720px){.aif-fwt{grid-template-columns:1fr;padding:24px 22px 28px}.aif-fwt-art{max-width:260px}}
/* framework page */
.aif-s3intro{margin:-14px 0 22px}
.aif-mcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);margin-top:28px}
.aif-rf ul{margin:0;padding-left:20px;color:var(--body);font-size:1.06rem;line-height:1.55}
.aif-testrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.aif-tests .aif-cta{background:#FFFDF8;border:1.5px solid #E4DECF;border-radius:28px;padding:28px 32px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.aif-tests .aif-cta-h{margin:0}
.aif-sources .meta{max-width:90ch}
@media (max-width:720px){
  .aif-mcols,.aif-testrow{grid-template-columns:1fr}
  .aif-wscroll .aif-wide{min-width:720px}
}

/* Step 3 invitation: the light stops on it, and a short demo climbs the levels once */
.aif-s3intro{position:relative;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:-12px 0 24px;max-width:70ch;
  color:var(--body);padding:10px 16px;border:1px solid transparent;border-radius:14px;transition:background .6s ease,border-color .6s ease}
.aif-s3intro.lit{background:rgba(201,162,39,.10);border-color:rgba(201,162,39,.35)}
.aif-try{font-family:Archivo,system-ui,sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#FFFDF8;background:#9C7C14;border-radius:999px;padding:4px 10px;position:relative;top:-2px}
.aif-iwp{position:absolute;left:-14px;top:50%;width:2px;height:2px}
.touring .aif-lb[aria-pressed="true"] span{box-shadow:0 0 0 4px rgba(201,162,39,.25)}
.aif-s3intro{display:block}
.aif-try{display:inline-block;margin-right:10px}

/* ── Articles: lists, a table and the test cards inside the running text (build 41,
   The Corporate AI Journey) ── */
.article .art-list{margin:0 0 1.2em;padding-left:1.4em;font-size:1.25rem;line-height:1.7;color:var(--body)}
.article .art-list li{margin:0 0 .55em;padding-left:.2em}
.article .art-list li::marker{color:var(--muted);font-family:Archivo,system-ui,sans-serif;font-size:.86em}
.article .art-list strong{color:var(--ink);font-weight:600}
.article .art-tablewrap{margin:36px 0 40px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article .art-table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45;color:var(--body);min-width:620px}
.article .art-table th{font-family:Archivo,system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 12px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.article .art-table td{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.article .art-table td:first-child{color:var(--ink);font-weight:500;width:24%}
.article .art-tests{margin:36px 0 12px}
.article .art-tests .aif-cta-h{font-size:1.3rem}
.article p.art-credit{margin-top:48px}
@media (max-width:900px){.article .art-list{font-size:1.12rem}}

/* ── language selector (build 52): EN · DE, top right, in the nav's label style ── */
.navlinks{margin-left:auto}
.langsel{display:flex;align-items:center;gap:10px;font-family:Archivo,system-ui,sans-serif;font-size:.78rem;
  letter-spacing:.055em;text-transform:uppercase;color:var(--body);padding-left:20px;border-left:1px solid var(--rule);
  align-self:center;line-height:1.2}
.langsel a{padding-bottom:3px;border-bottom:1px solid transparent}
.langsel a:hover{color:var(--ink)}
.langsel a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.langdot{color:var(--muted);padding-bottom:3px}
@media (max-width:900px){
  .langsel{order:1;margin-left:auto;border-left:0;padding-left:0}
  .navtoggle{order:2}
  .navlinks{order:3;margin-left:0}
}