/* Owner-supplied art direction, expressed as editable components rather than flattened mockups. */
:root {
  --paper: #fff;
  --paper-dark: #edf5ef;
  --surface: #f5f9f6;
  --hero: #f4f9f5;
  --ink: #193c2e;
  --deep: #163d2d;
  --muted: #5f7167;
  --line: #dfe9e1;
  --accent-text: #28744c;
  --acid: #e2f1df;
  --display: Georgia, 'Times New Roman', serif;
  --shadow: 0 16px 44px #153c2a0c;
}
:root[data-theme=dark] {
  --paper: #111c18;
  --paper-dark: #1c2c23;
  --surface: #16231d;
  --hero: #16271e;
  --raised: #1b2b22;
  --ink: #edf3ed;
  --deep: #edf3ed;
  --muted: #b0c0b5;
  --line: #34483b;
  --accent-text: #a5cfb2;
  --acid: #acd4b8;
  --shadow: 0 16px 44px #0003;
}
html[lang=en] :is(.future-hero h1, .institution-layout h2, .purpose-heading h2, .purpose-statement h3, .refined-heading h2, .product-tile h3, .presence-heading h2, .presence-list h3, .conversation-copy h2, .page-hero h1, .identity-main h1, .text-section h2, .editorial-copy h2, .section-heading h2, .page-story .feature-grid h3, .article-body h2, .article-body h3) {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
}
.button { border-radius: 999px; }
.site-header .header-inner { max-width: 1260px; gap: 20px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-align: start; }
.site-header .brand .brand-icon, .drawer-heading .brand-icon, .footer-intro .brand-icon {
  width: 49px; height: 46px; object-fit: contain; flex: 0 0 auto; filter: none;
}
.brand-words { display: grid; gap: 3px; }
.brand-words strong { font-family: var(--sans); font-size: 29px; line-height: 1; letter-spacing: .055em; font-weight: 750; }
.brand-words small { font-size: 8px; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.site-header .brand .full-wordmark { width: 164px; height: auto; }
.drawer-heading .full-wordmark { width: 150px; height: auto; }
.footer-intro .full-wordmark { width: 180px; height: auto; }
.site-footer .footer-intro .brand-icon { filter: none; }
.site-header .nav-link, .site-header .more-menu summary { font-size: 13px; padding-inline: 12px; }
.site-header .header-actions { margin-inline-start: 0; }
.site-header .header-actions > .button { padding-inline: 17px; font-size: 11px; }

/* A single portrait, in an architectural frame, supports the institution's introduction. */
.future-hero {
  width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0;
  background: linear-gradient(115deg, var(--paper) 20%, var(--hero) 100%);
  isolation: isolate;
}
.future-hero::before {
  inset: 0 0 auto auto; width: 45%; height: 100%; opacity: .24;
  background: url('/assets/lattice.svg') top right / 115px repeat;
  mask-image: linear-gradient(110deg, transparent, #0007);
  pointer-events: none;
}
[data-theme=dark] .future-hero::before { background: url('/assets/lattice.svg') top right / 115px repeat; opacity: .12; }
.future-hero::after {
  content: ''; position: absolute; inset: auto -3% -96px; height: 120px; z-index: -1;
  background: var(--accent-text); border-radius: 50% 45% 0 0 / 100% 100% 0 0; transform: rotate(-2deg);
  box-shadow: 0 -12px 0 color-mix(in srgb, var(--accent-text) 13%, transparent);
}
.future-hero-inner { max-width: 1200px; padding-top: 26px; }
.future-hero-top { border: 0; padding-bottom: 0; }
.future-hero-top .eyebrow { font-size: 10px; letter-spacing: .11em; }
.hero-edition { color: var(--muted); font-size: 9px; }
.future-hero-stage { min-height: 540px; grid-template-columns: 1.16fr .84fr; gap: 45px; }
.future-hero-copy { padding-block: 38px 52px; }
.future-hero h1 { font-size: clamp(45px, 4vw, 56px); line-height: 1.16; max-width: 655px; }
.future-hero .hero-line { overflow: visible; padding: 0; }
.future-hero .hero-line > span { animation: arch-arrive .85s var(--ease) both; }
.future-hero .hero-line.accent > span { animation-delay: .12s; }
.future-hero .hero-line + .hero-line { margin-top: 7px; }
.hero-line.accent { color: var(--accent-text); }
.future-hero-description { margin-top: 25px; max-width: 510px; }
.future-hero-description p { font-size: 15px; line-height: 1.9; max-width: 480px; color: var(--muted); }
.hero-ctas { gap: 13px; margin-top: 27px; }
.hero-ctas .button-acid {
  background: #24563e; color: #fff; border-color: #24563e; padding: 15px 23px;
  gap: 23px; min-height: 50px; box-shadow: 0 7px 18px #24563e17;
}
.hero-ctas .button-acid:hover { background: #326d4c; color: #fff; border-color: #326d4c; }
[data-theme=dark] .hero-ctas .button-acid { background: #acd4b8; color: #17271e; border-color: #acd4b8; }
[data-theme=dark] .hero-ctas .button-acid:hover { background: #c2e2cc; color: #17271e; border-color: #c2e2cc; }
.hero-ctas .button-acid > span, .hero-ctas .button-acid svg { color: inherit; }
.hero-story-link {
  min-height: 50px; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px;
  font-size: 12px; color: var(--ink); background: var(--paper); gap: 15px; box-shadow: 0 3px 10px #153c2a05;
}
.hero-story-link:hover { background: var(--paper-dark); border-color: var(--accent-text); transform: translateY(-2px); }
.future-hero-art.art-has-image { height: 535px; min-height: 0; align-self: end; display: block; margin: 0; }
.future-hero-art.art-has-image::before, .art-has-image .sculpture-coordinate, .art-has-image .sculpture-caption { display: none; }
.arch-composition { position: relative; width: 100%; height: 100%; max-width: 445px; margin-inline: auto 0; }
.arch-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-portrait {
  position: absolute; inset: 15px 12px 0; margin: 0; overflow: hidden;
  clip-path: url('#lamen-hero-arch'); background: var(--paper-dark);
  animation: arch-arrive 1.2s var(--ease) both;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 45%; }
.hero-portrait figcaption { position: absolute; inset: auto 0 0; padding: 24px 18px 12px; background: linear-gradient(transparent, #10281dcc); color: #fff; font-size: 9px; letter-spacing: .04em; text-align: end; }
.arch-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch-outline path { fill: none; stroke: var(--accent-text); stroke-width: .3; vector-effect: non-scaling-stroke; }
.hero-note {
  display: flex; align-items: center; gap: 11px; position: absolute; z-index: 2;
  width: 226px; padding: 15px 16px; background: color-mix(in srgb, var(--raised) 95%, transparent);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px #163e2a17;
  color: var(--ink); animation: note-float 7s ease-in-out infinite; transition: box-shadow .3s, border-color .3s;
}
.hero-note-0 { top: 36%; inset-inline-start: -65px; }
.hero-note-1 { top: 66%; inset-inline-start: -20px; animation-delay: -3.5s; }
.hero-note-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; color: var(--accent-text); background: var(--paper-dark); }
.hero-note-icon svg { width: 21px; height: 21px; }
.hero-note strong { display: block; font-size: 12px; line-height: 1.45; font-weight: 600; }
.hero-note small { font-size: 9px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.hero-note > svg { width: 12px; height: 12px; flex-shrink: 0; margin-inline-start: auto; }
.hero-note:hover { box-shadow: 0 18px 36px #163e2a29; border-color: var(--accent-text); }
.motion-paused .hero-note { animation-play-state: paused; }
.art-has-image .motion-toggle { bottom: 13px; inset-inline-end: 28px; background: #fff; color: #193c2e; border-color: #fff; z-index: 3; }
.hero-portrait figcaption { padding-inline-end: 58px; }
.future-hero-bottom { border: 0; min-height: 88px; padding-bottom: 25px; }
.hero-values { font-size: 9px; text-transform: none; letter-spacing: .02em; }
.hero-index { display: none; }

/* Softer cards, architectural linework and editorial typography form one system. */
.institution-section { padding-block: 72px 44px; }
.institution-layout { gap: 85px; grid-template-columns: 1fr 1.1fr; margin-top: 25px; }
.institution-layout h2 { font-size: 43px; max-width: 430px; line-height: 1.18; }
.institution-copy .prose { font-size: 14px; }
.institution-facts { border: 0; border-radius: 0; background: transparent; gap: 18px; box-shadow: none; overflow: visible; }
.institution-facts > div, .institution-facts > div + div {
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--raised); box-shadow: var(--shadow); gap: 19px; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.institution-facts > div:hover { transform: translateY(-4px); border-color: var(--accent-text); box-shadow: 0 18px 38px #163e2a12; }
.institution-facts .fact-label { font-size: 11px; color: var(--muted); }
.institution-facts .fact-label svg { color: var(--accent-text); width: 20px; height: 20px; }
.institution-facts strong, .institution-facts > div:first-child strong { font-size: 43px; color: var(--accent-text); letter-spacing: -.045em; }
.institution-facts strong .fact-unit { color: var(--accent-text); }
.purpose-section { padding-block: 35px 76px; }
.purpose-heading { margin-bottom: 28px; }
.purpose-heading h2 { font-size: 39px; line-height: 1.2; }
.purpose-statement, .purpose-statement + article { padding: 30px 35px 34px; border-radius: 18px; box-shadow: var(--shadow); }
.purpose-statement.purpose-mission { background: linear-gradient(140deg, var(--raised), var(--surface)); }
.purpose-statement.purpose-vision { background: var(--raised); }
.purpose-statement.purpose-mission { color: var(--ink); border-color: var(--line); }
.purpose-statement.purpose-mission p { color: var(--muted); }
.purpose-statement .purpose-index { color: var(--muted); }
.purpose-mission .purpose-symbol { background: var(--paper-dark); color: var(--accent-text); border-color: var(--line); }
.purpose-card-top { margin-bottom: 25px; }
.purpose-symbol { border-radius: 50%; width: 48px; height: 48px; background: var(--paper-dark); color: var(--accent-text); border: 1px solid var(--line); }
.purpose-symbol svg { width: 25px; height: 25px; }
.purpose-statement h3 { font-size: 28px; color: var(--ink); }
.purpose-statement p { font-size: 14px; line-height: 1.9; max-width: 470px; }
.purpose-etching { opacity: .25; }
.purpose-statement:hover .purpose-symbol { box-shadow: 0 0 0 7px color-mix(in srgb, var(--line) 40%, transparent); }
.product-showcase { background: var(--surface); padding-block: 69px 76px; position: relative; }
.refined-heading h2 { font-size: 42px; line-height: 1.18; }
.refined-heading .prose { font-size: 14px; }
.product-showcase-grid { gap: 20px; }
.product-tile { padding: 26px 25px 21px; border-radius: 17px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.product-tile::before { opacity: .16; }
.product-tile::after { content: ''; position: absolute; pointer-events: none; width: 125px; height: 150px; inset: auto -47px -75px auto; border: 1px solid var(--accent-text); border-radius: 50% 50% 0 0; opacity: .14; transform: rotate(-30deg); }
.product-tile:hover { transform: translateY(-7px); border-color: var(--accent-text); box-shadow: 0 22px 42px #163e2a17; }
.product-tile-top { margin-bottom: 27px; }
.product-glyph { background: var(--paper-dark); color: var(--accent-text); border: 1px solid var(--line); border-radius: 13px; width: 51px; height: 51px; }
.product-glyph svg { width: 26px; height: 26px; }
.product-tile h3 { font-size: 26px; line-height: 1.2; margin-bottom: 14px; }
.product-tile > p { font-size: 12px; line-height: 1.85; min-height: 67px; }
.product-tile-bottom { padding-top: 16px; }
.tile-arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.sector-explorer.future-sectors { padding-block: 75px; background: var(--paper); }
.sector-visuals { border-radius: 20px; box-shadow: 0 18px 40px #143b2914; }
.sector-explorer .future-sector summary h3 { font-size: 19px; }
.sector-explorer .future-sector[open] .sector-toggle { background: var(--accent-text); color: var(--paper); border-color: var(--accent-text); }
.future-presence { background: var(--surface); padding-block: 65px 75px; }
.presence-heading h2 { font-size: 42px; }
.presence-heading .prose { font-size: 14px; }
.presence-map { background: var(--raised); border-radius: 18px; box-shadow: var(--shadow); }
.presence-list h3 { font-size: 27px; }
.presence-list > a { padding-inline: 12px; border-radius: 9px; }
.presence-list > a:hover { background: var(--raised); }
.future-callout { padding-block: 43px; }
.conversation-panel { border-radius: 20px; background: var(--surface); box-shadow: none; padding: 33px 40px; }
.future-callout .conversation-copy h2 { font-size: 33px; }
.conversation-copy .prose { max-width: 530px; font-size: 13px; }
.conversation-symbol { background: var(--raised); border-radius: 50%; }
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-top: 50px; }
.footer-intro .brand-lockup { margin-top: 4px; }
.footer-intro > p { font-family: var(--display); font-size: 22px; line-height: 1.4; max-width: 270px; }
.footer-main { gap: 65px; padding-bottom: 40px; }
.footer-links { font-size: 12px; gap: 14px 25px; }
.footer-contact .footer-email { font-family: var(--display); font-size: 28px !important; }
.social-links > a { border-radius: 50%; }
.footer-bottom { border-color: var(--line); }
.article-card { border: 1px solid var(--line); background: var(--raised); border-radius: 17px; box-shadow: var(--shadow); overflow: hidden; }
.article-card > a { display: block; padding: 0 23px 24px; height: 100%; }
.article-card-image, .article-card-typography { margin-inline: -23px; border-radius: 0; }
.article-card-image > img, .article-card-typography { aspect-ratio: 1.7; }
.article-card-typography { background: var(--paper-dark) url('/assets/lattice.svg') center / 95px; }
.article-card-typography > span:first-child { display: flex; align-items: center; justify-content: center; font-size: 0; width: 72px; }
.article-card .article-placeholder-icon { width: 72px; height: 69px; object-fit: contain; }
.article-card h3 { font-size: 25px; line-height: 1.25; }
html[lang=en] .article-card h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; }
.article-card:hover, .article-card:focus-within { border-color: var(--accent-text); box-shadow: 0 20px 40px #163e2a17; }
.page-hero { padding-block: 65px; }
.page-hero h1, .identity-main h1 { font-size: clamp(44px, 5vw, 65px); line-height: 1.14; }
.page-hero p { font-size: 15px; }
.page-story .text-section h2 { font-size: 43px; }
.page-story .text-section .prose { font-size: 22px; line-height: 1.6; }
.page-story .feature-grid article { border-radius: 17px; box-shadow: var(--shadow); }
.page-story .feature-grid h3 { font-size: 28px; }
.endnote > p { font-family: var(--display); font-size: 29px; }
html[dir=rtl] .brand-words strong { font-family: var(--sans); letter-spacing: 0; font-size: 32px; }
html[dir=rtl] .brand-words small { letter-spacing: 0; font-size: 8px; }
html[dir=rtl] .future-hero h1 { font-size: 44px; line-height: 1.6; }
html[dir=rtl] .hero-note strong { font-size: 11px; }
html[dir=rtl] .hero-note small { font-size: 9px; }
html[dir=rtl] .footer-intro > p { font-family: var(--sans); font-size: 19px; }
@keyframes note-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes arch-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

@media (min-width:1120px) and (max-width:1230px) {
  .site-header .header-inner { width: calc(100% - 48px); gap: 12px; }
  .site-header .nav-link, .site-header .more-menu summary { padding-inline: 9px; font-size: 12px; }
  .site-header .header-actions > .button { gap: 10px; padding-inline: 13px; }
  .brand-words strong { font-size: 26px; }
  .brand-words small { font-size: 7px; }
}
@media (max-width:1000px) {
  .future-hero-stage { grid-template-columns: 1.15fr .85fr; min-height: 485px; gap: 24px; }
  .future-hero h1 { font-size: 43px; }
  .future-hero-description p { font-size: 13px; }
  .future-hero-art.art-has-image { height: 440px; }
  .hero-note { width: 190px; gap: 8px; padding: 12px; }
  .hero-note-0 { inset-inline-start: -20px; top: 57%; }
  .hero-note-1 { inset-inline-start: -8px; top: 76%; }
  .hero-note strong { font-size: 11px; }
  .hero-note small { font-size: 8px; }
  .hero-note-icon { width: 29px; height: 29px; }
  .hero-ctas { gap: 9px; }
  .hero-ctas .button-acid, .hero-story-link { padding-inline: 16px; min-height: 46px; font-size: 11px; }
  .institution-layout { gap: 40px; }
  .institution-layout h2 { font-size: 38px; }
  .institution-facts { gap: 12px; }
  .institution-facts > div, .institution-facts > div + div { padding: 20px 17px; }
  .institution-facts strong, .institution-facts > div:first-child strong { font-size: 37px; }
  .institution-facts .fact-label { font-size: 10px; gap: 7px; }
  .institution-facts .fact-label svg { width: 17px; height: 17px; }
  .refined-heading h2, .presence-heading h2 { font-size: 37px; }
  .product-showcase-grid { gap: 18px; }
  .purpose-statement, .purpose-statement + article { padding: 28px; }
  .footer-main { gap: 35px; }
  html[dir=rtl] .future-hero h1 { font-size: 35px; }
}
@media (max-width:719px) {
  .site-header .brand .brand-icon { width: 37px; height: 35px; }
  .site-header .brand-lockup { gap: 7px; }
  .site-header .brand-words strong { font-size: 24px; }
  .site-header .brand-words small { font-size: 6px; letter-spacing: .025em; }
  .site-header .brand .full-wordmark { width: 129px; }
  .site-header .header-inner { height: 76px; gap: 9px; }
  .site-header .header-actions { gap: 5px; }
  .site-header .language-menu summary { font-size: 10px; padding-inline: 8px; }
  .site-header .language-menu summary svg { display: none; }
  .site-header .theme-toggle, .site-header .menu-toggle { width: 36px; min-height: 38px; height: 38px; }
  .future-hero-inner { padding-top: 23px; width: calc(100% - 40px); }
  .future-hero-top .eyebrow { font-size: 8px; max-width: 240px; }
  .hero-edition { display: none; }
  .future-hero-stage { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .future-hero-copy { padding-block: 27px 0; }
  .future-hero h1 { font-size: clamp(37px, 9vw, 50px); line-height: 1.14; max-width: 490px; }
  .future-hero .hero-line + .hero-line { margin-top: 5px; }
  .future-hero-description { margin-top: 21px; }
  .future-hero-description p { font-size: 13px; line-height: 1.85; max-width: 490px; }
  .hero-ctas { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
  .hero-ctas .button-acid, .hero-story-link { padding: 12px 16px; min-height: 46px; font-size: 11px; }
  .future-hero-art.art-has-image { height: 355px; width: 100%; margin-top: 24px; align-self: center; }
  .arch-composition { width: min(290px, 83%); height: 355px; margin-inline: auto; }
  .hero-portrait { inset: 10px 9px 0; }
  .hero-note { width: 177px; padding: 10px 12px; border-radius: 12px; }
  .hero-note-0 { top: 59%; inset-inline-start: -25px; }
  .hero-note-1 { top: 77%; inset-inline-start: auto; inset-inline-end: -25px; }
  .hero-note-icon { width: 28px; height: 28px; border-radius: 8px; }
  .hero-note-icon svg { width: 17px; height: 17px; }
  .hero-note strong { font-size: 10px; }
  .hero-note small { display: none; }
  .art-has-image .motion-toggle { inset-inline-end: calc(50% - 112px); bottom: 12px; width: 25px; height: 25px; }
  .hero-portrait figcaption { font-size: 7px; padding-bottom: 10px; padding-inline-end: 43px; }
  .future-hero-bottom { min-height: 77px; padding-bottom: 13px; gap: 20px; }
  .hero-values { font-size: 7px; gap: 0; }
  .hero-values span + span::before { margin-inline: 9px; }
  .future-hero::before { width: 100%; opacity: .15; }
  .future-hero::after { bottom: -104px; }
  .institution-section { padding-block: 45px 25px; }
  .institution-layout h2 { font-size: 33px; max-width: 380px; }
  .institution-copy .prose { font-size: 13px; }
  .institution-facts { gap: 11px; margin-top: 28px; }
  .institution-facts > div, .institution-facts > div + div, .institution-facts > div:nth-child(n) { padding: 19px 16px; border: 1px solid var(--line); border-radius: 13px; gap: 14px; }
  .institution-facts strong, .institution-facts > div:first-child strong { font-size: 36px; }
  .institution-facts strong small { font-size: 9px; }
  .institution-facts .fact-label { font-size: 9px; }
  .institution-facts .fact-label svg { width: 16px; height: 16px; }
  .purpose-section { padding-block: 27px 45px; }
  .purpose-heading h2 { font-size: 31px; }
  .purpose-statement, .purpose-statement + article { padding: 25px; border-radius: 16px; }
  .purpose-statement h3 { font-size: 26px; }
  .purpose-statement p { font-size: 13px; }
  .purpose-card-top { margin-bottom: 22px; }
  .product-showcase { padding-block: 45px 48px; }
  .refined-heading h2, .presence-heading h2 { font-size: 33px; }
  .refined-heading .prose, .presence-heading .prose { font-size: 13px; }
  .product-showcase-grid { gap: 13px; }
  .product-tile { padding: 20px 16px 16px; border-radius: 14px; }
  .product-tile-top { margin-bottom: 24px; }
  .product-tile h3 { font-size: clamp(20px, 3.9vw, 23px); overflow-wrap: anywhere; }
  .product-tile > p { min-height: 65px; font-size: 11px; }
  .product-glyph { width: 43px; height: 43px; }
  .product-glyph svg { width: 23px; height: 23px; }
  .sector-explorer.future-sectors { padding-block: 46px; }
  .sector-explorer .future-sector summary h3 { font-size: 17px; }
  .future-presence { padding-block: 45px; }
  .presence-list h3 { font-size: 25px; }
  .future-callout { padding-block: 30px; }
  .conversation-panel { padding: 26px; }
  .future-callout .conversation-copy h2 { font-size: 29px; }
  .site-footer { padding-top: 36px; }
  .footer-main { gap: 28px; }
  .footer-intro > p { font-size: 20px; }
  .footer-contact .footer-email { font-size: 24px !important; }
  .page-hero h1, .identity-main h1 { font-size: 39px; }
  .page-hero { padding-block: 42px; }
  .article-card h3 { font-size: 24px; }
  .page-story .text-section h2 { font-size: 34px; }
  .page-story .text-section .prose { font-size: 20px; }
  .endnote > p { font-size: 26px; }
  html[dir=rtl] .site-header .brand-words strong { font-size: 25px; }
  html[dir=rtl] .site-header .brand-words small { font-size: 6px; }
  html[dir=rtl] .future-hero h1 { font-size: 32px; line-height: 1.6; }
  html[dir=rtl] .hero-note strong { font-size: 10px; }
  html[dir=rtl] .hero-note small { font-size: 8px; }
}
@media (max-width:370px) {
  .site-header .header-inner { width: calc(100% - 24px); gap: 6px; }
  .site-header .brand .brand-icon { width: 32px; height: 31px; }
  .site-header .brand-words strong { font-size: 21px; }
  .site-header .brand-words small { font-size: 5px; }
  .site-header .header-actions { gap: 4px; }
  .site-header .language-menu summary { font-size: 9px; padding-inline: 7px; }
  .site-header .theme-toggle, .site-header .menu-toggle { width: 33px; height: 36px; min-height: 36px; }
  .future-hero h1 { font-size: 35px; }
  .hero-ctas { gap: 8px; }
  .hero-ctas .button-acid, .hero-story-link { font-size: 10px; padding-inline: 13px; gap: 12px; }
  .hero-note { width: 162px; padding: 9px; gap: 7px; }
  .hero-note-0 { inset-inline-start: -18px; }
  .hero-note-1 { inset-inline-end: -18px; }
  .product-tile > p { min-height: 0; }
  .product-tile h3 { font-size: 25px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-note, .hero-portrait, .future-hero .hero-line > span { animation: none; }
  .hero-story-link, .institution-facts > div { transition: none; }
  .hero-story-link:hover, .institution-facts > div:hover { transform: none; }
}