/* Digotech theme — tokens, colour modes, base elements, header and card menu.
   The 12 palette colours live in theme.json (Appearance › Editor › Styles); light mode follows what is set there.
   Dark and moon repaint the same WordPress variables when the visitor switches mode (data-mode on <html>). */

:root{
  /* palette names used by every Digotech section → the 12 WordPress palette slots */
  --paper: var(--wp--preset--color--bg-body);
  --paper-2: var(--wp--preset--color--bg-surface);
  --ink: var(--wp--preset--color--text-title);
  --rule: var(--wp--preset--color--border-primary);
  --accent-fill: var(--wp--preset--color--primary);
  --on-accent: var(--wp--preset--color--light);
  --good: var(--wp--preset--color--success);
  --bad: var(--wp--preset--color--error);
  --p2: var(--wp--preset--color--tertiary);
  --p3: var(--wp--preset--color--secondary);

  /* colours outside the palette (light values; dark and moon below) */
  --paper-3: oklch(91% 0.016 172);
  --card: oklch(99% 0.004 170);
  --ink-2: oklch(45% 0.02 200);
  --ink-3: oklch(53% 0.018 195);
  --dotc: oklch(45% 0.02 200 / .16);
  --accent: oklch(46% 0.1 176);
  --accent-edge: oklch(42% 0.09 178);
  --accent-tint: oklch(59% 0.11 176 / .14);
  --band: oklch(59% 0.11 176 / .32);
  --brand-mark: oklch(52% 0.1 176);
  --nav-glass: oklch(97.5% 0.008 170 / .93);
  --shadow: oklch(22% 0.02 200 / .10);
  --warn: oklch(72% 0.15 70);
  --p1: oklch(59% 0.11 176);
  --p4: oklch(58% 0.1 20);
  --inv-bg: var(--ink);
  --inv-fg: var(--paper);
  --grid-line: color-mix(in oklch, var(--ink) 7%, transparent);

  /* type */
  --font-display: var(--wp--preset--font-family--font-heading);
  --font-body: var(--wp--preset--font-family--font);
  --font-mono: var(--wp--preset--font-family--font-mono);
  --font-serif: var(--wp--preset--font-family--font-serif);
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 19px;
  --t-xl: clamp(20px, 2.2vw, 26px);
  --t-2xl: clamp(30px, 4.2vw, 48px);
  --t-hero: clamp(38px, 5vw, 64px);
  --t-foot: clamp(36px, 6.2vw, 78px);
  --t-giant: clamp(64px, 12vw, 180px);

  /* space, shape, sizes */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;
  --r: var(--wp--preset--border-radius--radius-xs);
  --r-pill: 8px;
  --r-board: 12px;
  --r-card: var(--wp--preset--border-radius--radius-l);
  --ctl: 44px;
  --ctl-s: 38px;
  --page: var(--wp--style--global--wide-size);
  --page-float: 1160px;
  --measure: 60ch;
  --dotgrid-size: 14px;
  --nav-h: 64px;
  --nav-h-float: 56px;
  --icon-s: 16px;
  --icon-m: 18px;
  --brand-w: 32px;

  /* spacing by role: change here and every section follows (phone values at the end) */
  --gap-section: var(--s-9);
  --gap-head: var(--s-7);
  --gap-col: var(--s-8);
  --gap-grid: var(--s-5);
  --gap-card: var(--s-6);
  --gap-card-s: var(--s-5);
  --gap-stack: var(--s-4);
  --gap-text: var(--s-3);

  /* motion (--dur and --ease-out come from theme.json, shared with the parent theme's effects) */
  --ease-press: cubic-bezier(.2,.7,.2,1);
  --dur-m: 320ms;
  --dur-morph: 520ms;
  --dur-mode: 240ms;
  --foot-giant-dur: 50s;

  /* layers */
  --z-nav: 40;
  --z-nav-open: 66;
  --admin-h: 0px;

  color-scheme: light;
}
body.admin-bar{ --admin-h: var(--wp-admin--admin-bar--height); }

