/* ======================================================================
   ARTILUX — "Quiet Light" brand layer
   Ported from the standalone Concept C v2 reference into the live
   Smarty/Bootstrap/jQuery site. Vanilla CSS only.

   PART 1  design tokens
   PART 2  type primitives + shared components (eyebrow / display / lede /
           chips / buttons / news cards)  — new class names, safe globally
   PART 3  homepage sections + inline-SVG light-art + scroll-driven motion
           (scoped under .concept-c / .home-c)
   PART 4  GLOBAL SHELL reskin — header / nav / footer / buttons applied
           site-wide so every page inherits the new brand look
   ====================================================================== */

/* ====================================================================== */
/* PART 1 — TOKENS                                                        */
/* ====================================================================== */
:root{
  /* ===== CI colors (June 2026 spec) ===== */
  --color-blue:  #272282;   /* 品牌深藍 — 副標題、品牌主色 */
  --color-teal:  #00778B;   /* 品牌藍綠 — 按鈕、連結、accent */
  --color-mint:  #76C8CB;   /* 漸層文字起始色 */

  /* surfaces (light "Quiet Light" field) */
  --c-bg:        #FAFCFC;
  --c-bg-2:      #FFFFFF;
  --c-panel:     #F2F6F7;

  /* deep navy ink ramp */
  --c-ink:       oklch(0.27 0.045 252);   /* ~#15314c headline navy */
  --c-ink-2:     oklch(0.40 0.038 250);
  --c-muted:     oklch(0.55 0.028 248);
  --c-faint:     oklch(0.66 0.020 244);

  /* hairlines on light */
  --c-hair:      oklch(0.27 0.045 252 / 0.10);
  --c-hair-2:    oklch(0.27 0.045 252 / 0.18);

  /* brand accents mapped onto the CI palette */
  --c-blue:      var(--color-blue);       /* brand deep blue (Cloud)     */
  --c-teal:      var(--color-teal);       /* brand teal      (Edge)      */
  --c-cyan:      oklch(0.65 0.14 198);    /* cyan            (Physical)  */
  --c-green:     oklch(0.64 0.110 172);   /* legacy deep teal-green      */
  --c-blue-soft: oklch(0.27 0.175 270 / 0.10);
  --c-teal-soft: oklch(0.53 0.095 210 / 0.12);

  /* domain anchors used by the inline SVGs */
  --cloud:       var(--c-blue);
  --edge:        var(--c-teal);
  --physical:    var(--c-cyan);

  /* primitives consumed by .eyebrow/.display/.lede/.btn/.chip */
  --bg:        var(--c-bg);
  --bg-2:      var(--c-bg-2);
  --bg-3:      var(--c-panel);
  --ink:       var(--c-ink);
  --ink-2:     var(--c-ink-2);
  --muted:     var(--c-muted);
  --faint:     var(--c-faint);
  --hair:      var(--c-hair);
  --hair-2:    var(--c-hair-2);
  --accent:    var(--c-teal);
  --accent-2:  var(--c-blue);

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 92px);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, sans-serif;
  --font-mono:    "Poppins", system-ui, sans-serif;
}

/* ====================================================================== */
/* PART 2 — TYPE PRIMITIVES + SHARED COMPONENTS                           */
/* ====================================================================== */
.eyebrow{
  font-family:var(--font-mono);
  font-size:15px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--c-ink-2); font-weight:500;
  display:flex; align-items:center; gap:10px; line-height:1.4;
}
.eyebrow.dim{ color:var(--muted); }

.display{
  font-family:var(--font-display); font-weight:700;
  line-height:0.96; letter-spacing:-0.025em; margin:0;
  color:var(--c-ink); text-wrap:balance;
}
.h-xxl{ font-size:clamp(46px, 8.4vw, 132px); }
.h-xl { font-size:clamp(40px, 6.4vw, 104px); }
.h-l  { font-size:clamp(36px, 4.4vw, 72px); letter-spacing:-0.035em; }
.h-m  { font-size:clamp(27px, 3vw, 46px); font-weight:600; letter-spacing:-0.02em; }

/* .display's base line-height:0.96 is tuned for single-line hero words; when a
   section heading wraps to two lines those lines cram together (descenders of one
   line kiss the cap-line of the next). 1.1 is the value already adopted site-wide
   for two-line headings (#contact CTA + every product/infrastructure/pqc page's
   own CSS). Promote it to the shared inner-page layer so EVERY .concept-c page
   gets it — the per-page `.concept-c .display{line-height:1.1}` copies are now
   redundant. The homepage (.home-c) is excluded: its stacked hero statement keeps
   the intentionally tight 0.96, and its other headings set their own line-height. */
.concept-c:not(.home-c) .display{ line-height:1.1; }

.lede{
  font-size:clamp(16px, 1.4vw, 20px); line-height:1.5;
  color:var(--c-ink-2); font-weight:400; max-width:46ch;
  text-wrap:pretty; margin:0;
}
.support{
  font-size:clamp(15px,1.15vw,17px); line-height:1.55;
  color:var(--c-muted); max-width:40ch; margin:0;
}

/* CI gradient headline text — mint -> brand teal -> brand deep blue */
.tb-text, .spectral-text{
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--color-teal) 50%, var(--color-blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.stack-sm > * + *{ margin-top:14px; }
.stack-md > * + *{ margin-top:22px; }
.stack-lg > * + *{ margin-top:34px; }
.c-divider{ height:1px; background:var(--c-hair); border:0; }

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0; list-style:none; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:400; font-size:12.5px; letter-spacing:0.02em;
  color:var(--c-ink-2); padding:8px 14px;
  border:1px solid var(--c-hair-2); border-radius:999px;
  background:var(--c-bg-2);
  transition:border-color .25s, color .25s, transform .25s;
}
.chip::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--chip-dot, var(--c-teal));
  box-shadow:0 0 10px 1px var(--chip-dot, var(--c-teal));
}
.chip:hover{ border-color:var(--chip-dot,var(--c-teal)); color:var(--c-ink); transform:translateY(-2px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:14px 22px; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s, filter .25s, border-color .25s, color .25s, background .25s;
  text-decoration:none; line-height:1;
}
.btn .arr{ transition:transform .25s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-solid{
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--color-teal) 50%, var(--color-blue) 100%); color:#fff;
  /* map the gradient across the FULL rounded box, including under the 1px transparent
     .btn border, so the rounded caps show the true gradient colour with no edge seam */
  background-origin:border-box; background-clip:border-box;
  overflow:hidden;
  /* no box-shadow: the old brand-blue shadow bled a dark halo onto the light mint cap,
     reading as a colour block at the rounded ends. Corners now show only the gradient. */
  box-shadow:none;
}
.btn-solid:hover{ filter:brightness(1.05); transform:translateY(-2px); color:#fff; }
.btn-ghost{ border-color:var(--c-hair-2); color:var(--c-ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--c-ink); transform:translateY(-2px); color:var(--c-ink); }
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:15px; color:var(--c-ink); text-decoration:none;
}
.link-arrow .arr{ transition:transform .25s; color:var(--c-teal); }
.link-arrow:hover{ color:var(--c-ink); }
.link-arrow:hover .arr{ transform:translateX(5px); }

/* ---------- news cards ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.news-card{
  display:block; border:1px solid var(--c-hair); border-radius:16px; overflow:hidden;
  background:var(--c-bg-2); transition:transform .3s, border-color .3s, box-shadow .3s;
  color:inherit; text-decoration:none;
}
.news-card:hover{
  transform:translateY(-5px); border-color:var(--c-hair-2);
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35);
}
/* activity cards with no detail page render as a hrefless <a> — keep them static */
.news-card:not([href]){ cursor:default; }
.news-card:not([href]):hover{ transform:none; border-color:var(--c-hair); box-shadow:none; }
.news-card .thumb{ height:210px; position:relative; overflow:hidden; background:var(--c-panel); }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-card .body{ padding:20px 22px 24px; }
.news-tag{
  font-family:var(--font-mono); font-weight:400; font-size:15px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c-blue);
}
.news-card h3, .news-card h4{
  font-family:var(--font-body); font-weight:600; font-size:19px; line-height:1.25;
  letter-spacing:-0.01em; margin:12px 0 0; color:var(--c-ink); text-wrap:pretty;
}
.news-card .meta{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.02em;
  color:var(--c-muted); display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;
}
.news-card p{
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  color:var(--c-ink-2); margin:10px 0 0;
}

/* Pull the shared pager (_pages.html) away from the card grid — legacy
   style.css gives .pagination no top spacing, so it crowds the cards above
   on the Quiet Light list pages (news / articles / events / search). */
.news-grid + .pagination{ margin-top:clamp(40px,6vh,64px); }

/* ---------- news / activity DETAIL meta header ----------
   Category badge + date/place kept on ONE row, mirroring the current live site:
   a solid dark pill badge (white text), a gap, then date | place split by
   a hairline divider. Consumed by resources_news_content.html and
   resources_events_content.html (the .news-cat replaces the old plain-text
   .news-tag on those two detail pages). */
.news-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px;
  font-family:var(--font-mono); font-size:clamp(14px,1.05vw,15px);
  letter-spacing:0.02em; color:var(--c-muted);
}
/* Pill badge — mirrors the news-LIST category pill (.concept-c .bt): dark #333
   rounded pill, min-width, centred, capitalised. Keeps the header badge visually
   identical to the listing/related-item badges instead of the old square box. */
.news-meta .news-cat{
  display:inline-block; flex:none;
  min-width:150px; padding:3px 15px; border-radius:999px;
  text-align:center; text-transform:capitalize;
  background:#333; color:#fff;
  text-decoration:none; transition:filter .25s;
}
.news-meta .news-cat:hover{ color:#fff; filter:brightness(1.4); }
.news-meta .news-dateplace{ display:inline-flex; align-items:center; flex-wrap:wrap; }
/* second and later pieces (location / source) get the "| value" divider; the
   leading date span is left clean. `+` ignores the whitespace text nodes between. */
.news-meta .news-dateplace span + span{
  border-left:1px solid var(--c-hair-2);
  padding-left:12px; margin-left:12px;
}

/* Leadership cards (Company > Overview) reuse the .news-card shell but open a
   Bootstrap bio modal instead of linking out, so they carry no href — which
   .news-card:not([href]) would render static. Re-enable the pointer + hover
   lift here (higher specificity than the :not([href]) reset). */
.news-grid .news-card.team-card{ cursor:pointer; }
.news-grid .news-card.team-card:hover{
  transform:translateY(-5px); border-color:var(--c-hair-2);
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35);
}
/* Uniform cards. The c_leadership list image is already a square (+cw500h500)
   centre-crop (fn.class.php get_leadership), so a 1:1 thumb shows the FULL
   portrait with no further crop and no letterbox — and, being a fixed ratio,
   gives every card an identical photo area. The caption is one name line
   (names are all single-line) + up to two title lines: the title reserves two
   lines (min-height) and clamps at two, so a long job title shows in full and
   every card stays equal-height whether its title is one line or two. */
