/* ==========================================================================
   MECHLAR — MAIN STYLESHEET
   Design system: v1 "Engineered Precision"
   --------------------------------------------------------------------------
   ARCHITECTURE
     - MOBILE FIRST. Base styles target the smallest viewport; every media
       query is min-width. Max-width queries appear only where behaviour is
       genuinely mobile-only (the off-canvas menu).
     - Every value comes from tokens.css. No magic numbers in this file.
     - BEM-ish naming: .block__element--modifier
     - Hover effects are gated behind (hover:hover) so touch devices never
       get stuck in a hover state.
     - Browser support: see documentation/index.html "Browser support".

   CONTENTS
     1.  Reset & base            14. Team card
     2.  Accessibility           15. Client logos
     3.  Layout primitives       16. Work cards & filters
     4.  Typography components   17. CTA panel
     5.  Buttons                 18. FAQ accordion
     6.  Header & navigation     19. Forms
     7.  Hero                    20. Booking modal
     8.  Capability lattice      21. Pagination
     9.  Principle strip         22. Footer
    10.  Service grid            23. Motion & reveal
    11.  Process steps           24. Utilities
    12.  Metrics                 25. WordPress core classes
    13.  Testimonial             26. Reduced motion / 27. Print
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Offset the sticky header for in-page anchors */
  scroll-padding-top:calc(var(--mk-header-h) + var(--mk-space-md));
}

body{
  font-family:var(--mk-font-body);
  font-size:var(--mk-fs-base);
  font-weight:var(--mk-fw-regular);
  line-height:var(--mk-lh-base);
  color:var(--mk-text);
  background-color:var(--mk-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video,canvas,iframe{display:block;max-width:100%}
img,video{height:auto}

a{color:inherit;text-decoration:none}
a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(87,42,145,.16)}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

ul,ol{list-style:none}

::selection{background-color:var(--mk-selection-bg);color:var(--mk-selection-text)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--mk-font-display);
  font-weight:var(--mk-fw-semibold);
  line-height:var(--mk-lh-tight);
  letter-spacing:var(--mk-ls-tight);
  text-wrap:balance;
}
h1{font-size:var(--mk-fs-5xl)}
h2{font-size:var(--mk-fs-4xl)}
h3{font-size:var(--mk-fs-2xl)}
h4{font-size:var(--mk-fs-xl)}
p{text-wrap:pretty}

/* ==========================================================================
   2. ACCESSIBILITY
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--mk-focus-ring);
  outline-offset:3px;
  border-radius:var(--mk-radius);
}
.sec--dark :focus-visible,
.cta :focus-visible{outline-color:var(--mk-focus-ring-inverse)}

.skip-link{
  position:absolute;
  left:-9999px;top:0;
  z-index:var(--mk-z-skip);
  padding:var(--mk-space-xs) var(--mk-space-sm);
  background-color:var(--mk-bg-accent);
  color:var(--mk-text-on-accent);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
}
.skip-link:focus{left:0}

.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus{position:static !important;width:auto;height:auto;clip:auto;margin:0}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{
  width:100%;
  max-width:var(--mk-container-wide);
  margin-inline:auto;
  padding-inline:var(--mk-gutter);
}
.wrap--narrow{max-width:var(--mk-container-narrow)}
.wrap--prose{max-width:var(--mk-container-prose)}

.sec{padding-block:var(--mk-section-y)}
.sec--tight{padding-block:var(--mk-section-y-sm)}
.sec--flush-top{padding-top:0}
.sec--alt{background-color:var(--mk-bg-subtle)}
.sec--dark{background-color:var(--mk-bg-inverse);color:var(--mk-text-inverse)}

.sec-head{max-width:60ch;margin-bottom:var(--mk-stack)}
.sec-head h2{margin-block:var(--mk-space-sm) var(--mk-space-xs)}
.sec-head p{color:var(--mk-text-muted);font-size:var(--mk-fs-lg);max-width:52ch}
.sec--dark .sec-head h2{color:var(--mk-text-inverse)}
.sec--dark .sec-head p{color:var(--mk-text-inverse-muted)}

/* Blueprint grid — pure CSS, no image request */
.blueprint{position:relative;isolation:isolate}
.blueprint::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background-image:
    linear-gradient(var(--mk-border) var(--mk-border-w),transparent var(--mk-border-w)),
    linear-gradient(90deg,var(--mk-border) var(--mk-border-w),transparent var(--mk-border-w));
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 78% 42%,#000,transparent 62%);
  mask-image:radial-gradient(circle at 78% 42%,#000,transparent 62%);
  opacity:.5;
  pointer-events:none;
}

/* Responsive grids */
.mk-grid{display:grid;gap:var(--mk-gap);grid-template-columns:1fr}
.grid-3,.grid-4{display:grid;gap:var(--mk-gap);grid-template-columns:1fr}

@media (min-width:40em){
  .mk-grid--2,.mk-grid--3,.mk-grid--4,
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64em){
  .mk-grid--3,.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-grid--4,.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ==========================================================================
   4. TYPOGRAPHY COMPONENTS
   ========================================================================== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-widest);
  text-transform:uppercase;
  color:var(--mk-text-accent);
}
.eyebrow::before{
  content:"";
  display:inline-block;
  flex:none;
  width:22px;height:var(--mk-border-w);
  background-color:var(--mk-border-strong);
}
.sec--dark .eyebrow,.cta .eyebrow{color:var(--mk-violet-100)}
.sec--dark .eyebrow::before,.cta .eyebrow::before{background-color:var(--mk-border-inverse-strong)}

.lede{
  font-size:var(--mk-fs-xl);
  color:var(--mk-text-muted);
  max-width:var(--mk-measure-narrow);
}
.sec--dark .lede{color:var(--mk-text-inverse-muted)}

.mono-label{
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}

.prose{max-width:var(--mk-measure)}
.prose > * + *{margin-top:var(--mk-space-sm)}
.prose h2,.prose h3{margin-top:var(--mk-space-lg)}
.prose a{color:var(--mk-text-accent);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin-left:var(--mk-space-md)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:var(--mk-space-3xs)}
.prose img{
  margin-block:var(--mk-space-md);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--mk-space-2xs);
  min-height:var(--mk-tap);
  padding:var(--mk-space-xs) var(--mk-space-md);
  font-family:var(--mk-font-body);
  font-size:var(--mk-fs-md);
  font-weight:var(--mk-fw-medium);
  line-height:1.2;
  text-align:center;
  border:var(--mk-border-w-thick) solid transparent;
  border-radius:var(--mk-radius);
  cursor:pointer;
  transition:
    background-color var(--mk-dur-fast) var(--mk-ease),
    border-color var(--mk-dur-fast) var(--mk-ease),
    color var(--mk-dur-fast) var(--mk-ease),
    transform var(--mk-dur-fast) var(--mk-ease);
}
.btn__arw{transition:transform var(--mk-dur-fast) var(--mk-ease)}

.btn--primary{background-color:var(--mk-action);color:var(--mk-text-on-accent)}
.btn--ghost{color:var(--mk-text);border-color:var(--mk-border-strong)}
.btn--inverse{background-color:var(--mk-bg);color:var(--mk-violet-700)}
.btn--ghost-inverse{color:var(--mk-text-inverse);border-color:var(--mk-border-inverse-strong)}
.btn--block{width:100%}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background-color:var(--mk-action-hover);transform:translateY(var(--mk-lift))}
  .btn--ghost:hover{border-color:var(--mk-border-accent);color:var(--mk-text-accent)}
  .btn--inverse:hover{background-color:var(--mk-bg-accent-subtle)}
  .btn--ghost-inverse:hover{border-color:var(--mk-text-inverse);background-color:rgba(255,255,255,.08)}
  .btn:hover .btn__arw{transform:translateX(3px)}
}
.btn--primary:active{background-color:var(--mk-action-active);transform:none}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--mk-z-header);
  background-color:rgba(255,255,255,.94);
  border-bottom:var(--mk-border-w) solid var(--mk-border);
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .site-header{
    background-color:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mk-space-sm);
  min-height:var(--mk-header-h);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--mk-space-2xs);
  font-family:var(--mk-font-display);
  font-size:var(--mk-fs-2xl);
  font-weight:var(--mk-fw-bold);
  letter-spacing:var(--mk-ls-tight);
  white-space:nowrap;
}
.brand__dot{
  flex:none;
  width:9px;height:9px;
  background-color:var(--mk-bg-accent);
  border-radius:var(--mk-radius);
  transform:rotate(45deg);
}
.brand img,.custom-logo{max-height:32px;width:auto}