/* Dark: neutral graphite */
:root[data-mode="dark"]{
  --wp--preset--color--bg-body: oklch(15% 0.004 250);
  --wp--preset--color--bg-surface: oklch(18.5% 0.005 250);
  --wp--preset--color--text-body: oklch(95% 0.003 250);
  --wp--preset--color--text-title: oklch(95% 0.003 250);
  --wp--preset--color--border-primary: oklch(29% 0.006 250);
  --wp--preset--color--primary: oklch(72% 0.12 174);
  --wp--preset--color--light: oklch(15% 0.004 250);
  --paper-3: oklch(23% 0.006 250);
  --card: oklch(20.5% 0.005 250);
  --ink-2: oklch(75% 0.005 250);
  --ink-3: oklch(64% 0.006 250);
  --dotc: oklch(85% 0.004 250 / .10);
  --accent: oklch(78% 0.12 172);
  --accent-edge: oklch(50% 0.1 176);
  --accent-tint: oklch(72% 0.12 174 / .14);
  --band: oklch(72% 0.12 174 / .30);
  --brand-mark: oklch(72% 0.12 174);
  --nav-glass: oklch(15% 0.004 250 / .93);
  --shadow: oklch(4% 0 0 / .55);
  --inv-bg: color-mix(in oklch, var(--accent-fill) 12%, var(--paper-2));
  --inv-fg: var(--ink);
  --grid-line: oklch(100% 0 0 / .07);
  color-scheme: dark;
}

/* Moon: golden moon on indigo; the logo stays brand teal */
:root[data-mode="moon"]{
  --wp--preset--color--bg-body: oklch(19% 0.045 278);
  --wp--preset--color--bg-surface: oklch(22.5% 0.05 278);
  --wp--preset--color--text-body: oklch(95% 0.015 90);
  --wp--preset--color--text-title: oklch(95% 0.015 90);
  --wp--preset--color--border-primary: oklch(33% 0.05 278);
  --wp--preset--color--primary: oklch(83% 0.13 85);
  --wp--preset--color--light: oklch(19% 0.045 278);
  --paper-3: oklch(26.5% 0.055 278);
  --card: oklch(24.5% 0.05 278);
  --ink-2: oklch(81% 0.03 275);
  --ink-3: oklch(68% 0.04 275);
  --dotc: oklch(92% 0.02 275 / .10);
  --accent: oklch(87% 0.12 88);
  --accent-edge: oklch(60% 0.11 75);
  --accent-tint: oklch(83% 0.13 85 / .14);
  --band: oklch(83% 0.13 85 / .28);
  --brand-mark: oklch(70% 0.12 174);
  --nav-glass: oklch(19% 0.045 278 / .93);
  --shadow: oklch(6% 0.03 278 / .55);
  --inv-bg: color-mix(in oklch, var(--accent-fill) 12%, var(--paper-2));
  --inv-fg: var(--ink);
  --grid-line: oklch(90% 0.04 280 / .085);
  color-scheme: dark;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent-fill) var(--paper-2);scroll-padding-top:calc(var(--admin-h) + var(--nav-h) + var(--s-5))}
body{overflow-x:clip;transition:background-color var(--dur-mode) var(--ease-press),color var(--dur-mode) var(--ease-press)}
/* faint grid behind the top of every page, in all three modes */
body::after{content:"";position:fixed;inset:0 0 auto;height:100vh;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:var(--s-7) var(--s-7);background-position:center top;-webkit-mask-image:radial-gradient(ellipse 40% 72% at 50% 0%, currentColor 20%, transparent 100%);mask-image:radial-gradient(ellipse 40% 72% at 50% 0%, currentColor 20%, transparent 100%)}
:where(h1,h2,h3){text-wrap:balance}
:where(svg){flex:none}

/* ---------- buttons (core Button: Fill = primary, Outline = ghost) ---------- */
.wp-element-button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--ctl);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease-press),box-shadow var(--dur) var(--ease-press),border-color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press)}
.wp-element-button:hover,.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-edge)}
.wp-element-button:active,.wp-block-button__link:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-edge)}
/* ghost button; core sets its own outline padding and border, so the full look is set here (front end and editor) */
.wp-block-button.is-style-outline > .wp-block-button__link{padding:0 var(--s-5);border:1px solid var(--rule);background:transparent;color:var(--ink);box-shadow:none}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{transform:none;box-shadow:none;border-color:var(--ink-2)}
.icon-btn{display:inline-grid;place-items:center;width:var(--ctl-s);height:var(--ctl-s);padding:0;border-radius:var(--r);border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;transition:border-color var(--dur) var(--ease-press)}
.icon-btn:hover{border-color:var(--ink-2)}
.icon-btn svg{width:var(--icon-m);height:var(--icon-m)}