.news-grid .news-card.team-card{ align-self:stretch; }
.team-card .thumb{ height:auto; aspect-ratio:1/1; background:var(--c-panel); }
.team-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card .body{ padding:14px 18px 18px; }
.team-card .body h3{
  margin:0; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.team-card .body p{
  margin:4px 0 0; line-height:1.4; min-height:2.8em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ====================================================================== */
/* PART 3 — HOMEPAGE SECTIONS + LIGHT-ART + MOTION (scoped)               */
/* ====================================================================== */
.concept-c{
  background:var(--c-bg); color:var(--c-ink);
  font-family:var(--font-body); font-weight:400; letter-spacing:-0.005em;
}
.concept-c img{ display:block; max-width:100%; }
.concept-c ::selection{ background:var(--c-teal); color:#fff; }

/* CMS rich-text (TinyMCE .mce / legacy .blog): editor-pasted wide content
   must not be clipped on mobile. Because body{overflow-x:hidden} turns any
   overflow into unreadable clipping (not a scrollbar), cap embedded media at
   100%, let wide tables/code scroll horizontally in place, and break long
   unbroken strings (URLs, part numbers). */
.concept-c :is(.mce,.blog){ overflow-wrap:break-word; }
.concept-c :is(.mce,.blog) :is(img,video,iframe,embed,object,canvas){ max-width:100%; }
.concept-c :is(.mce,.blog) :is(table,pre){ display:block; max-width:100%; overflow-x:auto; }

.concept-c .scene-svg,
.concept-c .hero-art svg,
.concept-c .scene svg{ width:100%; height:100%; display:block; }

/* ---------- Balanced image + copy feature rows ----------
   Two-up sections (a picture beside a block of copy) on the Technology and
   Company pages. Put the picture in `.split-media` and pair an equal
   col-lg-6 / col-md-6 image half with a col-lg-6 / col-md-6 text half inside a
   plain `.row` (keep the default align-items:stretch — do NOT add
   align-items-start). The media crops to a taller frame with object-fit:cover
   and stretches to the text column's height, so the two halves read as an even
   50/50 split instead of a short landscape image stranded in a narrow column.
   min-height keeps the picture tall when the copy is short; max-height caps it
   when the copy runs long. Below lg/md the columns stack full-width and the
   media keeps its min-height as a banner crop. */
.concept-c .split-media{
  height:100%;
  min-height:clamp(300px,30vw,430px);
  max-height:600px;
  border:1px solid var(--c-hair);
  border-radius:20px;
  overflow:hidden;
  background:var(--c-panel);
}
.concept-c .split-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* technology/architecture — PQC section: full-width stacked layout (上圖下文).
   Unlike .split-media (a half-column that cover-crops to a fixed frame), this
   media spans the full wrap width above the copy and shows the wide architecture
   diagram whole (height:auto), since the body refers to it as "illustrated above". */
.concept-c .pqc-media{
  border:1px solid var(--c-hair);
  border-radius:20px;
  overflow:hidden;
  background:var(--c-panel);
}
.concept-c .pqc-media img{
  width:100%; height:auto; display:block;
}

/* technology/architecture — "The foundation" body is single-column starting
   at the wrap's left, so its 46ch cap ends far short of the "Photonic
   computing" body below, which sits in a right-hand col-lg-6 (offset by the
   equal col-lg-6 image). At >=lg, widen it by that same 50% offset (+ the col
   gutter) so the two bodies share a right edge. Below lg the columns stack and
   both are plain 46ch, so the base .lede cap already aligns them. */
@media (min-width:992px){
  .concept-c .tech-found-lede{ max-width:calc(46ch + 50% + 24px); }
}

/* ---------- HERO (CMS KV carousel — photographic, white text) ---------- */
.home-hero{ position:relative; overflow:hidden; background:var(--c-ink); }
.home-hero .owl-main, .home-hero .owl-stage-outer, .home-hero .owl-stage,
.home-hero .owl-item{ height:100%; }
.home-hero .item{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background-size:cover; background-position:center;
}
.home-hero .item > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.home-hero .bgmask{ position:absolute; inset:0; z-index:1; }
.home-hero .hero-scrim-c{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, oklch(0.18 0.03 252 / 0.28) 0%, transparent 26%, transparent 56%, oklch(0.16 0.03 252 / 0.55) 100%);
}
.home-hero .hero-content{ position:relative; z-index:3; width:100%; color:#fff; }
.home-hero .hero-content .wrap{ width:100%; }
.home-hero .hero-eyebrow{ color:#fff; opacity:.88; margin-bottom:20px; }
.home-hero .hero-h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(40px,5.6vw,86px); line-height:1.04; letter-spacing:-0.03em;
  color:#fff; margin:0; text-wrap:balance;
  text-shadow:0 2px 30px oklch(0.16 0.03 252 / 0.35);
}
.home-hero .hero-content .lede{ color:rgba(255,255,255,.9); margin-top:18px; max-width:42ch; }
.home-hero .scroll-cue{ border-color:rgba(255,255,255,.5); bottom:58px; }
.home-hero .scroll-cue span{ background:#fff; }
/* owl dots/nav over the dark hero */
.home-hero .owl-dots{ position:absolute; left:0; right:0; bottom:20px; z-index:4; }
.home-hero .owl-dots .owl-dot span{ background:rgba(255,255,255,.45); }
.home-hero .owl-dots .owl-dot.active span{ background:#fff; }
/* nav arrows -> white so they read on the dark photographic hero */
.home-hero .owl-nav button img{ filter:brightness(0) invert(1); opacity:.85; }
.home-hero .owl-nav button:hover img{ opacity:1; }

.domain-trail{
  display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:clamp(15px,1.4vw,19px); letter-spacing:0.04em;
}
/* trail + CTA pair on the dark photographic hero */
.home-hero .domain-trail span{ color:#fff; }
.home-hero .domain-trail i{ color:rgba(255,255,255,.6); }
.home-hero .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.domain-trail span{ color:var(--c-ink); font-weight:500; position:relative; }
.domain-trail span::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--c); box-shadow:0 0 12px 1px var(--c);
  margin-right:9px; vertical-align:middle;
}
.domain-trail i{ color:var(--c-faint); font-style:normal; }

.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:4;
  width:24px; height:38px; border:1px solid var(--c-hair-2); border-radius:14px;
  display:flex; justify-content:center;
}
.scroll-cue span{ width:3px; height:8px; border-radius:2px; background:var(--c-teal); margin-top:7px; }
@keyframes cueDrop{ 0%{transform:translateY(0);opacity:0} 30%{opacity:1} 70%{transform:translateY(12px);opacity:0} 100%{opacity:0} }

/* hero KV carousel (reuses owl) restyled */
.home-hero .hero-kv{ position:absolute; inset:0; z-index:0; }
.home-hero .hero-kv .item{ min-height:100svh; }

/* ---------- THREE DOMAINS ---------- */
.three-domains{ position:relative; padding-top:clamp(70px,11vh,130px); overflow:hidden; }
.three-domains .head{ position:relative; z-index:3; text-align:center; max-width:860px; }
.three-domains .scene-hold{ position:relative; margin-top:clamp(8px,3vh,40px); height:min(78vh,860px); }
/* two-column platform intro: heading left + prism graphic right (hero-style) */
.domains-split{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(28px,5vw,72px); align-items:center; }
.domains-copy{ max-width:520px; }
.domains-copy .eyebrow{ justify-content:flex-start; }
.domains-art{ position:relative; aspect-ratio:16/9; }
@media (max-width:860px){
  .domains-split{ grid-template-columns:1fr; gap:18px; }
  .domains-art{ aspect-ratio:16/10; }
}
/* centered "Three AI domains" + 3 text cards (image 2) */
.domain-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,56px); }
.domain-text-card{ display:block; text-decoration:none; padding-bottom:28px; cursor:pointer; }
.dtc-idx{ font-family:var(--font-mono); font-weight:400; font-size:15px; letter-spacing:0.12em; color:var(--dc); margin-bottom:16px; transition:opacity .25s; }
.dtc-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,52px); letter-spacing:-0.03em; color:var(--c-ink); line-height:1.08; margin-bottom:24px; display:flex; align-items:center; gap:0; transition:color .3s ease; }
.dtc-arr{ display:inline-block; margin-left:10px; opacity:0; transform:translateX(-8px); transition:opacity .28s ease, transform .28s ease; font-size:0.78em; color:var(--dc); }
.dtc-rule{ height:2px; background:var(--dc); border-radius:2px; opacity:.55; transform-origin:left; transform:scaleX(0.38); transition:transform .42s cubic-bezier(0.16,1,0.3,1), opacity .28s; }
.domain-text-card:hover .dtc-name{ color:var(--dc); }
.domain-text-card:hover .dtc-arr{ opacity:1; transform:translateX(0); }
.domain-text-card:hover .dtc-rule{ transform:scaleX(1); opacity:.85; }
.domain-text-card:hover .dtc-idx{ opacity:.75; }
@media (max-width:680px){
  /* keep all three AI domains on ONE horizontal row; scale type so "Physical AI" fits */
  .domain-cards{ grid-template-columns:repeat(3,1fr); gap:clamp(8px,2.4vw,18px); }
  .domain-text-card{ padding-bottom:14px; }
  .dtc-idx{ font-size:12px; letter-spacing:0.12em; margin-bottom:6px; }
  /* name must stay clearly larger than the .dtc-idx eyebrow (12px): floor at 15px */
  .dtc-name{ font-size:clamp(15px,4.4vw,22px); margin-bottom:10px; line-height:1.12; }
  .dtc-arr{ display:none; }
}
/* GeSi figure frame (#gesi image) */
.gesi-c-figure{ position:relative; border-radius:22px; overflow:hidden; background:var(--c-bg); border:1px solid var(--c-hair); }