.nav-links{display:none;align-items:center;gap:var(--mk-space-lg)}
.nav-links a{
  position:relative;
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
  transition:color var(--mk-dur-fast) var(--mk-ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:var(--mk-border-w-thick);
  background-color:var(--mk-text-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--mk-dur-base) var(--mk-ease);
}
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a{color:var(--mk-text-accent);font-weight:var(--mk-fw-medium)}
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after{transform:scaleX(1)}
@media (hover:hover){
  .nav-links a:hover{color:var(--mk-text-accent)}
  .nav-links a:hover::after{transform:scaleX(1)}
}

/* Services dropdown (category → service, 2 levels). The toggle button
   works by click/keyboard (assets/js/main.js initSubmenus()); :hover and
   :focus-within below are a no-JS fallback so a mouse or keyboard-only
   visitor still reaches every link even if JS never loads. */
.submenu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
}
.submenu-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--mk-dur-fast) var(--mk-ease)}
.submenu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.sub-menu{display:none}
.sub-menu.is-open{display:block}

@media (min-width:64em){
  .menu-item-has-children{position:relative}
  .submenu-toggle{width:20px;height:20px;margin-left:var(--mk-space-3xs);vertical-align:middle}
  .sub-menu{
    position:absolute;
    top:100%;left:0;
    z-index:var(--mk-z-menu);
    min-width:15rem;
    padding-block:var(--mk-space-2xs);
    background-color:var(--mk-bg);
    border:var(--mk-border-w) solid var(--mk-border-strong);
    border-radius:var(--mk-radius-lg);
    box-shadow:var(--mk-shadow-menu);
  }
  .sub-menu .sub-menu{top:calc(-1 * var(--mk-space-2xs));left:100%}
  /* A second-level item's submenu opens as a flyout to the right, not a
     panel below — its arrow should point right (not down) to match, and
     rotate to point down once open rather than the top level's up-flip. */
  .sub-menu .submenu-toggle svg{transform:rotate(-90deg)}
  .sub-menu .submenu-toggle[aria-expanded="true"] svg{transform:rotate(0deg)}
  /* A row's own link and its toggle button need to sit side by side, not
     stack — the link was display:block, which always starts a new line
     regardless of what its sibling button's own display is, pushing the
     chevron down onto its own row instead of beside the text. */
  .sub-menu li{position:relative;display:flex;align-items:center;justify-content:space-between}
  .sub-menu a{
    display:block;
    flex:1;
    min-width:0;
    padding:var(--mk-space-2xs) var(--mk-space-md);
    font-size:var(--mk-fs-md);
    color:var(--mk-text-muted);
    white-space:nowrap;
  }
  .sub-menu .submenu-toggle{margin-right:var(--mk-space-xs)}
  .sub-menu a::after{display:none}
  @media (hover:hover){.sub-menu a:hover{color:var(--mk-text-accent);background-color:var(--mk-bg-subtle)}}
  /* No-JS fallback: reveal on hover or on focus landing anywhere inside. */
  .menu-item-has-children:hover > .sub-menu,
  .menu-item-has-children:focus-within > .sub-menu{display:block}
}

.nav-actions{display:flex;align-items:center;gap:var(--mk-space-sm)}
.nav-actions .btn{display:none}

.header-search-wrap{position:relative}
.search-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--mk-tap);
  height:var(--mk-tap);
  border:var(--mk-border-w-thick) solid var(--mk-border-strong);
  border-radius:var(--mk-radius);
  color:var(--mk-text);
  transition:border-color var(--mk-dur-fast) var(--mk-ease),color var(--mk-dur-fast) var(--mk-ease);
}
.search-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.search-toggle:hover{border-color:var(--mk-border-accent);color:var(--mk-text-accent)}}
.search-toggle[aria-expanded="true"]{border-color:var(--mk-border-accent);color:var(--mk-text-accent)}

.header-search{
  position:absolute;
  top:calc(100% + var(--mk-space-2xs));
  right:0;
  z-index:var(--mk-z-menu);
  width:min(88vw,20rem);
  padding:var(--mk-space-sm);
  background-color:var(--mk-bg);
  border:var(--mk-border-w) solid var(--mk-border-strong);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-menu);
}
.header-search .search-form{display:flex;gap:var(--mk-space-2xs)}
.header-search .search-form label{flex:1;min-width:0}
.header-search .search-field{width:100%}
.header-search .search-submit{
  flex:none;
  min-width:var(--mk-tap);
  min-height:var(--mk-tap);
  padding-inline:var(--mk-space-sm);
  font-family:var(--mk-font-body);
  font-size:var(--mk-fs-md);
  font-weight:var(--mk-fw-medium);
  color:var(--mk-text-on-accent);
  background-color:var(--mk-bg-accent);
  border:none;
  border-radius:var(--mk-radius);
  cursor:pointer;
  transition:background-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){.header-search .search-submit:hover{background-color:var(--mk-action-hover)}}

.menu-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:var(--mk-tap);
  height:var(--mk-tap);
  border:var(--mk-border-w-thick) solid var(--mk-border-strong);
  border-radius:var(--mk-radius);
  transition:border-color var(--mk-dur-fast) var(--mk-ease);
}
.menu-toggle__bar{
  display:block;
  width:18px;height:var(--mk-border-w-thick);
  background-color:var(--mk-text);
  transition:transform var(--mk-dur-base) var(--mk-ease),opacity var(--mk-dur-fast) var(--mk-ease),background-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){.menu-toggle:hover{border-color:var(--mk-border-accent)}}
/* Animate the bars into a close icon when the menu is open. Each bar is
   1.5px tall with a 4px gap, so the outer bars sit 5.5px off centre —
   translate them exactly that far so the crossed lines meet at one point. */
