/* KSJ rebuild - Carta.com/uk/en design system, exact values from pulled front-end */

/* ---------- Fonts (files reused from the pulled reference) ---------- */
@font-face{font-family:sangBleuVersailles;src:url(../assets/fonts/sangbleu-versailles-regular.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:sangBleuVersailles;src:url(../assets/fonts/sangbleu-versailles-italic.woff2) format("woff2");font-display:swap;font-weight:400;font-style:italic}
@font-face{font-family:"sangBleuVersailles Fallback";src:local("Arial");ascent-override:97.92%;descent-override:34.17%;line-gap-override:0.00%;size-adjust:111.21%}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/plus-jakarta-sans-var.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;src:url(../assets/fonts/plus-jakarta-sans-var-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("Arial");ascent-override:76.16%;descent-override:20.43%;line-gap-override:0.00%;size-adjust:134.59%}

/* ---------- Tokens (verbatim values from carta :root) ---------- */
:root{
  --color-black:#1a1a1a;
  --color-white:#fff;
  --color-gray-10:#f1f1f1;
  --color-gray-20:#ededed;
  --color-gray-30:#e9eaea;
  --color-gray-40:#dedfdf;
  --color-gray-60:#a7aaaa;
  --color-gray-70:#9c9f9f;
  --color-gray-80:#656b6b;
  --color-gray-90:#394040;
  --color-orange-60:#FF4800;
  --color-coral:var(--color-orange-60);
  --color-dark-gray:var(--color-gray-90);
  --color-gray:var(--color-gray-30);
  --color-light-gray:var(--color-gray-10);
  --color-default-dark:var(--color-black);
  --color-subtle-dark:var(--color-gray-90);
  --color-default-light:var(--color-white);
  --color-very-subtle:var(--color-gray-60);
  --radius-subtle:.5rem;
  --font-heading:"sangBleuVersailles","sangBleuVersailles Fallback",serif;
  --font-body:"Plus Jakarta Sans",sans-serif;
  --font-mono:"IBM Plex Mono","IBM Plex Mono Fallback",monospace;
  --spacing-page-margin:clamp(1rem,4vw,2.5rem);
  --nav-bar-height:5rem;
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  /* type scale */
  --text-heading-2xl:5.25rem;
  --text-heading-xl:4.5rem;
  --text-heading-lg:3rem;
  --text-heading-md:2.25rem;
  --text-heading-sm:1.75rem;
  --text-heading-xs:1.5rem;
  --text-heading-2xs:1.375rem;
  --text-subhead:1.5rem;
  --text-body-xl:1.25rem;
  --text-body-lg:1.125rem;
  --text-body-base:1rem;
  --text-eyebrow-lg:1.25rem;
  --text-eyebrow:1rem;
}

*,:before,:after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--color-black);background:var(--color-white);padding-top:4.5rem}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;cursor:pointer}
ul{list-style:none}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-black);color:#fff;padding:.5rem 1rem;z-index:2147483647}
.skip-link:focus{left:0}