/* ---------- DOMAIN CINEMA (full-bleed) ---------- */
.domain-cinema{
  position:relative; min-height:90svh; overflow:hidden;
  display:flex; align-items:flex-end; background:var(--c-bg);
}
.domain-cinema .scene{ position:absolute; inset:0; z-index:0; }
.cinema-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cinema-scrim.left{
  background:
    linear-gradient(82deg, oklch(0.99 0.003 210 / 0.82) 0%, oklch(0.99 0.003 210 / 0.42) 30%, transparent 56%),
    linear-gradient(0deg, oklch(0.99 0.003 210 / 0.6) 0%, transparent 36%);
}
.cinema-scrim.right{
  background:
    linear-gradient(278deg, oklch(0.99 0.003 210 / 0.82) 0%, oklch(0.99 0.003 210 / 0.42) 30%, transparent 56%),
    linear-gradient(0deg, oklch(0.99 0.003 210 / 0.6) 0%, transparent 36%);
}
.cinema-wrap{ position:relative; z-index:2; width:100%; padding-block:clamp(56px,12vh,128px); }
.domain-cinema.right .cinema-wrap{ display:flex; justify-content:flex-end; }
.cinema-copy{ max-width:520px; }
.domain-cinema.right .cinema-copy{ text-align:right; }
.domain-cinema.right .cinema-copy .lede{ margin-left:auto; }
.domain-cinema.right .cinema-copy .chips{ justify-content:flex-end; }
.cinema-tag{
  position:absolute; top:0; left:0; z-index:3;
  margin:clamp(86px,11vh,118px) clamp(20px,5vw,92px) 0;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:#fff; padding:9px 15px; border-radius:999px; white-space:nowrap;
  background:oklch(0.27 0.045 252 / 0.42); backdrop-filter:blur(6px);
}
.domain-cinema.right .cinema-tag{ left:auto; right:0; }
.cinema-tag .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }

/* ---------- products grid ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.prod-card{
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--c-hair); border-radius:18px; padding:30px 30px 26px;
  background:var(--c-bg-2); transition:transform .3s, border-color .3s, box-shadow .3s;
}
.prod-card:hover{ transform:translateY(-5px); border-color:var(--c-hair-2);
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35); }
.prod-card img{ width:64px; height:64px; object-fit:contain; margin-bottom:8px; }
.prod-card h3{ font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-0.01em; color:var(--c-ink); margin:0; }
.prod-card p{ color:var(--c-ink-2); font-size:15px; line-height:1.5; margin:0 0 6px; flex:1; }
/* rounded-corner icon tile for feature / advantage cards */
.adv-ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--c-teal-soft); margin-bottom:6px; }
.adv-ico svg, .adv-ico img{ width:26px; height:26px; display:block; object-fit:contain; }

/* advantage table: one rounded hairline container, cells split by 1px dividers
   (gap paints the divider — works for any row count). Icons are frameless 48px
   glyphs matching the site-wide tp-ff feature-icon system (ring frame removed). */
.adv-table{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--c-hair); border:1px solid var(--c-hair); border-radius:18px; overflow:hidden; }
.adv-table .cell{ background:var(--c-bg-2); padding:clamp(24px,3vw,36px); }
.adv-table .cell h3{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-0.01em; color:var(--c-ink); margin:14px 0 8px; }
.adv-table .cell p{ color:var(--c-ink-2); font-size:15px; line-height:1.55; margin:0; }
.adv-table .adv-ico{ width:48px; height:48px; border-radius:0; background:transparent; border:none; margin-bottom:0; }
.adv-table .adv-ico svg{ width:100%; height:100%; }
@media (max-width:860px){ .adv-table{ grid-template-columns:1fr; } }

/* ---------- DOMAIN PRODUCT SECTIONS — stacked intro + card grid + art bg ---------- */
.concept-c .domain-products-c{
  position:relative;
  padding-block:clamp(80px,11vh,130px);
  border-top:1px solid var(--c-hair);
  overflow:hidden;
}
.concept-c .dps-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.18;
}
.concept-c .dps-bg svg,
.concept-c .dps-bg .art{ width:100%; height:100%; display:block; }
.concept-c .dps-wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(160deg,
      oklch(0.99 0.003 210 / 0.80) 0%,
      oklch(0.99 0.003 210 / 0.30) 50%,
      oklch(0.99 0.003 210 / 0.80) 100%);
}
.concept-c .dps-inner{ position:relative; z-index:2; }

.concept-c .dps-intro{ margin-bottom:clamp(36px,5vh,60px); }
.concept-c .dps-tag{
  font-family:var(--font-body);
  font-size:15px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
  margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
  color:var(--domain-c, var(--c-teal));
}
.concept-c .dps-tag::before{
  content:''; display:block; width:28px; height:2px;
  background:currentColor; border-radius:1px; flex-shrink:0; opacity:0.75;
}
.concept-c .dps-intro-cols{
  display:grid; grid-template-columns:58% 1fr;
  gap:clamp(32px,5vw,88px); align-items:end;
}
.concept-c .dps-head{
  font-size:clamp(36px,4.4vw,72px) !important;
  line-height:1.05 !important;
  letter-spacing:-0.035em !important;
  margin:0 !important;
}
.concept-c .dps-right-col{
  display:flex; flex-direction:column; gap:20px; padding-top:20px;
  border-top:2px solid var(--domain-c, var(--c-teal));
}
.concept-c .dps-sub{
  font-size:clamp(16px,1.4vw,20px); max-width:38ch;
  color:var(--c-ink-2); margin:0; line-height:1.55; font-weight:400; text-wrap:pretty;
}
.concept-c .dps-cta{
  font-size:15px; font-weight:600; white-space:nowrap; color:var(--c-ink);
  display:inline-flex; align-items:center; gap:6px; transition:gap .2s;
  text-decoration:none;
}
.concept-c .dps-cta:hover{ gap:10px; color:var(--c-ink); }

/* ---- card grid: hairline "table" of white cells ---- */
.concept-c .dps-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1px; align-items:stretch;
  background:oklch(0.85 0.025 215);
  border:1px solid oklch(0.85 0.025 215);
  border-radius:22px; padding:0; overflow:hidden;
}
/* 3-up grid spans the full content width so the three cards fill the row */
.concept-c .dps-cards[data-count="3"]{ max-width:100%; }
/* single-card grid: width == exactly one cell of the full-width 3-up grid.
   A 3-up row is (100% − 2px border − 2px gaps) split 3 ways per cell; a lone
   card adds back its own 2px border, so max-width = (100% − 4px)/3 + 2px.
   This tracks the wrap width, so Edge's Inception always matches one 3-up card. */
.concept-c .dps-cards[data-count="1"]{ max-width:calc((100% - 4px) / 3 + 2px); }
.concept-c .dps-cards > *,
.concept-c .dps-cards [data-reveal]{
  height:100%; width:100%; display:flex; flex-direction:column;
}

/* ---- product card ---- */
.concept-c .product-card-c{
  height:100%; display:flex; flex-direction:column;
  background:#fff; border:none; border-radius:0; width:100%; overflow:hidden;
  text-decoration:none; transition:background .25s;
  /* no hard-coded --domain-c here: cards inherit it from their domain section
     (#cloud/#edge/#physical), so .pcard-cta "Learn more" takes the domain color */
}
.concept-c .product-card-c:hover{ background:oklch(0.985 0.008 210); }
.concept-c .pcard-img{
  width:calc(100% - 28px); margin:14px 14px 0;
  aspect-ratio:16/9; overflow:hidden;
  background:oklch(0.92 0.025 210); border-radius:10px; flex-shrink:0;
}
.concept-c .pcard-img svg{ width:100%; height:100%; display:block; }
.concept-c .pcard-img img{ width:100%; height:100%; display:block; object-fit:cover; }
.concept-c .pcard-body{
  padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;
}
.concept-c .pcard-eyebrow{
  font-family:var(--font-body);
  font-size:9px; letter-spacing:0.20em; text-transform:uppercase; font-weight:500;
  margin-bottom:7px; color:var(--domain-c, var(--c-teal));
}
.concept-c .pcard-name{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(22px, 1.9vw, 28px); letter-spacing:-0.03em;
  color:var(--c-ink); line-height:1.05; margin-bottom:12px;
}
.concept-c .pcard-desc{
  font-size:15px; line-height:1.6; color:var(--c-ink-2);
  margin:0 0 16px; flex:1; text-wrap:pretty;
  /* reserve up to 4 lines (4 × 1.6 line-height) so every card — across the
     Cloud / Edge / Physical grids — is the same height regardless of copy length */
  min-height:calc(4 * 1.6em);
}
.concept-c .pcard-cta{
  font-family:var(--font-body); font-size:15px; letter-spacing:0.02em; font-weight:700;
  display:flex; align-items:center; gap:5px; margin-top:auto;
  color:var(--domain-c, var(--c-teal)); transition:gap .2s;
}
.concept-c .product-card-c:hover .pcard-cta{ gap:9px; }
/* pcard-cta "Learn more" — three per-domain variants, pinned to the exact brand hex.
   Cloud/Edge equal --c-blue/--c-teal (i.e. the inherited --domain-c), but Physical uses
   #00a6ac here rather than the more-saturated --c-cyan (oklch 0.65 0.14 198) that drives
   the section's SVG art. Id selectors (1,1,0) override .concept-c .pcard-cta (0,2,0). */
#cloud .pcard-cta{ color:#272282; }
#edge .pcard-cta{ color:#00778B; }
#physical .pcard-cta{ color:#00a6ac; }

@media (max-width: 960px){
  .concept-c .dps-intro-cols{ grid-template-columns:1fr; gap:20px; }
  .concept-c .dps-head{ font-size:clamp(34px,5vw,56px) !important; }
}
@media (max-width: 600px){
  .concept-c .dps-cards{ grid-template-columns:1fr !important; max-width:100% !important; }
}

/* ---- domain scene ambience (dps-bg inline SVGs; keyframes live here
       because Smarty's {{ }} delimiters clash with braces in SVG <style>) ----
   NOTE: these three ambient scene animations (Edge ring pulse, Physical radar
   sweep, Cloud signal flow) are deliberately NOT gated on `html.motion`, so they
   play even when the OS requests reduced motion. They are slow, low-contrast
   brand visuals and are treated as essential. The heavier scroll-driven motion
   (content reveals, fx-draw/fx-fade entrance, parallax) still gates on
   `html.motion` and so continues to respect prefers-reduced-motion. */
@keyframes edgeRingPulse{
  0%  { transform:scale(0.13); opacity:.58; }
  100%{ transform:scale(1);    opacity:0;   }
}
.concept-c .er-ring{
  transform-box:fill-box; transform-origin:center;
  animation:edgeRingPulse 3.6s ease-out infinite;
}
.concept-c .er-ring:nth-of-type(2){ animation-delay:.72s; }
.concept-c .er-ring:nth-of-type(3){ animation-delay:1.44s; }
.concept-c .er-ring:nth-of-type(4){ animation-delay:2.16s; }
.concept-c .er-ring:nth-of-type(5){ animation-delay:2.88s; }

@keyframes radarRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.concept-c .radar-arm{
  /* fixed viewBox coords of the physical scene's center */
  transform-origin:800px 500px; transform-box:view-box;
  animation:radarRotate 5s linear infinite;
}

/* Cloud scene: signal packets flow along the network routes so the graph stays
   alive (its fx-draw lines only draw once on scroll). offset-path per pulse is
   set inline in the template. Ambient like er-ring/radar-arm above: plays
   regardless of reduce-motion. Base opacity:0 so the dots only show while the
   keyframe is actually running them along a route. */