.menu-toggle[aria-expanded="true"]{border-color:var(--mk-border-accent)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar{background-color:var(--mk-text-accent)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(2){opacity:0;transform:scaleX(0)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(3){transform:translateY(-5.5px) rotate(-45deg)}
/* These two already show their own border-colour change on focus/open, so
   the default 3px-offset focus ring reads as a distracting doubled box
   around an already-small icon — pull it in flush with the button instead. */
.menu-toggle:focus-visible,
.search-toggle:focus-visible{outline-offset:1px}

/* Off-canvas panel — genuinely mobile-only behaviour */
@media (max-width:63.9375em){
  .nav-links.is-open{
    display:flex;
    position:absolute;
    top:100%;left:0;right:0;
    z-index:var(--mk-z-menu);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--mk-space-sm) var(--mk-gutter) var(--mk-space-md);
    background-color:var(--mk-bg);
    border-bottom:var(--mk-border-w) solid var(--mk-border);
    box-shadow:var(--mk-shadow-menu);
    max-height:calc(100vh - var(--mk-header-h));
    max-height:calc(100dvh - var(--mk-header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav-links.is-open li + li{border-top:var(--mk-border-w) solid var(--mk-border)}
  /* Only items with their own toggle button need the flex row — a plain
     leaf link (most items) stays a simple block row. */
  .nav-links.is-open li.menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center}
  .nav-links.is-open a{
    display:flex;
    align-items:center;
    flex:1;
    min-height:var(--mk-tap);
    padding-block:var(--mk-space-xs);
    font-size:var(--mk-fs-base);
  }
  /* The underline reads clearly at desktop nav scale; in the stacked mobile
     panel the current-page colour alone is enough, so skip it here rather
     than risk it visually overlapping the row divider below. */
  .nav-links.is-open a::after{display:none}

  /* Services dropdown becomes an inline accordion here — a flyout doesn't
     work in a narrow scrolling column. */
  .nav-links.is-open .submenu-toggle{width:var(--mk-tap);height:var(--mk-tap)}
  .nav-links.is-open .sub-menu{flex:0 0 100%;padding-left:var(--mk-space-sm);border-top:var(--mk-border-w) solid var(--mk-border)}
  .nav-links.is-open .sub-menu li{border-top:none}
  .nav-links.is-open .sub-menu li + li{border-top:var(--mk-border-w) solid var(--mk-border)}
  .nav-links.is-open .sub-menu .sub-menu{padding-left:var(--mk-space-md)}
}

@media (min-width:64em){
  .site-nav{min-height:var(--mk-header-h-lg)}
  .nav-links{display:flex}
  .nav-actions .btn{display:inline-flex}
  .menu-toggle{display:none}
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{padding-block:var(--mk-section-y-sm) var(--mk-section-y)}
.hero__grid{display:grid;gap:var(--mk-gap-lg);align-items:center}
.hero h1{margin-block:var(--mk-space-md) var(--mk-space-sm)}
.hero h1 em{font-style:normal;color:var(--mk-text-accent)}
.hero .lede{margin-bottom:var(--mk-space-lg)}

.hero__cta{display:flex;flex-wrap:wrap;gap:var(--mk-space-xs)}
.hero__cta .btn{flex:1 1 auto}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mk-space-md) var(--mk-space-lg);
  margin-top:var(--mk-space-xl);
}
.hero__meta div{
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.hero__meta strong{
  display:block;
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-display);
  font-size:var(--mk-fs-base);
  letter-spacing:var(--mk-ls-normal);
  text-transform:none;
  color:var(--mk-text);
}

/* Copy first, lattice below it on mobile; side-by-side on large screens */
.hero .lattice{max-width:280px;margin-inline:auto}

@media (min-width:40em){
  .hero .lattice{max-width:380px}
  .hero__cta .btn{flex:0 0 auto}
}
@media (min-width:64em){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .hero .lattice{max-width:none;margin-inline:0}
  .hero__meta{flex-wrap:nowrap}
}

/* Interior page hero */
.page-hero{
  padding-block:var(--mk-section-y-sm);
  border-bottom:var(--mk-border-w) solid var(--mk-border);
}
.page-hero h1{margin-block:var(--mk-space-sm)}
.page-hero .lede{max-width:48ch}
.page-hero__grid{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-gap-lg)}
.page-hero__grid > div:first-child{flex:1;min-width:0}
.page-hero__grid > .lattice--static{flex:none}

.breadcrumb{
  margin-bottom:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
@media (hover:hover){.breadcrumb a:hover{color:var(--mk-text-accent)}}

/* ==========================================================================
   8. CAPABILITY LATTICE — signature element
   ========================================================================== */
.lattice{position:relative;width:100%;aspect-ratio:1/1}
.lattice svg{width:100%;height:100%;overflow:visible}

.lattice .ring{
  fill:none;
  stroke:var(--mk-border);
  stroke-width:1;
  transform-origin:200px 200px;
  /* animation:mk-lattice-spin 120s linear infinite; */
}
/* .lattice .ring + .ring{animation-name:mk-lattice-spin-reverse;animation-duration:90s} */
.lattice .edge{
  fill:none;
  stroke:var(--mk-border-strong);
  stroke-width:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:mk-lattice-draw 1.6s var(--mk-ease) forwards;
}
.lattice .node{
  fill:var(--mk-bg);
  stroke:var(--mk-border-accent);
  stroke-width:var(--mk-border-w-thick);
  opacity:0;
  animation:mk-lattice-pop var(--mk-dur-base) var(--mk-ease) forwards;
}
.lattice .node--core{fill:var(--mk-bg-accent)}
.lattice .plabel{
  font-family:var(--mk-font-mono);
  font-size:9.5px;
  letter-spacing:var(--mk-ls-wide);
  fill:var(--mk-text-muted);
  opacity:0;
  animation:mk-lattice-fade var(--mk-dur-base) var(--mk-ease) forwards;
}
.lattice .plabel--core{fill:var(--mk-text-accent)}
.lattice a:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:2px}
@media (hover:hover){.lattice a:hover .plabel{fill:var(--mk-text-accent)}}

@keyframes mk-lattice-draw{to{stroke-dashoffset:0}}
@keyframes mk-lattice-pop{to{opacity:1}}
@keyframes mk-lattice-fade{to{opacity:1}}
@keyframes mk-lattice-spin{to{transform:rotate(360deg)}}
@keyframes mk-lattice-spin-reverse{to{transform:rotate(-360deg)}}

/* Decorative only — hidden by default, shown from lg up (mobile first) */
.lattice--static{display:none;max-width:370px;margin-left:auto;opacity:1}
.lattice--static .ring{animation:none}
.lattice--static .edge{stroke-dashoffset:0;animation:none}
.lattice--static .node,.lattice--static .plabel{opacity:1;animation:none}
@media (min-width:64em){.lattice--static{display:block}}

/* ==========================================================================
   9. PRINCIPLE STRIP
   ========================================================================== */
.strip{
  background-color:var(--mk-bg-subtle);
  border-block:var(--mk-border-w) solid var(--mk-border);
}
.strip__inner{display:grid;grid-template-columns:1fr}
.strip__cell{
  display:flex;
  gap:var(--mk-space-2xs);
  align-items:baseline;
  padding-block:var(--mk-space-md);
  border-bottom:var(--mk-border-w) solid var(--mk-border);
}
.strip__cell:last-child{border-bottom:none}
.strip__cell .n{
  flex:none;
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  color:var(--mk-text-accent);
}
.strip__cell p{font-family:var(--mk-font-display);font-size:var(--mk-fs-lg)}
.strip__cell span{
  display:block;
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-body);
  font-size:var(--mk-fs-md);
  color:var(--mk-text-subtle);
}

@media (min-width:64em){
  .strip__inner{grid-template-columns:repeat(3,1fr)}
  .strip__cell{border-bottom:none;padding-right:var(--mk-space-md)}
  .strip__cell + .strip__cell{
    border-left:var(--mk-border-w) solid var(--mk-border);
    padding-left:var(--mk-space-md);
  }
}

/* ==========================================================================
   10. SERVICE GRID
   ========================================================================== */
/* Mobile: swipeable carousel (build plan §2.3.2 — "horizontally scrollable
   … with snap points rather than tall wrapped blocks"). The shared-hairline
   grid look returns from `sm` up, once there's room for real columns. */
.svc-grid{
  display:flex;
  gap:var(--mk-space-sm);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:var(--mk-space-3xs);
}
.svc-grid::-webkit-scrollbar{display:none}
.svc{
  display:block;
  position:relative;
  flex:0 0 82%;
  scroll-snap-align:start;
  padding:var(--mk-card-p);
  padding-bottom:calc(var(--mk-card-p) + var(--mk-space-2xs));
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius-lg);
  transition:background-color var(--mk-dur-fast) var(--mk-ease);
}
.svc__idx{
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  color:var(--mk-text-subtle);
}
.svc h3{margin-block:var(--mk-space-md) var(--mk-space-2xs)}
.svc p{margin-bottom:var(--mk-space-sm);font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.svc__tags{display:flex;flex-wrap:wrap;gap:var(--mk-space-3xs)}
.svc__tags li{
  padding:var(--mk-space-3xs) var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  color:var(--mk-text-accent);
  border:var(--mk-border-w) solid var(--mk-border-strong);
  border-radius:var(--mk-radius);
}
.svc__corner{
  position:absolute;
  top:var(--mk-card-p);right:var(--mk-card-p);
  width:8px;height:8px;
  border-top:var(--mk-border-w-thick) solid var(--mk-border-strong);
  border-right:var(--mk-border-w-thick) solid var(--mk-border-strong);
  transition:border-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){
  .svc:hover{background-color:var(--mk-bg-subtle)}
  .svc:hover .svc__corner{border-color:var(--mk-border-accent)}
}

@media (min-width:40em){
  .svc-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    overflow:visible;
    gap:0;
    padding-bottom:0;
    border-top:var(--mk-border-w) solid var(--mk-border);
    border-left:var(--mk-border-w) solid var(--mk-border);
  }
  .svc{
    flex:none;
    scroll-snap-align:none;
    border:none;
    border-radius:0;
    border-right:var(--mk-border-w) solid var(--mk-border);
    border-bottom:var(--mk-border-w) solid var(--mk-border);
  }
}
@media (min-width:64em){.svc-grid{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------------------------
   10b. PRODUCT GRID — same hairline-cell language as the service grid,
   used for the small "Mechlar products" teaser (build plan §7.1, row 10).
   -------------------------------------------------------------------------- */
.prod-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mk-border-w);
  background-color:var(--mk-border);
  border:var(--mk-border-w) solid var(--mk-border);
}
.prod{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--mk-space-md);
  padding:var(--mk-card-p);
  background-color:var(--mk-bg);
}
.prod__tag{
  align-self:flex-start;
  padding:var(--mk-space-3xs) var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-accent);
  border:var(--mk-border-w) solid var(--mk-border-strong);
  border-radius:var(--mk-radius);
}
.prod h3{font-size:var(--mk-fs-2xl);margin-bottom:var(--mk-space-2xs)}
.prod p{font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.prod--ghost{
  background-image:repeating-linear-gradient(-45deg,var(--mk-bg),var(--mk-bg) 12px,var(--mk-bg-subtle) 12px,var(--mk-bg-subtle) 24px);
}
.prod--ghost h3{color:var(--mk-text-subtle)}

@media (min-width:48em){.prod-grid{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   11. PROCESS STEPS
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:1fr;
  border-top:var(--mk-border-w) solid var(--mk-border-inverse);
}
.step{
  position:relative;
  padding:var(--mk-space-md) var(--mk-space-sm) var(--mk-space-lg);
  border-bottom:var(--mk-border-w) solid var(--mk-border-inverse);
}
.step:last-child{border-bottom:none}
.step__num{font-family:var(--mk-font-mono);font-size:var(--mk-fs-xs);color:var(--mk-violet-100)}
.step h3{
  margin-block:var(--mk-space-lg) var(--mk-space-2xs);
  font-size:var(--mk-fs-xl);
  color:var(--mk-text-inverse);
}
.step p{font-size:var(--mk-fs-md);color:var(--mk-text-inverse-subtle)}
.step::after{
  content:"";
  position:absolute;
  /* Sits astride the .steps top rail as a timeline waypoint, not over the
     STEP label — it was previously positioned at the same coordinates as
     the label text and overlapped it directly. */
  top:-7px;
  left:var(--mk-space-sm);
  width:14px;height:14px;
  background-color:var(--mk-bg-inverse);
  border:var(--mk-border-w-thick) solid var(--mk-violet-100);
  border-radius:var(--mk-radius-circle);
}
.step--done::after{background-color:var(--mk-violet-100)}

@media (min-width:40em){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-right:var(--mk-border-w) solid var(--mk-border-inverse)}
  .step:nth-child(2n){border-right:none}
}
@media (min-width:64em){
  .steps{grid-template-columns:repeat(6,1fr)}
  .step{border-bottom:none;border-right:var(--mk-border-w) solid var(--mk-border-inverse)}
  .step:nth-child(2n){border-right:var(--mk-border-w) solid var(--mk-border-inverse)}
  .step:last-child{border-right:none}
}

/* ==========================================================================
   12. METRICS
   ========================================================================== */
/* Hairline dividers via a background-colour "bleeding through" the grid
   gap — same technique as the product grid — rather than per-cell borders.
   This keeps the dividers correct regardless of item count or column
   count, with no nth-child specificity juggling needed between breakpoints. */
.metrics{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--mk-border-w);
  background-color:var(--mk-border);
}
.sec--dark .metrics{background-color:var(--mk-border-inverse)}
.metric{
  padding:var(--mk-space-md);
  background-color:var(--mk-bg);
}
.sec--dark .metric{background-color:var(--mk-bg-inverse)}
.metric__value{
  font-family:var(--mk-font-display);
  font-weight:var(--mk-fw-semibold);
  font-size:var(--mk-fs-4xl);
  line-height:1;
  color:var(--mk-text-accent);
}
.metric__label{
  margin-top:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.metric__context{margin-top:var(--mk-space-3xs);font-size:var(--mk-fs-md);color:var(--mk-text-muted)}

.sec--dark .metric__value{color:var(--mk-text-inverse)}
.sec--dark .metric__label{color:var(--mk-text-inverse-subtle)}
.sec--dark .metric__context{color:var(--mk-text-inverse-muted)}

@media (min-width:40em){.metric{padding:var(--mk-space-lg)}}
@media (min-width:64em){
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metrics--3{grid-template-columns:repeat(3,1fr)}
  .metrics--2{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   13. TESTIMONIAL
   ========================================================================== */
.testimonial{
  display:flex;
  flex-direction:column;
  /* Video and text testimonials have very different natural content
     heights (a media block vs. a few lines of quote) — this floor plus
     .testimonial__quote's flex:1 keeps every card in the grid the same
     height regardless of which kind it is. */
  min-height:22rem;
  padding:var(--mk-card-p);
  background-color:var(--mk-bg);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
  transition:border-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){.testimonial:hover{border-color:var(--mk-border-strong)}}

.testimonial__mark{
  margin-bottom:var(--mk-space-sm);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-base);
  letter-spacing:var(--mk-ls-wide);
  color:var(--mk-text-accent);
}
.testimonial__quote{
  flex:1;
  margin-bottom:var(--mk-space-md);
  font-family:var(--mk-font-body);
  font-style:normal;
  font-size:var(--mk-fs-lg);
  color:var(--mk-text);
  max-width:40ch;
}
.testimonial__who{display:flex;align-items:center;gap:var(--mk-space-2xs);margin-top:auto}
.testimonial__avatar{
  flex:none;
  width:36px;height:36px;
  object-fit:cover;
  background-color:var(--mk-violet-100);
  border-radius:var(--mk-radius);
}
.testimonial__name{
  display:block;
  font-family:var(--mk-font-display);
  font-weight:var(--mk-fw-semibold);
  font-size:var(--mk-fs-md);
}
.testimonial__role{
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}

/* Video testimonial variant */
.testimonial--video{padding:0;overflow:hidden}
.testimonial--video .testimonial__who{padding:var(--mk-card-p);margin-top:0}
/* max-height stops the media block growing taller than a text card at wide
   breakpoints, where aspect-ratio alone would otherwise scale it well past
   what a few lines of quote text need. */
.testimonial__media{position:relative;aspect-ratio:16/10;max-height:15rem;background-color:var(--mk-violet-100)}
.testimonial__media video{width:100%;height:100%;object-fit:cover}
/* Thumbnails here are often a client/company logo rather than a headshot
   (portrait-shaped, transparent background) — contain + padding shows the
   whole mark instead of cropping into it the way a cover-fit photo would. */
.testimonial__media img{width:100%;height:100%;object-fit:contain;padding:var(--mk-space-lg);box-sizing:border-box}
.testimonial__play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  color:var(--mk-text-on-accent);
  background-color:var(--mk-bg-accent);
  border:none;
  border-radius:var(--mk-radius-circle);
  cursor:pointer;
  transition:background-color var(--mk-dur-fast) var(--mk-ease),transform var(--mk-dur-fast) var(--mk-ease);
}
.testimonial__play svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
@media (hover:hover){
  .testimonial__play:hover{background-color:var(--mk-action-hover);transform:translate(-50%,-50%) scale(1.06)}
}

/* Testimonial showcase: one compiled reel video + a vertically-sliding
   carousel of text testimonials, side by side on desktop. */
.testimonial-showcase{display:grid;gap:var(--mk-gap)}
.testimonial-showcase--no-reel .testimonial-carousel{max-width:40rem;margin-inline:auto}
@media (min-width:48em){
  .testimonial-showcase:not(.testimonial-showcase--no-reel){grid-template-columns:1fr 1fr}
}

.testimonial-reel{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background-color:var(--mk-bg-inverse);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
}
.testimonial-reel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.testimonial-reel__trigger{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@media (min-width:48em){.testimonial-reel{aspect-ratio:auto;height:28rem}}

.testimonial-carousel__track{
  display:flex;
  flex-direction:column;
  gap:var(--mk-space-sm);
  height:22rem;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.testimonial-carousel__track::-webkit-scrollbar{display:none}
.testimonial-carousel__track > *{flex:0 0 100%;min-height:0;height:100%;scroll-snap-align:start}
@media (min-width:48em){.testimonial-carousel__track{height:28rem}}

/* Vertical carousels keep their arrows visible at every breakpoint (this
   is a permanent feature, not a mobile-only fallback like the horizontal
   card carousels), just rotated to point up/down instead of left/right. */
.testimonial-carousel .carousel__controls{justify-content:center;margin-top:var(--mk-space-sm)}
.testimonial-carousel .carousel__arrow svg{transform:rotate(90deg)}

/* --------------------------------------------------------------------------
   13b. VIDEO MODAL
   -------------------------------------------------------------------------- */
.video-modal{position:fixed;inset:0;z-index:var(--mk-z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--mk-space-sm)}
.video-modal[hidden]{display:none}
.video-modal__backdrop{position:absolute;inset:0;background-color:rgba(26,21,35,.8)}
.video-modal__panel{
  position:relative;
  z-index:var(--mk-z-base);
  width:100%;
  max-width:48rem;
  /* Video letterboxing is conventionally pure black regardless of brand
     palette — same exception class as the print stylesheet's #000/#fff. */
  background-color:#000;
  border-radius:var(--mk-radius-lg);
  overflow:hidden;
}
.video-modal__panel video{display:block;width:100%;max-height:80vh}
.video-modal__close{
  position:absolute;
  top:var(--mk-space-2xs);right:var(--mk-space-2xs);
  z-index:var(--mk-z-raised);
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--mk-tap);height:var(--mk-tap);
  color:#fff;
  background-color:rgba(0,0,0,.5);
  border:none;
  border-radius:var(--mk-radius-circle);
  cursor:pointer;
}
.video-modal__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.video-modal__close:hover{background-color:rgba(0,0,0,.75)}}

/* ==========================================================================
   14. TEAM CARD
   ========================================================================== */
.team-card__photo{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  /* --mk-bg, not --mk-bg-subtle: the latter is also .sec--alt's background,
     so a no-photo placeholder would nearly disappear against it there. */
  background-color:var(--mk-bg);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
  filter:grayscale(1);
  transition:filter var(--mk-dur-base) var(--mk-ease);
}
@media (hover:hover){.team-card:hover .team-card__photo{filter:grayscale(0)}}

.team-card h3{margin-top:var(--mk-space-sm);font-size:var(--mk-fs-xl)}
.team-card__role{
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-accent);
}
.team-card__bio{margin-top:var(--mk-space-2xs);font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.team-card__links{display:flex;gap:var(--mk-space-3xs);margin-top:var(--mk-space-2xs)}
.team-card__links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--mk-tap);
  min-height:var(--mk-tap);
  color:var(--mk-text-subtle);
  transition:color var(--mk-dur-fast) var(--mk-ease);
}
.team-card__links a:first-child{margin-left:calc(var(--mk-space-xs) * -1)}
@media (hover:hover){.team-card__links a:hover{color:var(--mk-text-accent)}}
.team-card__links svg{width:18px;height:18px;fill:currentColor}

