/* Newsreader (Production Type, SIL Open Font License 1.1) stands in for Lyon
   Text until a Lyon licence is bought: same transitional, editorial register,
   real italics, and it self-hosts, so the site still makes no third-party
   requests. Optical-size axis pinned at 16 to keep the files small; weight
   stays variable. Licence in assets/fonts/Newsreader-OFL.txt. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo (Omnibus-Type, SIL Open Font License 1.1) is the structural voice.
   Helvetica only exists on Apple machines, so Windows was falling through to
   Arial and the site rendered in two different grotesques depending on who was
   looking. Self-hosted for the same reason as Newsreader: no third-party
   requests. Weight axis stays variable, 400-700.
   Licence in assets/fonts/Archivo-OFL.txt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Editorial Ivory — core neutrals (Copy Master, COLOR SYSTEM).
     Both text tokens are pure black at the client's request (28 Aug 2026):
     titles and small text alike run #000. The two names are kept apart so the
     supporting layer can be pulled back to a softer value again without
     touching the rules that use it. */
  --ink: #000000;            /* Brand Black — logo, headlines, body text */
  --paper: #FBF7EF;          /* Ivory · Warm White — preferred warm canvas */
  --soft: #F2ECE0;           /* Soft Parchment — cards and secondary editorial surfaces */
  --quiet: #000000;          /* Supporting copy and metadata */
  --line: #E2DBD0;           /* Editorial Border — quiet structural lines */
  --line-soft: #ECE6DC;      /* Editorial Border, lightened for subtle nested rules */

  /* Balanced Continuum — STILLUSION Blue as an intentional jewel accent. */
  --blue-deep: #07172C;      /* Deep Midnight Lapis — footers, deep prestige fields */
  --blue: #123F7A;           /* Chromatic anchor, active states, refined emphasis */
  --blue-support: #3E5F8A;   /* Secondary functional labels and delicate accents */
  --blue-quiet: #AFC2D8;     /* Quiet transitions and supporting surfaces */
  --blue-mist: #F4EFE6;      /* Harmonious warm silk surface replacing cold grey-blue */

  /* Everything else on the page is drawn from here. Translucent layers — the
     header glass, scrims over photographs, reversed-out type — take a channel
     triplet so the alpha can sit at the point of use: rgb(var(--paper-rgb) / .9). */
  --white: #FFFFFF;          /* Reversed-out type on photographs and Deep Blue */
  --white-rgb: 255 255 255;
  --paper-rgb: 251 247 239;
  --ink-rgb: 0 0 0;
  --black-rgb: 0 0 0;        /* Photographic scrims — black whatever --ink becomes */
  --blue-deep-rgb: 7 23 44;
  --error: #9B2226;          /* Form errors only */
  --photo-base: #242220;     /* Shows under the hero until its frame decodes */
  --photo-base-deep: #141210; /* The same, under the closing panel */

  /* Architectural whitespace & column alignment */
  --edge: 56px;
  --page: min(1360px, calc(100% - 2 * var(--edge)));
  --row-inset: clamp(14px, 1.6vw, 28px);
  --gutter: max(var(--edge), calc((100% - 1360px) / 2));
  --gutter-hero: max(var(--edge), calc(100% - 680px));
  --header-height: 136px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  /* Two steps, not one. The full step opens a page after its hero and closes
     it before the closing panel; where one section runs straight into the
     next, the join takes the shorter one, so a long page reads as a sequence
     rather than a stack of equal bands. */
  --space-section: clamp(84px, 9.5vw, 156px);
  --space-step: clamp(56px, 6vw, 100px);

  /* Helvetica carries structure and hierarchy; the serif is the reading voice. */
  --font-sans: "Archivo", Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-helvetica: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--paper); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .7rem 1rem; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header { position: sticky; z-index: 10; top: 0; display: flex; min-height: var(--header-height); align-items: center; flex-direction: column; padding: 18px var(--gutter) 14px; background: rgb(var(--paper-rgb) / .92); border-bottom: 1px solid var(--line-soft); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); transition: min-height .4s var(--ease), padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.site-header.is-scrolled { min-height: 82px; padding-top: 10px; padding-bottom: 10px; background: rgb(var(--paper-rgb) / .97); border-bottom-color: var(--line-soft); }
.brand-lockup { display: block; width: fit-content; line-height: 0; }
.brand-lockup img { display: block; height: auto; }
.brand-lockup--header .brand-lockup__full { width: 270px; transition: opacity .35s var(--ease); }
.brand-lockup--header .brand-lockup__compact { display: none; width: 185px; }
.site-header.is-scrolled .brand-lockup--header .brand-lockup__full { display: none; }
.site-header.is-scrolled .brand-lockup--header .brand-lockup__compact { display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); margin-top: 10px; transition: margin-top .4s var(--ease); }
.site-header.is-scrolled .site-nav { margin-top: 4px; }
.site-nav a, .menu-button { font-size: 12px; font-weight: 500; letter-spacing: .14em; white-space: nowrap; }
.site-nav a { position: relative; padding: 6px 0; color: var(--ink); transition: color .3s var(--ease); }
.site-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--ink); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.menu-button { display: none; padding: .6rem 0; border: 0; background: none; color: var(--ink); letter-spacing: .14em; cursor: pointer; }