.concept-c #cloud .cl-pulse{ opacity:0; }
@keyframes cloudSignalFlow{
  0%   { offset-distance:0%;   opacity:0; }
  9%   { opacity:1; }
  91%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}
.concept-c #cloud .cl-pulse{
  animation:cloudSignalFlow 5s linear infinite;
}

/* ---------- GeSi technology ---------- */
.gesi-c{ background:var(--c-bg-2); border-block:1px solid var(--c-hair); }
.gesi-grid{
  display:grid; grid-template-columns:minmax(280px,0.85fr) 1.15fr;
  gap:clamp(34px,5vw,80px); align-items:center;
}
.gesi-figure{
  position:relative; border-radius:22px; overflow:hidden;
  background:var(--c-bg); border:1px solid var(--c-hair); aspect-ratio:1200/560;
}
.gesi-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.gesi-list li{ position:relative; padding-left:30px; color:var(--c-ink-2); line-height:1.5; }
.gesi-list li::before{
  content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:50%;
  background:var(--c-teal-soft);
  background-image:linear-gradient(var(--c-teal),var(--c-teal));
  background-size:7px 7px; background-position:center; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--c-teal);
}

/* ---------- ecosystem ---------- */
.eco-fig{ max-width:900px; margin:clamp(24px,4vh,56px) auto 0; aspect-ratio:1200/680; position:relative; }

/* ---------- contact CTA / newsletter band ---------- */
.contact-c{ position:relative; overflow:hidden; background:var(--c-bg); }
.contact-c .glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact-c .wrap{ position:relative; z-index:2; }

/* Site-wide "Get started / Get in touch" CTA (section#contact): the heading is a
   two-line <br> stack (e.g. "Build your cloud" / "with light."). .display sets a
   very tight line-height:0.96 meant for single lines, which cramps the two lines
   together — give the stacked CTA heading room so the lines don't touch. */
#contact .display{ line-height:1.1; }

/* Closing call-to-action band: a hairline divider always sits above it so the CTA
   reads as a distinct section, clearly separated from the page body above. Product
   pages also declare this in their per-page CSS; centralizing it here guarantees it
   applies site-wide (Company, Technology, Infrastructure, Consultancy, PQC, homepage,
   Products/Connect) — anywhere the final CTA carries the .cta-section class. */
.cta-section{ border-top:1px solid var(--c-hair); }

/* Section separation (site-wide): every stacked page section is delineated from
   the one above it by a single full-bleed hairline, so sections read as clearly
   separated blocks. This fills the boundaries that carry no rule of their own —
   the hero -> first content section, and consecutive bare .section blocks.
   Excluded on BOTH sides so a boundary never doubles to 2px:
     - .gesi-c / .gesi-bridge coloured bands already declare border-block,
     - the closing .cta-section already declares border-top,
     - the product 'tp-' template family rules its own borders in per-page CSS. */
main.concept > .section:not(.gesi-c):not(.gesi-bridge):not([class*="tp-"])
  + .section:not(.gesi-c):not(.gesi-bridge):not(.cta-section):not([class*="tp-"]){
  border-top:1px solid var(--c-hair);
}

.edm-c{
  position:relative; overflow:hidden; border-radius:24px;
  background:var(--c-bg-2); border:1px solid var(--c-hair);
  padding:clamp(30px,5vw,56px);
}
.edm-c .form{
  display:flex; gap:10px; border:1px solid var(--c-hair-2); border-radius:999px;
  padding:6px; background:var(--c-bg); max-width:560px;
}
.edm-c .form input{
  flex:1; border:0; background:transparent; padding:10px 18px; font-size:15px;
  color:var(--c-ink); font-family:var(--font-body); outline:none;
}
.edm-c .form button{
  border:0; cursor:pointer; border-radius:999px; padding:12px 26px;
  font-family:var(--font-body); font-weight:600; font-size:15px; color:#fff;
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--c-teal) 50%, var(--c-blue) 100%);
  transition:filter .2s, transform .2s;
}
.edm-c .form button:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ---------- 404 / under-construction ---------- */
.nf-page{
  position:relative; overflow:hidden; background:var(--c-bg);
  min-height:calc(100svh - 100px);
  display:flex; align-items:center;
}
.nf-art{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.nf-art svg{ width:100%; height:100%; display:block; }
.nf-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, transparent 30%, var(--c-bg) 100%);
}
.nf-page .wrap{ position:relative; z-index:2; }
.nf-code{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--c-blue); display:inline-flex; align-items:center; gap:10px; justify-content:center;
}
.nf-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.nf-links{
  margin-top:46px; display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em;
}
.nf-links a{ color:var(--c-muted); }
.nf-links a:hover{ color:var(--c-teal); }
/* "under construction" marching-ants on the unbuilt beams */
@media (prefers-reduced-motion: no-preference){
  html.motion .nf-art .nf-dash{ animation:nfDash 2.4s linear infinite; }
}
@keyframes nfDash{ to{ stroke-dashoffset:-28; } }

/* ---------- sub-page hero (light, Quiet-Light brand) ---------- */
.sub-hero{
  position:relative; overflow:hidden; background:var(--c-bg);
  display:flex; align-items:center;
  min-height:min(76vh, 720px); padding-block:clamp(80px,12vh,140px);
}
/* Slim inner hero — Resources list pages (News / Articles / Activities) carry
   just eyebrow + title + lede above a filtered list, so they don't need the tall
   76vh band that leaves the copy floating in empty space. Drop the min-height and
   tighten the padding so the list/filter starts close under the lede. */
.sub-hero--slim{ min-height:0; padding-block:clamp(56px,8vh,96px) clamp(22px,3vh,34px); }
.sub-hero .hero-art{ position:absolute; inset:0; z-index:0; }
.sub-hero .hero-art svg{ width:100%; height:100%; display:block; }
.sub-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg, oklch(0.99 0.003 210 / 0.9) 0%, oklch(0.99 0.003 210 / 0.55) 34%, transparent 64%),
    linear-gradient(180deg, oklch(0.99 0.003 210 / 0.5) 0%, transparent 22%, transparent 72%, oklch(0.99 0.003 210 / 0.55) 100%);
}
.sub-hero .hero-content{ position:relative; z-index:2; width:100%; }
.sub-hero .hero-h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(36px,5.2vw,76px); line-height:1.02; letter-spacing:-0.03em;
  color:var(--c-ink); margin:0; text-wrap:balance;
}

/* Contact page headings use the shared fluid clamps (.hero-h1 / .display.h-l);
   the former non-scaling 76/72px freeze was removed 2026-07-16 for site-wide consistency. */

/* ---------- two-pillar product cards (Connect / Inception) ---------- */
.pillar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.pillar{
  display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--c-hair); border-radius:20px; padding:clamp(26px,3vw,40px);
  background:var(--c-bg-2); transition:transform .3s, border-color .3s, box-shadow .3s;
}
.pillar:hover{ transform:translateY(-5px); border-color:var(--c-hair-2);
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35); }
.pillar h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.02em; color:var(--c-ink); margin:0; }
.pillar > p{ color:var(--c-ink-2); font-size:15.5px; line-height:1.55; margin:0; }
.pillar .gesi-list{ margin-top:2px; }
.pillar .link-arrow{ margin-top:auto; }
/* device-name : category inline heading — category rendered as a small Poppins qualifier */
.pillar h3 .pill-cat{ font-family:var(--font-body); font-weight:400; font-size:15px; line-height:29px; letter-spacing:normal; }
/* Across the multi-column band the longest qualifiers (e.g. "Single-Photon Avalanche Diode
   (SPAD)", "Electro-Absorption Modulator (EAM)") wrap to a second line and push the product
   name out of alignment. Keep the qualifier on one line (no wrap) and fluidly shrink it so it
   always fits the card without overflowing — the floor is tuned for the tightest 3-col width
   (~iPad landscape). Below 768px the grid is single-column, so natural wrapping is fine. */
@media (min-width:768px){
  .pillar h3 .pill-cat{ white-space:nowrap; font-size:clamp(10.5px, 0.95vw, 15px); }
}
/* application tags inside device cards — plain rounded pills (no accent dot), sized to the card body */
.pillar .chips{ margin-top:2px; }
.pillar .chip{ font-size:14px; letter-spacing:0.01em; }
.pillar .chip::before{ display:none; }

@media (max-width: 860px){
  .pillar-grid{ grid-template-columns:1fr; }
}

/* ---------- domain overview: why / GeSi bridge / products spacer ---------- */
.vision-layout{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px); align-items:center;
}
.why-stats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,40px) clamp(24px,4vw,56px);
}
.why-num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,5.5vw,80px); letter-spacing:-0.04em;
  color:var(--c-ink); line-height:1;
}
.why-label{
  font-family:var(--font-mono); font-size:15px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--c-muted); margin-top:9px; line-height:1.5;
}
.why-media{
  display:block; width:100%; height:auto;
  border-radius:22px; overflow:hidden;
  border:1px solid var(--c-hair); background:var(--c-panel);
}
.gesi-bridge{ background:var(--c-panel); border-block:1px solid var(--c-hair); }
.products-wrap{ margin-top:clamp(36px,5vh,56px); }

@media (max-width: 900px){
  .vision-layout{ grid-template-columns:1fr; }
}

/* ====================================================================== */
/* MOTION — scroll reveal + scroll-fx (gated under html.motion so a       */
/* no-JS / reduced-motion / print render shows the finished end-state)    */
/* ====================================================================== */
html.motion .concept-c [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}
html.motion .concept-c [data-reveal].in{ opacity:1; transform:none; }
html.motion .concept-c [data-reveal="hold"]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .concept-c [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* anchor jumps (e.g. filter reload -> #open-positions, "View open positions" button)
   must clear the position:sticky header so the section heading isn't hidden underneath */
#open-positions{ scroll-margin-top:110px; }

/* Careers "Work and Life" photo carousel: rounded corners to match the page's
   image figures (border-radius:20px) */
.owl-pics .item img{ border-radius:20px; }

/* ---- Careers "Open Positions" list ----------------------------------------
   The markup is  .job-list > #job-results > (.title header + <ul> data rows),
   so a data row is  #job-results > ul  — NOT  .job-list > ul.  (The earlier
   ".job-list > ul" selectors never matched, so the legacy grey blocks, the
   left gradient bar and the inter-row gaps from style.css showed through.)
   Everything below is anchored on #job-results so it wins on ID specificity
   and source order over the legacy .job-list ul… rules.
   Result: one rounded, hairline-ruled card (header + rows); flush rows with a
   single divider (no gap); no left gradient bar; every column at the Position
   size. */

/* the whole table = a single rounded, bordered card (header + rows) */
#job-results{
  margin-top:clamp(24px, 3.5vw, 40px);   /* breathing room below the filter dropdowns */
  border:1px solid var(--c-hair); border-radius:18px; overflow:hidden;   /* == .tp-compare-table card radius */
  background:var(--c-bg-2);
}

/* header label row — matches the /products/aware "Built for SWIR-powered
   perception" accordion table header (.tp-plat-head span): a shaded panel
   background with small mono/uppercase labels (not the bold display labels
   the earlier .tp-compare-table match used) */
.job-list .title{ margin-bottom:0; }
.job-list .title ul{ margin:0; background:var(--c-panel); border-bottom:1px solid var(--c-hair); }
.job-list .title ul li{
  background:none; padding:clamp(16px,2.2vw,24px);              /* == .tp-plat-summary cell padding */
  border-right:1px solid var(--c-hair);                        /* vertical column dividers */
  font-family:var(--font-mono); font-size:15px; font-weight:400;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--c-muted);
}
.job-list .title ul li:last-child{ border-right:none; }
/* also beats the legacy .job-list .title ul li:first-child rules
   (font-size:16px + font-family:"Avenir Next…") so the POSITION label matches
   the other three mono labels; no extra left inset so columns line up flush
   like the .tp-plat-head cells */