/* ==========================================================================
   15. CLIENT LOGOS
   ========================================================================== */
.logos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--mk-space-md);
  padding-block:var(--mk-space-md);
  border-block:var(--mk-border-w) solid var(--mk-border);
  text-align:center;
}
.logos__label{
  flex:none;
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-widest);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.logos__items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--mk-space-md) var(--mk-space-lg);
}
.logos img{
  max-height:28px;width:auto;
  filter:grayscale(1);
  opacity:.55;
  transition:filter var(--mk-dur-fast) var(--mk-ease),opacity var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){.logos img:hover{filter:grayscale(0);opacity:1}}

@media (min-width:64em){
  .logos{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
    padding-block:var(--mk-space-lg);
  }
  .logos__items{justify-content:flex-end}
}

/* --------------------------------------------------------------------------
   15b. CAROUSEL CONTROLS — shared by the services, work, and testimonials
   mobile carousels. The track itself is a native scroll-snap container and
   works fully by touch/swipe without these; JS only wires clicks + autoplay.
   -------------------------------------------------------------------------- */
.carousel__controls{display:flex;justify-content:flex-end;gap:var(--mk-space-2xs);margin-top:var(--mk-space-sm)}
.carousel__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--mk-tap);
  height:var(--mk-tap);
  color:var(--mk-text);
  background-color:var(--mk-bg);
  border:var(--mk-border-w-thick) solid var(--mk-border-strong);
  border-radius:var(--mk-radius-circle);
  cursor:pointer;
  transition:border-color var(--mk-dur-fast) var(--mk-ease),color var(--mk-dur-fast) var(--mk-ease),opacity var(--mk-dur-fast) var(--mk-ease);
}
.carousel__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.carousel__arrow:disabled{opacity:.35;cursor:default}
@media (hover:hover){.carousel__arrow:not(:disabled):hover{border-color:var(--mk-border-accent);color:var(--mk-text-accent)}}