.page { min-height: calc(100vh - var(--header-height)); }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(660px, calc(100svh - var(--header-height))); border-bottom: 1px solid var(--line-soft); }
.hero__content { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(64px, 8vw, 120px) clamp(28px, 6.5vw, 120px) clamp(44px, 5vw, 76px) var(--gutter-hero); }
.hero__image { position: relative; min-height: 420px; overflow: hidden; background: var(--soft); }
.hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__image::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--black-rgb) / .08), transparent 30%); content: ""; }
.eyebrow, .section-label { display: inline-flex; align-items: center; margin: 0 0 24px; color: var(--blue-support); font-size: 12px; font-weight: 500; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.eyebrow::before, .section-label::before { display: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 900px; margin-bottom: 28px; font-size: clamp(2.4rem, 3.6vw, 4.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.hero h1 { max-width: 900px; }
.hero__copy { max-width: 620px; margin-bottom: 34px; color: var(--quiet); font-family: var(--font-serif); font-size: clamp(1.1rem, 1.25vw, 1.26rem); line-height: 1.64; }
.hero--compact { grid-template-columns: 1fr; min-height: 0; }
.hero--compact .hero__content { padding: clamp(52px, 6vw, 92px) var(--gutter) clamp(40px, 4.2vw, 64px); }
.hero--compact h1 { max-width: 18ch; margin-bottom: 22px; font-size: clamp(2.2rem, 3.05vw, 3.5rem); }
.hero--compact .hero__copy { max-width: 660px; margin-bottom: 0; }

.hero--editorial { min-height: calc(100svh - var(--header-height)); grid-template-columns: 1fr; position: relative; overflow: hidden; color: var(--white); background-color: var(--photo-base); background-position: var(--fx, 50%) var(--fy, 50%); background-size: cover; background-repeat: no-repeat; }
.hero--editorial::before { content: ""; position: absolute; z-index: 0; inset: 0; background-image: inherit; background-position: calc(var(--fx, 50%) + var(--hero-shift-x, 0px)) calc(var(--fy, 50%) + var(--hero-shift-y, 0px)); background-size: cover; background-repeat: no-repeat; transform: scale(1.06); transition: background-position .9s var(--ease-out); animation: hero-breathe 24s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; }
.hero--editorial::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(62% 46% at 50% 47%, rgb(var(--black-rgb) / .22) 0%, rgb(var(--black-rgb) / .16) 55%, rgb(var(--black-rgb) / 0) 100%), linear-gradient(180deg, rgb(var(--black-rgb) / .06) 0%, rgb(var(--black-rgb) / 0) 14%, rgb(var(--black-rgb) / .15) 26%, rgb(var(--black-rgb) / .15) 70%, rgb(var(--black-rgb) / .12) 80%, rgb(var(--black-rgb) / .34) 100%); }
.hero--video .hero__video { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.hero--video .hero__video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0) scale(1.06); transition: opacity 1.2s var(--ease-out), transform .9s var(--ease-out); will-change: transform; backface-visibility: hidden; }
.hero--video .hero__video video.is-playing { opacity: 1; }
.hero--video.has-video::before { animation: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero__scroll { position: absolute; z-index: 3; right: 50%; bottom: 32px; display: inline-flex; align-items: center; flex-direction: column; gap: 12px; padding: 8px; border: 0; background: transparent; color: var(--white); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; cursor: pointer; transform: translateX(50%); }
.hero__scroll i { display: block; width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); animation: scroll-cue 1.9s ease-in-out infinite; }

.hero--editorial .hero__content { padding-inline: clamp(var(--edge), 4vw, 96px); position: relative; z-index: 2; display: flex; width: min(100%, 1160px); margin: 0 auto; align-items: center; justify-content: center; flex-direction: column; padding-top: 6vh; text-align: center; }
.hero--editorial .eyebrow { margin-bottom: 28px; color: rgb(var(--white-rgb) / .9); font-size: clamp(11px, .85vw, 13px); letter-spacing: .18em; }
.hero--editorial .eyebrow::before { display: none; }
.hero--editorial h1 { max-width: min(1400px, calc(100vw - 100px)); font-size: clamp(2.6rem, 3.7vw, 4.4rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
.hero--editorial h1 span { display: block; margin-top: .28em; font-family: var(--font-serif); font-style: normal; font-weight: 300; font-size: clamp(1.35rem, 2.1vw, 2.3rem); letter-spacing: 0; color: rgb(var(--white-rgb) / .95); line-height: 1.25; }
@media (min-width: 1100px) { .hero--editorial h1 span { white-space: nowrap; } }
.hero--editorial .hero__copy { max-width: 640px; color: rgb(var(--white-rgb) / .92); font-size: clamp(1.08rem, 1.22vw, 1.22rem); line-height: 1.62; }
.button, .eyebrow, .section-label, .text-button, .instagram-consent-link, label { font-family: var(--font-sans); }
.button-row { display: flex; flex-wrap: wrap; gap: 16px; }
.hero--editorial .button-row { justify-content: center; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.button::before { display: none; }
.button:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.button--light { border-color: rgb(var(--white-rgb) / .85); background: transparent; color: var(--white); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.button--light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* One column. A section label sits directly above the block it names: set in
   a margin rail beside a tall FAQ or letter it centred itself in empty space
   and read as stray text. */
.content-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: var(--page); margin: 0 auto; padding: var(--space-section) 0; border-bottom: 1px solid var(--line-soft); }
/* Sections arrive once, quietly: a short rise, nothing staggered inside them. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.content-section--single { grid-template-columns: minmax(0, 1fr); }
.content-section + .content-section { padding-top: var(--space-step); }
.content-section:has(+ .content-section) { padding-bottom: var(--space-step); }
.content-section > .section-label { justify-self: start; margin-bottom: 32px; }
.content-section > .section-label + .content-section__body .faq { max-width: 960px; margin-top: 0; }
.content-section__body { max-width: none; }
.content-section--intro .content-section__body { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); gap: clamp(42px, 7vw, 130px); align-items: start; }
.content-section--intro h2 { margin-bottom: 0; }
h2 { max-width: 1050px; margin-bottom: 26px; font-size: clamp(1.95rem, 3.05vw, 3.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
h3 { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1.45; text-transform: uppercase; }
.large-copy { max-width: 760px; color: var(--quiet); font-family: var(--font-serif); font-size: clamp(1.1rem, 1.25vw, 1.28rem); line-height: 1.68; }
.large-copy p + p, .body-copy p + p { margin-top: 1.4em; }
.body-copy { max-width: 700px; color: var(--quiet); font-family: var(--font-serif); font-size: 18px; line-height: 1.68; }
.service-links { display: grid; grid-template-columns: repeat(2, 1fr); width: var(--page); margin: 0 auto; border-right: 1px solid var(--line-soft); }
.service-link { position: relative; display: flex; min-height: 320px; align-items: flex-end; padding: 44px 38px; overflow: hidden; border-bottom: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); font-family: var(--font-helvetica); font-size: clamp(1.6rem, 3.2vw, 3.6rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; isolation: isolate; transition: color .4s var(--ease), background .4s var(--ease); }
.service-link::before { position: absolute; z-index: -1; inset: 0; background: var(--soft); content: ""; opacity: 0; transition: opacity .45s var(--ease); }
.service-link::after { position: absolute; top: 38px; right: 38px; color: var(--ink); content: "\2192"; font-size: 1.5rem; opacity: .4; transform: translate(0, 0); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.service-link:hover { color: var(--ink); }
.service-link:hover::before { opacity: 1; }
.service-link:hover::after { opacity: 1; transform: translate(6px, -6px); }

.visual-pair { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(14px, 1.6vw, 24px); height: clamp(260px, 32vw, 480px); margin-top: 56px; overflow: hidden; background: transparent; }
.visual-pair picture { display: block; height: 100%; overflow: hidden; background: var(--soft); }
.visual-pair img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.visual-pair:hover img { transform: scale(1.028); }
.visual-pair picture:last-child img { object-position: center; }
.visual-pair--single { grid-template-columns: 1fr; height: clamp(280px, 40vw, 580px); }
.visual-pair--strategy { grid-template-columns: 1fr 1fr; }
/* Home: the band runs under both columns of the opening statement, the quiet
   cloqué wide and the tapestry as a narrow counterweight. */
.content-section--intro .visual-pair { grid-column: 1 / -1; margin-top: clamp(56px, 7vw, 112px); }
.visual-pair--home { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); height: clamp(300px, 38vw, 580px); }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4.5vw, 64px); margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line-soft); border-left: 0; }
.mission-grid article { position: relative; min-height: 0; padding: 0; border: 0; }
.mission-grid h3 { font-size: 12px; letter-spacing: .16em; margin-bottom: 16px; }
.mission-grid p { margin-bottom: 0; color: var(--quiet); font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; }
.partner-list { margin-top: 48px; }
.partner { display: grid; grid-template-columns: minmax(220px, .5fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 112px); align-items: start; padding: 44px 0; border-bottom: 1px solid var(--line-soft); }
.partner:last-child { padding-bottom: 0; border-bottom: 0; }
.partner h3 { margin: 0; font-size: clamp(1.3rem, 2.15vw, 2.05rem); font-weight: 500; letter-spacing: -.02em; }
.partner__meta { margin: 12px 0 0; color: var(--blue-support); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.partner__body p { margin-bottom: 0; color: var(--quiet); font-family: var(--font-serif); font-size: 17.5px; line-height: 1.68; }
.client-list { columns: 3; gap: clamp(32px, 4vw, 64px); margin-top: 56px; padding: 48px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.client-list li { break-inside: avoid; padding: 10px 0; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .14em; border-bottom: 1px solid rgb(var(--ink-rgb) / .04); }
.fabrics-section--clients { border-bottom: 0; }
.faq { margin-top: 40px; border-top: 1px solid var(--line-soft); }
.faq__group { padding: 32px 0 8px; border-bottom: 1px solid var(--line-soft); }
.faq__group > h3 { color: var(--blue); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; }
details { padding: 6px 0; border-top: 1px solid var(--line-soft); }
details:first-of-type { border-top: 0; }
summary { position: relative; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; letter-spacing: -.01em; transition: color .3s var(--ease); }
summary:hover { color: var(--blue); }
summary::-webkit-details-marker { display: none; }
summary::after { position: absolute; top: 50%; right: 4px; width: 14px; height: 14px; content: ""; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat; transform: translateY(-50%); transition: transform .35s var(--ease); }
summary:hover::after { background-image: linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)); }
details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
details p { max-width: 680px; margin: 0 36px 24px 0; color: var(--quiet); font-family: var(--font-serif); font-size: 16.5px; line-height: 1.68; }