.job-list .title ul li:first-child{ font-size:15px; font-family:var(--font-mono); }

/* data rows — flush (no inter-row gap), one hairline divider, no legacy grey block */
#job-results > ul{
  display:flex; align-items:center; margin:0;
  border-bottom:1px solid var(--c-hair); transition:background .2s;
}
#job-results > ul:last-child{ border-bottom:0; }
#job-results > ul:hover{ background:var(--c-teal-soft); }
#job-results > ul::before{ display:none; }               /* remove legacy 10px left gradient bar */
#job-results > ul > li{
  flex:1; background:none; padding:clamp(16px,2.2vw,24px);  /* == .tp-compare-table td padding */
  border-right:1px solid var(--c-hair);                    /* vertical column dividers, like the compare table */
  color:var(--c-ink-2); font-size:15px;                    /* == product-table td body size */
}
#job-results > ul > li:last-child{ border-right:none; }
#job-results > ul > li:first-child{
  flex-grow:2; min-width:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
}
#job-results > ul > li:first-child a{
  font-weight:600; color:var(--c-teal); font-size:15px; text-decoration:none;
  min-width:0; white-space:normal; overflow-wrap:anywhere;
}
#job-results > ul > li:first-child a:hover{ color:var(--c-ink); }
#job-results > ul > li.new::before{ display:none !important; }

.job-list .jl-new{
  display:inline-block; margin-left:10px; font-family:var(--font-mono);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-teal); background:var(--c-teal-soft); padding:2px 8px; border-radius:999px;
}

@media (max-width:767px){
  /* stack columns; title on the first line, meta lines below */
  #job-results > ul{ flex-direction:column; align-items:stretch; padding:14px 18px; }
  #job-results > ul > li{ flex:none; padding:2px 0; border-right:none; }   /* drop column dividers when stacked */
  #job-results > ul > li:first-child{ flex-grow:0; padding:0 0 8px; }
  .job-list .title ul li{ border-right:none; }
}

/* scrollfx.js writes --sp (0->1 enter progress) and --sc (-1..1) */
html.motion .concept-c [data-scrollfx] .fx-draw,
html.motion .concept-c [data-scrollfx] .fx-fade,
html.motion .concept-c [data-scrollfx] .fx-rise{
  --t: max(0, min(1, (var(--sp, 1) - var(--fxd, 0)) * var(--fxk, 1)));
}
html.motion .concept-c [data-scrollfx] .fx-draw{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--t)); }
html.motion .concept-c [data-scrollfx] .fx-fade{ opacity:var(--t); }
html.motion .concept-c [data-scrollfx] .fx-rise{ transform:translateY(calc((1 - var(--t)) * var(--fxm, 30) * 1px)); }
html.motion .concept-c [data-scrollfx] .fx-par{ transform:translateY(calc(var(--sc, 0) * var(--fxm, 20) * -1px)); }

/* hero beam draws itself once on load */
@media (prefers-reduced-motion: no-preference){
  html.motion .concept-c .hero-art .hd-trunk{ stroke-dasharray:1; animation:c2Draw 1.15s cubic-bezier(.55,0,.15,1) both; }
  html.motion .concept-c .hero-art .hd-fan{ stroke-dasharray:1; animation:c2Draw 1.0s .7s cubic-bezier(.55,0,.15,1) both; }
  html.motion .concept-c .hero-art .hd-pop2{ animation:c2Pop .7s .5s ease both; }
  html.motion .concept-c .hero-art .hd-pop{ animation:c2Pop .9s 1.3s ease both; }
  html.motion .concept-c .scroll-cue span{ animation:cueDrop 1.8s ease-in-out infinite; }
}
@keyframes c2Draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes c2Pop{ from{ opacity:0; } to{ opacity:1; } }

/* ====================================================================== */
/* PART 4 — GLOBAL SHELL RESKIN (site-wide)                               */
/* ====================================================================== */

/* ---- type / surface ---- */
body{
  font-family:var(--font-body);
  background:var(--c-bg);
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); letter-spacing:-0.01em; }
b,strong{ font-family:var(--font-display); font-weight:600; }
a{ transition:color .2s; }

/* ---- HEADER / NAV ---- */
header{
  /* pin the whole header (desktop .topnav + mobile hamburger) to the top of the
     viewport on scroll. sticky keeps it in normal flow, so nothing is hidden
     underneath and there is no gap above the hero. Requires body overflow-x:clip
     (see style.css) — overflow-x:hidden there would make body a scroll container
     and silently disable this. */
  position:sticky; top:0; z-index:1000;
  background:oklch(0.99 0.004 210 / 0.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--c-hair);
  transition:background .35s, border-color .35s, box-shadow .35s;
}
header .slogn{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--c-muted);
}
header .logo{ background-image:url(../images/logo.svg); }
header .logo:hover{ background-image:url(../images/logo-color.svg); }
header .language a{ color:var(--c-ink-2); font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; }
header .language a:hover{ color:var(--c-ink); }
header .language{ background:none !important; filter:none !important; }
.search .icon-zoom{ color:var(--c-ink-2); }
.search .icon-zoom:hover{ color:var(--c-teal); }

/* hamburger bars -> brand teal (artilux.ai look) */
.openbtn div,
.openbtn div::before,
.openbtn div::after{ background:var(--c-teal); height:2px; border-radius:2px; }

/* slide-down menu / search panels */
.sidepanel, .search-form{ background:var(--c-bg-2); border-bottom:1px solid var(--c-hair); }
/* mobile menu type mirrors the desktop .topnav spec: top-level titles in Sora
   (--font-display, weight 500, same -0.01em tracking as .topnav-top); every
   sub-link in Poppins (--font-body), like .topnav-links / .topnav-sub. */
.sidepanel .menu > li > h2,
.sidepanel .menu .menu_toggle{
  font-family:var(--font-display); font-weight:500; color:var(--c-ink); letter-spacing:-0.01em;
}
/* sub-links otherwise fall through to the legacy Avenir Next rules in
   style.css (ul.menu li ul / ul.menu li ul li ul) — pin them to Poppins too */
.sidepanel .menu a{ color:var(--c-ink-2); font-family:var(--font-body); }
.sidepanel .menu a:hover{ color:var(--c-teal); }

/* homepage header now matches inner pages: a normal in-flow glass bar that sits
   ABOVE the hero (no fixed/transparent overlay). It inherits the base header
   styling above — dark logo, ink controls, teal hamburger — so nothing extra
   is needed here. */

/* ---- shared buttons reskinned to brand ---- */
/* .bt-border = bordered TEXT button -> brand text pill */
.bt-border{
  font-family:var(--font-body); font-weight:600; color:var(--c-ink);
  border:1px solid var(--c-hair-2); background:var(--c-bg-2); border-radius:999px;
  padding:9px 22px; transition:border-color .2s, color .2s, transform .2s;
}
.bt-border:hover{ border-color:var(--c-teal); color:var(--c-teal); transform:translateY(-2px); }
/* .bt-more = legacy arrow-icon button (text hidden, arrow drawn via ::before).
   Keep its geometry/arrow intact on inner pages; only modernise the colour. */
.bt-more{ border-color:var(--c-hair-2); }
.bt-more:hover{ border-color:var(--c-teal); }
/* .bts a = tag pills — Newsroom list tags (_tags.html) + Search hot-keywords.
   Legacy style.css gives them 0 vertical padding (cramped) and a green hover; on the
   Quiet-Light pages give the pill real height, a brand-teal hover so the Search tags
   read the same as the Newsroom ones, and lay the row out with flex `gap` so the
   row-to-row spacing matches the pill-to-pill spacing exactly (inline-block margins
   leave the vertical gap bigger because of line-height). Scoped to .concept-c so it
   never touches non-migrated pages. */
.concept-c .bts{ display:flex; flex-wrap:wrap; gap:8px; }
.concept-c .bts a{
  margin:0; padding:7px 16px; font-size:13px; line-height:1.2;
  border:1px solid var(--c-hair-2); border-radius:999px;
  color:var(--c-ink-2); background:transparent;
  transition:border-color .2s, color .2s;
}
/* color needs !important to beat legacy style.css `.bts a:hover{ color:#fff !important }`,
   which otherwise turns the pill label white (invisible) instead of brand teal on hover. */
.concept-c .bts a:hover{ border-color:var(--c-teal); color:var(--c-teal) !important; background:transparent; }
.bt-green{
  font-family:var(--font-body); font-weight:600; color:#fff; border:0;
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--c-teal) 50%, var(--c-blue) 100%);
  border-radius:999px; padding:12px 18px;
  box-shadow:0 12px 26px -20px oklch(0.30 0.14 274 / 0.5);
}
.bt-green:hover{ filter:brightness(1.05); color:#fff; background:linear-gradient(100deg, var(--color-mint) 0%, var(--c-teal) 50%, var(--c-blue) 100%); }

/* Secondary form actions on /company/contact — the "Send Verification Code" and
   "Attachment" buttons — share ONE muted OUTLINE style (green pill outline), so the
   filled-gradient Submit reads as the single primary action. Matches
   www.artilux.ai/support/contact. Scoped to the button ids so every other .bt-green
   button (homepage "Inquire Now", job pages, cookie bar) keeps the brand gradient. */
#btnUploadPdf,
#btnSendVCode{
  font-family:"Avenir Next LT W01 Medium"; font-weight:400;
  color:var(--green); background:none; border:2px solid var(--green);
  border-radius:50em; padding:10px 15px; font-size:15px; line-height:1.2em;
  width:100%; display:block; text-align:center; box-shadow:none;
}
#btnUploadPdf:hover,
#btnSendVCode:hover{ background:var(--green); color:#fff; filter:none; }