/* Controls only make sense while the track is actually a horizontal
   carousel — hide them again at each track's own grid breakpoint. */
@media (min-width:40em){
  .carousel--svc .carousel__controls{display:none}
}
@media (min-width:48em){.carousel--work .carousel__controls{display:none}}

/* ==========================================================================
   16. WORK CARDS & FILTERS
   ========================================================================== */
/* Mobile: swipeable carousel, same pattern as the service grid above. */
.work-grid{
  display:flex;
  gap:var(--mk-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:var(--mk-space-3xs);
}
.work-grid::-webkit-scrollbar{display:none}
.work-grid > .work-card{flex:0 0 85%;scroll-snap-align:start}
@media (min-width:48em){
  .work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-bottom:0}
  .work-grid > .work-card{flex:none}
}

.work-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
  transition:border-color var(--mk-dur-fast) var(--mk-ease),transform var(--mk-dur-fast) var(--mk-ease);
}
.work-card > a{display:flex;flex-direction:column;height:100%}
@media (hover:hover){
  .work-card:hover{border-color:var(--mk-border-strong);transform:translateY(var(--mk-lift-lg))}
}

.work-card__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,var(--mk-violet-050),var(--mk-violet-100));
}
.work-card__media img{width:100%;height:100%;object-fit:cover}
.work-card__cat{
  position:absolute;
  bottom:var(--mk-space-2xs);left:var(--mk-space-xs);
  z-index:var(--mk-z-base);
  padding:var(--mk-space-3xs) var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-violet-700);
  background-color:rgba(255,255,255,.92);
  border-radius:var(--mk-radius);
}
.work-card__body{display:flex;flex-direction:column;flex:1;padding:var(--mk-card-p)}
.work-card h3{margin-bottom:var(--mk-space-3xs);font-size:var(--mk-fs-2xl)}
.work-card p{flex:1;margin-bottom:var(--mk-space-sm);font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.work-card__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--mk-space-sm);
  margin-top:auto;
  padding-top:var(--mk-space-sm);
  border-top:var(--mk-border-w) solid var(--mk-border);
}
.work-card__metric{
  font-family:var(--mk-font-display);
  font-weight:var(--mk-fw-semibold);
  color:var(--mk-text-accent);
}
.work-card__metric span{
  display:block;
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  font-weight:var(--mk-fw-regular);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.work-card__view{font-size:var(--mk-fs-md);font-weight:var(--mk-fw-medium);color:var(--mk-text-accent)}

/* --------------------------------------------------------------------------
   16b. BLOG POST CARD — same card language as .work-card, plus a byline row.
   -------------------------------------------------------------------------- */
.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
  transition:border-color var(--mk-dur-fast) var(--mk-ease),transform var(--mk-dur-fast) var(--mk-ease);
}
.post-card > a{display:flex;flex-direction:column;height:100%}
@media (hover:hover){.post-card:hover{border-color:var(--mk-border-strong);transform:translateY(var(--mk-lift-lg))}}