/* colour mode button: shows the icon of the current mode */
.wp-block-digotech-mode-toggle svg{display:none}
:root[data-mode="light"] .dg-mode__light,:root[data-mode="dark"] .dg-mode__dark,:root[data-mode="moon"] .dg-mode__moon{display:block}

/* ---------- header (parts/header.html) ---------- */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:var(--admin-h);z-index:var(--z-nav)}
.nav{overflow-x:clip;background-color:var(--nav-glass);border-bottom:1px solid var(--rule);padding-block:0;
  transition:padding-block var(--dur-morph) var(--ease-out),background-color var(--dur-morph) var(--ease-out),border-color var(--dur-morph) var(--ease-out)}
.nav__inner{position:relative;max-width:var(--page);min-height:var(--nav-h);margin-inline:auto;padding:var(--s-3) var(--s-4);gap:var(--s-5);border:1px solid transparent;border-radius:0;background-color:transparent;box-shadow:none;transform:translateY(0);
  transition:max-width var(--dur-morph) var(--ease-out),min-height var(--dur-morph) var(--ease-out),padding var(--dur-morph) var(--ease-out),border-radius var(--dur-morph) var(--ease-out),background-color var(--dur-morph) var(--ease-out),border-color var(--dur-morph) var(--ease-out),box-shadow var(--dur-morph) var(--ease-out),transform var(--dur-morph) var(--ease-out)}
.nav.is-floating{padding-block:var(--s-1);background-color:transparent;border-bottom-color:transparent}
.nav.is-floating .nav__inner{max-width:var(--page-float);min-height:var(--nav-h-float);padding:var(--s-1) var(--s-2) var(--s-1) var(--s-4);border-color:var(--rule);border-radius:var(--r-pill);background-color:var(--nav-glass);box-shadow:0 10px 30px var(--shadow);transform:translateY(var(--s-2));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

.brand{flex:none;gap:var(--s-2);white-space:nowrap}
.brand svg{width:var(--brand-w);height:auto;color:var(--brand-mark)}
.brand .wp-block-site-title{margin:0;font:700 var(--t-l)/1 var(--font-display);letter-spacing:-0.02em}
.brand .wp-block-site-title a{color:var(--ink);text-decoration:none}

.nav__right{gap:var(--s-5)}
.nav__links{font-size:var(--t-s)}
.nav__links .wp-block-navigation__container{gap:var(--s-1)}
.nav__links .wp-block-navigation-item__content{display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press)}
.nav__links .wp-block-navigation-item__content:hover{color:var(--ink);background-color:var(--accent-tint)}
.nav__links .current-menu-item > .wp-block-navigation-item__content{color:var(--accent)}
.nav__links .wp-block-navigation-item__description{display:none}

.nav__tools{flex:none;gap:var(--s-2)}
.nav__cta .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);box-shadow:0 3px 0 var(--accent-edge)}

/* phone + tablet: the menu button opens the card menu (parts/card-nav.html) under the bar */
.nav__burger .wp-block-navigation__responsive-container-open{width:var(--ctl-s);height:var(--ctl-s);display:inline-grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink)}
.nav__burger .wp-block-navigation__responsive-container-open svg{width:var(--icon-m);height:var(--icon-m)}
/* .nav__inner has a transform, so it is the card's containing block: the card sits just under the bar (like the
   floating bar itself), never measured from the screen top — the admin bar is already counted in the bar's position */
.nav__burger .wp-block-navigation__responsive-container.is-menu-open{inset:calc(100% + var(--s-2)) var(--s-2) auto;max-height:calc(100dvh - var(--admin-h) - var(--nav-h) - var(--s-6));padding:var(--s-3);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:0 var(--s-5) var(--s-7) var(--shadow)}
.nav__burger .wp-block-navigation__responsive-close,.nav__burger .wp-block-navigation__responsive-dialog,.nav__burger .wp-block-navigation__responsive-container-content{max-width:none;margin:0;padding:0}
.nav::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-m) var(--ease-out)}
.has-modal-open .nav::after{opacity:1}
.has-modal-open .wp-site-blocks > header.wp-block-template-part{z-index:var(--z-nav-open)}