/* CONTACT US round button (footer) */
.bt-round{
  background:linear-gradient(140deg, var(--color-mint) 0%, var(--c-teal) 50%, var(--c-blue) 100%) !important;
  box-shadow:0 30px 60px -28px var(--c-blue);
  font-family:var(--font-display); font-weight:600;
}

/* ---- rounded boxes: legacy style.css squares off form/UI boxes
        (border-radius:0). Restore the brand's soft-box corners. ---- */
.form-control,
.form-select{ border-radius:12px; }
.form-check-input[type="checkbox"]{ border-radius:6px; }
/* Search hero: Bootstrap's .input-group squares off the RIGHT corners of an
   input that is followed by a button. #btnSearch renders as a plain text action
   here (transparent .btn, no box), so keep the search field a fully rounded box
   — restore the brand's 12px on all four corners. ID wins over Bootstrap's rule. */
#searchText1{ border-radius:12px; }
.option{
  border-radius:16px; overflow:hidden;
  /* legacy style.css sets padding:30px 5% 90px + margin-bottom:5vh, leaving a big
     empty band below the radios; and .option::before draws a gradient bar on the
     left edge. Tighten the box, drop the bottom gap, and cap the width. */
  padding:26px 30px 20px; margin-bottom:28px; max-width:860px;
}
.option::before{ display:none; }   /* remove the legacy gradient bar on the card's left edge */
/* Contact form: drop the width cap so the grey radio-options card spans the full
   form width (lining its right edge up with the Full Name / Company / Message
   inputs, col-md-10). Scoped to the contact page so the FAQ .option keeps its cap.
   Lay the four options out as a CENTRED 2-column grid: the column pair is centred
   as a group (justify-content:center) so the left/right whitespace inside the grey
   box is equal, and the symmetric 22px vertical padding keeps it vertically centred
   too. max-content columns hug their label so the pair stays a tight, balanced block
   and the long "Technical Support / Engineering Service" label never wraps. */
.contact-page .option{
  max-width:none;
  display:grid; grid-template-columns:max-content max-content;
  justify-content:center; column-gap:140px; row-gap:6px;
  padding:22px 30px;
}
/* Each option is a flush row (radio + label vertically centred against each other),
   content-sized so the grid columns hug their text and the pair stays centred. */
.contact-page .option .form-check{
  display:flex; align-items:center; gap:12px;
  width:auto; max-width:none; margin:9px 0; padding-left:0;
}
.contact-page .option .form-check .form-check-input{
  position:static; margin:0; flex:0 0 auto;
}
.contact-page .option .form-check .form-check-label{ padding-top:0; }
/* Phones (below the bootstrap col-md break): stack the four options one-per-row in a
   single flexible column so the long "Technical Support / Engineering Service" label
   can wrap instead of being crammed into (or clipped by) a max-content column. */
@media (max-width:767px){
  .contact-page .option{ grid-template-columns:1fr; column-gap:0; padding:18px 20px; }
  .contact-page .option .form-check{ margin:7px 0; }
}
/* Contact form: show field labels in their literal Title Case (the template writes
   "* Full Name") in the brand body font (Poppins), overriding the legacy all-caps
   + Avenir-Next .col-form-label from style.css. Scoped to the contact page and to
   the shared "contact" modal (.contact-modal — Downloads whitepaper form + the
   job-application modal), so every form built on this component reads in Poppins. */
.contact-page .col-form-label,
.contact-modal .col-form-label{ text-transform:none; font-family:var(--font-body); }
/* Submit is the form's single PRIMARY action — reuse the homepage .btn-solid look
   (Sora display font, brand mint→teal→blue gradient, pill) instead of the legacy
   inherited-font gradient. Scoped to the contact page and the Downloads contact
   modal (.contact-modal) so no other submit button changes. */
.contact-page #btnSubmit,
.contact-modal #btnSubmit{
  font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1;
  color:#fff; border:0; border-radius:999px; text-transform:none;
  padding:14px 22px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--color-teal) 50%, var(--color-blue) 100%);
  background-origin:border-box; background-clip:border-box;
  box-shadow:none; transition:transform .2s, filter .25s;
}
.contact-page #btnSubmit:hover,
.contact-modal #btnSubmit:hover{ filter:brightness(1.05); transform:translateY(-2px); color:#fff; }
.modal-content{ border-radius:18px; overflow:hidden; }

/* ---- breadcrumb (inner pages) ---- */
.breadcrumb-item, .breadcrumb-item.active, .breadcrumb a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:rgba(255,255,255,.85);
}

/* ---- FOOTER reskin (June 2026 spec: logo + 4 link columns + legal bar,
        all in ONE centered grid so the bottom row lines up with the columns.
        Overrides legacy style.css footer rules: bg image, white links,
        hover underline, img max-height:30px) ---- */
footer{
  background:var(--c-bg-2); border-top:1px solid var(--c-hair);
  color:var(--c-muted); padding-top:clamp(48px,6vh,72px);
}
footer a{ color:var(--c-ink-2); text-decoration:none; }
footer a:hover{ color:var(--c-ink); text-decoration:none; }

.footer-c-grid{
  display:grid;
  /* logo track hugs the logo; the 4 link columns split the remaining width
     equally, so the grid fills the wrap edge-to-edge with every gutter the
     same width and the column headings starting at even intervals */
  grid-template-columns:max-content repeat(4, 1fr);
  column-gap:clamp(48px,5.5vw,88px); row-gap:0;
}
.fc-logo{ margin-top:-6px; }
.fc-logo img{ width:230px; max-width:100%; height:auto; max-height:none; margin:0; }
.fc-h{
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:0.02em; color:var(--c-ink); margin-bottom:20px;
}
.fc-links{ display:flex; flex-direction:column; }
.fc-links a{ font-family:var(--font-body); font-size:15px; }
.fc-link{ padding:6px 0; }
.fc-group{ font-weight:600; color:var(--c-ink); padding:10px 0 6px; }
.fc-links .fc-group:first-child{ padding-top:6px; }
.fc-sub{ padding:3px 0 3px 14px; border-left:1px solid var(--c-hair-2); }