/* The base colour is what shows before the frame decodes, so it is a neutral
   near-black taken off the velvet rather than the deep blue — the panel used to
   sit under a blue wash, and a blue flash ahead of an untinted photo reads as a
   fault. */
.final-cta { position: relative; display: flex; min-height: 520px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: clamp(56px, 7vw, 110px) var(--gutter); color: var(--white); background-color: var(--photo-base-deep); background-position: var(--fx, 50%) var(--fy, 50%); background-size: cover; background-repeat: no-repeat; }
.final-cta::before { content: ""; position: absolute; z-index: 0; inset: 0; background-image: inherit; background-position: calc(var(--fx, 50%) + var(--hero-shift-x, 0px)) calc(var(--fy, 50%) + var(--hero-shift-y, 0px)); background-size: cover; background-repeat: no-repeat; transform: scale(1.06); transition: background-position .9s var(--ease-out); will-change: transform; backface-visibility: hidden; }
.final-cta--dynamic::before { animation: hero-breathe 24s ease-in-out infinite alternate; }
.final-cta::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, transparent 22%, rgb(var(--black-rgb) / calc(var(--scrim, .42) / 3)) 46%, rgb(var(--black-rgb) / var(--scrim, .42)) 100%); }
.final-cta > * { position: relative; z-index: 1; }
.final-cta p { max-width: 620px; margin-bottom: 38px; color: rgb(var(--white-rgb) / .9); font-family: var(--font-serif); font-size: 19px; line-height: 1.62; }
.final-cta h2 { max-width: 700px; font-weight: 500; letter-spacing: -.02em; }
.final-cta .button { border-color: rgb(var(--white-rgb) / .9); background: transparent; color: var(--white); }
.final-cta .button:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