/* card menu: the same menu as the desktop bar, each link a tile (icon + arrow from the link's CSS class) */
.cnav{display:grid;gap:var(--s-3);width:100%}
.cnav__grid .wp-block-navigation__container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);width:100%}
.cnav__grid .wp-block-navigation-item{display:block}
.cnav__grid .wp-block-navigation-item__content{position:relative;display:grid;align-content:start;gap:var(--s-1);min-width:0;height:100%;padding:var(--s-4);border-radius:var(--r-board);background:var(--paper-2);color:var(--ink);text-decoration:none;transition:background-color var(--dur) var(--ease-press)}
.cnav__grid .wp-block-navigation-item__content:hover{background:var(--paper-3)}
.cnav__grid .wp-block-navigation-item__content::before{content:"";width:var(--s-5);height:var(--s-5);margin-bottom:var(--s-3);background:currentColor;-webkit-mask:var(--cn-icon) center / contain no-repeat;mask:var(--cn-icon) center / contain no-repeat}
.cnav__grid .wp-block-navigation-item__content::after{content:"";position:absolute;top:var(--s-4);right:var(--s-4);width:var(--s-4);height:var(--s-4);background:currentColor;opacity:.55;-webkit-mask:url(../../icons/arrow.svg) center / contain no-repeat;mask:url(../../icons/arrow.svg) center / contain no-repeat;transition:transform var(--dur) var(--ease-press),opacity var(--dur) var(--ease-press)}
.cnav__grid .wp-block-navigation-item__content:hover::after{opacity:1;transform:translate(calc(var(--s-1) / 2), calc(var(--s-1) / -2))}
.cnav__grid .wp-block-navigation-item__label{font:700 var(--t-l)/1.2 var(--font-body);white-space:nowrap}
.cnav__grid .wp-block-navigation-item__description{display:block;font-size:var(--t-xs);line-height:1.35;opacity:.75}
.cnav__grid .is-tile-inv > .wp-block-navigation-item__content{background:var(--inv-bg);color:var(--inv-fg)}
.cnav__grid .is-tile-inv > .wp-block-navigation-item__content:hover{background:color-mix(in oklch, var(--inv-bg) 90%, var(--inv-fg))}
.cnav__grid .is-tile-accent > .wp-block-navigation-item__content{background:var(--accent-fill);color:var(--on-accent)}
.cnav__grid .is-tile-accent > .wp-block-navigation-item__content:hover{background:var(--accent-edge)}
.cnav__grid .wp-block-navigation-item__content{--cn-icon:url(../../icons/arrow.svg)}
.cnav__grid .ic-brief > .wp-block-navigation-item__content{--cn-icon:url(../../icons/brief.svg)}
.cnav__grid .ic-eye > .wp-block-navigation-item__content{--cn-icon:url(../../icons/eye.svg)}
.cnav__grid .ic-style > .wp-block-navigation-item__content{--cn-icon:url(../../icons/style.svg)}
.cnav__grid .ic-list > .wp-block-navigation-item__content{--cn-icon:url(../../icons/list.svg)}
.cnav__grid .ic-pen > .wp-block-navigation-item__content{--cn-icon:url(../../icons/pen.svg)}
.cnav__grid .ic-donut > .wp-block-navigation-item__content{--cn-icon:url(../../icons/donut.svg)}
.cnav__foot{gap:var(--s-2)}
.cnav__foot .wp-block-buttons{flex:1 1 auto}
.cnav__foot .wp-block-navigation-overlay-close{width:var(--ctl);height:var(--ctl);display:inline-grid;place-items:center;margin-left:auto;padding:0;border:1px solid var(--rule);border-radius:var(--r);background:transparent;color:var(--ink);cursor:pointer}
.cnav__foot .wp-block-navigation-overlay-close svg{width:var(--icon-m);height:var(--icon-m);fill:currentColor}