.fc-divider{ grid-column:1 / -1; height:1px; background:var(--c-hair); margin-top:clamp(32px,4vh,48px); }
.fc-legal{
  grid-column:1 / span 3;
  padding-block:clamp(16px,2vh,24px) clamp(24px,3vh,36px);
  display:flex; flex-direction:column; gap:14px;
  font-family:var(--font-body); font-size:13px; color:var(--c-ink-2);
}
.fc-policies{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.fc-policies span{ color:var(--c-hair-2); }
.fc-copy{ color:var(--c-faint); }
.fc-social{
  grid-column:5;  /* sits under the Resources column */
  padding-block:clamp(16px,2vh,24px) clamp(24px,3vh,36px);
  display:flex; gap:8px; align-items:flex-start; justify-content:flex-end;
}
.fc-social a{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:oklch(0.92 0.015 200);
  transition:background .2s, transform .2s;
}
.fc-social a:hover{ background:oklch(0.88 0.025 200); transform:translateY(-1px); }
.fc-social svg{ display:block; }

@media (max-width: 999px){
  .footer-c-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .fc-logo{ grid-column:1 / -1; margin-top:0; }
  .fc-divider{ margin-top:8px; }
  .fc-legal{ grid-column:1 / -1; padding-bottom:0; }
  .fc-social{ grid-column:1 / -1; padding-top:0; justify-content:flex-start; }
}

/* gotop */
.gotop{ background:var(--c-bg-2); border:1px solid var(--c-hair-2); }
.gotop::before{ border-color:var(--c-ink); }

/* cookies bar */
.cookies{ background:var(--c-bg-2); border-top:1px solid var(--c-hair); }
.cookies h4{ font-family:var(--font-display); color:var(--c-ink); }

/* ====================================================================== */
/* RESPONSIVE                                                             */
/* ====================================================================== */
@media (max-width: 992px){
  .gesi-grid{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .prod-grid{ grid-template-columns:1fr; }
  .domain-cinema{ align-items:flex-end; }
  .domain-cinema.right .cinema-wrap{ justify-content:flex-start; }
  .domain-cinema.right .cinema-copy,
  .domain-cinema.right .cinema-copy .lede,
  .domain-cinema.right .cinema-copy .chips{ text-align:left; margin-left:0; justify-content:flex-start; }
  .cinema-scrim.left, .cinema-scrim.right{
    background:linear-gradient(0deg, oklch(0.99 0.003 210 / 0.9) 0%, oklch(0.99 0.003 210 / 0.45) 34%, transparent 64%);
  }
}
@media (max-width: 900px){
  /* GeSi: stack so the periodic-table image sits BELOW the intro copy.
     The 2-col grid is set inline on #gesi .wrap, so !important is required to override it. */
  #gesi .wrap{ grid-template-columns:1fr !important; gap:clamp(24px,6vw,40px) !important; }
}
@media (max-width: 680px){
  .news-grid{ grid-template-columns:1fr; }
  .edm-c .form{ flex-direction:column; border-radius:18px; }
  .edm-c .form button{ border-radius:12px; }
  .gesi-c-figure{ width:100%; max-width:560px; margin-inline:auto; }
}

/* ====================================================================== */
/* PART 6  TOP NAV — logo-left primary bar + hover dropdowns (lightmatter). */
/*         Desktop only (>=1000px); below that the topnav hides and the     */
/*         legacy hamburger / .sidepanel slide-down (main.js) takes over.   */
/* ====================================================================== */
.topnav{ display:none; }

@media (min-width:1000px){
  /* turn the header into a flex bar: logo | nav | (hamburger hidden).
     72px total: 36px logo + 18px padding top/bottom (reference nav spec);
     height:auto overrides the legacy style.css header{height:100px}. */
  header{
    display:flex; align-items:center; gap:34px;
    height:auto; padding:18px clamp(22px, 5vw, 92px); text-align:left;
  }
  header .logo{
    flex:0 0 auto; margin:0;
    height:36px; width:220px;   /* logo.svg is 301.5x49.5 (~6.1:1) */
    background-position:left center;
  }
  header .openbtn{ display:none; }   /* hamburger is mobile-only */
  header .slogn{ display:none; }

  .topnav{ display:block; margin-left:auto; }   /* logo stays left, nav pushed to the right */
  .topnav-list{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center; gap:28px; height:100%;
  }
  .topnav-item{ position:relative; display:flex; align-items:center; height:100%; }

  .topnav-top{
    display:inline-flex; align-items:center; gap:5px; height:100%;
    font-family:var(--font-display); font-weight:500; font-size:15px;
    letter-spacing:-0.01em; color:oklch(0.34 0.04 252); white-space:nowrap;
    transition:color .18s;
  }
  .topnav-top:hover,
  .topnav-item:hover .topnav-top,
  .topnav-item:focus-within .topnav-top{ color:oklch(0.20 0.045 252); }
  .topnav-top .nav-chevron{ flex:none; opacity:0.6; transition:transform .2s ease; }
  .topnav-item:hover .nav-chevron,
  .topnav-item:focus-within .nav-chevron{ transform:rotate(180deg); }

  /* dropdown — centered under its item, opens on hover / keyboard focus.
     The 14px padding-top is the visual gap AND the hover bridge (a real gap
     would break pure-CSS :hover continuity between trigger and panel). */
  .topnav-panel{
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(-6px);
    padding-top:14px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  .topnav-item:hover .topnav-panel,
  .topnav-item:focus-within .topnav-panel{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }

  /* shared panel box: white, 10px radius, hairline border, soft shadow,
     plus the little caret notch pointing up at the trigger */
  .topnav-links,
  .topnav-groups{
    position:relative;
    list-style:none; margin:0;
    background:#fff; border:1px solid oklch(0.88 0.008 252);
    border-radius:10px;
    box-shadow:0 8px 32px oklch(0.27 0.045 252 / 0.10), 0 1px 4px oklch(0.27 0.045 252 / 0.06);
  }
  .topnav-links::before,
  .topnav-groups::before{
    content:''; position:absolute; top:-5px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:8px; height:8px; background:#fff;
    border-left:1px solid oklch(0.88 0.008 252);
    border-top:1px solid oklch(0.88 0.008 252);
  }
  /* every dropdown panel shares one width: the longest menu label
     ("GeSi Photonics" ≈ 146px) + ~one blank space. All panel content is
     narrower than 160px, so .topnav-links and .topnav-groups both render
     at exactly 160px — snug and consistent. */
  .topnav-links{ padding:6px; min-width:160px; }
  .topnav-links li{ display:block; margin:0; float:none; width:auto; }
  .topnav-links a{
    display:block; padding:9px 14px; border-radius:7px;
    font-family:var(--font-body); font-size:14px; font-weight:500;
    color:oklch(0.34 0.04 252);
    white-space:nowrap; transition:color .14s, background .14s;
  }
  .topnav-links a:hover{ background:oklch(0.96 0.006 252); color:oklch(0.20 0.045 252); }

  /* nested product groups inside the Product dropdown: each domain (Cloud AI /
     Edge AI / Physical AI) is a bold heading-link with its /products/ children
     indented behind a hairline left rule (same idiom as the footer columns). */
  .topnav-groups{ padding:10px 6px; min-width:160px; }   /* same width as .topnav-links (see note above) */
  .topnav-group{ display:block; margin:0; }
  .topnav-group + .topnav-group{ margin-top:4px; }
  .topnav-group-top{
    display:block; padding:7px 14px 4px; border-radius:7px;
    font-family:var(--font-body); font-weight:700; font-size:13.5px;
    color:#1a1f2e; white-space:nowrap; transition:background .14s;
  }
  .topnav-group-top:hover{ background:oklch(0.96 0.006 252); }
  .topnav-sub{ list-style:none; margin:0 0 0 14px; padding:0; border-left:1px solid #d8dce3; }
  .topnav-sub li{ display:block; margin:0; width:auto; float:none; }
  .topnav-sub a{
    display:block; padding:4px 14px 4px 12px; border-radius:0 7px 7px 0;
    font-family:var(--font-body); font-size:13.5px; color:#1e293b;
    white-space:nowrap; transition:color .14s, background .14s;
  }
  .topnav-sub a:hover{ background:oklch(0.96 0.006 252); color:oklch(0.20 0.045 252); }
}

/* ====================================================================== */
/* PART 7  LIST FILTER PILL — Bootstrap dropdown restyled as a rounded    */
/*         pill, matching the Milestone "Type" selector. Shared by the    */
/*         Resources news / activities and Support downloads class        */
/*         filters. Items are server-side nav links (page reloads with    */
/*         the filter applied).                                           */
/* ====================================================================== */
.news-filter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem; margin-bottom:3rem; }
.news-filter .dropdown .btn{
  display:block; min-width:200px; padding:.55rem 1.5rem;
  border:1px solid var(--c-hair-2); border-radius:50em;
  font-family:var(--font-body); color:var(--c-ink); font-weight:600; text-align:center;
  background:var(--c-bg-2);
}
.news-filter .dropdown-toggle::after{
  position:absolute; content:""; width:9px; height:9px;
  border-right:2px solid var(--c-teal); border-bottom:2px solid var(--c-teal);
  background:none; margin:0; transform:rotate(45deg);
  right:24px; top:calc(50% - 7px);
}
.news-filter .dropdown-menu{
  min-width:200px; border:1px solid var(--c-hair); border-radius:14px;
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35); padding:.4rem 0;
}
.news-filter .dropdown-item{ padding:.5rem 1.25rem; font-family:var(--font-body); }
.news-filter .dropdown-item.active,
.news-filter .dropdown-item:active{
  background-color:var(--c-teal); color:#fff;
}
/* Type filter rendered as the Careers "Open Positions" native <select>
   (.form-select) rather than the pill dropdown above. .form-select supplies
   the brand look (border + border-radius:12px + native chevron); here we only
   size it for the flex .news-filter row: a fixed column-width footprint on
   desktop, full-width on small screens (matching Careers' col-md-4). */
.news-filter .form-select{ flex:0 0 auto; width:min(280px, 100%); cursor:pointer; }
@media (max-width:768px){
  .news-filter .form-select{ width:100%; }
}
/* /resources/news Type filter: a custom Bootstrap dropdown so the EXPANDED
   option list gets rounded corners — a native <select> popup is OS-drawn and
   cannot be CSS-rounded. The toggle reuses .form-select, so the CLOSED control
   stays visually identical; only the popup is now rounded. Scoped with
   .as-select so /resources/articles' pill dropdown is untouched. */
.news-filter .dropdown.as-select{ width:min(280px, 100%); }
.news-filter .dropdown.as-select > .dropdown-toggle{ width:100%; text-align:left; }
.news-filter .dropdown.as-select > .dropdown-toggle::after{ display:none; }
.news-filter .dropdown.as-select .dropdown-menu{
  width:100%; min-width:0; border-radius:12px; overflow:hidden; padding:.35rem;
}
.news-filter .dropdown.as-select .dropdown-item{ border-radius:8px; padding:.5rem 1rem; }
/* Careers "Open Positions" filters — same EXPANDED-dropdown look as the
   /resources/news .as-select control above (rounded, branded option list)
   instead of the native <select> popup. Declarations mirror the effective
   .news-filter .as-select style; kept as a separate scope so the news filter is
   untouched. The toggle reuses .form-select, so the CLOSED control is unchanged. */
.job-list .dropdown.as-select{ width:100%; }
.job-list .dropdown.as-select > .dropdown-toggle{ width:100%; text-align:left; cursor:pointer; }
.job-list .dropdown.as-select > .dropdown-toggle::after{ display:none; }
.job-list .as-select .dropdown-menu{
  display:none; margin:0; width:100%; min-width:0;
  border:1px solid var(--c-hair); border-radius:12px;
  box-shadow:0 24px 60px -34px oklch(0.27 0.045 252 / 0.35);
  overflow:hidden; padding:.35rem;
}
/* The menu is a <ul> inside .job-list, so it must beat the legacy .job-list ul
   rules — including .job-list ul{display:flex}, which would otherwise defeat
   Bootstrap's display:none and leave the popup permanently open. Also strip the
   grey <li> blocks and the ::before gradient bar those rules paint on. */
.job-list .as-select .dropdown-menu.show{ display:block; }
.job-list .as-select .dropdown-menu::before{ display:none; content:none; }
.job-list .as-select .dropdown-menu > li{ flex:none; background:none; padding:0; position:static; }
.job-list .as-select .dropdown-menu > li:first-child{ flex-grow:0; padding-left:0; }
.job-list .as-select .dropdown-menu > li::before{ display:none; content:none; }
.job-list .as-select .dropdown-item{
  width:100%; text-align:left; cursor:pointer;   /* items are <button>s (JS actions, no href → no scroll) */
  padding:.5rem 1rem; border-radius:8px; font-family:var(--font-body);
}
.job-list .as-select .dropdown-item.active,
.job-list .as-select .dropdown-item:active{ background-color:var(--c-teal); color:#fff; }
/* Year + keyword filters — same rounded-rect shape AND footprint as the Type
   control (the .as-select toggle reuses .form-select: border-radius:12px,
   width:min(280px,100%)), so the whole filter row reads as one set of matching
   controls (added for /resources/news). */
.news-search-form{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:0; }
.news-filter .news-year,
.news-filter .news-search{
  width:min(280px,100%); border:1px solid var(--c-hair-2); border-radius:12px;
  background:var(--c-bg-2); font-family:var(--font-body); color:var(--c-ink); font-weight:600;
}
/* Year — native select dressed as the Type pill, teal chevron on the right */
.news-filter .news-year{
  padding:.55rem 2.6rem .55rem 1.5rem;
  text-align:center; text-align-last:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3L5 6.5 8.5 3' fill='none' stroke='%2300778B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 22px center;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
}
/* Search — same pill; borderless input fills it, teal magnifier sits where the chevron does */
.news-filter .news-search{ position:relative; display:flex; align-items:center; }
.news-search input{
  width:100%; padding:.55rem 2.6rem .55rem 1.5rem;
  border:0; border-radius:12px; background:transparent;
  font-family:inherit; color:inherit; font-weight:inherit;
}
.news-search input::placeholder{ color:var(--c-ink); opacity:.5; font-weight:400; }
.news-search input:focus{ outline:none; }
.news-filter .news-search:focus-within{ border-color:var(--c-teal); }
/* Submit button. The selector is scoped to .news-filter .news-search button so it
   out-specifies legacy style.css `button[type="submit"]` (which paints the brand
   teal->purple gradient, width:100%, uppercase, color:#fff !important). We must
   explicitly UNSET each of those, or the magnifier renders as a full-width gradient
   pill. color needs !important to beat the legacy !important. */
.news-filter .news-search button,
.news-filter .news-search button:hover,
.news-filter .news-search button:focus,
.news-filter .news-search button:active{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:auto; padding:0; border:0; border-radius:0;
  background:none; background-image:none; box-shadow:none; filter:none;
  font-size:inherit; text-transform:none; cursor:pointer; line-height:0;
  color:var(--c-teal) !important;
}
.news-empty{ text-align:center; color:var(--c-ink); opacity:.6; padding:2.5rem 0; }
/* News-list article thumbnails — rounded corners to match the Quiet-Light card radius */
.news-list img{ border-radius:16px; }
/* News category badge (.bt, e.g. "Product") — round it into a pill so it matches the
   tag pills (.bts a) sitting just below it. Scoped to .concept-c so the legacy square
   badge is left untouched on non-migrated pages. */
.concept-c .bt{ border-radius:999px; }
/* Badge + date on ONE line: the .news-head flex row puts the category pill and the
   date/location side by side (was stacked). We zero the legacy stacking margins the
   pill (.news-list li a.bt margin-bottom:20px) and .date (margin-bottom:5px) carry,
   and give the row itself the spacing above the headline. */
.concept-c .news-list .news-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-bottom:16px;
}
.concept-c .news-list .news-head a.bt{ margin-bottom:0; }
.concept-c .news-list .news-head .date{ margin-bottom:0; }
/* On small screens the search box keeps the SAME min(280px,100%) footprint as the
   Type/Year dropdowns (which stay 280px-centred here), so the stacked filter column
   is uniform. Only the legacy .news-year select — not used by the current template —
   still goes full-width. */
@media (max-width:600px){
  .news-search-form,
  .news-filter .news-year{ width:100%; }
}

/* ====================================================================== */
/* PART 8  TEAM — Leadership card alternating tint. Ported from            */
/*         our_team.css (minus its page-specific .banner override) so the  */
/*         Leadership grid renders identically on every page that hosts   */
/*         it: Company > Our Team AND the merged block on Company >        */
/*         Overview. Inert elsewhere (.member exists only in team grids).  */
/* ====================================================================== */
.member.m3::before,
.member.m5::before,
.member.m7::before{ background:rgba(20,112,124,.2); }
/* Rounded photos — round all four corners of each leadership portrait. The
   overflow:hidden clips both the <img> and the alternating tint ::before
   overlay to the same radius (16px, matching the news imagery on this page). */
.team .member{ border-radius:16px; overflow:hidden; }
.team .member img{ border-radius:16px; }

/* ====================================================================== */
/* PART 9  SECTION SUB-NAV — the legacy _menu.html tab strip              */
/*         (.nav--absolute, style.css) restyled as a Quiet-Light pill row */
/*         on migrated (.concept-c) pages. Non-migrated pages keep the    */
/*         old style.css look untouched.                                  */
/* ====================================================================== */
.concept-c .nav--absolute{ position:static; min-height:0; margin-top:26px; }
.concept-c .nav--absolute::after{ display:none; }
.concept-c .nav--absolute .nav__wrap{
  position:static; height:auto; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  overflow:visible; font-size:1em; list-style:none;
}
.concept-c .nav__item a{
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--c-ink-2); background:var(--c-bg-2);
  border:1px solid var(--c-hair-2); border-radius:999px;
  padding:9px 20px; margin:0; display:inline-block;
  text-decoration:none;
  transition:border-color .2s, color .2s, transform .2s;
}
.concept-c .nav__item a:hover{ border-color:var(--c-teal); color:var(--c-teal); }
.concept-c .nav__item a.active{
  color:#fff !important;
  background:linear-gradient(100deg, var(--color-mint) 0%, var(--color-teal) 50%, var(--color-blue) 100%);
  border-color:transparent;
}
.concept-c .nav__item a.active::after{ display:none; }

/* ====================================================================== */
/* PART 10  INNER-PAGE PHOTOGRAPHIC HERO — .sub-hero.kv-hero reuses the    */
/*          home-hero's dark/white-text photographic KV-carousel treatment */
/*          (PART 3) at the compact inner-page .sub-hero height, for pages */
/*          whose $d.kv is a real uploaded photo rather than SVG art       */
/*          (Resources news/activities/articles + their content pages).   */
/*          Reuses the legacy .owl-banner carousel (js/main.js) as-is.    */
/* ====================================================================== */
.sub-hero.kv-hero{ background:var(--c-ink); }
.sub-hero.kv-hero .hero-art{ background-size:cover; background-position:center; }
.sub-hero.kv-hero .owl-carousel, .sub-hero.kv-hero .owl-stage-outer,
.sub-hero.kv-hero .owl-stage, .sub-hero.kv-hero .owl-item{ height:100%; }
.sub-hero.kv-hero .item{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.sub-hero.kv-hero .sub-hero-scrim{
  background:linear-gradient(180deg, oklch(0.18 0.03 252 / 0.28) 0%, transparent 30%, transparent 60%, oklch(0.16 0.03 252 / 0.55) 100%);
}
.sub-hero.kv-hero .eyebrow{ color:#fff; opacity:.88; }
.sub-hero.kv-hero .hero-h1{
  color:#fff; text-shadow:0 2px 30px oklch(0.16 0.03 252 / 0.35);
}
.sub-hero.kv-hero .lede{ color:rgba(255,255,255,.9); }
.sub-hero.kv-hero .owl-dots{ position:absolute; left:0; right:0; bottom:16px; z-index:4; }
.sub-hero.kv-hero .owl-dots .owl-dot span{ background:rgba(255,255,255,.45); }
.sub-hero.kv-hero .owl-dots .owl-dot.active span{ background:#fff; }
.sub-hero.kv-hero .owl-nav button img{ filter:brightness(0) invert(1); opacity:.85; }
.sub-hero.kv-hero .owl-nav button:hover img{ opacity:1; }

/* ====================================================================== */
/* PART 11  DOWNLOADS — the "All" view (/resources/downloads with no       */
/*          category selected) lists every category under a heading. A     */
/*          single-category view renders one group with no heading, so     */
/*          these rules — scoped to .dl-groups--all — only shape the        */
/*          multi-category layout and leave the single view untouched.     */
/* ====================================================================== */
.dl-groups--all .dl-group{ margin-top:clamp(34px,5vh,60px); }
.dl-groups--all .dl-group:first-child{ margin-top:0; }
.dl-groups--all .dl-group-title{ margin:0; }
.dl-groups--all .dl-group-intro{ margin-top:12px; color:var(--c-ink-2); }
/* pull the list up under its heading (legacy .option-pdf carries a 5vh top gap) */
.dl-groups--all .dl-group > .option-pdf{ margin:18px 0 0; }

/* Rounded rows — legacy style.css draws each download item as a square-cornered
   bordered box with a teal PDF-icon square (::before) and a teal download button
   (a) pinned to its edges. Rounding the row and clipping to it rounds the border
   and both inner teal squares in one move, matching the brand's soft-box corners. */
.download .form-check-label{ border-radius:14px; overflow:hidden; }

/* ====================================================================== */
/* PART 12  STAT GRID — hairline-divided 2×2 feature grid (company        */
/*          overview "Artilux in Numbers"). Cells sit on a --c-hair       */
/*          backdrop with a 1px gap, so the internal dividers and the     */
/*          outer border render as one consistent hairline.               */
/* ====================================================================== */
/* "Artilux in Numbers" — one continuous rounded panel that floats on a soft
   shadow, split into four cells by 1px hairline dividers (gap:1px over a hairline
   backdrop, same technique as the old block). Each cell is left-aligned: a small
   icon (the SVG bakes in its own faint mint circle), a muted sentence-case label,
   then the big ink figure. Company Overview is the only page using .stat-grid. */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--c-hair);
  border:1px solid var(--c-hair); border-radius:22px; overflow:hidden;
  box-shadow:0 26px 54px -32px oklch(0.27 0.045 252 / 0.22);
}
.stat-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--c-bg-2); padding:clamp(24px,2.4vw,34px);
}
.stat-card .stat-ico{
  display:inline-flex; width:44px; height:44px; margin-bottom:clamp(20px,2.4vw,34px);
}
.stat-card .stat-ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.stat-fig{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,2.4vw,36px); letter-spacing:-0.02em; line-height:1.05;
  color:var(--c-ink); text-wrap:balance; margin-bottom:9px;
}
.stat-label{
  font-family:var(--font-body); font-weight:500;
  font-size:15px; letter-spacing:0.01em;
  color:var(--c-muted); margin:0;
}
.stat-fig sup{ font-size:0.5em; font-weight:600; }
@media (max-width:860px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .stat-grid{ grid-template-columns:1fr; }
}