/* ---------- Type utilities (exact scale) ---------- */
.font-heading{font-family:var(--font-heading);font-weight:400}
.t-heading-2xl{font-family:var(--font-heading);font-size:5.25rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-xl{font-family:var(--font-heading);font-size:4.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-lg{font-family:var(--font-heading);font-size:3rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-md{font-family:var(--font-heading);font-size:2.25rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-sm{font-family:var(--font-heading);font-size:1.75rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-xs{font-family:var(--font-heading);font-size:1.5rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-heading-2xs{font-family:var(--font-heading);font-size:1.375rem;line-height:1.2;letter-spacing:-.03em;font-weight:400}
.t-subhead{font-family:var(--font-body);font-size:1.5rem;line-height:1.35;letter-spacing:-.02em;font-weight:500}
.t-body-xl{font-size:1.25rem;line-height:1.45;letter-spacing:-.01em;font-weight:400}
.t-body-lg{font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;font-weight:400}
.t-body-base{font-size:1rem;line-height:1.5;letter-spacing:0;font-weight:400}
.text-balance{text-wrap:balance}
.text-pretty{text-wrap:pretty}

/* Eyebrow: mono uppercase + colored square */
.eyebrow{display:inline-flex;width:fit-content;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:1rem;line-height:1.5;letter-spacing:.05em;font-weight:400;text-transform:uppercase;color:var(--color-black)}
.eyebrow .sq{display:inline-block;width:.75rem;height:.75rem;background:var(--color-coral);flex-shrink:0}
.eyebrow .sq--black{background:var(--color-black)}
.eyebrow--light{color:#fff}
@media(min-width:768px){.eyebrow{gap:1rem;font-size:1.25rem}.eyebrow .sq{width:.875rem;height:.875rem}}

/* ---------- Layout ---------- */
.section{width:100%;padding-left:var(--spacing-page-margin);padding-right:var(--spacing-page-margin);background:var(--color-white)}
.container{margin-inline:auto;width:100%;max-width:80rem}
.spacer-sm{position:relative;width:100%;height:clamp(4rem,calc(4rem + 1*((100vw - 20rem)/76)),5rem)}
.spacer-lg{position:relative;width:100%;height:clamp(4.5rem,calc(4.5rem + 3*((100vw - 20rem)/76)),7.5rem)}
.spacer-md{position:relative;width:100%;height:clamp(3rem,calc(3rem + 1*((100vw - 20rem)/76)),4rem)}

/* ---------- Buttons (exact: pad .75/.875/3rem, ring 2, .2s ease-out) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;white-space:nowrap;font-weight:500;font-size:1rem;line-height:1.5;transition:all .2s var(--ease-out);cursor:pointer;border-radius:var(--radius-subtle);text-decoration:none;padding:.75rem 3rem .875rem;outline:none}
.btn:focus-visible{outline:2px solid #000;outline-offset:2px}
.btn--primary{background:var(--color-black);color:#fff;box-shadow:inset 0 0 0 2px var(--color-black)}
.btn--primary:hover{background:var(--color-gray-90)}
.btn--secondary{background:#fff;color:var(--color-black);box-shadow:inset 0 0 0 2px var(--color-black)}
.btn--secondary:hover,.btn--secondary:focus{opacity:.6}
.btn--icon{width:3.125rem;height:3.125rem;padding:0;background:rgba(241,241,241,.6);color:var(--color-black)}
.btn--icon:hover{background:var(--color-gray-30)}
.btn--icon:disabled{pointer-events:none;opacity:.2}
.btn--icon svg{width:1.1875rem;height:1.1875rem;flex-shrink:0}
.btn-link{display:flex;width:fit-content;align-items:center;gap:.75rem;white-space:nowrap;font-weight:500;font-size:1rem;line-height:1.5;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;transition:all .2s var(--ease-out);padding-bottom:.25rem;color:inherit}
.btn-link:hover,.btn-link:focus{text-decoration:none}
.btn-link svg{width:1.1875rem;height:1.1875rem;flex-shrink:0}

/* ---------- Navbar replaced 2026-07-20 by floating nav (inspired component) ---------- */
.menu-link{position:relative;font-family:var(--font-body);font-size:1rem;font-weight:500;line-height:1.5;color:var(--color-black);text-decoration:none;padding:.25rem 0}
.menu-link:after{content:"";position:absolute;bottom:-.0625rem;left:0;height:.125rem;background:currentColor;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .4s ease-out}
.menu-link:hover:after{transform:scaleX(1)}

/* Top bar nav (2026-07-20): logo left, centered page links, search + contact right */
.floatnav{position:fixed;top:0;left:0;right:0;z-index:2147483646;display:flex;justify-content:space-between;align-items:center;gap:1rem;height:4.5rem;padding:0 var(--spacing-page-margin);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--color-gray-30);transition:transform .45s ease-out}
.floatnav[data-scroll-hidden="true"]{transform:translateY(calc(-100% - 1px))}
.floatnav__brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--color-black);outline:none;flex-shrink:0}
.floatnav__brand:focus-visible{outline:2px solid #000;outline-offset:2px}
.floatnav__logo{display:block;height:2.125rem;width:auto}
.floatnav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:1.75rem;white-space:nowrap}
.floatnav__links .menu-link[aria-current="page"]:after{transform:scaleX(1)}
.floatnav__cluster{display:inline-flex;align-items:center;gap:.375rem}
@media(min-width:1240px){
  .floatnav__links{display:flex}
  .floatnav__menubtn,.floatnav__menubtn+.floatnav__divider{display:none}
}
.floatnav__menubtn{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-black);background:none;border:none;border-radius:.25rem;padding:.375rem .625rem;cursor:pointer;transition:background-color .2s var(--ease-out);outline:none}
.floatnav__menubtn:hover{background:var(--color-light-gray)}
.floatnav__menubtn:focus-visible{outline:2px solid #000;outline-offset:2px}
.floatnav__divider{width:1px;height:1.25rem;background:var(--color-gray-30);flex-shrink:0}
.floatnav .nav-search{border-radius:.25rem;padding:.375rem .5rem;transition:background-color .2s var(--ease-out)}
.floatnav .nav-search:hover{opacity:1;background:var(--color-light-gray)}
.floatnav__contact{font-family:var(--font-body);font-size:.875rem;font-weight:500;line-height:1.5;color:#fff;background:#1a1a1a;text-decoration:none;padding:.375rem .75rem .4375rem;border-radius:.25rem;transition:background-color .2s ease;outline:none}
.floatnav__contact:hover{background:#394040}
.floatnav__contact:focus-visible{outline:2px solid #000;outline-offset:2px}
@media(max-width:480px){.floatnav__contact{display:none}}

/* Full-page menu overlay (drawer fade vocabulary, serif links) */
.menu-overlay{position:fixed;inset:0;background:#fff;z-index:2147483647;display:none;overflow-y:auto;padding:2rem var(--spacing-page-margin) 4rem}
.menu-overlay.is-open{display:block;animation:drawer-fade-in .2s ease-out both}
.menu-overlay__inner{max-width:52rem;margin-inline:auto;display:flex;flex-direction:column;gap:2.5rem;padding-top:3rem}
.menu-overlay__top{display:flex;align-items:center;justify-content:space-between}
.menu-overlay__topactions{display:flex;align-items:center;gap:1.5rem}
.menu-overlay__close{background:none;border:none;cursor:pointer}
.menu-overlay__links{display:flex;flex-direction:column}
.menu-overlay__links a{font-family:var(--font-heading);font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.2;letter-spacing:-.03em;color:var(--color-black);text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--color-gray-30);display:flex;align-items:center;gap:1.25rem;transition:opacity .2s var(--ease-out);outline:none}
.menu-overlay__links a:hover{opacity:.6}
.menu-overlay__links a:focus-visible{outline:2px solid #000;outline-offset:2px}
.menu-overlay__links a .sq{display:none;width:.875rem;height:.875rem;background:var(--color-coral);flex-shrink:0}
.menu-overlay__links a[aria-current="page"] .sq{display:inline-block}
.menu-overlay__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.menu-overlay__mail{font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase}
.menu-overlay__mail a{color:var(--color-subtle-dark);text-decoration:none}
.menu-overlay__mail a:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;width:100%;margin-inline:auto;gap:4rem}
.hero__copy{display:flex;flex-direction:column}
.hero__copy h1{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-lg);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.hero__copy .hero__body{margin-top:.75rem;font-size:1.25rem;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.25rem;align-self:stretch;justify-content:flex-start}
.hero__ctas .btn{width:100%}
.hero__media{position:relative;aspect-ratio:1/1;max-width:33.5rem;max-height:33.5rem;overflow:hidden;width:100%}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:1rem}
@media(min-width:640px){.hero__ctas .btn{width:auto}}
@media(min-width:768px){.hero__copy h1{font-size:var(--text-heading-xl)}}
@media(min-width:1280px){
  .hero{flex-direction:row;justify-content:space-between;gap:2.5rem}
  .hero__copy{max-width:64rem;flex:4}
  .hero__copy h1{font-size:var(--text-heading-2xl)}
  .hero__media{height:100%;width:100%;flex:3}
}

/* ---------- Suite cards (3-up nav grid, exact) ---------- */
.suite{position:relative;padding:.5rem;margin-inline:auto;width:100%;max-width:80rem;display:grid;grid-template-columns:1fr;gap:.5rem}
.suite>.corner{position:absolute;width:.5rem;height:.5rem;background:var(--color-black);z-index:10}
.corner--tl{top:0;left:0}.corner--tr{top:0;right:0}.corner--bl{bottom:0;left:0}.corner--br{bottom:0;right:0}
.suite-card{position:relative;display:flex;height:100%;flex-direction:column;background:var(--color-light-gray);text-decoration:none;outline:none}
.suite-card:focus-visible{outline:2px solid #000;outline-offset:2px}
.suite-card__head{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;transition:background-color .2s var(--ease-out)}
.suite-card:hover .suite-card__head,.suite-card:focus-visible .suite-card__head{background:var(--color-coral)}
.suite-card__label{display:inline-flex;width:fit-content;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-black);min-width:0}
.suite-card__label .sq{display:inline-block;width:.75rem;height:.75rem;background:var(--color-black);flex-shrink:0}
.suite-card__label .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suite-card__arrow{flex-shrink:0;display:flex;align-items:center;opacity:0;transform:translateX(-.5rem);transition:all .2s var(--ease-out)}
.suite-card:hover .suite-card__arrow,.suite-card:focus-visible .suite-card__arrow{opacity:1;transform:translateX(0)}
.suite-card__media{aspect-ratio:3/2;width:100%;flex-shrink:0;overflow:hidden}
.suite-card__media svg,.suite-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.suite-card__body{flex-grow:1;padding:1rem}
.suite-card__body p{font-size:1rem;line-height:1.5;color:var(--color-default-dark)}
@media(min-width:768px){.suite{grid-template-columns:repeat(3,1fr)}}

/* ---------- Statement section (inspired editorial redesign: mono eyebrow, confident serif, coral hairline, single intentional dot-grid motif) ---------- */
.statement{display:flex;flex-direction:column;gap:2rem;max-width:80rem;margin:auto}
@media(min-width:768px){.statement{gap:2.5rem}}
.statement__title{font-family:var(--font-heading);font-weight:400;color:var(--color-black);margin:0;font-size:clamp(2.75rem,8vw,7rem);line-height:1.1;letter-spacing:-.03em}
@media(min-width:1280px){.statement__title{line-height:1.05}}
.statement__foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2.5rem 4rem;margin-top:.5rem}
.statement__aside{display:flex;flex-direction:column;gap:1.5rem;flex:1 1 24rem;max-width:42rem}
.statement__rule{width:3.5rem;height:1px;background:var(--color-coral)}
.statement__aside p{font-size:1.25rem;line-height:1.45;letter-spacing:-.01em;font-weight:400;color:var(--color-gray-90);margin:0}
.statement__motif{flex:0 0 auto;width:10rem;height:10rem;position:relative;overflow:hidden;display:none}
.statement__motif svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
@media(min-width:768px){.statement__motif{display:block}}
/* scroll reveal (JS-gated, fires once, existing .45s ease-out vocabulary) */
.statement.js-reveal .statement__reveal{opacity:0;transform:translateY(1rem);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.statement.js-reveal.is-in .statement__reveal{opacity:1;transform:none}
.statement.js-reveal .statement__reveal:nth-child(2){transition-delay:.06s}
.statement.js-reveal .statement__reveal:nth-child(3){transition-delay:.12s}

/* ---------- Solutions dot-grid panel (exact) ---------- */
.solutions{display:flex;flex-direction:column;align-items:center;overflow:hidden}
.solutions h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-md);line-height:1.2;letter-spacing:-.03em;margin-bottom:2.5rem;text-align:center;text-wrap:balance}
.solutions__panel{position:relative;width:100%}
.solutions__grid{display:none}
.solutions__inner{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:4}
.solutions__inner .dot{display:none;position:absolute;width:.5rem;height:.5rem;background:var(--color-black)}
.solutions__buttons{display:flex;flex-direction:column;gap:.75rem;background:#fff;padding:2rem;width:100%}
.solutions__buttons .btn{flex:1;white-space:normal}
@media(min-width:768px){.solutions h2{font-size:var(--text-heading-lg)}.solutions__buttons{flex-direction:row;width:auto}.solutions__buttons .btn{white-space:nowrap}}
@media(min-width:1280px){
  .solutions h2{font-size:var(--text-heading-xl);margin-bottom:5rem}
  .solutions__panel{width:77.5rem;flex-shrink:0;height:14.25rem}
  .solutions__grid{display:block;position:absolute;inset:0}
  .solutions__grid svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .solutions__inner{position:absolute;inset:0}
  .solutions__inner .dot{display:block}
  .solutions__inner .dot--tl{left:8.25rem;top:2.75rem}
  .solutions__inner .dot--tr{right:8.25rem;top:2.75rem}
  .solutions__inner .dot--bl{left:8.25rem;bottom:2.75rem}
  .solutions__inner .dot--br{right:8.25rem;bottom:2.75rem}
}

/* ---------- Foundation cards (exact) ---------- */
.foundation__head{display:flex;flex-direction:column;gap:1.5rem}
.foundation__head h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-md);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
@media(min-width:768px){.foundation__head h2{font-size:var(--text-heading-lg)}}
@media(min-width:1280px){.foundation__head h2{font-size:var(--text-heading-xl)}}
.foundation__grid{display:grid;width:100%;max-width:1280px;margin-inline:auto;grid-template-columns:minmax(280px,360px);justify-content:center;gap:3rem}
.f-card{display:flex;width:100%;min-width:0;flex-direction:column;align-items:flex-start;gap:1.5rem;max-width:360px}
.f-card__media{display:flex;justify-content:center;align-items:center;align-self:stretch;width:100%;position:relative;flex-shrink:0;aspect-ratio:2/1}
.f-card__media .dot-grid{position:relative;width:100%;height:100%;overflow:hidden;display:block}
.f-card__media .dot-grid>svg{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.f-card__media .illus{position:absolute;inset:0;z-index:5;width:100%;height:100%}
.f-card__media .c{position:absolute;width:.5rem;height:.5rem;z-index:10;flex-shrink:0;background:var(--color-gray-40);outline:1px solid #fff}
.f-card__media .c--tl{top:0;left:0}.f-card__media .c--tr{top:0;right:0}.f-card__media .c--bl{bottom:0;left:0}.f-card__media .c--br{bottom:0;right:0}
.f-card__text{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.f-card__text h3{font-family:var(--font-body);font-size:1.5rem;line-height:1.35;letter-spacing:-.02em;font-weight:500;color:var(--color-black);overflow:hidden;text-overflow:ellipsis}
.f-card__text p{font-size:1rem;line-height:1.5;color:var(--color-black);overflow:hidden;text-overflow:ellipsis}
@media(min-width:640px){.foundation__grid{grid-template-columns:repeat(2,minmax(0,360px));gap:4rem 2rem}}
@media(min-width:1024px){.foundation__grid{grid-template-columns:repeat(3,1fr);gap:4rem 2rem;justify-items:stretch}.f-card{max-width:none}}
@media(min-width:1280px){.foundation__grid{column-gap:4rem}}
.foundation__grid--pairs{max-width:1120px}
.foundation__grid--pairs .f-card{max-width:none;padding-top:2rem;border-top:1px solid var(--color-gray-40)}
.foundation__grid--pairs .f-card__text{gap:1rem}
.foundation__grid--pairs .f-card__text p{max-width:34rem}
.tone--dark .foundation__grid--pairs .f-card,.tone--slate .foundation__grid--pairs .f-card{border-top-color:var(--color-gray-80)}
@media(min-width:640px){.foundation__grid--pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem;justify-items:stretch}}
@media(min-width:1024px){.foundation__grid--pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem 5rem}.foundation__grid--pairs .f-card{padding-top:2.5rem}.foundation__grid--pairs .f-card__text h3{font-size:1.75rem}}
@media(min-width:1280px){.foundation__grid--pairs{column-gap:6rem}}
.foundation__grid--duo{max-width:1120px}
@media(min-width:1024px){.foundation__grid--duo{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5rem}}
@media(min-width:1280px){.foundation__grid--duo{column-gap:6rem}}

/* ---------- Dark banner (exact: bg gray-90, 12-col) ---------- */
.banner{width:100%;display:flex;flex-direction:column;overflow:clip;background:var(--color-gray-90);color:#fff}
.banner__copy{display:flex;flex-direction:column;padding:2rem 1.5rem}
.banner__copy h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.banner__copy .banner__body{margin-top:.75rem;font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.banner__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.25rem}
.banner__quote{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:-.03em;text-wrap:balance;margin:0}
.banner__cite{display:block;margin-top:1.5rem;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;font-style:normal;color:var(--color-gray-40)}
@media(min-width:768px){.banner__quote{font-size:var(--text-heading-md)}}
.banner--portrait .banner__media{display:block;overflow:clip;background:#1a1a1a}
.banner--portrait .banner__media img{width:100%;height:20rem;object-fit:cover;object-position:50% 22%;display:block}
@media(min-width:1024px){.banner--portrait .banner__media img{height:100%}}
.banner__media{display:none}
@media(min-width:640px){.banner__copy{padding-left:2.5rem}}
@media(min-width:768px){.banner__copy h2{font-size:var(--text-heading-md)}}
@media(min-width:1024px){
  .banner{display:grid;grid-template-columns:repeat(12,1fr)}
  .banner__copy{grid-column:span 8;padding:2.5rem 4rem 2.5rem 2.5rem;max-width:64rem}
  .banner__copy h2{font-size:var(--text-heading-lg)}
  .banner__media{display:block;grid-column:span 4;overflow:clip}
  .banner__media svg,.banner__media img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ---------- Team carousel (testimonial pattern, exact) ---------- */
.carousel-section{width:100%;display:flex;flex-direction:column;gap:1.5rem}
.carousel{outline:none}
.carousel__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>li{flex-shrink:0;scroll-snap-align:start;width:100%}
@media(min-width:640px){.carousel__track{gap:.5rem}.carousel__track>li{width:calc((100% - .5rem)/2)}}
@media(min-width:1024px){.carousel__track>li{width:calc((100% - 1rem)/3)}}
.t-card{position:relative;display:flex;flex-direction:column;gap:2rem;align-items:flex-start;padding:1.5rem;height:100%;background:var(--color-light-gray);transition:background-color .2s;text-decoration:none}
.t-card:hover,.t-card:focus-visible{background:var(--color-gray)}
.t-card__avatar{position:relative;flex-shrink:0;width:6.25rem;height:6.25rem;overflow:clip;background:var(--color-gray-40);display:flex;align-items:center;justify-content:center}
.t-card__avatar span{font-family:var(--font-heading);font-size:2.25rem;color:var(--color-gray-90)}
.t-card__avatar .mark{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;background:var(--color-coral)}
.t-card__quote{font-family:var(--font-body);font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;color:var(--color-black)}
.t-card__meta{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;width:100%;margin-top:auto;color:var(--color-subtle-dark)}
.t-card__arc{position:absolute;top:0;left:7.75rem;width:7rem;height:7rem;pointer-events:none}
.t-card__photo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.carousel__controls{display:flex;align-items:center;justify-content:space-between}
.carousel__counter{font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-subtle-dark)}
.carousel__buttons{display:flex;gap:.5rem}

/* ---------- Stats (inspired redesign: editorial tile row, numbers shown together) ---------- */
.stats{display:flex;flex-direction:column;align-items:center;width:100%;padding:4rem var(--spacing-page-margin);background:var(--color-black)}
@media(min-width:768px){.stats{padding-top:5rem;padding-bottom:5rem}}
@media(min-width:1536px){.stats{padding-top:7.5rem;padding-bottom:7.5rem}}
.stats__inner{display:flex;flex-direction:column;align-items:flex-start;gap:3rem;width:100%;max-width:80rem}
@media(min-width:768px){.stats__inner{gap:4rem}}
.stats__grid{display:grid;grid-template-columns:1fr;gap:1px;width:100%;background:var(--color-gray-90)}
@media(min-width:640px){.stats__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.stats__grid{grid-template-columns:repeat(5,1fr)}}
.stat-tile{background:var(--color-black)}
.stat-tile__inner{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:2rem 1.5rem}
@media(min-width:1024px){.stat-tile__inner{padding:2.25rem 1.75rem;gap:1.25rem}}
.stat-tile__eyebrow{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--color-gray-60)}
.stat-tile__eyebrow .sq{display:inline-block;width:.5rem;height:.5rem;background:var(--color-coral);flex-shrink:0}
.stat-tile__num{font-family:var(--font-heading);font-weight:400;font-size:clamp(4rem,9vw,6.5rem);line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stat-tile__desc{font-family:var(--font-body);font-size:.9375rem;line-height:1.5;color:var(--color-gray-60);text-wrap:balance}
@media(min-width:768px){.stat-tile__desc{font-size:1rem}}
/* scroll reveal (JS-gated, fires once, existing .45s ease-out vocabulary) */
.stats__grid.js-reveal .stat-tile__inner{opacity:0;transform:translateY(1rem);transition:opacity .45s ease-out,transform .45s ease-out}
.stats__grid.js-reveal.is-in .stat-tile__inner{opacity:1;transform:none}
.dots-nav{display:flex;justify-content:center}
.dots-nav__inner{display:flex;align-items:center;max-width:100%}
.dots-nav button{cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0;background:none;border:none}
.dots-nav button span{display:inline-block;width:.5rem;height:.5rem;background:var(--color-gray-40)}
.dots-nav button[aria-current="true"] span{background:var(--color-coral)}
.dots-nav .conn{width:2.5rem;min-width:1rem;height:0}
.dots-nav .conn.is-active{border-top:1px dashed var(--color-coral)}

/* ---------- Connect CTA ---------- */
.connect{display:flex;flex-direction:column;align-items:center;text-align:center;margin-inline:auto;max-width:64rem}
.connect h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-md);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.connect__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.25rem;align-self:stretch;justify-content:center}
.connect__ctas .btn{width:100%}
@media(min-width:640px){.connect__ctas .btn{width:auto}}
@media(min-width:768px){.connect h2{font-size:var(--text-heading-lg)}}
/* Connect: Sevilla office variant (index.html only) */
.connect--office{align-items:stretch;text-align:left;max-width:none;gap:2.5rem}
.connect--office .connect__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.connect--office .connect__ctas{justify-content:flex-start;margin-top:.75rem}
.connect__note{font-family:var(--font-body);font-size:var(--text-body-lg);line-height:1.45;letter-spacing:-.01em;color:var(--color-gray-40);max-width:36rem}
.connect__media{margin:0;display:flex;flex-direction:column}
.connect__frame{background:var(--color-black);padding:1rem}
.connect__frame img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.connect__media figcaption{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--color-gray-40)}
.connect__media figcaption .sq{display:inline-block;width:.5rem;height:.5rem;background:var(--color-coral);flex-shrink:0}
@media(min-width:900px){
  .connect--office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);align-items:center;gap:4.5rem}
}
@media(min-width:1280px){.connect h2{font-size:var(--text-heading-xl)}}

/* ---------- Areas feature grid (articles pattern, exact) ---------- */
.areas-grid{display:none}
.a-card{position:relative;display:flex;overflow:hidden;text-decoration:none;outline:none;height:100%}
.a-card:focus-visible{outline:2px solid #000;outline-offset:2px}
.a-card__media{position:relative;flex:1;min-height:0;background:var(--color-gray-20)}
.a-card__media svg,.a-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.a-card__tag{display:inline-flex;width:fit-content;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;background:var(--color-coral);padding:.25rem .75rem;color:var(--color-black);position:absolute;bottom:0;left:0;z-index:2}
.a-card__tag .sq{display:inline-block;width:.75rem;height:.75rem;background:var(--color-black)}
.a-card__panel{display:flex;flex-direction:column;justify-content:space-between;padding:1rem;background:var(--color-dark-gray);transition:background-color .2s var(--ease-out)}
.a-card:hover .a-card__panel,.a-card:focus-visible .a-card__panel{background:var(--color-gray-80)}
.a-card__panel .title{font-family:var(--font-heading);font-size:1.5rem;line-height:1.2;letter-spacing:-.03em;color:#fff;text-wrap:pretty}
.a-card__panel .sub{font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-gray-40)}
.a-card:hover .a-card__panel .sub,.a-card:focus-visible .a-card__panel .sub{color:#fff}
.a-card--featured{flex-direction:column}
.a-card--featured .a-card__panel{height:10rem;flex-shrink:0}
.a-card--row{flex-direction:row;height:10rem}
.a-card--row .a-card__panel{flex:1;min-width:0}
.a-card--row .a-card__media{flex:none;position:relative;width:266px;min-height:auto}
.areas-carousel{display:flex;flex-direction:column}
.areas-carousel .carousel__track>li{aspect-ratio:528/496}
@media(min-width:1024px){
  .areas-carousel{display:none}
  .areas-grid{display:grid;grid-template-columns:5fr 7fr;grid-template-rows:repeat(3,1fr);gap:.5rem;list-style:none;margin:0;padding:0}
  .areas-grid>li:first-child{grid-row:1/-1}
  .a-card__panel .title{font-size:1.375rem}
}
@media(min-width:1536px){.a-card__panel .title{font-size:1.5rem}}

/* ---------- Footer (exact Footer_magna-footer) ---------- */
.footer{background-color:#1a1a1a;width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden;color:#fff}
.footer a,.footer button{outline:none}
.footer a:focus-visible,.footer button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.footer__container{width:100%;max-width:1536px}
.footer__grid{display:none}
.footer__accordion{padding:4rem var(--spacing-page-margin)}
.footer__acc-item{border-bottom:1px solid #fff}
.footer__acc-header{display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding:16px 0;background:none;border:none;cursor:pointer;color:#fff}
.footer__acc-left{display:flex;align-items:center;gap:12px}
.footer__acc-arrow{display:flex;align-items:center;justify-content:center;width:22px;height:22px;transition:transform .3s ease-in-out}
.footer__acc-item.is-open .footer__acc-arrow{transform:rotate(180deg)}
.footer__acc-content{max-height:0;overflow:hidden;transition:max-height .6s ease-in-out}
.footer__acc-item.is-open .footer__acc-content{max-height:1000px}
.footer__acc-content .footer__items{padding:20px 4px 32px;gap:16px}
.footer__dot{width:12px;height:12px;background:#fff;position:relative;overflow:hidden;flex-shrink:0}
.footer__dot:after{content:"";position:absolute;inset:0;background:#FF4800;transform:scaleX(0);transform-origin:left;transition:transform .2s ease-in-out}
.footer__acc-item.is-open .footer__dot:after,.footer__section:hover .footer__dot:after{transform:scaleX(1)}
.footer__section-title{font-family:var(--font-mono);font-size:16px;font-weight:400;text-transform:uppercase;line-height:1.5;letter-spacing:.8px;color:#fff;margin:0}
.footer__section-header{display:flex;align-items:center;gap:12px;padding-bottom:4px;border-bottom:1px solid #fff;margin-bottom:16px}
.footer__items{list-style:none;margin:0;display:flex;flex-direction:column;gap:12px;padding:0 0 16px}
.footer__items li{display:flex;align-items:center;gap:8px}
.footer__items a{font-family:var(--font-body);font-size:14px;font-weight:500;color:#a7aaaa;text-decoration:none;line-height:1.5}
.footer__items a:hover{text-decoration:underline;text-underline-offset:.2em}
.footer__items .plain{font-family:var(--font-body);font-size:14px;font-weight:500;color:#a7aaaa;line-height:1.5}
.footer__divider{width:100vw;height:1px;background-color:hsla(0,0%,100%,.2);margin-left:calc(50% - 50vw)}
.footer__bottom{display:flex;flex-direction:column;align-items:center;gap:24px;padding:2rem var(--spacing-page-margin)}
.footer__copyright{font-family:var(--font-mono);font-size:16px;font-weight:400;text-transform:uppercase;letter-spacing:.8px;line-height:1.5;color:#a7aaaa;text-align:center}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 32px}
.footer__legal a{font-family:var(--font-body);font-size:14px;font-weight:500;color:#a7aaaa;text-decoration:none}
.footer__legal a:hover{text-decoration:underline;text-underline-offset:.2em}
@media(min-width:1024px){
  .footer__accordion{display:none}
  .footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:64px 40px;padding:7.5rem var(--spacing-page-margin)}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:flex-end}
  .footer__copyright{text-align:left}
}

/* ---------- Page heroes (inner pages) ---------- */
.page-hero h1{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-lg);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.page-hero .lead{margin-top:.75rem;font-size:1.25rem;line-height:1.45;letter-spacing:-.01em;max-width:52rem;text-wrap:pretty}
@media(min-width:768px){.page-hero h1{font-size:var(--text-heading-xl)}}
@media(min-width:1280px){.page-hero h1{font-size:var(--text-heading-2xl)}}

/* Areas of practice detail rows */
.area-row{display:flex;flex-direction:column;gap:2rem}
.area-row__text{display:flex;flex-direction:column;gap:1rem;max-width:40rem}
.area-row__text h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:-.03em}
.area-row__text p{font-size:1.125rem;line-height:1.45;letter-spacing:-.01em}
.area-row__media{position:relative;width:100%;max-width:30rem;aspect-ratio:2/1;flex-shrink:0}
@media(min-width:768px){.area-row__text h2{font-size:var(--text-heading-md)}}
@media(min-width:1024px){
  .area-row{flex-direction:row;align-items:center;justify-content:space-between;gap:4rem}
  .area-row--flip{flex-direction:row-reverse}
}
/* Application form (apply.html, existing tokens only) */
.app-form{display:flex;flex-direction:column;gap:1.5rem;max-width:36rem}
.app-form[hidden]{display:none}
.app-field{display:flex;flex-direction:column;gap:.5rem}
.app-label{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-black)}
.app-form textarea{resize:vertical;min-height:10rem;font-family:var(--font-body)}
.app-form input[type=file]{padding:.625rem 1rem;cursor:pointer;font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em}
.app-form input[type=file]::file-selector-button{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#1a1a1a;border:0;border-radius:.25rem;padding:.375rem .75rem .4375rem;margin-right:1rem;cursor:pointer;transition:background-color .2s ease}
.app-form input[type=file]::file-selector-button:hover{background:#394040}
.app-form .btn:disabled{opacity:.5;pointer-events:none}
.app-form .is-invalid{box-shadow:inset 0 0 0 2px var(--color-coral)}
.form-error{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-black)}
.form-error[hidden]{display:none}
.form-error .sq{display:inline-block;width:.625rem;height:.625rem;background:var(--color-coral);flex-shrink:0}
.app-note{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-subtle-dark)}
.app-confirm{margin-top:2.5rem;max-width:36rem;padding:1.5rem 1.75rem 1.75rem;box-shadow:inset 0 0 0 2px var(--color-black);border-radius:var(--radius-subtle);display:flex;flex-direction:column;gap:.75rem}
.app-confirm[hidden]{display:none}
.app-confirm h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:-.03em}
.app-confirm p{font-size:1.125rem;line-height:1.45;letter-spacing:-.01em}

/* Careers role requirements list (existing tokens only) */
.role-reqs{display:flex;flex-direction:column;gap:.5rem}
.role-reqs li{display:flex;align-items:flex-start;gap:.75rem;font-size:1.125rem;line-height:1.45;letter-spacing:-.01em}
.role-reqs li .sq{display:inline-block;width:.625rem;height:.625rem;background:var(--color-coral);flex-shrink:0;margin-top:.45em}
.area-row__text .btn-link{margin-top:.5rem}

/* Publications page (reuses the a-card pattern in a static grid) */
.pub-grid{display:grid;grid-template-columns:1fr;gap:.5rem;list-style:none;margin:0;padding:0}
.pub-grid>li{aspect-ratio:528/496}
.pub-grid .a-card--featured{height:100%}
@media(min-width:640px){.pub-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pub-grid{grid-template-columns:repeat(3,1fr)}}
.article{max-width:52rem}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.article__meta p{font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-subtle-dark)}
.article h2{font-family:var(--font-heading);font-weight:400;font-size:var(--text-heading-sm);line-height:1.2;letter-spacing:-.03em;text-wrap:balance;margin-top:.75rem}
.article__source{margin-top:1rem;font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;line-height:1.5;text-transform:uppercase;color:var(--color-subtle-dark)}
.article__source a{color:var(--color-black);text-decoration:underline;text-underline-offset:.2em}
.article__source a:hover{text-decoration:none}
.article__body{margin-top:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
.article__body p{font-size:1.125rem;line-height:1.45;letter-spacing:-.01em}
@media(min-width:768px){.article h2{font-size:var(--text-heading-md)}}


/* Publications search + load more (existing tokens only) */
.pub-search{display:flex;flex-direction:column;gap:.75rem;margin-top:2.25rem;max-width:24rem}
.pub-search__input{font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--color-black);background:#fff;box-shadow:inset 0 0 0 2px var(--color-black);border:0;border-radius:var(--radius-subtle);padding:.75rem 1rem .875rem;width:100%;outline:none;transition:all .2s var(--ease-out);appearance:none}
.pub-search__input::placeholder{color:var(--color-gray-80)}
.pub-search__input:focus-visible{outline:2px solid #000;outline-offset:2px}
.pub-more{display:flex;justify-content:center;margin-top:2.5rem}
.pub-empty{font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;color:var(--color-subtle-dark);text-align:center;margin-top:2.5rem}
.pub-grid>li[hidden]{display:none}

/* Team grid page */
.team-grid{display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}}
/* Seven members: leadership row of four over a row of three, no card left alone */
@media(min-width:640px) and (max-width:1023.98px){.team-grid--lead4>li:nth-child(7):last-child{grid-column:1 / -1}}
@media(min-width:1024px){.team-grid--lead4{grid-template-columns:repeat(12,1fr)}.team-grid--lead4>li{grid-column:span 3}.team-grid--lead4>li:nth-child(n+5){grid-column:span 4}}


/* ---------- Site search (navbar button + overlay, existing tokens only) ---------- */
.nav-search{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;background:none;border:none;color:var(--color-black);cursor:pointer;transition:opacity .2s var(--ease-out)}
.nav-search:hover{opacity:.6}
.nav-search:focus-visible{outline:2px solid #000;outline-offset:2px}
.nav-search svg{width:1.25rem;height:1.25rem;display:block}
.search-overlay{position:fixed;inset:0;background:#fff;z-index:2147483647;display:none;overflow-y:auto;padding:2rem var(--spacing-page-margin) 4rem}
.search-overlay.is-open{display:block;animation:drawer-fade-in .2s ease-out both}
.search-overlay__inner{max-width:52rem;margin-inline:auto;display:flex;flex-direction:column;gap:1.5rem;padding-top:3rem}
.search-overlay__top{display:flex;align-items:center;justify-content:space-between}
.search-overlay__close{background:none;border:none;cursor:pointer}
.search-overlay__results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.search-overlay__results li a{display:block;padding:1rem 1.25rem;text-decoration:none;background:#fff;transition:background-color .2s;border-bottom:1px solid var(--color-gray-30)}
.search-overlay__results li a:hover,.search-overlay__results li.is-active a{background:var(--color-light-gray)}
.search-result__meta{font-family:var(--font-mono);font-size:.75rem;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--color-subtle-dark)}
.search-result__title{font-family:var(--font-heading);font-size:1.375rem;line-height:1.2;letter-spacing:-.03em;color:var(--color-black);margin-top:.25rem}
.search-result__snippet{font-size:.875rem;line-height:1.5;color:var(--color-gray-90);margin-top:.25rem}
mark.hl{background:var(--color-coral);color:var(--color-black);padding:0 .0625rem}

/* ---------- Article pages ---------- */
.article-page__media{position:relative;width:100%;aspect-ratio:528/336;max-height:22rem;overflow:hidden;background:var(--color-gray-20);margin-top:2rem}
.article-page__media svg{position:absolute;inset:0;width:100%;height:100%}
.article-page__media .a-card__tag{bottom:0;left:0}
.article-nav{display:flex;flex-direction:column;gap:1.5rem;border-top:1px solid var(--color-gray-30);padding-top:2rem;margin-top:3rem}
.article-nav__item{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;min-width:0}
.article-nav__item .label{font-family:var(--font-mono);font-size:.75rem;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--color-subtle-dark)}
.article-nav__item .name{font-family:var(--font-heading);font-size:1.375rem;line-height:1.2;letter-spacing:-.03em;color:var(--color-black);transition:opacity .2s var(--ease-out)}
.article-nav__item:hover .name{opacity:.6}
@media(min-width:768px){.article-nav{flex-direction:row;justify-content:space-between;gap:2.5rem}.article-nav__item--next{text-align:right}}

/* Keyframes carried from reference */
@keyframes fade-in{0%{opacity:0}to{opacity:1}}
@keyframes blink{0%,to{opacity:1}50%{opacity:0}}
@keyframes pulse-orange{0%{box-shadow:0 0 0 0 rgba(255,72,0,.6)}70%{box-shadow:0 0 0 .75rem rgba(255,72,0,0)}to{box-shadow:0 0 0 0 rgba(255,72,0,0)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .suite-card__head,.suite-card__arrow,.t-card,.a-card__panel{transition:none}
}

/* ---------- Section tones (2026-08-26, Sander's contrast pass) ----------
   Alternating light/dark bands down every page instead of white on white.
   Only palette colours: gray-10 for the light band, black and gray-90 for the
   dark ones. The tone class also goes on the spacer divs around a section so
   the band covers the section spacing, not just the content box. */
.tone--tint{background:var(--color-gray-10)}
.tone--dark{background:var(--color-black)}
.tone--slate{background:var(--color-gray-90)}
.tone--dark,.tone--slate{color:#fff}

/* text on the dark bands */
.tone--dark .eyebrow,.tone--slate .eyebrow{color:#fff}
.tone--dark .statement__title,.tone--slate .statement__title{color:#fff}
.tone--dark .statement__aside p,.tone--slate .statement__aside p{color:var(--color-gray-40)}
.tone--dark .f-card__text h3,.tone--slate .f-card__text h3{color:#fff}
.tone--dark .f-card__text p,.tone--slate .f-card__text p{color:var(--color-gray-40)}
.tone--dark .menu-link,.tone--slate .menu-link{color:#fff}
.tone--dark .app-label,.tone--slate .app-label{color:#fff}
.tone--dark .form-error,.tone--slate .form-error{color:#fff}
.tone--dark .app-note,.tone--slate .app-note{color:var(--color-gray-40)}
.tone--dark .article__meta p,.tone--slate .article__meta p,
.tone--dark .article__source,.tone--slate .article__source{color:var(--color-gray-40)}
.tone--dark .article__source a,.tone--slate .article__source a{color:#fff}
.tone--dark .pub-empty,.tone--slate .pub-empty{color:var(--color-gray-40)}
.tone--dark .carousel__counter,.tone--slate .carousel__counter{color:var(--color-gray-40)}

/* controls on the dark bands (same shapes and timings, inverted ink) */
.tone--dark .btn--primary,.tone--slate .btn--primary{background:#fff;color:var(--color-black);box-shadow:inset 0 0 0 2px #fff}
.tone--dark .btn--primary:hover,.tone--slate .btn--primary:hover{background:var(--color-gray-40)}
.tone--dark .btn--secondary,.tone--slate .btn--secondary{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.tone--dark .btn:focus-visible,.tone--slate .btn:focus-visible{outline-color:#fff}
.tone--dark .btn--icon,.tone--slate .btn--icon{background:hsla(0,0%,100%,.12);color:#fff}
.tone--dark .btn--icon:hover,.tone--slate .btn--icon:hover{background:hsla(0,0%,100%,.24)}
.tone--dark .app-confirm,.tone--slate .app-confirm{box-shadow:inset 0 0 0 2px #fff}
.tone--dark .pub-search__input:focus-visible,.tone--slate .pub-search__input:focus-visible{outline-color:#fff}
.tone--dark .article-nav,.tone--slate .article-nav{border-top-color:hsla(0,0%,100%,.25)}
.tone--dark .article-nav__item .name,.tone--slate .article-nav__item .name{color:#fff}
.tone--dark .article-nav__item .label,.tone--slate .article-nav__item .label{color:var(--color-gray-40)}

/* panels that carry their own background have to follow the band */
.tone--dark .solutions__buttons{background:var(--color-black)}
.tone--slate .solutions__buttons{background:var(--color-gray-90)}
.tone--tint .solutions__buttons{background:var(--color-gray-10)}
.tone--tint .t-card{background:#fff}
.tone--tint .t-card:hover,.tone--tint .t-card:focus-visible{background:var(--color-gray-30)}
.tone--tint .suite-card{background:#fff}
.tone--tint .search-overlay__results li a{background:transparent}

/* dot grids: the reference fills are near-white, so darken them on the tint band */
.tone--tint [data-dot-grid]>svg:first-child rect{fill:var(--color-gray-60)}
/* the article/card artwork panels are #ededed inside the SVG, which merges with the tint band */
.tone--tint .article-page__media svg>rect:first-child,.tone--tint .a-card__media svg>rect:first-child{fill:#fff}

/* spacers between two bands: the boundary sits in the middle of the gap, so neither
   section loses its breathing room and no spacing value changes */
.tone-split--white-dark{background:linear-gradient(to bottom,#fff 50%,var(--color-black) 50%)}
.tone-split--dark-tint{background:linear-gradient(to bottom,var(--color-black) 50%,var(--color-gray-10) 50%)}
.tone-split--tint-white{background:linear-gradient(to bottom,var(--color-gray-10) 50%,#fff 50%)}
.tone-split--white-tint{background:linear-gradient(to bottom,#fff 50%,var(--color-gray-10) 50%)}
.tone-split--tint-dark{background:linear-gradient(to bottom,var(--color-gray-10) 50%,var(--color-black) 50%)}
.tone-split--dark-slate{background:linear-gradient(to bottom,var(--color-black) 50%,var(--color-gray-90) 50%)}
.tone-split--slate-white{background:linear-gradient(to bottom,var(--color-gray-90) 50%,#fff 50%)}
.tone-split--dark-white{background:linear-gradient(to bottom,var(--color-black) 50%,#fff 50%)}
.tone-split--white-slate{background:linear-gradient(to bottom,#fff 50%,var(--color-gray-90) 50%)}

/* Deep links from the copy document land on one exact text block. The block
   sits below the fixed header and lights up briefly in the orange accent. */
[id^="cd-"]{scroll-margin-top:6.5rem}
.cd-target{animation:cd-target-flash 1.8s var(--ease-out) both}
@keyframes cd-target-flash{
  0%,55%{background-color:rgba(255,72,0,.28);box-shadow:0 0 0 .5rem rgba(255,72,0,.28)}
  100%{background-color:transparent;box-shadow:0 0 0 .5rem transparent}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cd-target{animation:none;background-color:rgba(255,72,0,.22);box-shadow:0 0 0 .5rem rgba(255,72,0,.22)}
}

/* ---------- Photography (2026-08-28) ---------- */
/* Extends the existing article media frame so it can carry a photo as well as an illustration. */
.article-page__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.article-page__media--band{margin-top:0;max-height:24rem;background:var(--color-black)}
@media(min-width:1024px){.article-page__media--band{max-height:28rem}}
/* Offices: the index connect__media/connect__frame figure, repeated on a four-up grid. */
.offices-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
@media(min-width:640px){.offices-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}}
@media(min-width:1024px){.offices-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}}
.offices-grid .connect__frame{padding:.75rem}
.offices-grid figcaption{color:var(--color-gray-80)}