.post-card__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,var(--mk-violet-050),var(--mk-violet-100));
}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__cat{
  position:absolute;
  bottom:var(--mk-space-2xs);left:var(--mk-space-xs);
  z-index:var(--mk-z-base);
  padding:var(--mk-space-3xs) var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-violet-700);
  background-color:rgba(255,255,255,.92);
  border-radius:var(--mk-radius);
}
.post-card__body{display:flex;flex-direction:column;flex:1;padding:var(--mk-card-p)}
.post-card__byline{
  display:flex;
  align-items:center;
  gap:var(--mk-space-3xs);
  margin-bottom:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.post-card__avatar{flex:none;width:20px;height:20px;border-radius:var(--mk-radius-circle)}
.post-card h3{margin-bottom:var(--mk-space-3xs);font-size:var(--mk-fs-2xl)}
.post-card__excerpt{flex:1;margin-bottom:var(--mk-space-sm);font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.post-card__more{font-size:var(--mk-fs-md);font-weight:var(--mk-fw-medium);color:var(--mk-text-accent)}

.is-hidden{display:none !important}
.no-results{
  padding:var(--mk-space-xl) var(--mk-space-sm);
  text-align:center;
  color:var(--mk-text-muted);
  border:var(--mk-border-w) dashed var(--mk-border-strong);
  border-radius:var(--mk-radius);
}

/* --------------------------------------------------------------------------
   16b. INFO PANEL — numbered hairline rows. Used for "Why Mechlar" and
   service "Best for" panels (build plan §3.5, "why-panel"/"why-row").
   -------------------------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:1fr;gap:var(--mk-gap-lg);align-items:center}
/* The contact form and the details panel beside it are comparable, both
   top-anchored content — center-aligning them (right for a short "Best
   for" panel beside a paragraph, .why-grid's other use) left a large gap
   above the shorter panel here instead. */
.why-grid--top{align-items:start}
@media (min-width:64em){.why-grid{grid-template-columns:1fr 1fr}}

.about-story__image{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
}
.about-story h2 em{font-style:normal;color:var(--mk-text-accent)}

.info-panel{border:var(--mk-border-w) solid var(--mk-border);border-radius:var(--mk-radius-lg)}
.info-row{
  display:flex;
  gap:var(--mk-space-sm);
  padding:var(--mk-space-md) var(--mk-space-lg);
  border-bottom:var(--mk-border-w) solid var(--mk-border);
}
.info-row:last-child{border-bottom:none}
.info-row__k{
  flex:none;
  min-width:2ch;
  padding-top:.2em;
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  color:var(--mk-text-accent);
}
.info-row h3{font-size:var(--mk-fs-xl);margin-bottom:var(--mk-space-3xs)}
.info-row p{font-size:var(--mk-fs-md);color:var(--mk-text-muted)}

/* --------------------------------------------------------------------------
   16c. CAPABILITY GRID — service "what's included" cells.
   -------------------------------------------------------------------------- */
.cap-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mk-border-w);
  background-color:var(--mk-border);
  border:var(--mk-border-w) solid var(--mk-border);
}
.cap{padding:var(--mk-card-p);background-color:var(--mk-bg)}
.cap h3{font-size:var(--mk-fs-xl);margin-bottom:var(--mk-space-2xs)}
.cap p{font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
@media (min-width:40em){.cap-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.cap-grid{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------------------------
   16d. CHECK LIST — short bullet items ("Best for").
   -------------------------------------------------------------------------- */
.check-list{display:grid;gap:var(--mk-space-2xs)}
.check-list li{
  display:flex;
  gap:var(--mk-space-2xs);
  align-items:baseline;
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
}
.check-list li::before{content:"—";flex:none;color:var(--mk-text-accent)}

/* ==========================================================================
   17. CTA PANEL
   ========================================================================== */
.cta{
  position:relative;
  overflow:hidden;
  padding:var(--mk-panel-p);
  text-align:center;
  background-color:var(--mk-bg-accent);
  color:var(--mk-text-inverse);
  border-radius:var(--mk-radius-lg);
}
.cta::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,#000,transparent 70%);
  mask-image:radial-gradient(circle at 50% 0,#000,transparent 70%);
  pointer-events:none;
}
.cta > *{position:relative}
.cta h2{margin-bottom:var(--mk-space-2xs)}
.cta p{max-width:46ch;margin:0 auto var(--mk-space-lg);color:var(--mk-text-inverse-muted)}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--mk-space-xs)}
.cta__btns .btn{flex:1 1 auto}
@media (min-width:40em){.cta__btns .btn{flex:0 0 auto}}

/* ==========================================================================
   18. FAQ ACCORDION
   ========================================================================== */
/* No max-width here (deliberately, unlike most text blocks) — the +/- icon
   uses justify-content:space-between to sit at the row's own right edge,
   so the row needs to span the full section width or the icon lands well
   short of the section's actual right edge instead. */
.faq__group{
  margin-top:var(--mk-space-xl);
  margin-bottom:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-accent);
}
.faq__group:first-child{margin-top:0}
.faq__item{border-bottom:var(--mk-border-w) solid var(--mk-border)}
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mk-space-sm);
  width:100%;
  min-height:var(--mk-tap);
  padding-block:var(--mk-space-sm);
  text-align:left;
  font-family:var(--mk-font-display);
  font-weight:var(--mk-fw-semibold);
  font-size:var(--mk-fs-xl);
  color:var(--mk-text);
}
.faq__icon{position:relative;flex:none;width:20px;height:20px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background-color:var(--mk-text-accent)}
.faq__icon::before{top:9px;left:1px;width:18px;height:var(--mk-border-w-thick)}
.faq__icon::after{
  top:1px;left:9px;
  width:var(--mk-border-w-thick);height:18px;
  transition:opacity var(--mk-dur-base) var(--mk-ease);
}
.faq__item.is-open .faq__icon::after{opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--mk-dur-base) var(--mk-ease)}
.faq__a p{padding-bottom:var(--mk-space-sm);color:var(--mk-text-muted);max-width:64ch}