.typographic-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 62px); margin-top: 48px; border-top: 1px solid var(--line-soft); }
.typographic-field span { position: relative; display: flex; align-items: center; gap: 18px; min-height: 74px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); font-size: clamp(1.05rem, 1.45vw, 1.38rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.typographic-field span:nth-child(odd) { padding-right: 12px; }
.typographic-field span:nth-child(even) { padding-left: 12px; }

.page--strategy > .content-section:nth-of-type(3) .content-section__body,
.page--strategy > .content-section:nth-of-type(4) .content-section__body { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); column-gap: clamp(44px, 7vw, 132px); row-gap: 0; align-items: start; }
.page--strategy > .content-section:nth-of-type(3) h2,
.page--strategy > .content-section:nth-of-type(4) h2 { grid-column: 1; grid-row: 1 / span 3; max-width: 510px; margin: 0; font-size: clamp(2.15rem, 2.8vw, 3.4rem); }
.page--strategy > .content-section:nth-of-type(3) .body-copy,
.page--strategy > .content-section:nth-of-type(4) .body-copy,
.page--strategy > .content-section:nth-of-type(4) .large-copy { grid-column: 2; }
.page--strategy > .content-section:nth-of-type(3) .typographic-field,
.page--strategy > .content-section:nth-of-type(4) .typographic-field { grid-column: 2; margin-top: 30px; }
.page--strategy > .content-section:nth-of-type(4) .large-copy { max-width: 580px; margin: 38px 0 0; }
.page--strategy > .content-section:nth-of-type(4) { width: 100%; padding-inline: var(--gutter); background: var(--blue-mist); }
.letter-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .65fr); gap: 8vw; align-items: start; }
.letter-layout .body-copy { max-width: 680px; font-size: 18px; }
.letter-layout__signature { margin-top: 34px; color: var(--ink); font-family: var(--font-serif); font-size: 23px; }
.letter-layout__signature span { font-size: 13px; letter-spacing: .04em; color: var(--quiet); }
.portrait { position: sticky; top: calc(var(--header-height) + 24px); margin: 0; overflow: hidden; background: var(--soft); }
.portrait picture { display: block; }
.portrait img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }

/* Last block on the About page, so it carries no closing rule into the footer.
   The service links above it already end on one. */
.about-section--story { border-bottom: 0; }

.journal-intro { max-width: 730px; }

/* ------------------------------------------------------------------ journal

   The index rows and the article itself. Two rules carry most of the weight:
   the entry row reuses the `.partner` proportions so the Journal reads as part
   of the same system, and the article column is capped in `ch` rather than in
   pixels, because measure is a function of the type size and this one column
   is the only place on the site where a reader stays for a thousand words. */
.journal-section { border-bottom: 0; }
/* The index opens on a compact hero with no photograph, so the first entry is
   close to the fold and the standard section inset is the only thing still
   pushing it down. The related block at the foot of an article keeps the full
   inset — it follows a thousand words and needs the air. */