@media (max-width: 699px){
  .cnav__grid .wp-block-navigation__container{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 479px){
  .nav__inner{gap:var(--s-3)}
  .nav .nav__tools .nav__cta{display:none}
}
@media (max-width: 359px){
  .cnav__grid .wp-block-navigation-item__content{padding:var(--s-3)}
  .cnav__grid .wp-block-navigation-item__label{font-size:var(--t-m)}
}
@media (max-width: 991px){
  :root{--gap-col:var(--s-6)}
}
@media (max-width: 767px){
  :root{--gap-section:var(--s-8);--gap-head:var(--s-6);--gap-grid:var(--s-4);--gap-card:var(--s-5);--gap-card-s:var(--s-4)}
}
@media (max-width: 374px){
  :root{--t-hero:32px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .nav,.nav__inner,.cnav__grid .wp-block-navigation-item__content{transition:none}
}

/* ---------- shared text styles ---------- */
.mono{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* the kit's "Status dot" paragraph style in Digotech colours: brand dot with a soft ping */
.is-style-status-dot{gap:var(--s-2)}
.is-style-status-dot::before{inline-size:var(--s-2);block-size:var(--s-2);background-color:var(--accent-fill);animation:dg-ping 2.4s var(--ease-out) infinite}
@keyframes dg-ping{0%{box-shadow:0 0 0 0 var(--band)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){ .is-style-status-dot::before{animation:none} }

/* the kit's "Link with arrow" paragraph style in Digotech's look: brand colour, outlined arrow icon, no underline */
.is-style-arrow-link a{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--accent);font-weight:600;text-decoration:none}
.is-style-arrow-link a:hover,.is-style-arrow-link a:focus-visible{text-decoration:none}
.is-style-arrow-link a::after{content:"";width:var(--s-3);height:var(--s-3);margin-left:0;background:currentColor;-webkit-mask:url(../../icons/arrow.svg) center / contain no-repeat;mask:url(../../icons/arrow.svg) center / contain no-repeat;transition:transform var(--dur) var(--ease-press)}
.is-style-arrow-link a:hover::after,.is-style-arrow-link a:focus-visible::after{transform:translate(2px,-2px)}

/* floating bar: the card menu takes the bar's full width (the bar is already inset from the screen edges) */
.nav.is-floating .nav__burger .wp-block-navigation__responsive-container.is-menu-open{left:0;right:0}

/* ---------- footer (parts/footer.html) ---------- */
.foot{display:grid;gap:var(--s-8);padding:var(--s-9) var(--s-4) var(--s-6);border-top:1px solid var(--rule)}
.foot > *{width:100%;max-width:var(--page);margin:0 auto}
.foot > .foot__giant{max-width:none}
.foot__big{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-7);align-items:end}
.foot__big > *,.foot__cta > *,.foot__links > *,.foot__col > *,.foot__base > *,.foot__ci > *{margin:0}
.foot__h{font-size:var(--t-foot);font-weight:800;letter-spacing:-0.035em;line-height:1.04}
.foot__h strong{font-weight:inherit;color:var(--accent)}
.foot__cta{display:grid;gap:var(--s-3);justify-items:start}
.foot__or{font-size:var(--t-s);color:var(--ink-2)}
.foot__copy.dg-copy--box{width:auto;max-width:100%;min-height:var(--ctl)}
.foot__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--rule)}
.foot__t{margin-bottom:var(--s-3);font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.foot__list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none;font-size:var(--t-s)}
.foot__list li{display:flex;align-items:flex-start;gap:var(--s-2);color:var(--ink-2)}
.foot__list li::before{content:"";flex:none;width:var(--s-3);height:var(--s-3);margin-top:calc((1lh - var(--s-3)) / 2);background:var(--accent);-webkit-mask:url(../../icons/donut.svg) center / contain no-repeat;mask:url(../../icons/donut.svg) center / contain no-repeat}
.foot__list a,.foot__ci a{color:var(--ink-2);text-decoration:none;transition:color var(--dur) var(--ease-press)}
.foot__list a:hover,.foot__ci a:hover{color:var(--accent)}
/* contact rows: the icon comes from the row's class (ic-pin · ic-headset · ic-phone · ic-mail · ic-id) */
.foot__ci{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--s-1);margin-top:var(--s-2);font-size:var(--t-s);line-height:1.6;color:var(--ink-2)}
.foot__t + .foot__ci{margin-top:0}
.foot__ci::before{content:"";flex:none;width:var(--s-4);height:var(--s-4);margin:calc((1lh - var(--s-4)) / 2) var(--s-1) 0 0;background:var(--accent);-webkit-mask:var(--ci-icon) center / contain no-repeat;mask:var(--ci-icon) center / contain no-repeat}
.foot__ci.ic-pin{--ci-icon:url(../../icons/pin.svg)}
.foot__ci.ic-headset{--ci-icon:url(../../icons/headset.svg)}
.foot__ci.ic-phone{--ci-icon:url(../../icons/phone.svg)}
.foot__ci.ic-mail{--ci-icon:url(../../icons/mail.svg)}
.foot__ci.ic-id{--ci-icon:url(../../icons/id.svg)}
.foot__ci .wp-block-buttons{display:inline-flex}
/* the bound phone and email buttons read as plain links here */
.foot__ci .wp-block-button__link{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-2);font:inherit;white-space:normal;transform:none}
.foot__ci .wp-block-button__link:hover,.foot__ci .wp-block-button__link:active{color:var(--accent);box-shadow:none;transform:none}
.foot__lbl{white-space:nowrap}
/* giant outlined words running in a loop (the kit's Group › Marquee style) */
.foot__giant{--marquee-gap:0;--marquee-item:var(--foot-giant-dur);padding-block:var(--s-5);border-top:1px solid var(--rule)}
.foot__giant p{font:800 var(--t-giant)/1 var(--font-display);letter-spacing:-0.04em;white-space:nowrap;padding-right:.4em;color:transparent;-webkit-text-stroke:1.5px var(--rule);transition:color var(--dur-m) var(--ease-out),-webkit-text-stroke-color var(--dur-m) var(--ease-out)}
.foot__giant p:hover{color:var(--accent-fill);-webkit-text-stroke-color:var(--accent-fill)}
.foot__sep{color:var(--accent-fill);-webkit-text-stroke:0}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3) var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--rule);font-size:var(--t-s);color:var(--ink-2)}
.foot__nav{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.foot__nav a{color:var(--ink-2);text-decoration:none}
.foot__nav a:hover{color:var(--ink)}
@media (max-width: 991px){
  .foot__big{grid-template-columns:minmax(0,1fr);gap:var(--gap-col)}
  .foot__links{grid-template-columns:1fr 1fr}
}
@media (max-width: 767px){
  .foot__links{grid-template-columns:minmax(0,1fr)}
}

/* ---------- shared section scaffolding (every page section: group.sec.<section> > group.page > …) ---------- */
.sec{padding:var(--gap-section) var(--s-4)}
.page{max-width:var(--page);margin-inline:auto}
.sec > .page{width:100%}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--gap-grid);margin-bottom:var(--gap-head)}
.sec-head > *{margin:0}
.sec-head h2{max-width:20ch;font-size:var(--t-2xl)}
.sec-head h2 strong{font-weight:inherit;color:var(--accent)}
.sec-head p{max-width:42ch;color:var(--ink-2)}
.eyebrow{display:block;margin:0 0 var(--s-3)}
/* dotted band behind a section */
.dots{background-color:var(--paper-2);background-image:radial-gradient(circle, var(--dotc) 1px, transparent 1px);background-size:var(--dotgrid-size) var(--dotgrid-size)}
/* small UI card (mock windows, floating notes) */
.ui{border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);box-shadow:0 10px 24px var(--shadow);font-size:var(--t-xs);line-height:1.45;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{padding:var(--s-1) var(--s-2);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);font:500 var(--t-2xs)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.chip.is-on{border-color:var(--accent-fill);background:var(--accent-tint);color:var(--accent)}
/* "next step" row closing a section: a line of text + buttons */
.nx{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--gap-head);padding:var(--s-5) var(--s-6);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.nx > *{margin:0}
.nx__t{font:700 var(--t-l)/1.3 var(--font-display);letter-spacing:-0.01em;color:var(--ink)}
.nx__acts{gap:var(--s-2)}
@media (max-width: 767px){
  .nx{padding:var(--s-4)}
  .nx__acts,.nx__acts .wp-block-button,.nx__acts .wp-block-button__link{width:100%}
}