/* =====================================================================
   punit.co.uk brand stylesheet
   Follows the GoNexL.AI brand: Space Grotesk headings, Inter body text,
   the six colour brand gradient on one phrase in every main heading,
   orange for actions and labels, cyan for links and secondary accents,
   dark navy for the menu bar, hero and footer.

   Every page links this file. Change a colour, font or component here
   and it changes everywhere. Page specific styles go in their own file
   (for example assets/css/home-lab.css), never in this one.
   The brand guide in _brand/brand-guide.html shows every token and
   component below, rendered live from this file.

   Contents
   1  Tokens          6  Header and menu     11 Pills and chips
   2  Base            7  Hero                12 Tabs and tables
   3  Typography      8  Sections            13 Figures and lightbox
   4  Layout          9  Buttons             14 Logo wall
   5  Utilities       10 Cards and icons     15 Technical credentials
                                             16 Footer
                                             17 Responsive
   ===================================================================== */

/* 1  Tokens ----------------------------------------------------------- */
:root{
  /* Brand colours (GoNexL.AI) */
  --orange:#F97316;          /* primary: buttons, eyebrows, active states, pins */
  --orange-hover:#EA580C;    /* button hover */
  --orange-strong:#C2410C;   /* orange text under 24px on light backgrounds */
  --orange-light:#FDBA74;    /* orange text on dark backgrounds */
  --orange-tint:rgba(249,115,22,.1); /* eyebrow and selected state background */
  --orange-border:rgba(249,115,22,.35); /* eyebrow and selected state border */
  --pink:#D946EF;            /* gradient, firewalls in diagrams */
  --purple:#8B5CF6;          /* gradient, hero glow, second category */
  --purple-strong:#6D28D9;   /* purple text on light backgrounds */
  --blue:#3B82F6;            /* gradient */
  --cyan:#06B6D4;            /* secondary: icons, highlights on dark */
  --cyan-strong:#0E7490;     /* links and cyan text on light backgrounds */
  --cyan-light:#67E8F9;      /* cyan text on dark backgrounds */
  --cyan-tint:#ECFEFF;       /* icon tile background */
  --cyan-border:#A5F3FC;     /* icon tile border */
  --teal:#14B8A6;            /* gradient end, list bullets */
  --teal-strong:#0F766E;     /* technical values: IP ranges, VLANs, model numbers */

  /* The brand gradient. Use it on one phrase per heading, never on body text */
  --gradient:linear-gradient(135deg,#F97316,#D946EF,#8B5CF6,#3B82F6,#06B6D4,#14B8A6); /* one phrase per h1 and h2, stat numbers, footer line */
  --gradient-warm:linear-gradient(135deg,#F97316,#D946EF,#8B5CF6); /* large backgrounds only */

  /* Neutrals */
  --navy:#0D0D1A;            /* menu bar, hero, footer, dark buttons */
  --navy-2:#1E293B;          /* dark surfaces and gradients */
  --ink:#0F172A;             /* headings */
  --text:#1E293B;            /* body text */
  --muted:#475569;           /* supporting text, ledes, captions */
  --subtle:#64748B;          /* labels, counts, table headers */
  --soft:#94A3B8;            /* text on dark backgrounds, dividers */
  --line:#E2E8F0;            /* borders and rules */
  --line-strong:#CBD5E1;     /* stronger borders, secondary button outline */
  --bg:#F8FAFC;              /* page background */
  --surface:#FFFFFF;         /* cards and alternate sections */
  --surface-2:#F1F5F9;       /* chips, table headers, quiet panels */
  --on-dark:#E2E8F0;         /* body text on navy */
  --on-dark-muted:#CBD5E1;   /* menu links and ledes on navy */

  /* Type */
  --font-heading:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* every heading */
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* all other text */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; /* technical values and code */
  --fs-display:clamp(2.25rem,1.6rem + 2.9vw,3.75rem);  /* h1, 36 to 60px */
  --fs-h2:clamp(1.875rem,1.3rem + 2.4vw,3rem);         /* section titles, 30 to 48px */
  --fs-h3:1.375rem;                                    /* subsection titles, 22px */
  --fs-h4:1.125rem;                                    /* card titles, 18px */
  --fs-lead:1.0625rem;                                 /* intro paragraphs, 17px */
  --fs-body:1rem;                                      /* 16px */
  --fs-small:.875rem;                                  /* 14px */
  --fs-eyebrow:.75rem;                                 /* 12px */

  /* Shape and depth */
  --radius-sm:.625rem;       /* 10px: buttons, inputs */
  --radius:.875rem;          /* 14px: tiles, photos, logo cards */
  --radius-lg:1rem;          /* 16px: cards and panels */
  --radius-xl:1.375rem;      /* 22px: hero media */
  --radius-pill:9999px;      /* pills, chips, eyebrows */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04); /* cards */
  --shadow-sm:0 2px 8px rgba(0,0,0,.06); /* logo cards */
  --shadow-md:0 1px 2px rgba(16,24,40,.04),0 10px 28px rgba(16,24,40,.07); /* raised panels, diagrams, key figures */
  --shadow-lg:0 30px 70px rgba(0,0,0,.45); /* hero media on navy */

  /* Layout */
  --container:1180px;        /* maximum content width */
  --gutter:24px;             /* side padding, 16px on phones */
  --section-y:96px;          /* section padding top and bottom, 68px on phones */
  --nav-h:64px;              /* menu bar height */
}

/* 2  Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-strong);text-underline-offset:3px}
a:hover{color:var(--ink)}
p{margin:0}
::selection{background:rgba(249,115,22,.22)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* 3  Typography ------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:700;color:var(--ink)}
h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em}
h4{font-size:var(--fs-h4);line-height:1.3}
/* Even line lengths, so a heading breaks cleanly and the gradient phrase stays together */
h1,h2,.display,.h2{text-wrap:balance}
/* Heading classes: the same looks, for when the visual size and the page outline differ */
.display{font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:var(--fs-display);line-height:1.05;letter-spacing:-.02em}
.h2{font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em}
.h3{font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:var(--fs-h3);line-height:1.25}
.h4{font-family:var(--font-heading);font-weight:700;color:var(--ink);font-size:var(--fs-h4);line-height:1.3}

/* The signature: one phrase of every h1 and h2 in the brand gradient */
.gradient-text{background-image:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Eyebrow: the small orange label above a heading */
.eyebrow,.tc-eyebrow{display:inline-block;margin:0 0 .875rem;padding:.3rem .85rem;border-radius:var(--radius-pill);border:1px solid var(--orange-border);background:var(--orange-tint);color:var(--orange-strong);font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.surface-dark .eyebrow{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.42);color:var(--orange-light)}

.lede{font-size:var(--fs-lead);line-height:1.65;color:var(--muted)}
.small{font-size:var(--fs-small)}
.mono,code,kbd{font-family:var(--font-mono)}
.muted{color:var(--muted)}

/* 4  Layout ----------------------------------------------------------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.grid-2,.grid-3,.grid-4{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 5  Utilities -------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;box-shadow:var(--shadow-md)}
.skip:focus{top:12px}
.text-center{text-align:center}
.nowrap{white-space:nowrap}

/* 6  Header and menu -------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(13,13,26,.9);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--font-heading);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.brand:hover{color:#fff}
.brand img{width:30px;height:30px}
.brand small{font-family:var(--font-body);font-weight:500;color:var(--soft);font-size:.85rem;margin-left:2px;letter-spacing:0}
.nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.nav ul a{display:block;padding:8px 12px;border-radius:8px;color:var(--on-dark-muted);text-decoration:none;font-size:.92rem;font-weight:500}
.nav ul a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav ul a[aria-current="true"],.nav ul a[aria-current="page"]{color:#fff;background:rgba(249,115,22,.14);box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:var(--radius-sm);width:42px;height:40px;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}

/* Expertise menu: one button in the menu bar opens the list of expertise pages */
.nav .wrap{position:relative}
.nav .has-menu{position:static}
.menu-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;border:0;background:none;color:var(--on-dark-muted);font:inherit;font-size:.92rem;font-weight:500;cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.06)}
.menu-btn.is-current{color:#fff;background:rgba(249,115,22,.14);box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.menu-btn svg{width:14px;height:14px;transition:transform .2s ease}
.menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% - 4px);right:var(--gutter);width:min(880px,calc(100vw - 2 * var(--gutter)));display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr;gap:4px 0;padding:12px;max-height:calc(100vh - var(--nav-h) - 12px);overflow-y:auto;overscroll-behavior:contain;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.mega[hidden]{display:none}
.no-js .menu-btn,.no-js .mega{display:none!important}
/* Laptop: the four groups are a list on the left, the chosen group's pages show on the right */
.mega-group{display:contents}
.mega-h{grid-column:1;margin:0;padding:0 12px 0 0}
.mega-group:nth-child(1) .mega-h{grid-row:1}
.mega-group:nth-child(2) .mega-h{grid-row:2}
.mega-group:nth-child(3) .mega-h{grid-row:3}
.mega-group:nth-child(4) .mega-h{grid-row:4}
.mega-gbtn{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name chev" "count chev";align-items:center;column-gap:10px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:var(--on-dark);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.mega-gbtn .mg-name{grid-area:name;font-family:var(--font-heading);font-size:.95rem;font-weight:700;color:#fff}
.mega-gbtn .mg-count{grid-area:count;font-size:.78rem;color:var(--soft)}
.mega-gbtn svg{grid-area:chev;width:16px;height:16px;color:var(--soft);transform:rotate(-90deg);transition:transform .2s ease,color .15s ease}
.mega-gbtn:hover{background:rgba(255,255,255,.05)}
.mega-gbtn[aria-expanded="true"]{background:rgba(249,115,22,.14);box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.mega-gbtn[aria-expanded="true"] svg{color:var(--orange-light,#FDBA74)}
.mega-group.has-current .mega-gbtn .mg-count::after{content:" · you are here";color:var(--orange-light,#FDBA74)}
.mega-links{grid-column:2;grid-row:1 / span 5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 8px;padding:4px 4px 4px 16px;border-left:1px solid rgba(255,255,255,.08);min-width:0;min-height:404px}
.mega-links.is-collapsed{display:none}
.mega-desc{grid-column:1 / -1;margin:2px 0 8px;padding:0 10px;font-size:.84rem;line-height:1.5;color:var(--soft)}
.nav .mega a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;color:var(--on-dark);text-decoration:none}
.nav .mega a:hover{background:rgba(255,255,255,.06)}
.nav .mega a[aria-current="page"]{background:rgba(249,115,22,.14);box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.mega .mi{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(103,232,249,.1);color:var(--cyan-light);border:1px solid rgba(103,232,249,.22)}
.mega .mi svg{width:16px;height:16px}
.mega .mtx{display:grid;gap:2px;min-width:0}
.mega .mt{font-family:var(--font-heading);font-size:.88rem;font-weight:600;line-height:1.25;color:#fff}
.mega b{display:block;font-family:var(--font-heading);font-size:.95rem;color:#fff;font-weight:700}
.mega small{display:block;font-size:.78rem;line-height:1.4;color:var(--soft)}

/* Section bar: the sections of the current page, sticky under the menu bar */
.subnav{position:sticky;top:var(--nav-h);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:14px;height:50px}
.subnav-label{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.subnav ul{position:relative;display:flex;gap:4px;list-style:none;margin:0;padding:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav ul::-webkit-scrollbar{display:none}
.subnav ul.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.subnav ul.less{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.subnav ul.less.more{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
.subnav a{display:block;padding:6px 12px;border-radius:var(--radius-pill);font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.subnav a:hover{color:var(--ink);background:var(--surface-2)}
.subnav a[aria-current="true"]{color:var(--orange-strong);background:var(--orange-tint);box-shadow:inset 0 0 0 1px var(--orange-border)}
html:has(.subnav){scroll-padding-top:calc(var(--nav-h) + 62px)}

/* 7  Hero ------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:var(--on-dark);background:radial-gradient(1100px 560px at 88% -12%,rgba(249,115,22,.24),transparent 60%),radial-gradient(760px 460px at 62% 115%,rgba(217,70,239,.12),transparent 60%),radial-gradient(820px 500px at -12% 108%,rgba(139,92,246,.24),transparent 60%),var(--navy)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 55% 35%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at 55% 35%,#000 25%,transparent 75%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:132px}
.hero-grid.single{grid-template-columns:minmax(0,52rem);padding-bottom:96px}
.hero h1{color:#fff;margin:4px 0 20px}
.hero .lede{font-size:1.125rem;color:var(--on-dark-muted);max-width:56ch}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 32px;padding:0;list-style:none}
.hero-tags li{font-family:var(--font-mono);font-size:.78rem;color:var(--on-dark);padding:5px 10px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-shot{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-lg);background:var(--navy-2)}
.hero-shot img{width:100%;height:500px;object-fit:cover;object-position:center 18%}
.hero-shot figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(13,13,26,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.85rem;color:var(--on-dark);border:1px solid rgba(255,255,255,.1);margin:0}
.hero-shot figcaption b{color:#fff;font-weight:600}
.live{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;color:var(--cyan-light)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan-light)}

/* Key figures under the hero */
.stats{position:relative;z-index:2;margin-top:-62px}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.stat{padding:22px 22px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:inline-block;font-family:var(--font-heading);font-size:2.125rem;line-height:1.1;font-weight:700;letter-spacing:-.02em;background-image:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
.stat span{display:block;font-size:.88rem;color:var(--muted)}

/* 8  Sections --------------------------------------------------------- */
section{padding:var(--section-y) 0}
section.tight{padding-top:72px}
.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Section heading block: eyebrow, h2 with a gradient phrase, then a lede */
.section-head,.tc-header{max-width:48rem;margin:0 auto 2.75rem;text-align:center}
.section-head h2,.tc-section .tc-heading{font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.section-head p,.tc-subheading{margin-top:.875rem;font-size:var(--fs-lead);line-height:1.65;color:var(--muted)}
.section-head.left{text-align:left;margin-left:0}
/* Subsection heading row: h3 on the left, short note on the right */
.sub-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.sub-head h3{font-size:var(--fs-h3)}
.sub-head p{color:var(--muted);font-size:.95rem;max-width:60ch}

/* 9  Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-hover);color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--orange);color:var(--orange-strong)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff}
.btn-sm{padding:7px 14px;font-size:.875rem;gap:6px}
.btn-sm svg{width:15px;height:15px}

/* 10 Cards and icons -------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-xs)}
.card h3{font-size:var(--fs-h4);margin-bottom:8px}
.card p{color:var(--muted);font-size:.975rem}
.card.accent{border-left:4px solid var(--orange)}
.card-tag{display:inline-block;margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-strong)}
.figure-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:18px;margin:0}
.icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--cyan-tint);color:var(--cyan-strong);border:1px solid var(--cyan-border);margin-bottom:18px}
.icon svg{width:24px;height:24px}
.icon.orange{background:var(--orange-tint);color:var(--orange-strong);border-color:var(--orange-border)}
.icon.purple{background:#F5F3FF;color:var(--purple-strong);border-color:#DDD6FE}
.note{font-size:.88rem;color:var(--muted);background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px}

/* 11 Pills and chips -------------------------------------------------- */
/* Pills show a status or category. Chips list technologies in a monospace font. */
.pill,.tc-pill{display:inline-flex;align-items:center;flex:none;padding:.2rem .6rem;border-radius:var(--radius-pill);border:1px solid transparent;font-size:.75rem;font-weight:600;line-height:1.3;white-space:nowrap}
.pill--orange{background:#FFEDD5;color:#9A3412;border-color:#FED7AA}
.pill--cyan{background:#CFFAFE;color:#155E75;border-color:#A5F3FC}
.pill--teal,.tc-pill--teal{background:#CCFBF1;color:#115E59;border-color:#99F6E4}
.pill--amber,.tc-pill--amber{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.pill--purple,.tc-pill--purple{background:#F3E8FF;color:#6B21A8;border-color:#E9D5FF}
.pill--pink{background:#FAE8FF;color:#86198F;border-color:#F5D0FE}
.pill--green,.tc-pill--green{background:#DCFCE7;color:#166534;border-color:#BBF7D0}
.pill--slate,.tc-pill--slate{background:#F1F5F9;color:#334155;border-color:#E2E8F0}
.pill--indigo,.tc-pill--indigo{background:#E0E7FF;color:#3730A3;border-color:#C7D2FE}
.pill--slate-blue,.tc-pill--slate-blue{background:#E0F2FE;color:#1E3A5F;border-color:#BAE6FD}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.chip{font-family:var(--font-mono);font-size:.74rem;line-height:1.5;padding:4px 9px;border-radius:7px;background:var(--surface-2);color:#334155;border:1px solid var(--line)}

/* 12 Tabs and tables -------------------------------------------------- */
/* Tabs share the look of the credentials view switch */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;width:fit-content;max-width:100%;margin:0 auto 1.5rem;padding:.25rem;gap:.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tabs button{font:inherit;font-size:.9rem;font-weight:600;padding:.55rem 1.1rem;border-radius:.65rem;border:0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--orange-tint);color:var(--orange-strong);box-shadow:inset 0 0 0 1px var(--orange-border)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px 24px 24px;box-shadow:var(--shadow-md)}
.panel h3{font-size:var(--fs-h4);margin:22px 0 10px}
.panel p.hint{font-size:.92rem;color:var(--muted);margin-top:14px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #EEF2F6;vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--subtle);font-weight:700;background:#FAFBFC}
td.m{font-family:var(--font-mono);font-size:.85rem;color:var(--teal-strong);white-space:nowrap}
tr.total td{font-weight:600;background:#FAFBFC}

/* 13 Figures and lightbox -------------------------------------------- */
.shot{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#E9EEF4;cursor:zoom-in}
.shot img{width:100%;transition:transform .35s ease}
.shot:hover img{transform:scale(1.03)}
figure figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}
figure figcaption b{color:var(--ink);font-weight:600}
dialog.lb{border:0;padding:0;background:transparent;width:min(1400px,96vw);max-width:96vw;max-height:96vh;overflow:visible}
dialog.lb::backdrop{background:rgba(13,13,26,.9)}
.lb-stage{background:var(--navy-2);border-radius:var(--radius);overflow:auto;max-height:calc(96vh - 64px);display:flex;justify-content:center;align-items:center}
.lb-stage img{max-width:100%;max-height:calc(96vh - 64px);width:auto;height:auto;cursor:zoom-in;background:#fff}
dialog.lb.zoomed .lb-stage{display:block}
dialog.lb.zoomed .lb-stage img{max-width:none;max-height:none;cursor:zoom-out}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px 0;color:var(--on-dark);font-size:.92rem}
.lb-bar .ctrl{display:flex;gap:8px}
.lb-bar button{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-bar button:hover{background:rgba(255,255,255,.14)}
.lb-bar button[hidden]{display:none}
.lb-bar svg{width:18px;height:18px}

/* 14 Logo wall (Where this experience was earned) --------------------- */
.exp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;border-radius:var(--radius);background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-sm);cursor:default;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
.brand-card:hover{transform:scale(1.03);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.brand-logo{height:48px;display:flex;align-items:center;justify-content:center}
.brand-logo img{display:block;height:40px;width:auto;max-width:120px;object-fit:contain}
.brand-name{font-size:.875rem;line-height:1.43;font-weight:700;color:var(--ink)}
.brand-sector{font-size:.625rem;line-height:1.5;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-strong)}

/* 15 Technical credentials (the component mirrored from the GoNexL profile) --- */
.learning-section{background:var(--bg);border-top:1px solid var(--line)}
.tc-section{scroll-margin-top:6rem;--tc-accent:var(--orange);--tc-accent-strong:var(--orange-strong);--tc-accent-tint:var(--orange-tint);--tc-accent-border:var(--orange-border);--tc-surface:var(--surface);--tc-surface-2:var(--bg);--tc-row-hover:var(--bg);--tc-border:var(--line);--tc-border-strong:var(--line-strong);--tc-text:var(--ink);--tc-muted:var(--muted);--tc-subtle:var(--subtle);--tc-plate:var(--bg);--tc-plate-border:var(--line);--tc-tile-bg:linear-gradient(145deg,#F1F5F9,#E2E8F0);--tc-tile-text:var(--ink);--tc-tile-sub:var(--muted);--tc-bullet:#0D9488;--tc-shadow:var(--shadow-xs);color:var(--tc-text);font-family:var(--font-body);font-size:16px;line-height:1.5}
:where(.tc-section) *,:where(.tc-section) *::before,:where(.tc-section) *::after{box-sizing:border-box}
:where(.tc-section) button{font:inherit;color:inherit;background:transparent;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
:where(.tc-section) ul{list-style:none;margin:0;padding:0}
:where(.tc-section) h2,:where(.tc-section) h3,:where(.tc-section) h4,:where(.tc-section) p{margin:0}
:where(.tc-section) input,:where(.tc-section) select{font:inherit;margin:0}
:where(.tc-section) img{max-width:none}
.tc-section section{padding:0}
.tc-section h3,.tc-section h4{line-height:1.5;letter-spacing:normal}
.tc-section :focus-visible{outline:2px solid var(--tc-accent);outline-offset:2px;border-radius:.5rem}
.tc-header{margin-bottom:2rem}
.tc-stats{margin-top:1rem!important;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .6rem;font-size:.95rem;color:var(--tc-muted)}
.tc-stats strong{color:var(--tc-text);font-weight:700}
.tc-stats-sep{color:var(--tc-subtle)}
.tc-view-toggle{display:flex;width:fit-content;max-width:100%;margin:0 auto 2rem;padding:.25rem;gap:.25rem;border:1px solid var(--tc-border);border-radius:var(--radius);background:var(--tc-surface)}
.tc-view-tab{padding:.55rem 1.1rem;border-radius:.65rem;font-size:.9rem;font-weight:600;color:var(--tc-muted);white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.tc-view-tab:hover{color:var(--tc-text)}
.tc-view-tab.is-active{background:var(--tc-accent-tint);color:var(--tc-accent-strong);box-shadow:inset 0 0 0 1px var(--tc-accent-border)}
.tc-controls{display:grid;gap:.75rem;margin-bottom:1.5rem}
.tc-field{display:block}
.tc-label{display:block;margin-bottom:.4rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tc-muted)}
.tc-input-wrap{position:relative;display:block}
.tc-input-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--tc-subtle);pointer-events:none}
.tc-section .tc-input{width:100%;height:2.75rem;padding:0 .9rem;border-radius:.75rem;font-size:.95rem;border:1px solid var(--tc-border);background:var(--tc-surface);color:var(--tc-text)}
.tc-section .tc-input-wrap .tc-input{padding-left:2.4rem}
.tc-section .tc-input::placeholder{color:var(--tc-subtle)}
.tc-section .tc-input:focus{outline:none;border-color:var(--tc-accent);box-shadow:0 0 0 3px var(--tc-accent-tint)}
.tc-directory{display:grid;gap:1.25rem}
.tc-directory>*{min-width:0}
.tc-vendors-heading{margin-bottom:.6rem!important;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tc-subtle)}
.tc-vendor-list{display:flex;gap:.5rem;overflow-x:auto;padding:.15rem .15rem .5rem;margin:0 -.15rem;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tc-vendor{display:inline-flex;flex:none;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem .85rem;border-radius:var(--radius-pill);border:1px solid var(--tc-border);background:var(--tc-surface);font-size:.875rem;font-weight:600;color:var(--tc-muted);text-align:left;white-space:nowrap;scroll-snap-align:start;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.tc-vendor:hover{color:var(--tc-text);border-color:var(--tc-border-strong)}
.tc-vendor-count{font-size:.8rem;font-weight:600;color:var(--tc-subtle);font-variant-numeric:tabular-nums}
.tc-vendor.is-active{background:var(--tc-accent-tint);border-color:var(--tc-accent-border);color:var(--tc-text)}
.tc-vendor.is-active .tc-vendor-count{color:var(--tc-accent-strong)}
.tc-panel{min-width:0}
.tc-vendor-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.tc-section .tc-vendor-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;line-height:1.2;color:var(--tc-text)!important}
.tc-vendor-count-label{margin-top:.15rem!important;font-size:.875rem;color:var(--tc-muted)}
.tc-result-group+.tc-result-group{margin-top:1.75rem}
.tc-results-count{margin-bottom:1rem!important;font-size:.875rem;color:var(--tc-muted)}
.tc-rows{border:1px solid var(--tc-border);border-radius:var(--radius);overflow:hidden;background:var(--tc-surface);box-shadow:var(--tc-shadow)}
.tc-row+.tc-row{border-top:1px solid var(--tc-border)}
.tc-row-head{display:grid;grid-template-columns:minmax(0,1fr) auto 1.25rem;align-items:center;gap:.9rem;width:100%;padding:.9rem 1.1rem!important;text-align:left;color:var(--tc-text)}
button.tc-row-head{transition:background-color .15s ease}
button.tc-row-head:hover,.tc-row.is-open>.tc-row-head{background:var(--tc-row-hover)}
.tc-row-main{display:flex;flex-direction:column;min-width:0}
.tc-row-title{font-weight:600;font-size:.975rem;line-height:1.35}
.tc-row-sub{margin-top:.15rem;font-size:.85rem;color:var(--tc-muted)}
.tc-chevron{color:var(--tc-subtle)}
.tc-row.is-open .tc-chevron{transform:rotate(90deg);color:var(--tc-accent)}
.tc-row-details{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-start;justify-content:space-between;padding:.25rem 1.1rem 1.1rem;background:var(--tc-row-hover)}
.tc-row-details-body{flex:1 1 18rem;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.tc-row-desc{font-size:.925rem;line-height:1.65;color:var(--tc-muted)}
.tc-row-date{font-size:.875rem;color:var(--tc-muted)}
.tc-skills{display:flex;flex-wrap:wrap;gap:.4rem}
.tc-skill{padding:.2rem .6rem;border-radius:var(--radius-pill);border:1px solid var(--tc-border);background:var(--tc-surface);font-size:.78rem;color:var(--tc-text)}
.tc-row-links{display:flex;flex-wrap:wrap;gap:1rem}
.tc-link{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:600;color:var(--tc-accent-strong)!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tc-accent-border)}
.tc-link:hover{text-decoration-color:currentColor}
.tc-row-badge{flex:none;display:block}
.tc-show-all{display:block;width:100%;margin-top:.875rem!important;padding:.75rem 1rem!important;border-radius:.75rem;border:1px solid var(--tc-accent-border)!important;background:var(--tc-accent-tint)!important;color:var(--tc-accent-strong)!important;font-weight:600;font-size:.925rem;text-align:center!important;transition:border-color .15s ease}
.tc-show-all:hover{border-color:var(--tc-accent)!important}
.tc-empty{padding:2rem 1.25rem;text-align:center;border:1px dashed var(--tc-border-strong);border-radius:var(--radius)}
.tc-empty-title{font-weight:600;color:var(--tc-text)}
.tc-empty-sub{margin-top:.35rem!important;font-size:.9rem;color:var(--tc-muted)}
.tc-btn{margin-top:1rem!important;padding:.5rem 1rem!important;border-radius:.6rem;border:1px solid var(--tc-accent-border)!important;background:var(--tc-accent-tint)!important;color:var(--tc-accent-strong)!important;font-weight:600;font-size:.875rem}
.tc-pill--upper{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tc-plate{display:inline-flex;flex:none;align-items:center;justify-content:center;padding:.5rem .75rem;border-radius:.75rem;background:var(--tc-plate);border:1px solid var(--tc-plate-border)}
.tc-plate img{display:block}
.tc-plate--sm{min-width:3.25rem;min-height:3.25rem;max-width:8rem}
.tc-plate--card{width:100%;height:5.5rem;padding:.75rem}
.tc-plate--badge{background:transparent;border-color:transparent}
.tc-plate--group{width:100%;height:100%;min-height:6.5rem;padding:1rem}
.tc-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;gap:.2rem;border-radius:.75rem;background:var(--tc-tile-bg);border:1px solid var(--tc-border);color:var(--tc-tile-text);text-align:center}
.tc-tile-text{font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;line-height:1.1}
.tc-tile-sub{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tc-tile-sub);line-height:1.2;padding:0 .4rem}
.tc-tile--vendor{width:3.25rem;height:3.25rem;background:var(--tc-accent-tint);border-color:var(--tc-accent-border)}
.tc-tile--vendor .tc-tile-text{font-size:1rem;color:var(--tc-accent-strong)}
.tc-tile--card{width:100%;height:5.5rem}
.tc-tile--card .tc-tile-text{font-size:1.35rem}
.tc-tile--group{width:100%;min-height:6.5rem}
.tc-tile--group .tc-tile-text{font-size:1.5rem}
.tc-showcase{display:flex;flex-direction:column;gap:2.75rem}
.tc-section .tc-category-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:1rem;font-family:var(--font-heading);font-size:1.35rem;font-weight:700;color:var(--tc-text)!important}
.tc-category-count{font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--tc-muted)}
.tc-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
.tc-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem;text-align:center;border:1px solid var(--tc-border);border-radius:var(--radius-lg);background:var(--tc-surface);box-shadow:var(--tc-shadow)}
.tc-card-mark{width:100%;margin-bottom:.5rem}
.tc-card-title{font-weight:700;font-size:.95rem;line-height:1.3;color:var(--tc-text)}
.tc-card-sub{font-size:.82rem;line-height:1.4;color:var(--tc-muted);margin-bottom:.35rem!important}
.tc-card .tc-pill{margin-top:auto}
.tc-group-card{display:grid;gap:1.25rem;margin-top:1rem;padding:1.25rem;border:1px solid var(--tc-border);border-radius:var(--radius-lg);background:var(--tc-surface);box-shadow:var(--tc-shadow)}
.tc-group-mark{display:flex}
.tc-section .tc-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.75rem;font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--tc-text)!important}
.tc-group-list{display:grid;gap:.45rem 1.5rem}
.tc-group-list li{position:relative;padding-left:1rem;font-size:.9rem;line-height:1.45;color:var(--tc-text)}
.tc-group-list li:before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;border-radius:var(--radius-pill);background:var(--tc-bullet)}
.tc-footnote{margin-top:2rem!important;text-align:center;font-size:.8rem;color:var(--tc-subtle)}

/* Explore more cards at the end of each page */
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.topic{display:flex;gap:14px;align-items:flex-start;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);box-shadow:var(--shadow-xs);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.topic:hover{transform:translateY(-2px);border-color:var(--orange-border);box-shadow:var(--shadow-md);color:var(--text)}
.topic .icon{margin:0;flex:none}
.topic b{display:block;font-family:var(--font-heading);font-size:1.06rem;color:var(--ink);margin-bottom:4px}
.topic span{font-size:.9rem;color:var(--muted);line-height:1.5}

/* Expertise links grouped by area */
.explore-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.explore-group{display:grid;gap:10px;min-width:0}
.explore-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin:0 0 2px}
.explore-here{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.explore-group.is-current .explore-h{color:var(--orange-strong)}
.explore-group.is-current .explore-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.explore-links{display:grid;gap:6px}
.xlink{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;line-height:1.3;box-shadow:var(--shadow-xs);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.xlink:hover{border-color:var(--orange-border);box-shadow:var(--shadow-sm);transform:translateY(-1px);color:var(--ink)}
.xlink .icon{width:30px;height:30px;border-radius:8px;margin:0;flex:none}
.xlink .icon svg{width:16px;height:16px}
.explore-group.is-current .xlink{border-color:var(--orange-border)}
.topic.compact{padding:14px 16px;gap:12px}
.topic.compact .icon{width:38px;height:38px;border-radius:10px}
.topic.compact .icon svg{width:20px;height:20px}
.topic.compact b{font-size:.98rem;margin-bottom:2px}
.topic.compact span span{font-size:.85rem}
.explore-home{margin-top:22px;text-align:center}
.section-dark .explore-h{color:var(--soft)}

/* Dark feature band: breaks the page rhythm on purpose, used for the expertise links */
.section-dark{position:relative;background:radial-gradient(900px 420px at 85% 0,rgba(249,115,22,.16),transparent 60%),radial-gradient(800px 420px at 0 100%,rgba(139,92,246,.18),transparent 60%),var(--navy);color:var(--on-dark)}
.section-dark .section-head h2{color:#fff}
.section-dark .section-head p{color:var(--on-dark-muted)}
.section-dark .topic{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);box-shadow:none;color:var(--on-dark)}
.section-dark .topic:hover{border-color:rgba(249,115,22,.5);background:rgba(255,255,255,.07);color:var(--on-dark)}
.section-dark .topic b{color:#fff}
.section-dark .topic span{color:var(--on-dark-muted)}
.section-dark .topic .icon{background:rgba(103,232,249,.1);border-color:rgba(103,232,249,.22);color:var(--cyan-light)}

/* 16 Footer ----------------------------------------------------------- */
footer{position:relative;background:var(--navy);color:var(--soft);padding:40px 0;font-size:.92rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background-image:var(--gradient)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--orange-light)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--on-dark-muted);font-weight:500}
.foot-links a:hover{color:#fff}

/* 17 Responsive ------------------------------------------------------- */
@media (min-width:640px){
  .exp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tc-group-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .exp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tc-controls{grid-template-columns:1fr 15rem}
  .tc-cards{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
  .tc-group-card{grid-template-columns:13rem minmax(0,1fr);align-items:center}
}
@media (min-width:1024px){
  .exp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tc-directory{grid-template-columns:15.5rem minmax(0,1fr);gap:2rem;align-items:start}
  .tc-vendor-list{flex-direction:column;gap:.15rem;overflow:visible;padding:0;margin:0}
  .tc-vendor{position:relative;display:flex;width:100%;padding:.6rem .85rem;border-radius:.6rem;border-color:transparent;background:transparent}
  .tc-vendor:hover{background:var(--tc-row-hover);border-color:transparent}
  .tc-vendor.is-active{border-color:transparent}
  .tc-vendor.is-active:before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:3px;border-radius:3px;background:var(--tc-accent)}
}
@media (max-width:1080px){
  .nav ul{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 16px 16px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);display:none}
  .nav.open ul{display:flex}
  .nav ul a{padding:12px 10px;font-size:1rem}
  .nav-toggle{display:grid;place-items:center;margin-left:auto}
  .nav ul{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .menu-btn{width:100%;padding:12px 10px;font-size:1rem;justify-content:space-between}
  .mega{position:static;transform:none;width:auto;display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:2px;padding:0 0 6px 6px;max-height:none;overflow:visible;background:none;border:0;box-shadow:none}
  .mega-group{display:grid;gap:2px}
  .mega-h,.mega-group:nth-child(n) .mega-h{grid-column:auto;grid-row:auto}
  .mega-links{grid-column:auto;grid-row:auto;grid-template-columns:1fr;border:0;gap:1px;min-height:0}
  .mega-desc,.mega-gbtn .mg-count{display:none}
  .mega .mtx{display:block}
  .mega-gbtn .mg-name{font:inherit;color:inherit}
  .mega-gbtn svg{transform:none;color:inherit}
  .nav .mega a{align-items:center}
  .mega-h{padding:0}
  .mega-gbtn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:11px 10px;border:0;border-radius:8px;background:none;color:var(--soft);font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .mega-gbtn:hover{color:#fff;background:rgba(255,255,255,.05)}
  .mega-gbtn svg{width:14px;height:14px;flex:none;transition:transform .2s ease}
  .mega-gbtn[aria-expanded="true"]{color:#fff}
  .mega-gbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mega-group.has-current .mega-gbtn{color:var(--orange-light,#FDBA74)}
  .mega-links{padding:0 0 6px 4px}
  .mega-links.is-collapsed{display:none}
  .nav .mega a{padding:8px 10px}
  .mega small{display:none}
  /* Without the script the phone menu cannot open, so the links sit in the bar instead */
  .no-js .nav{position:relative}
  .no-js .nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:8px;row-gap:6px}
  .no-js .nav nav{width:100%}
  .no-js .nav ul{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:2px;padding:0;background:none;border:0;max-height:none;overflow:visible}
  .no-js .nav ul a{padding:8px 10px;font-size:.92rem}
  .no-js .nav-toggle{display:none}
  .no-js .subnav{top:0}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:120px}
  .hero-shot img{height:360px}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .grid-3,.grid-4,.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  :root{--gutter:16px;--section-y:68px}
  .hero-grid{padding-top:44px;padding-bottom:104px;gap:32px}
  .hero-grid.single{padding-bottom:72px}
  .hero-shot img{height:300px}
  .grid-2,.grid-3,.grid-4,.topic-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(3){border-right:1px solid var(--line)}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .stat b{font-size:1.8rem}
  .section-head{margin-bottom:2.25rem}
  .card{padding:22px}
  .panel{padding:4px 16px 20px}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .table-wrap > table{min-width:560px}
  .tabs button{white-space:normal;text-align:center;padding:.6rem .5rem}
  .subnav-label{display:none}
  .subnav .wrap{height:46px}
}
@media (max-width:639px){
  .tc-row-head{grid-template-columns:minmax(0,1fr) 1.25rem;row-gap:.5rem}
  .tc-row-head .tc-pill{grid-row:2;grid-column:1;justify-self:start}
  .tc-row-head .tc-chevron,.tc-row-head .tc-chevron-spacer{grid-row:1;grid-column:2}
}
@media (prefers-reduced-motion:no-preference){.tc-chevron{transition:transform .2s ease}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .brand-card:hover,.btn:hover,.shot:hover img{transform:none}
}

/* Engagement section: the same on every solution page (built by build.py) */
.engage .eg-tabs{margin-top:28px}
.eg-panel{padding:24px}
.eg-cols{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.eg-panel .card h3,.eg-h{font-size:var(--fs-h4);margin:0 0 10px}
.eg-h{margin:26px 0 12px}
.eg-sub{color:var(--muted);margin:-4px 0 14px;font-size:.95rem}
.eg-intro{max-width:75ch;margin:0 0 18px;color:var(--ink-2,var(--ink))}
.eg-note{max-width:75ch;margin:18px 0 0;font-size:.95rem;color:var(--muted)}
.eg-list{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}
.eg-dl{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:.5rem 1rem;margin:0}
.eg-dl dt{font-weight:600;color:var(--ink)}
.eg-dl dd{margin:0;color:var(--muted)}
.eg-steps{counter-reset:eg;list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.eg-steps li{counter-increment:eg;position:relative;padding-left:2.5rem;min-height:1.8rem}
.eg-steps li::before{content:counter(eg);position:absolute;left:0;top:-.05rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--orange-tint);color:var(--orange-strong);box-shadow:inset 0 0 0 1px var(--orange-border);font-weight:700;font-size:.82rem;display:grid;place-items:center}
.eg-life{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.eg-cards{gap:16px}
.eg-cards .card p{margin:0;color:var(--muted)}
.eg-panel td code,.eg-panel li code{font-size:.85em}
@media (max-width:600px){
  .eg-tabs button:last-child:nth-child(odd){grid-column:1/-1}
  .eg-panel .table-wrap > table{min-width:0}
  .eg-panel table,.eg-panel tbody,.eg-panel tr,.eg-panel td{display:block;width:100%}
  .eg-panel thead{display:none}
  .eg-panel tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .eg-panel td{padding:0;border:0}
  .eg-panel td:first-child{font-weight:600;color:var(--ink);margin-bottom:4px}
}
@media (max-width:800px){.eg-cols,.eg-life{grid-template-columns:1fr}.eg-dl{grid-template-columns:1fr;gap:.15rem}.eg-dl dd{margin-bottom:.5rem}.eg-panel{padding:18px}}

/* Home page Expertise band: every page in its four groups */
.area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.area{padding:22px;border-radius:var(--radius-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.area-h{margin:0 0 6px;font-size:var(--fs-h4);color:#fff}
.area-p{margin:0 0 14px;font-size:.92rem;color:var(--on-dark-muted)}
.area-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
.area-links a{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;color:var(--on-dark);text-decoration:none}
.area-links a:hover{background:rgba(255,255,255,.06)}
.area-links .mi{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(103,232,249,.1);color:var(--cyan-light);border:1px solid rgba(103,232,249,.22)}
.area-links .mi svg{width:16px;height:16px}
.area-links b{display:block;font-family:var(--font-heading);font-size:.94rem;font-weight:600;line-height:1.3;color:#fff}
.area-links small{display:block;font-size:.8rem;line-height:1.4;color:var(--soft);margin-top:2px}
.area-start{margin:24px 0 0;text-align:center}
@media (max-width:1180px){.area-links{grid-template-columns:1fr}}
@media (max-width:1080px){.explore-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.area-grid{grid-template-columns:1fr}.area-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .explore-groups{grid-template-columns:1fr;gap:18px}
  .explore-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xlink{font-size:.84rem;padding:9px 10px}
  .xlink .icon{display:none}
  .area{padding:18px 14px}
  .area-p{display:none}
  .area-h{margin-bottom:8px}
  .area-links small{display:none}
  .area-links a{align-items:center;padding:7px 6px}
  .area-links .mi{width:26px;height:26px}
  .area-links b{font-size:.86rem}
}

/* Without JavaScript every tab panel shows in turn and the tab buttons hide */
.no-js [role="tabpanel"][hidden]{display:block}
.no-js [role="tablist"]{display:none}
.no-js [role="tabpanel"] + [role="tabpanel"]{margin-top:20px}

/* Menu button: three lines when closed, a cross when open */
.nav-toggle .i-close{display:none}
@media (max-width:1080px){
  /* The phone menu is a full height sheet over the page, and the page behind it stays still */
  .nav ul{height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));max-height:none;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .no-js .nav ul{height:auto}
  .nav.open .nav-toggle .i-open{display:none}
  .nav.open .nav-toggle .i-close{display:block}
  html.nav-open,html.nav-open body{overflow:hidden}
}