/* ======================================================================
   PART 13  PRODUCT TYPE CONSISTENCY (2026-07 review)                      */
/*          The tp-* spec strips + feature cards are declared identically  */
/*          in every per-page products_*.css (incl. products_odyssey.css). */
/*          align their type in ONE place; the .concept-c prefix lifts the */
/*          specificity to (0,0,2,0) so they win over the per-page         */
/*          .tp-* rules (0,0,1,0) regardless of stylesheet load order.     */
/* ====================================================================== */
/* Spec-strip label (SENSING RANGE / COMPUTE MODEL / IMAGING RANGE …): match
   the site eyebrow spec — weight 500, dark-gray ink (was 400 / muted).
   (HP-Product p1/p4 "use 500 throughout / dark gray") */
.concept-c .tp-stat-label{ font-weight:500; color:var(--c-ink-2); }
/* Spec-strip value: match the .adv-table heading scale — fixed 20px / 600
   (was fluid clamp(17–21px) / 700). (HP-Product p7 "same size as .adv-table") */
.concept-c .tp-stat-val{ font-weight:600; font-size:20px; }
/* Feature-card heading (Higher bandwidth / Fully Integrated Architecture …):
   match the .adv-table heading — 20px / 600 (was 18px / 700). Applies to all
   product pages + PQC. (HP-Product p4/p7 "same size as .adv-table, apply to all") */
.concept-c .tp-ff-name{ font-weight:600; font-size:20px; }

/* ======================================================================
   PART 14  SHARE WIDGET — copy-link only (news / events / articles)       */
/*          The _plus.html share dropdown now carries a single icon-only    */
/*          "copy link" action (social share buttons removed). On copy the  */
/*          link glyph swaps to a check for feedback; the shared            */
/*          .btshare a:hover gradient in style.css supplies the hover fill. */
/* ====================================================================== */
.btshare a.copy-link{
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.btshare a.copy-link svg{ width:20px; height:20px; }
.btshare a.copy-link .ic-check{ display:none; }
.btshare a.copy-link.copied .ic-link{ display:none; }
.btshare a.copy-link.copied .ic-check{ display:inline; color:var(--accent); }

/* Mobile: .plus (share + download) is pinned position:absolute; right:25px to the
   full-bleed .section, so on a phone — where the article column runs nearly edge to
   edge — the icons land on top of the tag pills (_tags.html .bts) wrapping across the
   same top row. Below 768px, drop .plus back into normal flow as a right-aligned icon
   row sitting ABOVE the tags (its natural DOM order). .share/.dl stay position:relative
   so their .btshare/.btload popovers keep anchoring to each icon (right:0; top:40px). */
@media (max-width:767px){
  .concept-c .plus{
    position:static; right:auto;
    display:flex; justify-content:flex-end; align-items:center; gap:14px;
    margin-bottom:18px;
  }
  .concept-c .plus .share,
  .concept-c .plus .dl{ position:relative; right:auto; }
}