.journal-section:not(.article-related) { padding-top: clamp(36px, 4vw, 62px); }
.journal-list { border-top: 1px solid var(--line-soft); }
.journal-entry { position: relative; display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 76px); align-items: start; padding: 48px 0; margin-inline: 0; border-bottom: 1px solid var(--line-soft); transition: border-color .4s var(--ease); }
.journal-entry:hover { background: transparent; border-bottom-color: var(--ink); }
.journal-entry__image { overflow: hidden; background: var(--soft); }
.journal-entry__image picture { display: block; }
.journal-entry__image img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.journal-entry:hover .journal-entry__image img { transform: scale(1.025); }
.journal-entry__meta { margin-bottom: 18px; color: var(--blue-support); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.journal-entry__title { max-width: 24ch; margin-bottom: 20px; font-size: clamp(1.5rem, 2.5vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.06; text-transform: none; }
.journal-entry__title a { color: var(--ink); }
.journal-entry:hover .journal-entry__title a { color: var(--blue); }
.journal-entry__title a::after { position: absolute; inset: 0; content: ""; }
.journal-entry__standfirst { max-width: 58ch; margin-bottom: 24px; color: var(--quiet); font-family: var(--font-serif); font-size: 17px; line-height: 1.65; }
.journal-entry__cue { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.journal-entry__cue::after { content: "\2192"; transition: transform .4s var(--ease); }
.journal-entry:hover .journal-entry__cue { color: var(--blue); }
.journal-entry:hover .journal-entry__cue::after { transform: translateX(6px); }

.article { display: grid; grid-template-columns: minmax(170px, .35fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 88px); width: var(--page); margin: 0 auto; padding: var(--space-section) 0; border-bottom: 1px solid var(--line-soft); }
.article__rail { position: sticky; top: calc(var(--header-height) + 28px); align-self: start; }
.article__back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 34px; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.article__back::before { content: "\2190"; color: var(--blue); transition: transform .4s var(--ease); }
.article__back:hover::before { transform: translateX(-5px); }
.article__meta { margin: 0; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.article__meta dt { margin-bottom: 6px; color: var(--blue-support); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.article__meta dd { margin: 0 0 22px; color: var(--ink); font-size: 13px; letter-spacing: -.01em; }
.article__meta dd:last-child { margin-bottom: 0; }
.article__meta dd a { border-bottom: 1px solid var(--line-soft); }
.article__meta dd a:hover { border-bottom-color: var(--blue); color: var(--blue); }
.article__meta dd span { display: block; margin-top: 4px; color: var(--quiet); font-family: var(--font-serif); font-size: 13.5px; }

.article__body { max-width: 78ch; color: var(--ink); font-family: var(--font-serif); font-size: 18.5px; line-height: 1.72; }
.article__body p { margin-bottom: 1.4em; max-width: 68ch; }
.article__body h2 { max-width: 26ch; margin: 2em 0 .7em; font-family: var(--font-sans); font-size: clamp(1.5rem, 2.15vw, 2.15rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.article__body > *:first-child { margin-top: 0; }
.article__body a:not(.button) { color: var(--ink); background: linear-gradient(var(--blue), var(--blue)) left bottom / 0% 1px no-repeat, linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; transition: background-size .45s var(--ease), color .3s var(--ease); }
.article__body a:not(.button):hover { color: var(--blue); background-size: 100% 1px, 100% 1px; }
.article-list, .article-steps { max-width: 66ch; margin: 0 0 1.6em; padding: 0; }
.article-list { list-style: none; }
.article-list li, .article-steps li { position: relative; padding: 0 0 14px 30px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.article-list li::before { position: absolute; top: .72em; left: 0; width: 13px; height: 1px; background: var(--blue); content: ""; }
.article-steps { counter-reset: step; list-style: none; }
.article-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: .18em; left: 0; color: var(--blue); font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.article-list li:last-child, .article-steps li:last-child { border-bottom: 0; }
.article-list strong, .article-steps strong { font-weight: 600; }

.article-key { padding: 36px 40px 18px; margin-bottom: 52px; background: var(--soft); }
.article-key .section-label { margin-bottom: 20px; color: var(--blue-support); }
.article-key ul { margin: 0; padding: 0; list-style: none; }
.article-key li { position: relative; max-width: 62ch; padding: 0 0 16px 26px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); font-size: 16.5px; line-height: 1.6; }
.article-key li::before { position: absolute; top: .7em; left: 0; width: 11px; height: 1px; background: var(--blue); content: ""; }
.article-key li:last-child { border-bottom: 0; }

.spec-list { max-width: 68ch; margin: 0 0 1.8em; border-top: 1px solid var(--line-soft); }
.spec-list dt { padding-top: 20px; color: var(--ink); font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.spec-list dd { margin: 8px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); font-size: 17px; line-height: 1.6; }

.article-figure { margin: 52px 0; }
.article-figure picture { display: block; overflow: hidden; background: var(--soft); }
.article-figure img { display: block; width: 100%; height: auto; }
.article-figure figcaption { margin-top: 14px; max-width: 60ch; color: var(--quiet); font-size: 14px; line-height: 1.5; }

.article-table-wrap { margin: 0 0 1.8em; overflow-x: auto; }
.article-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; text-align: left; }
.article-table caption { margin-bottom: 16px; color: var(--quiet); font-family: var(--font-serif); font-size: 14px; line-height: 1.5; text-align: left; }
.article-table th, .article-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.article-table thead th { border-bottom-color: var(--blue); color: var(--blue-support); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.article-table tbody th { font-weight: 500; letter-spacing: -.01em; }
.article-table tbody td:last-child, .article-table tfoot td:last-child, .article-table thead th:last-child { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.article-table tfoot th, .article-table tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; }

.article-faq { margin-top: 3em; }
.article-faq h2 { margin-bottom: 0; }
.article-faq summary { font-family: var(--font-sans); }
.article-faq .faq { margin-top: 24px; }
.article-faq .faq__group { border-bottom: 0; }
.article-related .journal-list { border-top-color: var(--line); }
.article-related .journal-entry { border-bottom: 0; }

.instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink); }
.instagram-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.instagram-grid picture { display: block; width: 100%; height: 100%; }
.instagram-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.98); transition: filter .5s var(--ease), transform .8s var(--ease-out); }
.instagram-grid a:hover img { filter: saturate(1) brightness(1); transform: scale(1.05); }
.instagram-feed { position: relative; overflow: hidden; background: var(--ink); }
.instagram-feed--home { max-height: 610px; }
.instagram-feed--home .instagram-grid { max-height: 610px; overflow: hidden; }
.instagram-feed--page { min-height: calc(100svh - 72px); }
.instagram-feed--page .instagram-grid { min-height: calc(100svh - 72px); }
.instagram-feed--page .instagram-grid a { aspect-ratio: auto; min-height: calc((100svh - 74px) / 2); }
/* Live: the Elfsight widget replaces the static grid on the page's own paper,
   inside the page column. It draws its own layout; this only places it. */
.instagram-feed--live { min-height: 0; padding: clamp(32px, 4vw, 64px) var(--gutter); background: var(--paper); }
.instagram-feed--live .instagram-grid, .instagram-feed--live .instagram-consent-link { display: none; }
html[data-external-media-consent="true"] .instagram-consent-link { display: none; }
.instagram-consent-link { position: absolute; right: 18px; bottom: 18px; padding: 12px 15px; border: 1px solid rgb(var(--white-rgb) / .8); background: rgb(var(--ink-rgb) / .88); color: var(--white); font-size: 11px; font-weight: 500; letter-spacing: .14em; cursor: pointer; }
.instagram-consent-link:hover { background: var(--white); color: var(--ink); }

.contact-page { display: grid; grid-template-columns: minmax(0, .8fr) minmax(380px, 1.2fr); min-height: calc(100vh - 78px); }
.contact-details, .appointment-form { padding: clamp(52px, 7vw, 120px) clamp(32px, 6vw, 108px); }
.contact-details { display: flex; flex-direction: column; justify-content: space-between; background-position: var(--fx, 50%) var(--fy, 50%); background-size: cover; background-repeat: no-repeat; }
.contact-details h1, .appointment-form h2 { font-size: clamp(2.4rem, 5vw, 5.2rem); font-weight: 500; letter-spacing: -.02em; }
.visit-details { color: var(--quiet); font-family: var(--font-serif); font-size: 19px; line-height: 1.6; }
.visit-details p { margin-bottom: 30px; }
.text-link { position: relative; padding-bottom: 2px; color: var(--ink); background: linear-gradient(var(--blue), var(--blue)) left bottom / 0% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.text-link:hover { background-size: 100% 1px, 100% 1px; }
.appointment-form { background: var(--paper); }
.appointment-form h2 { margin-bottom: 52px; font-weight: 500; letter-spacing: -.02em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
label { display: block; margin-bottom: 28px; color: var(--quiet); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
input, select { width: 100%; margin-top: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--ink); outline: none; font-size: 15.5px; transition: border-color .35s var(--ease); }
input:focus, select:focus { border-bottom-color: var(--ink); }
input:hover, select:hover { border-bottom-color: var(--quiet); }
select { cursor: pointer; }
.form-note { max-width: 46ch; margin-top: 34px; color: var(--quiet); font-family: var(--font-serif); font-size: 14px; line-height: 1.6; }
.form-note--privacy { margin-top: 14px; }
.form-note a { border-bottom: 1px solid var(--line-soft); }
.form-note a:hover { border-bottom-color: var(--blue); color: var(--blue); }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { max-width: 46ch; margin: 0 0 20px; color: var(--blue); font-family: var(--font-serif); font-size: 14.5px; line-height: 1.55; }
.form-status[data-tone="error"] { color: var(--error); }
.form-status:empty { display: none; }
.form-confirmation { padding: 34px 0 0; border-top: 1px solid var(--ink); }
.contact-page, .contact-page * { font-family: var(--font-helvetica); }
.form-confirmation:focus { outline: none; }
.form-confirmation h3 { margin-bottom: 12px; color: var(--blue); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
.form-confirmation p { margin: 0; max-width: 420px; color: var(--quiet); font-family: var(--font-serif); font-size: 18px; line-height: 1.58; }
.appointment-form button.button[disabled] { cursor: progress; opacity: .55; }
.appointment-form button.button { appearance: none; cursor: pointer; }

.site-footer { display: grid; grid-template-columns: 1.28fr .9fr .9fr 1.2fr; gap: clamp(28px, 3.5vw, 48px); align-items: start; padding: clamp(68px, 7.5vw, 108px) var(--gutter) clamp(48px, 5.5vw, 76px); background: var(--blue-deep); color: var(--white); font-size: 11.5px; }
.site-footer p { margin: 0; color: rgb(var(--paper-rgb) / .72); font-family: var(--font-serif); font-size: 13.5px; line-height: 1.65; }
.site-footer__identity, .site-footer__contact, .site-footer__legal, .site-footer__meta { display: grid; align-content: start; gap: 10px; }
.site-footer__identity { gap: 24px; }
.brand-lockup--footer img { width: 250px; }
.site-footer__meta { line-height: 1.4; }
.site-footer a:not(.brand-lockup):not(.sal-badge) { width: fit-content; border-bottom: 1px solid transparent; font-size: 12px; letter-spacing: .1em; transition: border-color .3s var(--ease), opacity .3s var(--ease); }
.site-footer a:not(.brand-lockup):not(.sal-badge):hover { border-color: rgb(var(--paper-rgb) / .6); opacity: 1; }
.site-footer .text-button { color: var(--white); }
.sal-badge { display: inline-flex; align-items: center; width: 250px; height: 50px; }
.sal-badge img { width: 201px; height: 50px; }
.site-footer .sal-badge { margin-top: 8px; opacity: .75; transition: opacity .3s var(--ease); }
.site-footer .sal-badge:hover, .site-footer .sal-badge:focus-visible { opacity: 1; }
.text-button { width: fit-content; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }

.instagram-page { min-height: calc(100vh - 72px); }

.cookie-banner { position: fixed; z-index: 30; right: 24px; bottom: 24px; left: 24px; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 26px 50px; max-width: 860px; margin-left: auto; padding: 28px 32px; background: rgb(var(--blue-deep-rgb) / .96); border: 1px solid rgb(var(--white-rgb) / .1); box-shadow: 0 20px 50px rgb(var(--black-rgb) / .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); }
.cookie-banner[hidden] { display: none; }
.cookie-banner .eyebrow { margin-bottom: 10px; color: rgb(var(--white-rgb) / .65); }
.cookie-banner h2 { margin-bottom: 12px; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.cookie-banner p:not(.eyebrow) { max-width: 520px; margin-bottom: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.55; }
.cookie-banner p a { border-bottom: 1px solid currentColor; }
.cookie-banner__actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.cookie-banner .button { min-height: 42px; border-color: rgb(var(--white-rgb) / .8); background: transparent; color: var(--white); appearance: none; font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.cookie-banner .button:hover { background: var(--white); color: var(--blue-deep); }
.cookie-banner .button--quiet { border-color: rgb(var(--white-rgb) / .4); color: rgb(var(--white-rgb) / .8); }
.cookie-banner .text-button { justify-self: center; color: var(--white); font-size: 11px; font-weight: 500; letter-spacing: .12em; }

.site-header--legal { flex-direction: row; justify-content: space-between; min-height: 0; padding: 22px var(--gutter); }
.brand-lockup--legal img { width: 240px; }
.legal-back { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.legal-back:hover { color: var(--blue); }
.legal-content { width: min(850px, calc(100% - 2 * var(--edge))); margin: 0 auto; padding: clamp(68px, 10vw, 138px) 0; }
/* CONFIDENȚIALITATE is one 17-character word set at display size. It is
   wider than a phone column at the shared heading size, and no browser here
   ships Romanian hyphenation patterns, so it has to be sized to fit rather
   than broken — see the narrow override below. The break stays as a guard in
   case the copy ever grows a longer word. */
.legal-content h1 { max-width: 760px; margin-bottom: 40px; overflow-wrap: break-word; }
.legal-content .legal-lead { max-width: 710px; margin-bottom: 56px; font-family: var(--font-serif); font-size: clamp(1.2rem, 1.75vw, 1.62rem); letter-spacing: -.005em; line-height: 1.42; }
.legal-content section { max-width: 710px; padding: 25px 0; border-top: 1px solid var(--line); }
.legal-content section:last-child { border-bottom: 1px solid var(--line); }
.legal-content h2 { margin-bottom: 14px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.legal-content section p { margin-bottom: 0; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.62; }
.legal-content section a { border-bottom: 1px solid var(--ink); }
.legal-content section p + p { margin-top: 14px; }
/* Registry identification reads as a list of labelled values, not prose, so
   it is set as one: sans labels against the serif the rest of the page uses,
   on a two-column grid that collapses to stacked pairs on a phone. */
.legal-data { display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 12px 30px; margin: 0; }
.legal-data dt { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.legal-data dd { margin: 0; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.5; }
.legal-data + p { margin-top: 26px; }
.legal-content .legal-pictogram { margin-top: 24px; }
.legal-content .legal-pictogram a { border-bottom: 0; }

@media (max-width: 880px) {
  :root { --edge: 24px; --header-height: 76px; --row-inset: 14px; }
  /* Lockup on the left edge and the menu on the right, with the gutter
     between them, rather than a centred lockup the menu crowded from the side. */
  .site-header, .site-header.is-scrolled { min-height: var(--header-height); justify-content: space-between; gap: 24px; flex-direction: row; padding: 0 var(--edge); }
  .brand-lockup--header .brand-lockup__full, .site-header.is-scrolled .brand-lockup--header .brand-lockup__full { display: none; }
  .brand-lockup--header .brand-lockup__compact, .site-header.is-scrolled .brand-lockup--header .brand-lockup__compact { display: block; width: min(190px, calc(100vw - 2 * var(--edge) - 90px)); }
  .menu-button { display: block; flex: none; padding-block: 1rem; font-size: 12px; font-weight: 500; letter-spacing: .14em; }
  .site-nav { position: absolute; top: calc(var(--header-height) - 1px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px var(--edge) 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
  .hero, .contact-page { grid-template-columns: minmax(0, 1fr); }
  /* The split-hero and contact headlines are uppercase copy with one long
     word each (PROFESSIONALS., STILLUSION), wider than a 320 column at the
     shared size. Sized to fit rather than broken, as on the legal pages; the
     wrap stays as a guard. */
  .hero:not(.hero--editorial) h1, .contact-details h1 { font-size: clamp(1.7rem, 8.2vw, 2.6rem); overflow-wrap: break-word; }
  .hero__content { padding: 95px var(--edge) 42px; }
  .hero--editorial { min-height: calc(100svh - var(--header-height)); background-size: cover; }
  .hero--editorial::before { animation: none; transform: scale(1.03); }
  /* On a phone the copy runs the height of the hero — the eyebrow starts 1px
     down and the scroll cue ends 32px off the bottom — so there is no cloth
     left over for a tighter scrim to spare. Wider and flatter than the desktop
     one for that reason, and lifted at the very top where the eyebrow sits
     against the frame edge. Black, for the same reason as above.

     Measured on the 540 rendition at 375x736, 5th percentile over the loop:
     eyebrow 4.94, headline 4.50 (needs 3.0), standfirst 4.96, buttons 5.26,
     scroll cue 6.17. Hue 18.8deg and 73.8% saturation, against 10.7deg and
     46.3% under the navy this replaces. */
  .hero--editorial::after { background: radial-gradient(95% 60% at 50% 48%, rgb(var(--black-rgb) / .24) 0%, rgb(var(--black-rgb) / .18) 60%, rgb(var(--black-rgb) / .06) 100%), linear-gradient(180deg, rgb(var(--black-rgb) / .26) 0%, rgb(var(--black-rgb) / .12) 9%, rgb(var(--black-rgb) / .12) 70%, rgb(var(--black-rgb) / .28) 100%); }
  /* The widest backgrounds, claimed back at the narrow sizes. The hero and the
     contact panel are single elements site-wide, so they can be named here and
     reached with !important over the style attribute the build writes. */
  .hero--video { background-image: url('/assets/video/hero-satin-poster-540.webp') !important; background-image: image-set(url('/assets/video/hero-satin-poster-540.avif') type('image/avif'), url('/assets/video/hero-satin-poster-540.webp') type('image/webp')) !important; }
  .contact-details { background-image: linear-gradient(90deg, rgb(var(--paper-rgb) / .95), rgb(var(--paper-rgb) / .74)), url('/assets/images/fabrics/yellow-silk-toile-fine-680.webp') !important; background-image: linear-gradient(90deg, rgb(var(--paper-rgb) / .95), rgb(var(--paper-rgb) / .74)), image-set(url('/assets/images/fabrics/yellow-silk-toile-fine-680.avif') type('image/avif'), url('/assets/images/fabrics/yellow-silk-toile-fine-680.webp') type('image/webp')) !important; }
  /* The closing panel is no longer one photograph, so its narrow file cannot be
     named here — it arrives on the section instead. A custom property holding
     an `image-set` an old browser cannot parse unsets the property rather than
     falling back to the line above it, so the plain URL is the base and the set
     is applied only where it will actually parse. */
  .final-cta--dynamic { background-image: var(--cta-narrow) !important; }
  @supports (background-image: image-set(url('a.avif') type('image/avif'))) {
    .final-cta--dynamic { background-image: var(--cta-narrow-set) !important; }
  }
  /* The panel is a tall box here, so the 16:9 frame is cropped to a narrow
     vertical slice of itself and the copy runs nearly the full width, starting
     where the desktop gradient has barely begun. Same answer as the editorial
     hero: flatter, and it starts higher. Depth per photograph, in --scrim-narrow. */
  .final-cta::after { background: linear-gradient(180deg, transparent 8%, rgb(var(--black-rgb) / calc(var(--scrim-narrow, .5) / 2.4)) 34%, rgb(var(--black-rgb) / var(--scrim-narrow, .5)) 100%); }
  .hero--editorial .hero__content { padding-top: 0; }
  .hero--editorial h1 { font-size: clamp(2.15rem, 6.2vw, 3.4rem); letter-spacing: -.02em; font-weight: 500; line-height: 1.04; }
  .hero--editorial h1 span { margin-top: .2em; font-size: .8em; font-family: var(--font-serif); font-style: normal; font-weight: 300; }
  .hero--editorial .hero__copy { font-size: 1rem; line-height: 1.5; }
  .hero__image { min-height: 52vw; }
  .content-section--intro .content-section__body { grid-template-columns: 1fr; gap: 28px; }
  .page--strategy > .content-section:nth-of-type(3) .content-section__body,
  .page--strategy > .content-section:nth-of-type(4) .content-section__body { display: block; }
  .page--strategy > .content-section:nth-of-type(3) h2,
  .page--strategy > .content-section:nth-of-type(4) h2 { margin-bottom: 24px; }
  .mission-grid { grid-template-columns: 1fr; }
  .article { grid-template-columns: 1fr; gap: 30px; }
  /* The rail becomes a header rather than a margin, so nothing sticks. */
  .article__rail { position: static; }
  .article__meta { display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(20px, 5vw, 46px); justify-content: start; }
  .article__meta dt { grid-row: 1; }
  .article__meta dd { grid-row: 2; margin-bottom: 0; }
  .article__body { max-width: none; font-size: 17.5px; }
  .article__body p, .article-list, .article-steps, .spec-list, .article-key li { max-width: none; }
  .article-key { padding: 24px 22px 8px; }
  .article-figure { margin: 38px 0; }
  .journal-entry { grid-template-columns: 1fr; gap: 22px; padding: 30px var(--row-inset); }
  .journal-entry__image img { aspect-ratio: 3 / 2; }
  .journal-entry__title { max-width: none; }
  .service-link { min-height: 180px; }
  .partner { grid-template-columns: 1fr; gap: 15px; padding: 30px var(--row-inset); }
  .client-list { columns: 2; }
  .letter-layout { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 360px; margin-top: 40px; }
  .contact-details, .appointment-form { padding: 60px var(--edge); }
  .contact-details { gap: 70px; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 28px var(--edge); }
  .cookie-banner { grid-template-columns: 1fr; max-width: none; }
  /* The narrow header centres its two items with no gap between them, which
     is right for the main site — one lockup, nothing beside it — and leaves
     the legal pages' lockup touching their back link. These three pages keep
     the split they have at full width. */
  .site-header--legal { justify-content: space-between; gap: 20px; padding: 18px var(--edge); }
  .brand-lockup--legal img { width: min(200px, 46vw); }
  .legal-content { width: calc(100% - 2 * var(--edge)); }
  .legal-content h1 { font-size: clamp(1.6rem, 8.5vw, 2.6rem); }
  .legal-data { grid-template-columns: 1fr; gap: 4px; }
  .legal-data dd { margin-bottom: 14px; }
  .legal-data dd:last-child { margin-bottom: 0; }
}

@media (max-width: 540px) {
  .button-row { display: grid; grid-template-columns: 1fr; }
  /* The longest call to action is forty characters of locked copy, wider than
     a phone column at any readable size, so here alone a label may take two
     balanced lines rather than run off the button. */
  .button { min-height: 52px; padding: 12px 20px; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.4; }
  .service-links, .form-row { grid-template-columns: 1fr; }
  .service-link { min-height: 150px; }
  .client-list { columns: 1; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-feed--page, .instagram-feed--page .instagram-grid { min-height: 0; }
  .instagram-feed--page .instagram-grid a { min-height: 0; aspect-ratio: 1; }
  .visual-pair, .visual-pair--single, .visual-pair--strategy { grid-template-columns: 1fr; height: auto; }
  .visual-pair picture, .visual-pair img { aspect-ratio: 4 / 3; }
  .visual-pair picture + picture { display: none; }
  .typographic-field { grid-template-columns: 1fr; column-gap: 0; }
  .typographic-field span, .typographic-field span:nth-child(odd), .typographic-field span:nth-child(even) { min-height: 0; padding: 18px 0; }
  .site-footer { grid-template-columns: 1fr; }
  /* The banner is fixed over a hero that fills the phone viewport, so it stays
     compact here and the hero lifts its buttons clear of it while it shows.
     Left as it was, it covered both of the home page's calls to action. */
  .cookie-banner { right: 10px; bottom: 10px; left: 10px; gap: 14px; padding: 16px 18px; }
  .cookie-banner .eyebrow { display: none; }
  .cookie-banner h2 { margin-bottom: 6px; font-size: 1.1rem; }
  .cookie-banner p:not(.eyebrow) { font-size: 12.5px; line-height: 1.45; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-banner .button { min-height: 40px; padding: 0 10px; }
  .has-cookie-banner .hero--editorial .hero__content { padding-bottom: 250px; }
}

@keyframes hero-breathe { from { transform: scale(1.06); } to { transform: scale(1.12); } }
@keyframes scroll-cue { 0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .65; } 50% { transform: rotate(45deg) translate(1px, 1px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .hero--video .hero__video { display: none; } }