/* ÉTERNELLE Home V1.2 — [NATIVE] structure, [CSS] presentation.
   System fonts only: no assumed font files, webfont licenses or external requests. */
:root {
  --navy: #1D2140; --slate: #5C697C; --rose: #CE9F8F;
  --soft-pink: #FAE5DB; --ivory: #FADED2; --white-warm: #FFFDF9;
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);
  --font-display: "Bodoni MT", Didot, "Times New Roman", serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2rem; --space-5: 3rem; --space-6: 5rem;
  --space-section: clamp(5rem, 9vw, 9rem);
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --header-height: 138px;
  --hero-position: 50% 44%; --hero-position-mobile: 54% 50%;
  --video-position: 50% 50%; --video-position-mobile: 50% 50%;
  --overlay-deep: rgba(16, 18, 35, .84); --overlay-mid: rgba(16, 18, 35, .60); --overlay-soft: rgba(16, 18, 35, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; color: var(--navy); background: var(--white-warm); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; }
h2 { font-size: clamp(2rem, 3.65vw, 3.7rem); }
p { font-size: .9rem; line-height: 1.8; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; border: 0; background: transparent; }
button:disabled { cursor: default; opacity: .35; }
a,button,input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
[hidden] { display: none !important; }
.container { width: calc(100% - var(--gutter) * 2); max-width: 1440px; margin-inline: auto; }
.section-space { padding-block: var(--space-section); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; background: var(--ivory); color: var(--navy); padding: 16px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.placeholder-heading { overflow-wrap: anywhere; }
.eyebrow { font-size: .67rem; letter-spacing: .16em; line-height: 1.6; }
.text-link { display: inline-block; position: relative; padding-block: 14px; font-size: .65rem; letter-spacing: .14em; line-height: 1.5; }
.text-link::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; transition: transform 900ms var(--ease-luxury); }
.text-link:hover::after { transform: scaleX(.65); }
.light { color: var(--ivory); }
/* 01 · [NATIVE/CSS] */
/* 02 · [CSS] + [JS-OPTIONAL] state toggled after hero threshold */
.site-header { height: var(--header-height); position: sticky; top: 0; z-index: 20; margin-bottom: calc(-1 * var(--header-height)); color: var(--ivory); background: transparent; border-bottom: 1px solid transparent; transition: background-color 450ms var(--ease-luxury), color 450ms var(--ease-luxury), border-color 450ms var(--ease-luxury); }
.site-header.scrolled { background: var(--ivory); color: var(--navy); border-color: rgba(29,33,64,.12); }
.utility-row { position: relative; height: 88px; margin-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.utility-left,.utility-right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); font-size: 9px; letter-spacing: .1em; }
.utility-right { justify-content: end; }
.language-trigger { padding: 12px 0; font-size: inherit; letter-spacing: inherit; }
.wordmark { display: flex; flex-direction: column; align-items: center; width: max-content; }
.wordmark > span { font-family: var(--font-ui); font-size: 20px; line-height: 1.2; letter-spacing: .12em; }
.primary-nav { height: 50px; display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 46px); padding-inline: 24px; }
.primary-nav a { font-size: 10px; letter-spacing: .1em; padding-block: 12px; white-space: nowrap; }
.primary-nav a:hover,.utility-row a:not(.wordmark):hover,.footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-trigger,.mobile-language { display: none; }
.mobile-menu { margin: 0; padding: 0 var(--gutter) 32px; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border: 0; background: var(--navy); color: var(--ivory); }
dialog::backdrop { background: rgba(29,33,64,.5); }
.drawer-top { min-height: 88px; display: flex; justify-content: space-between; align-items: center; }
.drawer-brand { font-family: var(--font-ui); letter-spacing: .1em; font-size: 20px; }
.close-menu,.close-language { width: 44px; height: 44px; font-size: 30px; font-weight: 300; }
.drawer-nav { display: flex; flex-direction: column; gap: 3px; margin-block: 12px 24px; }
.drawer-nav a { font-family: var(--font-display); font-size: clamp(24px, 5vw, 32px); padding-block: 9px; }
.mobile-menu[open] .drawer-nav a { animation: drawer-reveal 800ms var(--ease-luxury) both; animation-delay: calc(var(--item-index, 0) * 40ms); }
.drawer-utilities { display: flex; flex-wrap: wrap; gap: 24px; font-size: 10px; letter-spacing: .1em; margin-bottom: 28px; }
.languages { display: flex; gap: 12px; }
.languages button { min-width: 36px; min-height: 44px; font-size: 11px; letter-spacing: .1em; padding: 8px; }
.languages button[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
/* Shared frames for supplied local photography. */
.media-slot { position: relative; overflow: hidden; background: var(--soft-pink); min-width: 0; }
.media-slot img { transition: transform 1200ms var(--ease-luxury); }
.dark-slot { background: var(--navy); }
.landscape { aspect-ratio: 16 / 9; }
.portrait { aspect-ratio: 3 / 4; }
/* 03 · [NATIVE] video layer, poster always underneath */
.hero { position: relative; isolation: isolate; height: max(600px, 90vh); color: var(--ivory); display: flex; align-items: end; justify-content: center; background: var(--navy); padding: calc(var(--header-height) + 70px) var(--gutter) clamp(70px, 9vh, 110px); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-position); }
/* Web-optimized hero video is physically horizontal (1920x1080), so no CSS rotation is needed. */
.hero-media video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--video-position); opacity: 1; }
.hero-media > img { position: absolute; inset: 0; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(16,18,35,.66), rgba(16,18,35,.42) 18%, transparent 38%); }
.hero-media::after,
.campaign-media::after,
.club-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--overlay-deep) 0%, var(--overlay-mid) 28%, var(--overlay-soft) 48%, transparent 68%); }
.hero-content { text-align: center; width: 100%; animation: text-reveal 1000ms var(--ease-luxury) 450ms both; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 4.6rem); letter-spacing: .025em; }
.hero p { margin-top: 18px; font-size: clamp(.6rem, .9vw, .75rem); letter-spacing: .15em; overflow-wrap: anywhere; }
.hero .text-link { margin-top: 25px; }
.video-toggle { position: absolute; right: var(--gutter); bottom: 24px; padding: 12px; font-size: 9px; letter-spacing: .1em; }
.video-toggle span { margin-left: 12px; }
/* 05–07 · [NATIVE/CSS] Edge-to-edge sequence. Never reveal/translate the panels. */
.campaign-panel { position: relative; isolation: isolate; height: 86vh; margin: 0; border: 0; color: var(--ivory); background: var(--navy); display: flex; align-items: end; justify-content: center; padding: 0 var(--gutter) clamp(42px, 7vh, 76px); }
.campaign-media { position: absolute; inset: 0; z-index: -1; }
.campaign-media img { object-position: var(--campaign-position); }
.campaign-1 { --campaign-position: 50% 44%; --campaign-position-mobile: 53% 48%; }
.campaign-2 { --campaign-position: 50% 80%; --campaign-position-mobile: 50% 56%; }
.campaign-3 { --campaign-position: 50% 50%; --campaign-position-mobile: 50% 48%; }
.campaign-panel-copy { width: 100%; text-align: center; }
.campaign-panel-copy h2 { font-size: clamp(1.6rem, 3.2vw, 3.2rem); }
.campaign-panel-copy p { margin: 16px auto 8px; max-width: 480px; font-size: .75rem; letter-spacing: .06em; }
.campaign-panel-copy .text-link { margin-top: 8px; }
/* 04 · [NATIVE] native touch/mouse scrolling, [JS-OPTIONAL] exact controls */
.products { padding-block: var(--space-section); }
.product-track { display: flex; gap: 32px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rose) var(--white-warm); padding-bottom: 20px; }
.product { flex: 0 0 calc((100% - 96px) / 4); min-width: 0; scroll-snap-align: start; text-align: center; }
.product-image { aspect-ratio: 4 / 5; background: var(--white-warm); }
.product-image img { transition: transform 750ms var(--ease-luxury), opacity 750ms var(--ease-luxury); }
.product-image .product-alternate { position: absolute; inset: 0; opacity: 0; }
.product h3 { font-size: 10px; font-weight: 400; letter-spacing: .11em; margin: 26px 0 9px; overflow-wrap: anywhere; }
.product p { font-size: 9px; letter-spacing: .08em; color: var(--slate); overflow-wrap: anywhere; }
.carousel-controls { display: flex; gap: 24px; align-items: center; justify-content: center; margin: 24px auto 0; width: min(360px, 100%); }
.carousel-controls button { width: 44px; height: 44px; font-size: 24px; flex-shrink: 0; }
.carousel-rule { width: 100%; height: 1px; background: var(--ivory); }
.carousel-rule span { display: block; height: 1px; background: var(--navy); width: 50%; transition: width 400ms var(--ease-luxury); }
/* 08 · [NATIVE/CSS] 58/38 editorial proportions */
.collection-grid { display: grid; grid-template-columns: 58fr 38fr; gap: 70px 4%; align-items: start; }
.collection-b { padding-top: 30%; }
.collection-c { grid-column: 1 / -1; }
.collection-copy { padding-top: 27px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.collection-copy h2 { font-size: clamp(1.3rem, 2.2vw, 2.2rem); }
.collection-copy .text-link { flex-shrink: 0; font-size: 9px; }
/* 09 · [NATIVE/CSS] */
.club { background: var(--navy); color: var(--ivory); display: grid; grid-template-columns: 1fr 1fr; }
.club-image { min-height: 620px; }
.club-image img { position: absolute; inset: 0; object-position: 50% 25%; }
.club-copy { padding: clamp(60px, 8vw, 130px) clamp(32px, 6vw, 96px); align-self: center; }
.club-copy h2 { font-size: clamp(2.8rem, 4.6vw, 4.6rem); margin-top: 36px; }
.club-description { max-width: 340px; margin-top: 30px; font-size: 13px; line-height: 1.9; }
.club-copy .text-link { margin-top: 30px; }
/* 10 · [NATIVE/CSS] Type is in flow to avoid image/text collisions. */
.milano .landscape { aspect-ratio: 6 / 5; }
.milano .landscape img { object-position: 50% 35%; }
.milano-copy { text-align: center; margin-bottom: clamp(48px, 6vw, 90px); }
.milano h2 { margin-block: 30px 20px; }
.milano h2 span { display: block; }
.milano h2 > span:first-child { font-size: clamp(4.5rem, 12vw, 12rem); letter-spacing: -.035em; line-height: .95; }
.milano-subtitle { font-family: var(--font-ui); font-size: clamp(.95rem, 2.3vw, 2.3rem); letter-spacing: .18em; margin-top: 18px; }
.milano-year { font-size: clamp(3.8rem, 7vw, 7rem); margin-top: 12px; }
/* 11 · [NATIVE/CSS] Client-selected story photograph. */
.story { background: var(--ivory); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; }
.story-image { aspect-ratio: 2161 / 3168; max-height: 640px; }
.story-copy h2 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
.story-copy p { max-width: 410px; margin-top: 28px; font-size: 14px; }
/* 12 · [NATIVE/CSS] Replace form with Squarespace native form. */
.newsletter { background: var(--soft-pink); text-align: center; }
.newsletter-inner { max-width: 610px; width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
.newsletter h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
.newsletter-inner > p { margin-top: 20px; font-size: 13px; }
#newsletter-form { margin-top: 46px; text-align: left; }
#newsletter-form label { display: block; font-size: 10px; letter-spacing: .13em; }
.email-line { display: flex; gap: 15px; border-bottom: 1px solid var(--navy); align-items: center; }
.email-line input { min-width: 0; width: 100%; height: 48px; border: 0; background: transparent; }
.email-line button { flex-shrink: 0; padding: 15px 0 15px 12px; font-size: 10px; letter-spacing: .09em; }
.email-line button span { margin-left: 16px; }
.form-status { font-size: 11px; min-height: 32px; margin-top: 12px; }
/* 13 · [NATIVE/CSS] */
.footer { background: var(--navy); color: var(--ivory); padding: 80px 0 28px; }
.footer-logo { margin-bottom: 54px; }
.footer-logo > span { font-size: 22px; }
.footer-links { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
.footer-links nav { display: flex; flex-direction: column; align-items: start; gap: 18px; }
.footer-links a { font-size: 12px; letter-spacing: .02em; line-height: 1.5; }
.footer-social { justify-self: end; }
.footer-social .languages { margin: 24px -8px 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 28px; margin-top: 70px; border-top: 1px solid rgba(250,222,210,.22); font-size: 9px; letter-spacing: .1em; }
.footer-bottom nav { display: flex; gap: 28px; }
/* [JS-OPTIONAL] In-page feedback identifies prototype actions honestly. */
.language-dialog { border: 1px solid var(--rose); color: var(--navy); background: var(--white-warm); padding: 58px 42px 36px; width: min(380px, calc(100% - 40px)); }
.language-dialog h2 { font-size: 26px; margin-bottom: 24px; }
.language-dialog .languages { justify-content: center; }
.close-language { position: absolute; right: 10px; top: 8px; }
.prototype-notice { position: fixed; z-index: 80; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 520px; width: calc(100% - 40px); background: var(--ivory); color: var(--navy); border: 1px solid var(--navy); padding: 16px 20px; font-size: 12px; line-height: 1.6; text-align: center; }
/* [CSS] Reveals are progressive enhancements: no JS = content stays visible. */
.reveal.will-reveal { opacity: 0; transform: translateY(28px); }
.reveal { transition: opacity 900ms var(--ease-luxury), transform 1000ms var(--ease-luxury); }
.image-reveal.will-reveal img,.will-reveal .image-reveal img { transform: scale(1.025); }
.image-reveal { transition-duration: 1200ms; }
@keyframes text-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawer-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) {
  .product-image:hover img { transform: scale(1.025); }
  .product-image:hover .product-alternate { opacity: 1; }
  .collection:hover .media-slot img { transform: scale(1.02); }
}
@media (max-width: 1100px) {
  :root { --header-height: 128px; }
  .utility-row { height: 80px; }
  .primary-nav { height: 48px; gap: 20px; }
  .primary-nav a { font-size: 9px; }
  .utility-left,.utility-right { font-size: 8px; gap: 18px; }
  .product { flex-basis: calc((100% - 64px) / 3); }
  .collection-copy { align-items: start; flex-direction: column; gap: 4px; }
  .club-image { min-height: 550px; }
}
@media (max-width: 900px) {
  :root { --header-height: 84px; }
  .utility-row { height: 84px; display: flex; justify-content: center; }
  .utility-left,.utility-right,.primary-nav { display: none; }
  .menu-trigger { display: flex; flex-direction: column; justify-content: center; gap: 6px; position: absolute; left: -10px; width: 44px; height: 44px; padding: 10px; }
  .menu-trigger span { height: 1px; width: 22px; background: currentColor; }
  .mobile-language { display: block; position: absolute; right: -10px; width: 44px; height: 44px; font-size: 11px; }
  .product { flex-basis: calc((100% - 32px) / 2); }
  .club-copy { padding: 55px 32px; }
  .club-copy h2 { font-size: 40px; }
  .club-image { min-height: 520px; }
  .story-grid { gap: 7%; }
}
@media (max-width: 600px) {
  :root { --header-height: 76px; --space-section: 72px; --gutter: 24px; }
  .utility-row { height: 76px; }
  .wordmark > span { font-size: 17px; }
  .hero { height: max(560px, 84svh); padding-bottom: 74px; }
  .hero-media > img { object-position: var(--hero-position-mobile); }
  .hero-media video { object-position: var(--video-position-mobile); }
  .hero h1 { font-size: clamp(1.55rem, 6.7vw, 2.5rem); }
  .hero p { font-size: 9px; letter-spacing: .1em; }
  .hero .text-link { margin-top: 20px; }
  .landscape { aspect-ratio: 4 / 3; }
  .campaign-panel { height: 72svh; padding-bottom: 40px; }
  .campaign-media img { object-position: var(--campaign-position-mobile); }
  .campaign-panel-copy h2 { font-size: clamp(1.45rem, 6vw, 2rem); }
  .campaign-panel-copy p { font-size: 11px; max-width: 300px; }
  .products .container { width: calc(100% - var(--gutter)); margin-left: var(--gutter); }
  .product-track { gap: 20px; padding-right: 24px; }
  .product { flex-basis: 80%; }
  .carousel-controls { padding-right: 24px; max-width: 270px; }
  .collection-grid { grid-template-columns: 1fr; gap: 52px; }
  .collection-b { padding-top: 0; }
  .collection-copy { gap: 9px; padding-top: 22px; }
  .collection-copy h2 { font-size: 25px; }
  .club { grid-template-columns: 1fr; }
  .club-image { min-height: 0; aspect-ratio: 4 / 5; }
  .club-copy { padding: 56px 24px 64px; }
  .club-copy h2 { font-size: 48px; margin-top: 26px; }
  .club-description { max-width: 340px; }
  .milano h2 > span:first-child { font-size: clamp(70px, 21vw, 100px); }
  .milano-subtitle { font-size: 17px; }
  .milano-year { font-size: 64px; }
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-image { width: 100%; }
  .milano .landscape { aspect-ratio: 3 / 4; }
  .story-copy h2 { font-size: 36px; }
  .story-copy p { font-size: 13px; }
  .newsletter h2 { font-size: 34px; }
  .newsletter-inner > p { font-size: 12px; }
  .email-line button { font-size: 9px; padding-left: 5px; }
  .email-line button span { margin-left: 6px; }
  .footer { padding-top: 60px; }
  .footer-logo > span { font-size: 20px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-social { justify-self: start; grid-column: 1 / -1; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 22px; margin-top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .reveal.will-reveal { opacity: 1; transform: none; }
  .image-reveal.will-reveal img,.will-reveal .image-reveal img { transform: none; }
  /* Keep hero video available even when reduced-motion is enabled; only decorative transitions are disabled. */
}


/* Shared navigation and preliminary editorial routes · October 2026 feedback. */
.search-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.drawer-nav .search-link { align-self: flex-start; }
.drawer-nav a { font-size: clamp(22px, 4.5vw, 30px); }
.launch-teaser { --campaign-position: 50% 44%; --campaign-position-mobile: 53% 48%; }
.preliminary-hero h1 { overflow-wrap: anywhere; }
.footer-bottom > span { line-height: 1.8; }

/* Home only: independent, client-confirmed collection feature. */
.eterna-dualis-feature { --campaign-position: 50% 75%; --campaign-position-mobile: 50% 50%; min-height: 600px; }
.eterna-dualis-feature .eyebrow { font-size: .67rem; letter-spacing: .16em; margin: 0 auto 12px; }
.eterna-dualis-feature h2 { font-size: clamp(2rem, 4vw, 4rem); }
.eterna-dualis-feature .campaign-panel-copy > p:not(.eyebrow) { margin: 12px auto 8px; letter-spacing: .12em; }
@media (max-width: 600px) {
  .eterna-dualis-feature { padding-bottom: 32px; }
  .eterna-dualis-feature h2 { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
}

/* Compact inline header search; original desktop icon stays in place. */
.header-search { position:fixed; z-index:30; color:var(--navy); }
.header-search form { height:44px; background:var(--ivory); transform-origin:right center; animation:header-search-expand 240ms var(--ease-luxury) both; }
.header-search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#header-search-input { width:100%; height:44px; min-width:0; padding:10px 14px; border:0; border-bottom:1px solid var(--navy); border-radius:0; background:transparent; color:inherit; font:inherit; font-size:16px; }
.header-search-dropdown { position:absolute; top:50px; left:0; width:100%; max-height:min(420px,var(--search-results-height)); overflow-y:auto; overscroll-behavior:contain; padding:16px 20px; background:var(--ivory); box-shadow:0 8px 24px rgba(29,33,64,.14); animation:header-search-results 180ms ease-out both; }
#header-search-status { font-size:12px; line-height:1.5; margin:0 0 12px; }
.header-search-results article { border-top:1px solid rgba(29,33,64,.16); padding:14px 0; }
.header-search-results h3 { font-size:20px; margin:0 0 6px; overflow-wrap:anywhere; }
.header-search-results p { font-size:12px; line-height:1.6; margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.header-search-results a:hover { text-decoration:underline; text-underline-offset:4px; }
.search-active svg { visibility:hidden; }
.search-active { position:relative; }
.search-active::after { content:'×'; position:absolute; inset:0; display:grid; place-items:center; font-size:25px; }
.header-mobile-search { display:none; }
@keyframes header-search-expand { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0); } }
@keyframes header-search-results { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) {
 .header-mobile-search { display:flex; position:absolute; right:58px; top:50%; transform:translateY(-50%); width:28px; height:40px; align-items:center; justify-content:center; }
 .header-search-open .wordmark,.header-search-open .menu-trigger { visibility:hidden; }
 .header-search-dropdown { width:calc(100vw - 32px); }
 .utility-row .wordmark { max-width:calc(100% - 125px); }
 .utility-row .wordmark span { font-size:clamp(12px,3.5vw,18px); }
}
@media(prefers-reduced-motion:reduce) { .header-search form,.header-search-dropdown { animation:none; } }

.primary-nav .search-obscured { visibility:hidden; }
#header-search-input:focus-visible { outline:1px solid var(--navy); outline-offset:2px; }