/* --------------------------------------------------------------------------
   18b. JOB CARD — Careers listing row.
   -------------------------------------------------------------------------- */
.job-card{
  display:flex;
  flex-direction:column;
  gap:var(--mk-space-sm);
  padding-block:var(--mk-space-lg);
  border-bottom:var(--mk-border-w) solid var(--mk-border);
}
.job-card:last-child{border-bottom:none}
.job-card h3{margin-bottom:var(--mk-space-3xs)}
.job-card .btn{align-self:flex-start}
@media (min-width:48em){
  .job-card{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--mk-space-md)}
  .job-card .btn{align-self:center;flex:none}
}

/* ==========================================================================
   19. FORMS
   ========================================================================== */
.field{margin-bottom:var(--mk-space-sm)}
.field label{
  display:block;
  margin-bottom:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text);
}
.field .req{color:var(--mk-text-accent)}

.field input,.field select,.field textarea,
input[type="text"],input[type="email"],input[type="tel"],
input[type="url"],input[type="search"],select,textarea{
  width:100%;
  min-height:var(--mk-tap);
  padding:var(--mk-space-xs) var(--mk-space-sm);
  font-family:var(--mk-font-body);
  /* 16px minimum — prevents iOS Safari zooming the page on focus */
  font-size:var(--mk-fs-base);
  color:var(--mk-text);
  background-color:var(--mk-bg-subtle);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--mk-dur-fast) var(--mk-ease),background-color var(--mk-dur-fast) var(--mk-ease);
}
select{
  padding-right:var(--mk-space-xl);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A5266' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--mk-space-sm) center;
  background-size:12px;
}
.field textarea,textarea{min-height:130px;resize:vertical}

.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none;
  background-color:var(--mk-bg);
  border-color:var(--mk-border-accent);
  box-shadow:var(--mk-shadow-focus);
}
::placeholder{color:var(--mk-text-subtle);opacity:1}

.form-note{margin-top:var(--mk-space-2xs);font-size:var(--mk-fs-md);color:var(--mk-text-subtle)}
.form-message{
  margin-bottom:var(--mk-space-sm);
  padding:var(--mk-space-sm);
  font-size:var(--mk-fs-md);
  border-radius:var(--mk-radius);
}
.form-message--success{background-color:var(--mk-success-bg);color:var(--mk-success);border:var(--mk-border-w) solid var(--mk-success)}
.form-message--error{background-color:var(--mk-error-bg);color:var(--mk-error);border:var(--mk-border-w) solid var(--mk-error)}

/* Honeypot — present in the DOM (so a bot's naive scraper still fills it
   in) but invisible and unreachable to real visitors and screen readers. */
.field-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field-error{margin-top:var(--mk-space-3xs);font-size:var(--mk-fs-sm);color:var(--mk-error)}
[aria-invalid="true"]{border-color:var(--mk-error) !important}

.field-phone{display:flex;gap:var(--mk-space-2xs)}
.field-phone select{
  flex:0 0 auto;
  width:auto;
  max-width:10.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.field-phone input{flex:1;min-width:0}

.field-datetime{display:flex;gap:var(--mk-space-2xs)}
.field-datetime input{flex:1;min-width:0}

.field-consent{display:flex}
.field-consent label{
  display:flex;
  align-items:flex-start;
  gap:var(--mk-space-2xs);
  font-family:var(--mk-font-body);
  font-size:var(--mk-fs-md);
  font-weight:var(--mk-fw-regular);
  text-transform:none;
  letter-spacing:normal;
  color:var(--mk-text-muted);
}
.field-consent input[type="checkbox"]{
  flex:none;
  width:18px;height:18px;
  min-height:0;
  margin-top:.15em;
  padding:0;
  background-color:transparent;
  border-radius:2px;
  /* .field input above sets appearance:none for text-style inputs; undo it
     here so the native checkbox (and its check mark) actually renders. */
  -webkit-appearance:auto;
  appearance:auto;
  accent-color:var(--mk-bg-accent);
}
.field-consent a{color:var(--mk-text-accent);text-decoration:underline}

/* ==========================================================================
   20. BOOKING MODAL
   ========================================================================== */
.booking-modal{position:fixed;inset:0;z-index:var(--mk-z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--mk-space-sm)}
.booking-modal[hidden]{display:none}
.booking-modal__backdrop{position:absolute;inset:0;background-color:rgba(26,21,35,.8)}
.booking-modal__panel{
  position:relative;
  z-index:var(--mk-z-base);
  width:100%;
  max-width:var(--mk-container-narrow);
  max-height:90vh;
  overflow-y:auto;
  padding:var(--mk-space-lg);
  background-color:var(--mk-bg);
  border-radius:var(--mk-radius-lg);
}
.booking-modal__heading{margin-bottom:var(--mk-space-3xs)}
.booking-modal__lede{margin-bottom:var(--mk-space-md);color:var(--mk-text-muted)}
.booking-modal__close{
  position:absolute;
  top:var(--mk-space-2xs);right:var(--mk-space-2xs);
  z-index:var(--mk-z-raised);
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--mk-tap);height:var(--mk-tap);
  color:var(--mk-text);
  background-color:transparent;
  border:none;
  border-radius:var(--mk-radius-circle);
  cursor:pointer;
}
.booking-modal__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.booking-modal__close:hover{background-color:var(--mk-bg-subtle)}}

/* ==========================================================================
   21. PAGINATION
   ========================================================================== */
.pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--mk-space-2xs);
  margin-top:var(--mk-space-xl);
}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--mk-tap);
  min-height:var(--mk-tap);
  padding-inline:var(--mk-space-2xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
}
.pagination .page-numbers.current{
  background-color:var(--mk-bg-accent);
  border-color:var(--mk-bg-accent);
  color:var(--mk-text-on-accent);
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.site-footer{
  padding-block:var(--mk-space-xl) var(--mk-space-lg);
  border-top:var(--mk-border-w) solid var(--mk-border);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mk-space-lg);
  margin-bottom:var(--mk-space-xl);
}
.footer-brand p{
  max-width:34ch;
  margin-top:var(--mk-space-sm);
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
}
.footer-col h4{
  margin-bottom:var(--mk-space-sm);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  font-weight:var(--mk-fw-regular);
  letter-spacing:var(--mk-ls-wider);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}
.footer-col a{
  display:flex;
  align-items:center;
  min-height:var(--mk-tap);
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
  transition:color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover:hover){.footer-col a:hover{color:var(--mk-text-accent)}}
/* Scoped to the <ul> specifically — .footer-social__icon is a sibling of
   that list, not part of it, and was previously (and wrongly) also
   matched by a bare ".footer-col--contact a" rule here, which pushed its
   icon to align-items:flex-start instead of the centred circle it needs. */
.footer-col--contact ul a{gap:var(--mk-space-2xs);align-items:flex-start}
.footer-col--contact ul a svg{flex:none;width:16px;height:16px;margin-top:.2em;fill:currentColor}

.footer-social{display:flex;gap:var(--mk-space-2xs);margin-top:var(--mk-space-md)}
.footer-social__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  flex:none;
  color:var(--mk-text);
  background-color:var(--mk-bg);
  border:var(--mk-border-w-thick) solid var(--mk-border-strong);
  border-radius:var(--mk-radius-circle);
  transition:border-color var(--mk-dur-fast) var(--mk-ease),color var(--mk-dur-fast) var(--mk-ease);
}
.footer-social__icon svg{width:18px;height:18px;fill:currentColor}
@media (hover:hover){.footer-social__icon:hover{border-color:var(--mk-border-accent);color:var(--mk-text-accent)}}

.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:var(--mk-space-2xs);
  padding-top:var(--mk-space-md);
  border-top:var(--mk-border-w) solid var(--mk-border);
}
.footer-bottom p{
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  color:var(--mk-text-subtle);
}
.footer-bottom__link{
  /* Inline text link — exempt from the 44px tap-target rule per WCAG 2.5.5's
     own inline exception; enforcing it here would break the text flow. */
  font:inherit;
  color:inherit;
  text-decoration:underline;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
@media (hover:hover){.footer-bottom__link:hover{color:var(--mk-text-accent)}}

@media (min-width:40em){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-col a{min-height:0;padding-block:var(--mk-space-3xs)}
}
@media (min-width:64em){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}
}

/* ==========================================================================
   23. MOTION & REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--mk-dur-slow) var(--mk-ease),transform var(--mk-dur-slow) var(--mk-ease);
}
.reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   24. UTILITIES
   ========================================================================== */
.text-center{text-align:center}
.text-balance{text-wrap:balance}
.flow > * + *{margin-top:var(--mk-space-sm)}
.stack-sm{margin-top:var(--mk-space-sm)}
.stack-md{margin-top:var(--mk-space-md)}
.stack-lg{margin-top:var(--mk-space-lg)}
.mk-hide{display:none}
@media (min-width:64em){.mk-hide-lg{display:none}}

/* ==========================================================================
   25. WORDPRESS CORE CLASSES
   ========================================================================== */
.alignleft{float:left;margin-right:var(--mk-space-md);margin-bottom:var(--mk-space-sm)}
.alignright{float:right;margin-left:var(--mk-space-md);margin-bottom:var(--mk-space-sm)}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:var(--mk-container-wide)}
.alignfull{max-width:none;width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{
  margin-top:var(--mk-space-2xs);
  font-size:var(--mk-fs-md);
  color:var(--mk-text-muted);
}
.sticky{position:relative}
.bypostauthor{display:block}
.gallery{display:grid;gap:var(--mk-space-2xs);grid-template-columns:repeat(2,1fr)}
@media (min-width:48em){
  .gallery-columns-3{grid-template-columns:repeat(3,1fr)}
  .gallery-columns-4{grid-template-columns:repeat(4,1fr)}
}

/* --------------------------------------------------------------------------
   25b. COMMENTS
   -------------------------------------------------------------------------- */
.comments-title{margin-bottom:var(--mk-space-md)}
.comment-list{list-style:none;margin-bottom:var(--mk-space-lg)}
.comment-list .children{list-style:none;margin-left:var(--mk-space-lg)}
.comment-body{padding-block:var(--mk-space-md);border-bottom:var(--mk-border-w) solid var(--mk-border)}
.comment-author .fn{font-family:var(--mk-font-display);font-weight:var(--mk-fw-semibold)}
.comment-metadata{font-family:var(--mk-font-mono);font-size:var(--mk-fs-xs);color:var(--mk-text-subtle)}
.comment-content p{margin-top:var(--mk-space-2xs);color:var(--mk-text-muted)}
.comment-reply-link{color:var(--mk-text-accent);font-size:var(--mk-fs-md)}
.comment-form .comment-notes,.comment-form .logged-in-as{margin-bottom:var(--mk-space-sm);color:var(--mk-text-muted);font-size:var(--mk-fs-md)}

/* --------------------------------------------------------------------------
   25d. BLOG SINGLE — byline, featured image, and "Latest posts" sidebar
   -------------------------------------------------------------------------- */
.post-layout{display:grid;grid-template-columns:1fr;gap:var(--mk-gap-lg)}
@media (min-width:64em){.post-layout{grid-template-columns:2fr 1fr;align-items:start}}

.post-byline{display:flex;align-items:center;gap:var(--mk-space-2xs);margin-bottom:var(--mk-space-md)}
.post-byline__avatar{flex:none;border-radius:var(--mk-radius-circle)}
.post-byline__name{display:block;font-family:var(--mk-font-display);font-weight:var(--mk-fw-semibold);font-size:var(--mk-fs-md)}
.post-byline__meta{
  display:block;
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-xs);
  letter-spacing:var(--mk-ls-wide);
  text-transform:uppercase;
  color:var(--mk-text-subtle);
}

.post-featured-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  margin-bottom:var(--mk-space-lg);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius);
}

.post-layout__sidebar{display:flex;flex-direction:column;gap:var(--mk-gap-lg)}
/* Sticky on the sidebar as a whole (not each card individually) so the
   "Latest Blogs" card and the CTA card beneath it scroll together as one
   unit past the (usually much taller) article body. */
@media (min-width:64em){.post-layout__sidebar{position:sticky;top:calc(var(--mk-header-h-lg) + var(--mk-space-md));align-self:start}}

.post-sidebar-card{
  padding:var(--mk-card-p);
  background-color:var(--mk-bg-subtle);
  border:var(--mk-border-w) solid var(--mk-border);
  border-radius:var(--mk-radius-lg);
}
.post-sidebar-card h2{
  font-size:var(--mk-fs-xl);
  margin-bottom:var(--mk-space-sm);
  padding-bottom:var(--mk-space-xs);
  border-bottom:var(--mk-border-w-thick) solid var(--mk-border-accent);
}
.post-sidebar-card ul{list-style:none}
.post-sidebar-card li{padding-block:var(--mk-space-xs);border-bottom:var(--mk-border-w) solid var(--mk-border)}
.post-sidebar-card li:last-child{border-bottom:none}
.post-sidebar-card li a{display:block;font-size:var(--mk-fs-md);font-weight:var(--mk-fw-medium);color:var(--mk-text)}
@media (hover:hover){.post-sidebar-card li a:hover{color:var(--mk-text-accent)}}
.post-sidebar-card li time{
  display:block;
  margin-top:var(--mk-space-3xs);
  font-family:var(--mk-font-mono);
  font-size:var(--mk-fs-2xs);
  color:var(--mk-text-subtle);
}
.post-sidebar-card p{color:var(--mk-text-muted);font-size:var(--mk-fs-md); margin-bottom:50px}

/* --------------------------------------------------------------------------
   25c. CONSENT BANNER
   -------------------------------------------------------------------------- */
.consent-banner{
  position:fixed;
  left:var(--mk-space-sm);right:var(--mk-space-sm);bottom:var(--mk-space-sm);
  z-index:var(--mk-z-overlay);
  display:flex;
  flex-direction:column;
  gap:var(--mk-space-sm);
  padding:var(--mk-space-md);
  background-color:var(--mk-bg);
  border:var(--mk-border-w) solid var(--mk-border-strong);
  border-radius:var(--mk-radius-lg);
  box-shadow:var(--mk-shadow-overlay);
}
.consent-banner p{font-size:var(--mk-fs-md);color:var(--mk-text-muted)}
.consent-banner__actions{display:flex;gap:var(--mk-space-xs);flex-wrap:wrap}
.consent-banner__actions .btn{flex:1 1 auto}
@media (min-width:40em){
  .consent-banner{
    left:auto;right:var(--mk-space-lg);bottom:var(--mk-space-lg);
    flex-direction:row;
    align-items:center;
    max-width:32rem;
  }
  .consent-banner__actions .btn{flex:0 0 auto}
}

/* ==========================================================================
   26. REDUCED MOTION — mandatory
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .lattice .edge{stroke-dashoffset:0;animation:none}
  .lattice .node,.lattice .plabel{opacity:1;animation:none}
  .reveal{opacity:1;transform:none}
  .btn:hover,.work-card:hover{transform:none}
}

/* ==========================================================================
   27. PRINT
   ========================================================================== */
@media print{
  .site-header,.site-footer,.cta,.filters,.menu-toggle,.skip-link,.lattice{display:none !important}
  body{color:#000;background:#fff;font-size:12pt}
  .blueprint::before{display:none}
  .wrap{max-width:none;padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .sec{padding-block:1rem}
}