/* Playfair Display (free, SIL Open Font License, fonts/PlayfairDisplay-OFL.txt):
   the header button. The YVIS HAUSEN wordmark is drawn artwork built on the
   same letters (tools/wordmark.py). */
@font-face{
  font-family:"YH Typewriter";
  src:url("fonts/CourierPrime.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"YH Typewriter";
  src:url("fonts/CourierPrime-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"YH Typewriter";
  src:url("fonts/CourierPrime-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"YH Signature";
  src:url("fonts/MrsSaintDelafield.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"YH Playfair";
  src:url("fonts/PlayfairDisplay.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/CormorantGaramond.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
/* Display serif for the Creative House box: Bodoni Moda (free, SIL Open Font
   License, fonts/BodoniModa-OFL.txt), fixed at a mid optical size so its
   hairlines keep the weight of the artwork. Covers French and Italian accents. */
@font-face{
  font-family:"YH Display";
  src:url("fonts/BodoniModa-Display.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:#050403;
  --fg:#F5F2EB;
  --muted:#A79F90;
  --hairline: rgba(245,242,235,0.14);
  --v-squish: scaleY(0.9);

  --sans: "Helvetica Neue","Helvetica",Arial,sans-serif;
  --serif: "Times New Roman", Times, Georgia, serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

/* Helvetica throughout is compressed vertically — flatter, editorial letterforms */
.tile-title, .tile-link, .header-title, .split-btn, .page-eyebrow, .page p, .home-footer, .cities-line,
.enquiry-link, .enquiry-heading, .enquiry-text, .db-heading-title, .db-heading-sub, .db-title, .db-eyebrow,
.folder-label, .code-label, .code-error{
  transform:var(--v-squish);
  transform-origin:top left;
}

/* ============ LOADER (index page only) ============ */
#loader{
  position:fixed; inset:0; z-index:999;
  background:#000000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s cubic-bezier(.4,0,.2,1), visibility .9s;
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-coin{
  position:relative; width:min(30vw,26vh,170px); aspect-ratio:1/1;
  opacity:0; transform:scale(0.985);
  animation:coinIn 1.4s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.loader-coin-img, .loader-coin-fire{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@keyframes coinIn{ to{ opacity:1; transform:scale(1); } }

/* ============ TOP BAR ============ */
#topbar{
  position:sticky; top:0; z-index:100;
  background:var(--bg); width:100%;
  border-bottom:1px solid var(--hairline);
}
.bar-inner{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px; padding:14px 28px;
}
.bar-left{ display:flex; align-items:center; gap:16px; justify-self:start; min-width:0; }
.emblem{ display:block; flex:none; width:52px; height:52px; border-radius:50%; transition:opacity .3s ease, transform .3s ease; }
.emblem img{ display:block; width:100%; height:100%; }
.emblem:hover{ opacity:0.85; transform:scale(1.04); }
.wordmark{
  display:inline-block; transform:scaleY(0.9); transform-origin:center;
  color:var(--fg); font-size:clamp(15px,1.8vw,19px); line-height:1;
  cursor:pointer; white-space:nowrap;
}
/* the sweep hangs below the letters: nudge down so the capitals sit centred */
.wordmark-svg{ display:block; height:0.92em; width:auto; transform:translateY(8.7%); overflow:visible; }
.subtitle-wrap{ height:20px; overflow:hidden; position:relative; }
.subtitle-cycle{
  font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:clamp(11px,1.4vw,13px); letter-spacing:0.03em; color:var(--muted);
  display:inline-block; white-space:nowrap;
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.subtitle-cycle.swipe{ opacity:0; transform:translateY(8px); }

.bar-center{ justify-self:center; }
.enquire-btn{
  font-family:"YH Playfair", var(--serif); font-size:10.5px; letter-spacing:0.16em;
  color:var(--fg); border:1px solid var(--fg); padding:6px 14px;
  white-space:nowrap; transition:background .3s ease, color .3s ease;
}
.enquire-btn:hover{ background:var(--fg); color:#000; }

.bar-right{ justify-self:end; display:flex; align-items:center; gap:28px; }
.lang-dropdown{ position:relative; }
.lang-toggle{
  font-family:var(--serif); font-size:11.5px; letter-spacing:0.14em;
  color:var(--fg); cursor:pointer; position:relative; padding:3px 0;
  display:inline-flex; align-items:center; gap:7px;
}
.lang-globe{ width:13px; height:13px; flex:none; margin-top:-1px; }
.lang-toggle::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--fg); transition:width .3s ease;
}
.lang-dropdown:hover .lang-toggle::after, .lang-dropdown.open .lang-toggle::after{ width:100%; }
.lang-menu{
  position:absolute; top:100%; right:0; margin-top:16px;
  background:var(--bg); border:1px solid var(--hairline);
  padding:16px 20px; display:flex; flex-direction:column; gap:12px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  z-index:50;
}
.lang-dropdown.open .lang-menu, .lang-dropdown:hover .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-option{
  font-family:var(--serif); font-size:12px; letter-spacing:0.04em;
  color:var(--muted); cursor:pointer; position:relative; padding-bottom:3px; white-space:nowrap;
}
.lang-option::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--fg); transition:width .3s ease;
}
.lang-option:hover{ color:var(--fg); }
.lang-option:hover::after{ width:100%; }
.lang-option.active{ color:var(--fg); }
.lang-option.active::after{ width:100%; }

/* ============ SECTION INDEX (inner pages, under the header) ============ */
.site-index{
  position:relative; z-index:90;
  display:flex; justify-content:center; gap:clamp(28px,6vw,84px);
  padding:13px 20px 12px; background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.idx-group{ position:relative; }
.idx-head{
  font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:0.22em;
  color:var(--fg); opacity:0.6; padding:4px 0;
  transform:var(--v-squish); transition:opacity .35s ease;
}
.idx-menu{
  position:absolute; top:100%; left:50%; min-width:190px;
  padding:14px 0 6px; display:flex; flex-direction:column; align-items:center; gap:11px;
  background:var(--bg); border:1px solid var(--hairline); border-top:none;
  opacity:0; visibility:hidden; transform:translate(-50%,-6px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.idx-menu a{
  font-family:var(--sans); font-weight:500; transform:var(--v-squish); font-size:10px; letter-spacing:0.2em; color:var(--fg); opacity:0.55;
  text-decoration:none; white-space:nowrap; padding:0 18px 8px;
  transition:opacity .3s ease;
}
.idx-group:hover .idx-head, .idx-group:focus-within .idx-head, .idx-group.open .idx-head{ opacity:1; }
.idx-group:hover .idx-menu, .idx-group:focus-within .idx-menu, .idx-group.open .idx-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.idx-menu a:hover, .idx-menu a:focus-visible{ opacity:1; outline:none; }
/* Private Art's own pages appear beneath it only while it is hovered */
.idx-sub{ display:flex; flex-direction:column; align-items:center; }
.idx-subs{ display:flex; flex-direction:column; align-items:center; gap:2px; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s cubic-bezier(.22,.61,.24,1), opacity .35s ease; }
.idx-sub:hover .idx-subs, .idx-sub:focus-within .idx-subs{ max-height:60px; opacity:1; }
.idx-menu .idx-subs a{ font-size:8.5px; letter-spacing:0.2em; opacity:.45; padding-bottom:6px; }
.idx-menu .idx-subs a::before{ content:"— "; opacity:.6; }
.idx-menu .idx-subs a:hover, .idx-menu .idx-subs a:focus-visible{ opacity:1; }
@media (max-width:640px){
  .site-index{ gap:18px; padding:11px 12px 10px; }
  .idx-head{ font-size:9px; letter-spacing:0.14em; }
  .idx-menu{ min-width:150px; }
  .idx-menu a{ letter-spacing:0.14em; padding:0 14px 8px; }
  /* keep the outer menus on screen (longer French and Italian labels) */
  .idx-group:first-child .idx-menu{ left:0; transform:translate(0,-6px); }
  .idx-group:last-child .idx-menu{ left:auto; right:0; transform:translate(0,-6px); }
  .idx-group:first-child:hover .idx-menu, .idx-group:first-child:focus-within .idx-menu, .idx-group.open:first-child .idx-menu,
  .idx-group:last-child:hover .idx-menu, .idx-group:last-child:focus-within .idx-menu, .idx-group.open:last-child .idx-menu{ transform:translate(0,0); }
}

/* ============ HOMEPAGE — FRONT PAGE (first screen: 3 tiles) ============ */
.front-page{ max-width:1240px; margin:0 auto; padding:70px 32px 90px; }
/* the three tiles always fit the first screen: their width follows the window height */
@media (min-width:901px){
  /* the tiles sit in the middle of the first screen, with equal space above and below */
  .front-page{ max-width:min(1210px, calc((100vh - 81px) * 1.74 + 165px)); box-sizing:border-box;
    min-height:calc(100vh - 81px); padding-top:clamp(16px, 3vh, 36px); padding-bottom:clamp(16px, 3vh, 36px);
    display:flex; flex-direction:column; justify-content:center; }
}
.tiles-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tile{
  position:relative; aspect-ratio:1/1;
  background:#121110;
  border:1px solid var(--hairline);
  padding:26px 24px;
  display:flex; flex-direction:column;
}
.tile-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:16px; color:var(--fg); margin:0 0 22px;
}
.tile-links{ margin-top:auto; }
.tile-link{
  display:block; cursor:pointer;
  font-weight:500; font-size:12px; letter-spacing:0.14em;
  color:var(--fg); margin-bottom:16px;
  transition:color .25s ease;
}
.tile-link:last-child{ margin-bottom:0; }
.tile-link:hover{ color:var(--muted); }
.tile-desc{
  display:block; font-family:var(--sans); font-weight:300;
  font-size:10.5px; letter-spacing:0.01em; line-height:1.5; color:var(--muted);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .3s ease, max-height .3s ease; margin-top:4px;
}
.tile-link:hover .tile-desc{ opacity:1; max-height:44px; }
/* Creative House tile: a landscape panel laid out like the supplied artwork.
   The winged head fills the lower right at full size; title and year run
   across the top; the three categories sit in a centred column on the left
   with room beneath each for its subtitle. Container units keep the
   composition identical at every width. */
/* three shapes: Operations a slightly shorter portrait, Creative House a smaller
   landscape centred between them, Curation the tallest portrait */
.tiles-row{ grid-template-columns:296fr 340fr 296fr; align-items:center; column-gap:clamp(26px,4.6vw,58px); }
/* Operations is a little narrower than its column; centred in it, the row stays symmetrical */
@media (min-width:901px){ .tiles-row .tile-ops{ width:calc(100% * 277 / 296); justify-self:center; } }

.tiles-row .tile{ aspect-ratio:277/345; }
.tiles-row .tile-creative{ aspect-ratio:340/230; }
.tiles-row .tile-art{ aspect-ratio:296/361; }
/* Creative House sits a little right of centre between the other two */
.tile-creative{
  container-type:inline-size; overflow:hidden; padding:0; border-color:rgba(245,242,235,0.18);
  background:
    radial-gradient(120% 90% at 12% 8%, #FFFBF1 0%, rgba(255,251,241,0) 62%),
    radial-gradient(95% 85% at 92% 96%, #FAEAE3 0%, rgba(250,234,227,0) 60%),
    linear-gradient(140deg, #FDF8EE 0%, #FBF0E2 52%, #F9ECE4 100%);
  --cr-squish:scaleY(0.86);
}
.cr-statue, .cr-tint{ position:absolute; right:0.6%; bottom:-2.2cqw; width:85%; pointer-events:none; }
.cr-statue{ height:auto; }
/* a very faint blue veil, cut to the statue's own silhouette */
.cr-tint{
  aspect-ratio:1322/863; background:linear-gradient(160deg, #7C8FA8 0%, #5D708C 100%);
  -webkit-mask:url("images/creative-statue.webp") center/100% 100% no-repeat; mask:url("images/creative-statue.webp") center/100% 100% no-repeat;
  mix-blend-mode:color; opacity:0.36;
}
.cr-head{ position:absolute; left:3.3cqw; right:4cqw; top:3cqw; display:flex; align-items:baseline; justify-content:space-between; gap:3cqw; }
.cr-title, .cr-year{ font-family:"YH Display", var(--serif); font-weight:400; }
.cr-title{ -webkit-text-stroke:0.022em currentColor; }  /* a firmer title */
.cr-title{ margin:0; white-space:nowrap; font-size:6.1cqw; line-height:1; letter-spacing:0.012em; color:#2A2420; transform:var(--cr-squish); transform-origin:left top; }
.cr-year{ font-size:2.15cqw; letter-spacing:0.07em; color:#2A2420; white-space:nowrap; -webkit-text-stroke:0.02em currentColor; transform:var(--cr-squish); transform-origin:right top; }
.cr-label{ font-family:"Cormorant Garamond", var(--serif); }
.cr-desc{ font-family:"Cormorant Garamond", var(--serif); }
.cr-links{ position:absolute; left:0; top:11.4cqw; width:43cqw; display:flex; flex-direction:column; text-align:left; }
/* each link is as wide as its heading (or a short paragraph); the subtitle starts at the heading's left edge */
.cr-link{ width:fit-content; margin-inline:auto; }
.cr-link:nth-child(2){ translate:2.6cqw 0; }
.cr-link{ position:relative; display:block; min-height:14.3cqw; text-decoration:none; transition:opacity .25s ease; }
.cr-label{
  display:block; white-space:nowrap; font-size:3.4cqw; font-weight:600; line-height:1.1; letter-spacing:0.11em; color:#7A1A1A;
  transform:scaleY(0.96); transform-origin:center top; transition:color .2s ease;
}
/* the subtitle: no box, just the words and a fine red rule on their left, kept clear of the statue */
.cr-desc{
  position:relative; z-index:1; box-sizing:border-box; padding:0.2cqw 0 0.2cqw 1.6cqw;
  display:block; margin:1cqw 0 0 0; width:0; min-width:max(100%, 25cqw); text-align:left; white-space:normal;
  font-size:2.4cqw; font-weight:500; line-height:1.4; letter-spacing:0.012em; color:#3B332E;
  opacity:0; transition:opacity .18s ease;
}
.cr-desc::after{ content:""; position:absolute; left:0; top:.5cqw; bottom:.5cqw; width:1px; background:#7A1A1A; opacity:.55; }
/* hover: quiet and simple. The title deepens, its subtitle fades in,
   the other categories soften slightly. The statue stays as it is. */
.cr-links:hover .cr-link, .cr-links:focus-within .cr-link{ opacity:0.45; }
.cr-links .cr-link:hover, .cr-links .cr-link:focus-visible{ opacity:1; outline:none; }
.cr-link:hover .cr-label, .cr-link:focus-visible .cr-label{ color:#4A0D0D; }
.cr-link:hover .cr-desc, .cr-link:focus-visible .cr-desc{ opacity:1; }
/* touch screens have no hover: keep the subtitles readable */
@media (hover:none){
  .cr-desc{ opacity:0.95; }
  .cr-links:hover .cr-link{ opacity:1; }
}
@media (max-width:900px){
  .tiles-row .tile{ aspect-ratio:277/345; }
  .tiles-row .tile-creative{ aspect-ratio:1/1.22; }
  .tiles-row .tile-art{ aspect-ratio:296/361; }
  .cr-title{ font-size:7.2cqw; }
  .cr-year{ font-size:2.5cqw; }
  .cr-links{ top:16cqw; width:52cqw; }
  .cr-link{ min-height:17cqw; }
  .cr-label{ font-size:3.9cqw; }
  .cr-desc{ font-size:2.8cqw; min-width:max(100%, 36cqw); }
  .cr-links{ top:14.5cqw; }
  .cr-link{ min-height:20.5cqw; }
  .cr-statue, .cr-tint{ right:1.5%; width:92%; }
}
@media (prefers-reduced-motion: reduce){
  .cr-statue, .cr-label, .cr-desc, .cr-link{ transition:none; }
}

/* Art & Culture tile: a cream letterpress sheet in Cormorant Garamond.
   Masthead across the top, cities beneath, then the three categories
   stepping down from left to right, each with room for its subtitle. */
.tile-art{
  container-type:inline-size; overflow:hidden; padding:0; border-color:rgba(245,242,235,0.18);
  background:
    radial-gradient(110% 80% at 18% 10%, #FBF3E4 0%, rgba(251,243,228,0) 60%),
    radial-gradient(90% 80% at 88% 92%, #F3E3CB 0%, rgba(243,227,203,0) 62%),
    linear-gradient(160deg, #F8EEDD 0%, #F5E9D5 55%, #F2E4CC 100%);
  font-family:"Cormorant Garamond", var(--serif); color:#1D1A17;
  --ac-red:#931C1C;
}
.tile-art p, .tile-art ul{ margin:0; padding:0; }
.ac-mast{ position:absolute; right:4.5cqw; top:5cqw; text-align:right; }
.ac-curation{ font-size:12.8cqw; font-weight:500; letter-spacing:0.1em; margin-right:-0.1em !important; line-height:0.9; color:var(--ac-red); }
.ac-sub{ margin-top:1.6cqw !important; font-size:3.2cqw; font-weight:600; letter-spacing:0.2em; margin-right:-0.2em !important; line-height:1; }
/* the house block starts level with ART & CULTURAL, clear of the title */
.ac-house{ position:absolute; left:4.5cqw; top:19.2cqw; }
.ac-brand{ font-size:3.6cqw; font-weight:500; letter-spacing:0.16em; color:var(--ac-red); line-height:1; }
.ac-division{ margin-top:1.5cqw !important; font-size:2.4cqw; font-weight:600; letter-spacing:0.1em; line-height:1; }
.ac-division em{ font-style:italic; font-weight:500; letter-spacing:0.03em; margin-left:1cqw; font-size:1.12em; }
.ac-services{ list-style:none; margin-top:1.5cqw !important; }
.ac-services li{ font-size:2.75cqw; font-weight:600; letter-spacing:0.07em; line-height:1.38; color:#24201C; }
.ac-cities{
  position:absolute; left:4.5cqw; right:4.5cqw; top:53cqw;
  display:flex; justify-content:space-between; align-items:center;
  font-size:3.3cqw; font-weight:600; letter-spacing:0.06em; color:var(--ac-red); line-height:1;
}
.ac-cities i{ font-style:normal; font-weight:700; }
.ac-links{ position:absolute; left:0; right:0; top:67cqw; bottom:0; }
.ac-link{ position:absolute; display:block; width:56cqw; text-decoration:none; transition:opacity .25s ease; }
.ac-link:nth-child(1){ left:12cqw; top:0; }
.ac-link:nth-child(2){ left:27cqw; top:16.5cqw; }
.ac-link:nth-child(3){ left:41cqw; top:33cqw; }
.ac-link:nth-child(3) .ac-desc{ max-width:53cqw; }
/* descriptions are given room for two lines, so they never run into the next category */
.ac-link:nth-child(1), .ac-link:nth-child(1) .ac-desc{ width:auto; max-width:72cqw; }
.ac-link:nth-child(2), .ac-link:nth-child(2) .ac-desc{ width:auto; max-width:66cqw; }
.ac-label{
  display:block; white-space:nowrap; font-size:5cqw; font-weight:500; letter-spacing:0.15em; line-height:1;
  color:#15120F; transition:color .2s ease;
}
.ac-desc{
  display:block; margin-top:0.9cqw; max-width:56cqw;
  font-size:3.45cqw; font-style:normal; font-weight:500; line-height:1.38; letter-spacing:0.005em; color:#3A322B;
  opacity:0; transition:opacity .18s ease;
}
/* Spanish labels run longer: a little tighter so they stay inside the tile */
html[lang="es"] .ac-label{ font-size:4.3cqw; letter-spacing:0.1em; }
/* a slow glint passes across each link now and then, so it reads as clickable */
.ac-label{
  background-image:linear-gradient(105deg, currentColor 45%, #5E4C38 49.2%, #8C7457 50%, #5E4C38 50.8%, currentColor 55%);
  background-size:300% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:acGlint 9s ease-in-out infinite;
}
.ac-link:nth-child(2) .ac-label{ animation-delay:3s; }
.ac-link:nth-child(3) .ac-label{ animation-delay:6s; }
@keyframes acGlint{ 0%{ background-position:100% 0; } 22%,100%{ background-position:0% 0; } }
@media (prefers-reduced-motion: reduce){ .ac-label{ animation:none; } }
.ac-links:hover .ac-link, .ac-links:focus-within .ac-link{ opacity:0.45; }
.ac-links .ac-link:hover, .ac-links .ac-link:focus-visible{ opacity:1; outline:none; }
/* the categories below the one being read step aside while its description shows */
.ac-links .ac-link:hover ~ .ac-link, .ac-links .ac-link:focus-visible ~ .ac-link{ opacity:0; }
.ac-link:hover .ac-label, .ac-link:focus-visible .ac-label{ color:var(--ac-red); }
.ac-link:hover .ac-desc, .ac-link:focus-visible .ac-desc{ opacity:1; }
@media (hover:none){
  .ac-desc{ opacity:0.95; }
  .ac-links:hover .ac-link{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .ac-link, .ac-label, .ac-desc{ transition:none; } }

/* Operations tile: a grey paper sheet after the supplied design. Ghosted
   YVIS HAUSEN and COMMUNICATIONS, a handwritten note, OPERATIONS held
   between two halves of a globe, and the links stacked close together.
   Hovering a link opens its subtitle and eases the others apart. */
.tile-ops{
  container-type:inline-size; overflow:hidden; padding:0; border-color:rgba(245,242,235,0.18);
  background-color:#E5E2DD;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .4 0 0 0 0 .37 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #E8E5E0 0%, #E2DFDA 100%);
  color:#45413E;
}
/* four plain index tabs on a sheet lying under the box, showing at its right edge */
.tiles-row .tile-ops{ overflow:visible; }
.op-tabs{ position:absolute; left:100%; top:0; width:6cqw; height:124.5cqw; pointer-events:none; overflow:visible; }
/* four separate tabs; each lower one lies over the one above, stepping out a little */
.op-tabs path{ vector-effect:non-scaling-stroke; filter:drop-shadow(0 -0.5px 0.6px rgba(0,0,0,0.22)) drop-shadow(0.6px 0.8px 1px rgba(0,0,0,0.25)); }
.op-ghost{
  position:absolute; left:0; right:0; text-align:center; white-space:nowrap;
  font-family:var(--serif); font-weight:700; color:#A9A5A0; opacity:0.6; filter:blur(0.55cqw); pointer-events:none;
}
.op-ghost-top{ top:13cqw; font-size:8.4cqw; letter-spacing:0.02em; }
.op-ghost-bottom{ top:104cqw; font-size:7.2cqw; letter-spacing:0.01em; }
.op-script{ position:absolute; left:56cqw; top:16.5cqw; width:33cqw; height:auto; opacity:0.9; transform:rotate(-7deg); transform-origin:center; pointer-events:none; }
/* one sphere with a band cut from its middle, where OPERATIONS sits */
/* a globe with its middle band cut away for the title: ten evenly spaced lines in each half */
.op-globe{ position:absolute; left:50%; top:44.3cqw; width:22cqw; margin-left:-11cqw; color:#ADA8A1; opacity:0.5; pointer-events:none; }
.op-globe svg{ display:block; width:100%; height:auto; overflow:visible; }
.op-title{
  position:absolute; left:0; right:0; top:52.95cqw; margin:0; text-align:center;
  font-family:"Times New Roman", Times, "Liberation Serif", serif; font-weight:400; font-size:7cqw; letter-spacing:0.01em; line-height:1; color:#3F3B38;
  -webkit-text-stroke:0.012em currentColor;  /* a touch firmer than regular, well short of bold */
}
.op-links{
  position:absolute; left:50%; top:85.5cqw; width:76cqw; transform:translate(-50%,-50%);
  padding:4cqw 3cqw; text-align:center; background:rgba(255,255,255,0.09);
  display:flex; flex-direction:column; align-items:center; gap:7.4cqw;
}
/* the two top links sit in equal halves, so the pair is centred under the title */
.op-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:3cqw; width:100%; }
.op-row:last-child{ display:flex; justify-content:center; }
/* the nudges go on the labels, so every subtitle keeps the same centred line */
.op-row:first-child .op-link:first-child .op-label{ transform:translateX(-3cqw) scaleY(0.93); }
.op-row:last-child .op-link .op-label{ transform:translateX(-1.2cqw) scaleY(0.93); }
/* the one-line Marketing subtitle sits midway between the two rows */
.op-row:first-child .op-link:first-child .op-desc{ top:9.3cqw; }
.op-link{ display:block; text-decoration:none; transition:opacity .3s ease; }
.op-label{
  display:block; font-family:var(--sans); font-weight:500; font-size:3cqw; letter-spacing:0.1em; line-height:1.1;
  color:#3E3B38; white-space:nowrap; transform:scaleY(0.93); transition:color .25s ease;
}
/* one quiet line beneath the links carries the subtitle of whichever is hovered; nothing moves */
.op-desc{
  position:absolute; left:8cqw; right:8cqw; top:7.5cqw; pointer-events:none; text-align:center;
  font-family:var(--sans); font-weight:400; font-size:2.25cqw; line-height:1.45; letter-spacing:0.02em; color:#5A5551;
  opacity:0; transition:opacity .35s ease;
}
.op-link:hover .op-desc, .op-link:focus-visible .op-desc{ opacity:1; }
/* the others fade only while a link itself is hovered */
.op-links:has(.op-link:hover) .op-link:not(:hover), .op-links:has(.op-link:focus-visible) .op-link:not(:focus-visible){ opacity:0.55; }
.op-link:focus-visible{ outline:none; }
.op-link:hover .op-label, .op-link:focus-visible .op-label{ color:#1F1D1B; }
@media (prefers-reduced-motion: reduce){ .op-desc, .op-link, .op-label{ transition:none; } }
/* Operations tabs. A flicker passes down them like a wave now and then, and on desktop the tab under
   the pointer slides out, so they read as live. Each tab opens the box like the cover of a file,
   showing a plain file review beneath; the file opens its page */
.op-wave path{ opacity:0; animation:opWave 6s ease-in-out infinite; }
.op-wave path:nth-child(2){ animation-delay:.14s; } .op-wave path:nth-child(3){ animation-delay:.28s; } .op-wave path:nth-child(4){ animation-delay:.42s; }
@keyframes opWave{ 0%,100%{ opacity:0; } 3%{ opacity:.42; } 5%{ opacity:.12; } 7%{ opacity:.5; } 10%{ opacity:.18; } 14%{ opacity:0; } }
.op-tabs path{ transform-box:fill-box; transform-origin:left center; transition:transform .35s cubic-bezier(.22,.61,.24,1); }
@media (hover:hover){
  .tile-ops:has(.op-tabhit:nth-child(1):hover) .op-tabs g path:nth-child(1),
  .tile-ops:has(.op-tabhit:nth-child(2):hover) .op-tabs g path:nth-child(2),
  .tile-ops:has(.op-tabhit:nth-child(3):hover) .op-tabs g path:nth-child(3),
  .tile-ops:has(.op-tabhit:nth-child(4):hover) .op-tabs g path:nth-child(4){ transform:scaleX(1.22); }
}
.op-tabhits{ position:absolute; left:100%; top:0; width:7cqw; height:124.5cqw; z-index:9; }
.op-tabhit{ position:absolute; left:0; width:6.4cqw; height:12.6cqw; padding:0; border:0; background:none; cursor:pointer; }
.op-tabhit:nth-child(1){ top:3.6cqw; } .op-tabhit:nth-child(2){ top:17.4cqw; } .op-tabhit:nth-child(3){ top:31.2cqw; } .op-tabhit:nth-child(4){ top:45cqw; }
.op-tabhit:focus-visible{ outline:1px solid #3E3B38; outline-offset:1px; }
/* the cover: it turns on its left edge like a book opening, then fades as it lies back */
.tiles-row .tile-ops{ perspective:320cqw; }
.op-flip{ position:absolute; inset:0; z-index:8; transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.55,.02,.2,1), opacity .35s ease; }
.op-front, .op-back{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.op-front{ background:inherit; background-color:#E5E2DD;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .4 0 0 0 0 .37 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #E8E5E0 0%, #E2DFDA 100%); }
.op-back{ transform:rotateY(180deg); background:linear-gradient(90deg, #CFCBC4, #D9D5CE 40%, #D3CFC8); box-shadow:inset -1cqw 0 3cqw rgba(0,0,0,.12); }
.tile-ops.file-open .op-flip{ transform:rotateY(-172deg); opacity:0; pointer-events:none;
  transition:transform 1.05s cubic-bezier(.55,.02,.2,1), opacity .4s ease .75s; }
/* the file beneath */
.op-sheets{ position:absolute; inset:0; z-index:6; }
.op-sheet{ position:absolute; inset:0; display:flex; flex-direction:column; padding:6cqw 6.5cqw 5.5cqw; box-sizing:border-box; text-transform:uppercase;
  color:#2B2926; text-decoration:none; text-align:left; overflow:hidden;
  font-family:"YH Typewriter","Courier Prime","Courier New",monospace; font-size:2.3cqw; line-height:1.5;
  background-color:#EEECE7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .38 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F1EFEA 0%, #E7E4DE 100%);
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.op-sheet.open{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; }
.os-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.os-seal{ width:8.5cqw; height:auto; border-radius:50%; filter:grayscale(1) contrast(.9); opacity:.55; }
.os-dept{ display:flex; flex-direction:column; align-items:flex-end; font-size:2.1cqw; letter-spacing:0.08em; text-transform:uppercase; }
.os-dept span:last-child{ font-family:var(--serif); letter-spacing:0.14em; opacity:.75; }
.os-no{ display:flex; flex-direction:column; align-items:flex-end; margin-top:3cqw; font-size:2cqw; letter-spacing:0.12em; opacity:.8; }
.os-title{ display:block; margin-top:3cqw; padding-bottom:1.6cqw; border-bottom:1px solid rgba(43,41,38,.35); font-size:3cqw; letter-spacing:0.16em; }
.os-grid{ display:flex; justify-content:space-between; gap:4cqw; margin-top:4cqw; }
.os-fields{ display:flex; flex-direction:column; gap:1.6cqw; min-width:0; }
.os-f{ display:grid; grid-template-columns:19.5cqw 1fr; column-gap:1.6cqw; }
.os-f b{ font-weight:400; position:relative; padding-left:2.4cqw; }
.os-f b::before{ content:""; position:absolute; left:0; top:.55em; width:.9cqw; height:.9cqw; border-radius:50%; background:#2B2926; }
.os-f b::after{ content:":"; }
.os-pics{ position:static; flex:none; width:40cqw; }
.os-pic{ display:block; width:100%; height:auto; filter:grayscale(1); box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.18); }
.os-pic-map{ background:#0A0A0A; }
.os-pic-clock{ position:absolute; left:6.5cqw; bottom:20.9cqw; width:16cqw; border-radius:50%; background:#0A0A0A; }
/* Marketing: the map runs as a header between the title and its rule */
.os-title-hero{ border-bottom:0; padding-bottom:0; }
.os-hero{ display:block; width:100%; height:31cqw; margin-top:2.2cqw; object-fit:cover; filter:grayscale(1); background:#0A0A0A; box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.16); }
.os-rule{ display:block; height:1px; margin-top:2.4cqw; background:rgba(43,41,38,.35); }
.op-sheet[data-sheet="0"] .os-grid{ margin-top:3cqw; }
.op-sheet[data-sheet="0"] .os-sec{ margin-top:4.5cqw; }
.op-sheet[data-sheet="0"] .os-sec, .op-sheet[data-sheet="0"] .os-body{ margin-left:21cqw; max-width:none; }
.os-pic-letter{ width:44cqw; margin:-2cqw -2cqw 0 auto; transform:none; }
.os-sec{ display:block; margin-top:6cqw; font-size:1.8cqw; letter-spacing:0.22em; opacity:.7; }
.os-body{ display:block; margin-top:1.6cqw; max-width:56cqw; }
.os-say{ display:block; margin-top:5cqw; font-family:var(--serif); font-size:3.4cqw; letter-spacing:0.18em; }
.os-say i{ font-style:normal; margin:0 1.2cqw; opacity:.55; }
.os-foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; padding-top:2.4cqw; border-top:1px solid rgba(43,41,38,.3); font-size:1.8cqw; letter-spacing:0.14em; opacity:.85; }
.os-open{ font-family:var(--sans); font-weight:600; font-size:2.2cqw; letter-spacing:0.26em; transition:letter-spacing .4s ease; }
.op-sheet:hover .os-open, .op-sheet:focus-visible .os-open{ letter-spacing:0.34em; }
@media (prefers-reduced-motion: reduce){ .op-flip{ transition:opacity .3s ease; } .tile-ops.file-open .op-flip{ transform:none; } .op-wave path{ animation:none; } }


/* ============ HOMEPAGE — DATABASE SECTION (reached on scroll) ============ */
.database-section{ border-top:1px solid var(--hairline); }
.db-heading{ max-width:1240px; margin:0 auto; padding:52px 32px 0; text-align:left; }
.db-heading-title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(20px,3vw,32px); letter-spacing:0.04em; color:var(--fg); margin:0;
}
.db-heading-sub{
  font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:0.28em; color:var(--muted); margin:10px 0 0;
}

.filing-cabinet{
  /* trimmed to the same edges as the heading above it, equal on both sides */
  box-sizing:border-box; width:100%; max-width:1240px; margin:18px auto 0; padding:0 46px 0 18px;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
/* Folders are filed one in front of the next, like dividers in a drawer:
   SOUND sits at the back, each following folder overlaps the one behind it. */
.folder{
  --body-h:112px;   /* each front runs on down behind the next file's papers */
  position:relative; z-index:var(--i);
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%; border:none; background:none; padding:30px 0 0; margin:0;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.folder + .folder{ margin-top:-112px; }
.folder:last-child{ --body-h:56px; }
.folder:hover{ transform:translateY(-7px); }

/* the title tab: a brushed-silver divider tab, its shoulders flaring down into the papers */
.folder-tab{
  position:relative; z-index:2; display:block;
  margin:0 0 -1px 0; padding:11px 54px 10px;
  max-width:calc(100% - 32px);
  /* clean matte card: soft cream, see-through, no grain */
  background:linear-gradient(180deg, rgba(204,196,182,0.58) 0%, rgba(222,214,199,0.66) 100%);   /* soft warm beige, still see-through */
  -webkit-backdrop-filter:blur(8px) saturate(115%); backdrop-filter:blur(8px) saturate(115%);
  clip-path:polygon(0 100%, 9px 95%, 15px 84%, 20px 58%, 25px 24%, 30px 7%, 38px 0,
    calc(100% - 38px) 0, calc(100% - 30px) 7%, calc(100% - 25px) 24%, calc(100% - 20px) 58%, calc(100% - 15px) 84%, calc(100% - 9px) 95%, 100% 100%);
  transition:filter .3s ease;
}
.folder-label{
  font-weight:500; font-size:11.5px; letter-spacing:0.26em; color:#F6F4EF;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  text-shadow:none;
}
/* hand-placed so the tabs never line up in a column */
.folder:nth-child(1) .folder-tab{ margin-left:20%; }
.folder:nth-child(2) .folder-tab{ margin-left:68%; }
.folder:nth-child(3) .folder-tab{ margin-left:8%; }
.folder:nth-child(4) .folder-tab{ margin-left:42%; }
.folder:nth-child(5) .folder-tab{ margin-left:20%; }
.folder:nth-child(6) .folder-tab{ margin-left:57%; }
.folder:nth-child(7) .folder-tab{ margin-left:4%; }
.folder:nth-child(8) .folder-tab{ margin-left:31%; }

/* the file: smoked glass, black to dark grey with a light grey reflection */
.folder-body{
  position:relative; z-index:1; display:block;
  width:100%; height:var(--body-h);
  /* brushed steel with a soft diagonal sheen, cut from the supplied artwork */
  /* darker, with a faint satin gloss along the top edge: smooth, slightly glossy, still matte */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%),
    #0c0c0f var(--metal) center / 100% 100% no-repeat;
  filter:brightness(0.8) contrast(1.12);
  /* a folded steel front: rounded top corners and a fine bright rim along the top and both sides */
  border:1px solid rgba(226,227,232,0.38); border-bottom:none;
  border-radius:7px 7px 0 0;
  width:calc(100% - var(--ix, 0px) - var(--iy, 0px)); margin-left:var(--ix, 0px);
  box-shadow:0 -12px 26px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.16), inset 2px 0 2px -1px rgba(255,255,255,0.12), inset -2px 0 2px -1px rgba(255,255,255,0.12);
  transition:filter .3s ease;
}
/* file number, set like the title cards; the "o" of No. is small and raised */
.folder-no .no-o{ font-size:0.62em; vertical-align:0.5em; letter-spacing:0.02em; margin-right:0.7em; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.folder-no{
  position:absolute; top:15px; left:26px;
  font-family:var(--sans); font-style:normal; font-weight:500;
  font-size:11.5px; letter-spacing:0.24em; color:rgba(244,242,238,0.92);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transform:var(--v-squish); transform-origin:top left;
}

/* papers filed inside: long strips running the full width, stacked back to front */
.folder-papers{
  position:absolute; left:0; right:0; top:0; bottom:var(--body-h);
  z-index:0; pointer-events:none;
}
.paper{
  position:absolute; bottom:-12px; left:calc(var(--l) * 3 + 16px); right:calc(var(--rr) * 3 + 16px); height:calc(var(--h) * 0.6 + 12px);
  border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.45), 0 -3px 8px rgba(0,0,0,0.35);
  will-change:transform;
}
.paper--white{ background:linear-gradient(180deg, #ecebe7, #d2d0cb); }
.paper--lightyellow{ background:linear-gradient(180deg, #e2ddd3, #c8c2b7); }
.paper--yellow{ background:linear-gradient(180deg, #d3cbbd, #b5ac9d); }
.paper--bw{
  background:linear-gradient(90deg, #050505 0%, #2a2a2a 14%, #efefef 26%, #111 41%, #dcdcdc 58%, #080808 72%, #bdbdbd 86%, #0d0d0d 100%);
}
.folder:hover .folder-body{ filter:brightness(0.96) contrast(1.12); }
.folder:hover .folder-tab{ filter:brightness(1.12); }
.folder:nth-child(1) .folder-body{ --metal:url("images/folder-steel3-4.jpg"); }
.folder:nth-child(2) .folder-body{ --metal:url("images/folder-steel3-1.jpg"); }
.folder:nth-child(3) .folder-body{ --metal:url("images/folder-steel3-2.jpg"); }
.folder:nth-child(4) .folder-body{ --metal:url("images/folder-steel3-3.jpg"); }
.folder:nth-child(5) .folder-body{ --metal:url("images/folder-steel3-4.jpg"); }
.folder:nth-child(6) .folder-body{ --metal:url("images/folder-steel3-5.jpg"); }
.folder:nth-child(7) .folder-body{ --metal:url("images/folder-steel3-6.jpg"); }
.folder:nth-child(8) .folder-body{ --metal:url("images/folder-steel3-7.jpg"); }
.folder-docs{ text-decoration:none; }
.folder:focus-visible .folder-tab{ outline:1px solid var(--fg); outline-offset:2px; }

.site-footer{ padding:30px 20px 44px; border-top:1px solid var(--hairline); }
.home-footer{ text-align:center; font-size:10px; letter-spacing:0.2em; color:var(--muted); font-weight:300; }
.cities-line{ text-align:center; padding-top:24px; font-size:9.5px; letter-spacing:0.2em; color:var(--muted); font-weight:300; }

/* ============ PRIVATE CODE MODAL ============ */
.code-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
  padding:20px;
}
.code-modal.open{ opacity:1; visibility:visible; }
.code-box{
  width:min(90vw,340px);
  background:rgba(0,0,0,0.95);
  border:1px solid rgba(245,242,235,0.16);
  padding:56px 44px 44px;
  text-align:center;
}
.code-label{
  font-weight:500; font-size:12px; letter-spacing:0.26em;
  color:var(--fg); margin:0 0 26px; transform-origin:top center;
}
.code-input{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--hairline); text-align:center;
  font-family:var(--serif); font-size:22px; letter-spacing:0.6em;
  color:var(--fg); padding:8px 0 10px; outline:none;
}
.code-input:focus{ border-bottom-color:var(--fg); }
.code-error{
  font-size:10.5px; letter-spacing:0.22em; color:var(--fg);
  margin:18px 0 0; min-height:12px; opacity:0;
  transition:opacity .25s ease; transform-origin:top center;
}
.code-error.show{ opacity:1; }
.code-restricted{
  font-size:8px; line-height:1.8; letter-spacing:0.2em; color:var(--muted);
  max-width:230px; margin:0 auto; max-height:0; opacity:0; overflow:hidden;
  transition:opacity .4s ease, max-height .4s ease, margin .4s ease;
}
/* when shown, it sits midway between ACCESS DENIED and CANCEL */
.code-restricted.show{ opacity:1; max-height:60px; margin-top:24px; }
.code-restricted.show + .code-cancel{ margin-top:24px; }
.code-cancel{
  display:inline-block; margin-top:44px;
  font-family:var(--sans); font-weight:500; font-size:9.5px; letter-spacing:0.26em;
  color:var(--muted); cursor:pointer; transition:color .3s ease;
  transform:var(--v-squish); transform-origin:top center;
}
.code-cancel:hover{ color:var(--fg); }
/* Engine gate (Marketing page): a longer note with a way to book a call */
.code-restricted.code-note.show{ max-height:220px; }
.code-note p{ margin:0; }
.code-book-row{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(245,242,235,0.12);
}
.code-book{
  display:inline-block; padding:7px 16px 6px; border:1px solid rgba(245,242,235,0.5);
  color:var(--fg); text-decoration:none; font-size:9px; letter-spacing:0.26em; font-weight:500;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.code-book:hover, .code-book:focus-visible{ background:var(--fg); color:#000; border-color:var(--fg); outline:none; }

/* ============ DATABASE (portfolio) PAGES ============ */
.db-page{ max-width:720px; margin:0 auto; padding:90px 28px 140px; }
.db-title{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,4.6vw,44px); letter-spacing:0.02em;
  text-transform:uppercase; color:var(--fg); margin:0;
}
.db-eyebrow{
  font-weight:500; font-size:11px; letter-spacing:0.24em;
  color:var(--muted); margin:16px 0 64px;
}
.db-placeholder{
  display:inline-block; border:1px dashed var(--hairline);
  padding:32px 56px; font-family:var(--serif);
  letter-spacing:0.3em; font-size:15px; color:#B4483C;
}

/* ============ PAGE HEADER (image) ============ */
.page-header{
  position:relative; height:50vh; min-height:320px; overflow:hidden;
  background:linear-gradient(135deg,#3A3125,#171208);
  display:flex; align-items:flex-end;
}
.header-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.header-img.img-missing{ display:none; }
.header-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 100%); }
.header-title{
  position:relative; z-index:2; font-weight:700; color:var(--fg);
  font-size:clamp(30px,5.5vw,64px); letter-spacing:0.02em;
  text-transform:uppercase; margin:0 0 40px 40px;
}
.layer-a{ animation:crossfadeA 10s infinite; }
.layer-b{ animation:crossfadeB 10s infinite; }
@keyframes crossfadeA{ 0%,42%{opacity:1;} 50%,92%{opacity:0;} 100%{opacity:1;} }
@keyframes crossfadeB{ 0%,42%{opacity:0;} 50%,92%{opacity:1;} 100%{opacity:0;} }

/* ============ SUBPAGES ============ */
.page{ max-width:720px; margin:0 auto; padding:70px 28px 100px; }
.page-eyebrow{ font-size:11px; letter-spacing:0.24em; color:var(--muted); margin-bottom:16px; font-weight:500; }
.page-title-serif{ font-family:var(--serif); font-size:clamp(24px,4vw,34px); font-weight:400; letter-spacing:0.02em; margin:0 0 40px; }
.page p{
  font-family:var(--sans); font-weight:300; font-size:15.5px; line-height:2.05;
  color:#E5E1D8; margin:0 0 22px; max-width:600px;
}
.page p.lede{ font-style:italic; font-family:var(--serif); font-size:18px; color:var(--fg); transform:none; }
.page p.bold-cta{ font-weight:600; font-size:16px; line-height:1.7; color:var(--fg); margin-top:50px; }

/* Times New Roman throughout — used on Private Art / Collectors / Artists */
.serif-page .page-eyebrow, .serif-page .page p, .serif-page .bold-cta, .serif-page .enquiry-link{
  font-family:var(--serif); transform:none;
}
.serif-page .page p{ font-size:16.5px; line-height:1.9; text-align:justify; }

/* Collectors / Artists — letter format */
.letter-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:50px; padding-bottom:26px; border-bottom:1px solid var(--hairline);
}
.letter-brand{ font-family:var(--serif); font-size:14px; letter-spacing:0.2em; color:var(--fg); }
.letter-addresses{ text-align:right; font-family:var(--serif); font-size:11px; letter-spacing:0.06em; color:var(--muted); line-height:1.9; }

.enquiry-link{
  display:inline-block; margin-top:14px;
  font-weight:600; font-size:12.5px; letter-spacing:0.16em;
  border-bottom:1px solid var(--fg); padding-bottom:4px;
  transition:opacity .3s ease;
}
.enquiry-link:hover{ opacity:0.55; }
.hairline{ border:none; border-top:1px solid var(--hairline); margin:36px 0 8px; }

.split-buttons{
  display:flex; justify-content:space-between; align-items:center;
  max-width:640px; margin:0 auto; padding:10px 40px 60px;
}
.split-btn{
  font-weight:500; font-size:13px; letter-spacing:0.2em;
  padding:16px 26px; position:relative; transition:color .3s ease;
  cursor:pointer; display:inline-block;
}
.split-btn::before{
  content:""; position:absolute; inset:0; border:1px solid var(--fg);
  clip-path:inset(0 0 0 100%); transition:clip-path .45s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.split-btn:hover::before{ clip-path:inset(0 0 0 0%); }

.page-enquiry{ margin-top:56px; padding-top:36px; border-top:1px solid var(--hairline); }
.enquiry-heading{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--fg); margin:0 0 12px; transform:none; }
.enquiry-text{ font-weight:300; font-size:14.5px; line-height:1.8; color:#CFCAC0; max-width:520px; margin:0 0 18px; }

/* ============ FOOTER — LEGAL LINKS ============ */
.legal-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px;
  padding-top:30px; margin-top:26px; border-top:1px solid rgba(245,242,235,0.07);
  max-width:760px; margin-left:auto; margin-right:auto;
}
.legal-links a{
  font-family:var(--sans); font-size:9px; font-weight:400; letter-spacing:0.24em;
  color:var(--fg); opacity:0.42; text-decoration:none; transition:opacity .35s ease;
}
.legal-links a:hover, .legal-links a:focus-visible{ opacity:1; outline:none; }
.mkt-footer .legal-links{ margin-top:18px; padding-top:18px; }

/* ============ LEGAL PAGES ============ */
.legal{ max-width:1180px; margin:0 auto; padding:84px 32px 120px; font-family:var(--sans); }
.legal-head{ max-width:760px; margin:0 0 72px 252px; }
.legal-eyebrow{ font-size:10px; letter-spacing:0.3em; color:var(--muted); margin:0 0 18px; text-transform:uppercase; }
.legal-title{
  font-weight:700; font-size:clamp(30px,4.4vw,52px); line-height:1; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--fg); margin:0;
  transform:var(--v-squish); transform-origin:top left;
}
.legal-meta{ font-size:10px; letter-spacing:0.22em; color:var(--muted); margin:22px 0 34px; text-transform:uppercase; }
.legal-intro{ font-weight:300; font-size:16px; line-height:1.75; color:#e3dfd6; margin:0; max-width:620px; }

.legal-grid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; }
.legal-toc{
  position:sticky; top:110px; padding-top:6px;
  border-top:1px solid var(--hairline);
}
.legal-toc-title{ font-size:9px; letter-spacing:0.3em; color:var(--muted); margin:18px 0 16px; text-transform:uppercase; }
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li{ margin:0 0 10px; }
.legal-toc li:not(.toc-part){ counter-increment:toc; }
.legal-toc .toc-part{ font-size:8.5px; letter-spacing:0.22em; color:var(--muted); text-transform:uppercase; margin:22px 0 12px; opacity:0.8; }
.legal-toc .toc-part:first-child{ margin-top:0; }
.legal-toc a{
  display:flex; gap:12px; font-size:11px; line-height:1.4; letter-spacing:0.04em;
  color:var(--fg); opacity:0.42; text-decoration:none; transition:opacity .3s ease;
}
.legal-toc a::before{ content:counter(toc, decimal-leading-zero); font-size:9px; letter-spacing:0.1em; padding-top:2px; min-width:16px; }
.legal-toc a:hover, .legal-toc a.active{ opacity:1; }

.legal-content{ max-width:720px; counter-reset:sec; border-top:1px solid var(--hairline); }
.legal-part{
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--fg);
  margin:64px 0 0; padding:20px 0 0; opacity:0.9;
}
.legal-part:first-child{ margin-top:0; }
.legal-sec{ counter-increment:sec; padding:30px 0 12px; border-bottom:1px solid rgba(245,242,235,0.07); scroll-margin-top:110px; }
.legal-sec h2{
  display:flex; align-items:baseline; gap:18px; margin:0 0 18px;
  font-weight:500; font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg);
}
.legal-num::before{ content:counter(sec, decimal-leading-zero); font-size:10px; letter-spacing:0.12em; color:var(--muted); font-weight:400; }
.legal-sec h3{ font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#cfcac0; margin:22px 0 8px; }
.legal-sec p, .legal-sec li{ font-weight:300; font-size:14.5px; line-height:1.85; color:#d8d4cb; }
.legal-sec p{ margin:0 0 16px; }
.legal-sec strong{ font-weight:500; color:var(--fg); }
.legal-sec ul{ list-style:none; margin:0 0 18px; padding:0; }
.legal-sec li{ position:relative; padding-left:26px; margin:0 0 8px; }
.legal-sec li::before{ content:""; position:absolute; left:0; top:0.95em; width:12px; height:1px; background:var(--muted); }
.legal-sec a, .legal-intro a{ color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(245,242,235,0.3); transition:border-color .3s ease; }
.legal-sec a:hover{ border-color:var(--fg); }
.legal-note{ font-size:13px !important; color:var(--muted) !important; font-style:normal; margin-top:24px !important; }
/* fill-in fields awaiting your details */
.fill{
  font-size:0.82em; letter-spacing:0.08em; color:#e9d79c;
  background:rgba(233,215,156,0.08); border:1px dashed rgba(233,215,156,0.35);
  padding:1px 7px; border-radius:3px; white-space:nowrap;
}

.legal-table{ margin:6px 0 20px; border-top:1px solid var(--hairline); }
.lt-row{ display:grid; grid-template-columns:1.1fr 1.6fr 1.5fr 0.9fr; gap:16px; padding:13px 0; border-bottom:1px solid rgba(245,242,235,0.08); font-size:12.5px; font-weight:300; color:#d8d4cb; }
.lt-head{ font-size:9px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }

@media (max-width:900px){
  .legal{ padding:56px 22px 90px; }
  .legal-head{ margin:0 0 48px; }
  .legal-grid{ grid-template-columns:1fr; gap:0; }
  .legal-toc{ position:static; margin-bottom:28px; }
  .lt-row{ grid-template-columns:1fr 1fr; }
}

/* ============ COOKIE SETTINGS PANEL ============ */
.cookie-panel{
  position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:flex-end;
  padding:24px; background:rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.cookie-panel.open{ opacity:1; visibility:visible; }
.cookie-card{
  position:relative; width:min(420px,100%); padding:34px 32px 28px;
  background:rgba(8,8,9,0.97); border:1px solid rgba(245,242,235,0.14);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  font-family:var(--sans); transform:translateY(14px); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.cookie-panel.open .cookie-card{ transform:translateY(0); }
.cookie-eyebrow{ font-size:9px; letter-spacing:0.3em; color:var(--muted); margin:0 0 12px; }
.cookie-title{ font-weight:500; font-size:15px; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg); margin:0 0 14px; }
.cookie-text{ font-weight:300; font-size:12.5px; line-height:1.7; color:#cfcac0; margin:0 0 20px; }
.cookie-text a{ color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(245,242,235,0.3); }
.cookie-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid rgba(245,242,235,0.08); cursor:pointer; }
.cookie-row:first-of-type{ cursor:default; }
.cookie-name{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg); margin:0 0 4px; }
.cookie-desc{ font-weight:300; font-size:11.5px; line-height:1.5; color:var(--muted); margin:0; }
.cookie-always{ font-size:8.5px; letter-spacing:0.2em; color:var(--muted); white-space:nowrap; }
.cookie-switch{
  appearance:none; -webkit-appearance:none; flex:none; width:34px; height:18px; margin:0;
  border-radius:9px; background:rgba(245,242,235,0.12); border:1px solid rgba(245,242,235,0.2);
  position:relative; cursor:pointer; transition:background .3s ease, border-color .3s ease;
}
.cookie-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:#bdb8ae; transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.cookie-switch:checked{ background:rgba(245,242,235,0.85); border-color:var(--fg); }
.cookie-switch:checked::after{ transform:translateX(16px); background:#050403; }
.cookie-switch:focus-visible{ outline:1px solid var(--fg); outline-offset:3px; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cookie-btn{
  flex:1 1 auto; font-family:var(--sans); font-weight:500; font-size:9px; letter-spacing:0.22em; color:var(--fg);
  border:1px solid rgba(245,242,235,0.3); padding:11px 12px; background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.cookie-btn:hover{ border-color:var(--fg); }
.cookie-btn--solid{ background:var(--fg); color:#050403; border-color:var(--fg); }
.cookie-btn--solid:hover{ background:#fff; }
.cookie-close{ position:absolute; top:14px; right:16px; font-size:20px; line-height:1; color:var(--muted); padding:4px; }
.cookie-close:hover{ color:var(--fg); }
/* first-visit cookie banner */
.cookie-banner{
  position:fixed; left:50%; bottom:20px; z-index:290;
  width:min(920px, calc(100% - 32px));
  display:flex; align-items:center; gap:28px; padding:16px 18px 16px 26px;
  background:#08080a; border:1px solid rgba(245,242,235,0.14);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  font-family:var(--sans);
  opacity:0; transform:translate(-50%, 24px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.cookie-banner.show{ opacity:1; transform:translate(-50%, 0); }
.cookie-banner-text{
  flex:1; margin:0; font-weight:400; font-size:10px; line-height:1.9; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
  transform:var(--v-squish); transform-origin:left center;
}
.cookie-banner-text a{ color:var(--fg); text-decoration:none; opacity:0.85; transition:opacity .3s ease; }
.cookie-banner-text a:hover{ opacity:1; }
.cookie-banner-actions{ display:flex; gap:8px; flex:none; }
.cookie-banner .cookie-btn{ flex:none; padding:10px 14px; }
@media (max-width:760px){
  .cookie-banner{ flex-direction:column; align-items:stretch; gap:14px; padding:18px; bottom:12px; }
  .cookie-banner-text{ font-size:9px; letter-spacing:0.14em; transform-origin:top left; }
  .cookie-banner-actions{ flex-wrap:wrap; }
  .cookie-banner .cookie-btn{ flex:1 1 auto; }
}
@media (max-width:640px){ .cookie-panel{ padding:12px; align-items:flex-end; justify-content:center; } }

@media (max-width:900px){
  .tiles-row{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .folder{ --body-h:104px; }
  .folder + .folder{ margin-top:-102px; }
  .folder:last-child{ --body-h:52px; }
  .folder-tab{ padding:10px 40px 9px; }
  .folder-label{ letter-spacing:0.2em; font-size:11px; }
  .folder:nth-child(1) .folder-tab{ margin-left:16%; }
  .folder:nth-child(2) .folder-tab{ margin-left:22%; }
  .folder:nth-child(3) .folder-tab{ margin-left:6%; }
  .folder:nth-child(4) .folder-tab{ margin-left:30%; }
  .folder:nth-child(5) .folder-tab{ margin-left:12%; }
  .folder:nth-child(6) .folder-tab{ margin-left:36%; }
  .folder:nth-child(7) .folder-tab{ margin-left:4%; }
  .folder:nth-child(8) .folder-tab{ margin-left:22%; }
}
@media (max-width:640px){
  .bar-inner{ grid-template-columns:auto 1fr auto; gap:10px; padding:12px 16px; }
  .emblem{ width:40px; height:40px; }
  .subtitle-wrap{ display:none; }
  .wordmark{ font-size:14.5px; }
  .bar-right{ gap:14px; }
  .enquire-btn{ padding:5px 9px; font-size:9.5px; letter-spacing:0.12em; }
  .lang-toggle > span{ display:none; }
  .lang-globe{ width:17px; height:17px; }
  .header-title{ margin:0 0 26px 20px; font-size:clamp(24px,8vw,40px); }
  .split-buttons{ padding:6px 20px 20px; }
  .page{ padding:56px 22px 90px; }
  .letter-head{ flex-direction:column; gap:16px; }
  .letter-addresses{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}


/* ============ COLLECTORS / ARTISTS — typed letter on house paper ============ */
.lt-page{ max-width:820px; padding-top:46px; }
.lt-back{ display:inline-block; margin:0 0 30px; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:0.26em;
  color:var(--fg); opacity:.45; transform:var(--v-squish); transform-origin:left center; transition:opacity .3s ease; }
.lt-back:hover, .lt-back:focus-visible{ opacity:1; }
.lt-sheet{
  --ink:#24231F; --ink2:#5E5A51;
  position:relative; margin:0; padding:62px 78px 56px 104px;
  background-color:#F1EDE3;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 34px 90px -30px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.45);
  opacity:0; transform:translateY(18px); animation:ltIn 1.4s cubic-bezier(.22,.61,.24,1) .15s forwards;
}
@keyframes ltIn{ to{ opacity:1; transform:none; } }
.lt-sheet p{ margin:0; max-width:none; transform:none; }
.lt-sheet .lt-side{ position:absolute; left:34px; top:300px; bottom:auto; writing-mode:vertical-rl; transform:rotate(180deg) !important; transform-origin:50% 50% !important;
  display:flex; flex-direction:row; gap:3.2em; height:auto; line-height:1; font-family:var(--serif); font-size:9.5px; letter-spacing:0.42em; color:var(--ink2) !important; white-space:nowrap; }
.lt-head{ text-align:center; padding-bottom:30px; border-bottom:1px solid rgba(36,35,31,.16); margin:0 -78px 0 -104px; }
.lt-wm{ display:block; width:min(300px,64%); height:auto; margin:0 auto; color:var(--ink); }
.lt-sheet .lt-sub{ margin-top:16px !important; font-family:var(--serif); font-size:10.5px; letter-spacing:0.5em; text-transform:uppercase; color:var(--ink2) !important; padding-left:.5em; }
.lt-meta{ margin:30px 0 0; }
.lt-sheet .lt-meta p{ font-family:var(--serif); font-size:9px; line-height:2; letter-spacing:0.16em; text-transform:uppercase; color:#3A3832 !important; }
.lt-meta p > span:first-child{ font-weight:700; margin-right:.4em; }
.lt-meta a{ color:inherit; border-bottom:1px solid rgba(36,35,31,.25); text-transform:none; letter-spacing:0.06em; font-size:10px; }
.lt-sheet .lt-date, .lt-sheet .lt-re, .lt-sheet .lt-dear, .lt-sheet .lt-body p, .lt-sheet .lt-close p, .lt-sheet .lt-ref{
  font-family:"YH Typewriter","Courier Prime","Courier New",Courier,monospace; font-size:14.5px; line-height:1.62; color:var(--ink);
  text-shadow:0 0 .6px rgba(36,35,31,.55); text-align:left; letter-spacing:0;
}
.lt-sheet .lt-date{ text-align:right; margin:30px 0 40px; }
.lt-sheet .lt-re{ margin:0 0 30px 3.2em; }
.lt-re-k{ margin-right:.5em; }
.lt-sheet .lt-dear{ margin:0 0 22px; font-weight:400; }
.lt-sheet .lt-body p{ text-indent:3.2em; margin:0 0 18px; }
.lt-close{ margin:34px 0 0 52%; }
.lt-sheet .lt-close .lt-sign{ font-family:"YH Signature", "Snell Roundhand", cursive; font-size:44px; line-height:1; color:#1C2433;
  text-shadow:none; margin:18px 0 8px -14px; transform:rotate(-4deg) !important; transform-origin:left center !important; letter-spacing:0; }
.lt-sheet .lt-from{ line-height:1.45; }
.lt-sheet .lt-ref{ margin-top:46px; font-size:12.5px; }
.lt-reply{ text-align:center; margin:44px 0 10px; }
.lt-page .page-ill{ margin-top:70px; }
@media (max-width:720px){
  .lt-page{ padding-left:14px; padding-right:14px; }
  .lt-sheet{ padding:40px 24px 36px; }
  .lt-head{ margin:0 -24px; padding-bottom:22px; }
  .lt-sheet .lt-side{ display:none; }
  .lt-wm{ width:72%; }
  .lt-sheet .lt-sub{ font-size:8px; letter-spacing:0.3em; }
  .lt-sheet .lt-meta p{ font-size:8px; letter-spacing:0.12em; }
  .lt-sheet .lt-date, .lt-sheet .lt-re, .lt-sheet .lt-dear, .lt-sheet .lt-body p, .lt-sheet .lt-close p, .lt-sheet .lt-ref{ font-size:13px; line-height:1.6; }
  .lt-sheet .lt-re{ margin-left:0; }
  .lt-sheet .lt-body p{ text-indent:1.6em; }
  .lt-close{ margin-left:28%; }
  .lt-sheet .lt-close .lt-sign{ font-size:38px; }
}

/* Collectors — the Art Office letter */
.lt-v2{ padding:56px 64px 64px; }
.lt-v2::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent calc(33.3% - 1px), rgba(0,0,0,.045) calc(33.3% - 1px), rgba(255,255,255,.5) 33.3%, transparent calc(33.3% + 2px)),
    linear-gradient(180deg, transparent calc(66.6% - 1px), rgba(0,0,0,.045) calc(66.6% - 1px), rgba(255,255,255,.5) 66.6%, transparent calc(66.6% + 2px)); }
.lt-v2 .lt-head{ margin:0 -64px; padding-bottom:26px; }
.lt-sheet .lt-name{ font-family:var(--serif); font-size:clamp(22px,3.2vw,31px); font-weight:400; letter-spacing:0.62em; padding-left:.62em; color:var(--ink) !important; line-height:1.1; }
.lt-v2 .lt-sub{ margin-top:14px !important; font-size:12px; letter-spacing:0.6em; }
.lt-sheet .lt-meta2{ margin:24px 0 0 6%; }
.lt-sheet .lt-meta2 p, .lt-sheet .lt-body2 p, .lt-sheet .lt-body2 .lt-dear{
  font-family:"YH Typewriter","Courier Prime","Courier New",Courier,monospace; color:#3B3934; text-align:left; letter-spacing:0; }
.lt-sheet .lt-meta2 p{ font-size:12px; line-height:1.6; }
.lt-sheet .lt-meta2 em{ font-style:italic; }
.lt-sheet .lt-meta2 .lt-ds{ margin-top:10px; }
.lt-meta2 a{ color:inherit; }
.lt-v2 .lt-date{ margin:20px 6% 34px 0; font-size:14px; color:#3B3934; text-shadow:none; }
.lt-sheet .lt-body2{ margin:0 6% 0 18%; }
.lt-sheet .lt-body2 p, .lt-sheet .lt-body2 .lt-dear{ font-size:14.5px; line-height:1.62; margin:0 0 22px; font-weight:400; }
.lt-mail{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.lt-sheet .lt-body2 .lt-yours{ margin-top:38px; margin-bottom:6px; }
.lt-sig-img{ display:block; width:min(300px,70%); height:auto; margin:0 0 10px -12px; }
.lt-sheet .lt-body2 .lt-from2{ margin:0; line-height:1.65; }
@media (max-width:720px){
  .lt-v2{ padding:38px 22px 44px; }
  .lt-v2 .lt-head{ margin:0 -22px; }
  .lt-sheet .lt-name{ font-size:20px; letter-spacing:0.42em; padding-left:.42em; }
  .lt-v2 .lt-sub{ font-size:9.5px; letter-spacing:0.46em; }
  .lt-sheet .lt-meta2{ margin-left:0; }
  .lt-sheet .lt-meta2 p{ font-size:9.6px; line-height:1.7; }
  .lt-v2 .lt-date{ margin-right:0; font-size:12.5px; }
  .lt-sheet .lt-body2{ margin:0; }
  .lt-sheet .lt-body2 p, .lt-sheet .lt-body2 .lt-dear{ font-size:13px; }
}

/* Collectors — the letter as an image: a small sheet that opens full size */
.lt-sr{ position:absolute !important; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; animation:none !important; }
.lt-photo{ margin:10px auto 0; text-align:center; }
.lt-thumb{ display:block; margin:0 auto; padding:0; width:min(240px,58vw); cursor:zoom-in; background:none; border:0;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px) rotate(-1.2deg); animation:ltThumb 1.3s cubic-bezier(.22,.61,.24,1) .15s forwards;
  transition:transform .5s cubic-bezier(.22,.61,.24,1), box-shadow .5s ease; }
@keyframes ltThumb{ to{ opacity:1; transform:rotate(-1.2deg); } }
.lt-thumb img{ display:block; width:100%; height:auto; }
.lt-thumb:hover, .lt-thumb:focus-visible{ transform:rotate(0deg) translateY(-4px) scale(1.02); outline:none; box-shadow:0 34px 70px -24px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5); }
.lt-photo figcaption{ margin-top:22px; font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:0.3em; color:var(--fg); opacity:.45; transform:var(--v-squish); }
.lt-page-img .lt-reply{ margin-top:30px; }
.lt-page-img .page-ill{ max-width:400px; margin:56px auto 0 !important; }
@media (max-width:640px){ .lt-page-img .page-ill{ max-width:270px; } }
.lt-box{ position:fixed; inset:0; z-index:400; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px;
  background:rgba(5,4,3,.92); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; cursor:zoom-out; }
.lt-box.open{ opacity:1; visibility:visible; }
.lt-box img{ display:block; width:min(880px,100%); height:auto; margin:auto; box-shadow:0 30px 90px rgba(0,0,0,.8);
  transform:translateY(14px) scale(.98); transition:transform .5s cubic-bezier(.22,.61,.24,1); }
.lt-box.open img{ transform:none; }
.lt-box-x{ position:fixed; top:16px; right:18px; width:36px; height:36px; font-family:var(--sans); font-size:22px; line-height:1; color:var(--fg); opacity:.7; background:none; border:0; cursor:pointer; }
.lt-box-x:hover{ opacity:1; }
body.lt-locked{ overflow:hidden; }

/* Collectors: the enquiries button. A capsule with a second hairline ring, a chrome bead and
   a long fine arrow; on hover a pale sheen crosses it and the arrow reaches further */
.pce-btn{ position:relative; display:inline-flex; align-items:center; gap:11px; height:36px; padding:0 17px 0 13px; border-radius:999px;
  border:1px solid rgba(242,241,236,.42); color:#F2F1EC; text-decoration:none; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(242,241,236,.07), rgba(242,241,236,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 4px #050403, 0 0 0 5px rgba(242,241,236,.13);
  transition:border-color .5s ease, box-shadow .5s ease; }
.pce-btn::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(242,241,236,.13) 48%, rgba(201,164,106,.10) 52%, transparent 70%);
  transform:translateX(-110%); transition:transform 1.1s cubic-bezier(.22,.61,.24,1); }
.pce-txt{ font-family:"Cormorant Garamond", var(--serif); font-size:11px; font-weight:500; letter-spacing:0.22em; white-space:nowrap; }
.pce-orb{ flex:none; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFFFFF 0%, #D9D4C8 28%, #8A8478 62%, #2E2C28 100%);
  box-shadow:0 0 0 1px rgba(242,241,236,.18), 0 0 10px rgba(242,241,236,.12); transition:box-shadow .6s ease; }
.pce-arr{ position:relative; flex:none; width:14px; height:1px; background:#F2F1EC; opacity:.75; transition:width .6s cubic-bezier(.22,.61,.24,1), opacity .4s ease; }
.pce-arr::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid #F2F1EC; border-right:1px solid #F2F1EC; transform:rotate(45deg); transform-origin:center; }
.pce-btn:hover, .pce-btn:focus-visible{ border-color:rgba(242,241,236,.8); outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 4px #050403, 0 0 0 5px rgba(201,164,106,.38), 0 18px 50px -20px rgba(201,164,106,.35); }
.pce-btn:hover::after, .pce-btn:focus-visible::after{ transform:translateX(110%); }
.pce-btn:hover .pce-orb{ box-shadow:0 0 0 1px rgba(201,164,106,.5), 0 0 14px rgba(201,164,106,.55); }
.pce-btn:hover .pce-arr{ width:24px; opacity:1; }
@media (max-width:640px){ .pce-btn{ height:34px; gap:9px; padding:0 14px 0 11px; } .pce-txt{ font-size:9.5px; letter-spacing:0.16em; } .pce-arr{ width:12px; } }
@media (min-width:641px){ .lt-box img{ width:min(540px,100%); } }
@media (prefers-reduced-motion:reduce){ .lt-thumb{ opacity:1; animation:none; } .lt-sheet{ opacity:1; transform:none; animation:none; } }

/* ============ PAGE ILLUSTRATIONS (one per section page) ============ */
.page-ill{ margin:54px 0 62px; padding:0; }
.page-ill svg{ display:block; width:100%; height:auto; overflow:visible; }
.page-ill figcaption{
  margin-top:16px; text-align:center; font-family:var(--sans); font-size:8.5px; font-weight:500;
  letter-spacing:0.28em; color:var(--muted); opacity:0; transition:opacity 1s ease 1.2s;
}
.page-ill.in figcaption{ opacity:1; }
@media (min-width:900px){ .page-ill{ margin-left:-90px; margin-right:-90px; } }
@media (max-width:640px){ .page-ill{ margin-left:-18px; margin-right:-18px; } }
.page-ill .t{ font-family:var(--sans); font-size:7.6px; font-weight:500; letter-spacing:0.18em; fill:#87867F; }
.page-ill .t-b{ fill:#F2F1EC; }
.page-ill .t-s{ font-size:6.4px; letter-spacing:0.1em; font-weight:400; }
.page-ill .t-cap{ font-size:5.6px; letter-spacing:0.16em; fill:#B9B7AF; }
.page-ill .t-serif{ font-family:var(--serif); letter-spacing:0.02em; font-weight:400; }
/* intro: plays once when the figure scrolls in */
.page-ill .fi{ opacity:0; }
.page-ill.in .fi{ animation:piFade .9s ease var(--dl,0s) forwards; }
.page-ill .dr{ stroke-dasharray:100; stroke-dashoffset:100; }
.page-ill.in .dr{ animation:piDraw var(--du,1.4s) cubic-bezier(.45,.05,.25,1) var(--dl,0s) forwards; }
.page-ill .gx{ transform-box:fill-box; transform-origin:0 50%; transform:scaleX(0); }
.page-ill.in .gx{ animation:piGx var(--du,1.6s) cubic-bezier(.16,1,.3,1) var(--dl,0s) forwards; }
.page-ill .gy{ transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); }
.page-ill.in .gy{ animation:piGy var(--du,.9s) cubic-bezier(.16,1,.3,1) var(--dl,0s) forwards; }
.page-ill .pop{ transform-box:fill-box; transform-origin:center; transform:scale(0); opacity:0; }
.page-ill.in .pop{ animation:piPop .6s cubic-bezier(.34,1.6,.5,1) var(--dl,0s) forwards; }
.page-ill.in .dim{ animation:piDim 1s ease var(--dl,2s) forwards; }
.page-ill.in .lit{ animation:piLit 1s ease var(--dl,2s) forwards; }
.page-ill .flow{ opacity:0; transition:opacity .8s ease; }
.page-ill.in .flow{ opacity:1; transition-delay:var(--dl,1.5s); }
.page-ill .fly{ opacity:0; transform-box:fill-box; transform-origin:0 0; }
.page-ill.in .fly{ animation:piFly 1.6s cubic-bezier(.6,0,.2,1) var(--dl,2.4s) forwards; }
/* loops: start once visible, pause when off screen */
.page-ill .ripple{ transform-box:fill-box; transform-origin:center; opacity:0; }
.page-ill.in .ripple{ animation:piRipple var(--d,4.2s) ease-out var(--dl,1s) infinite; }
.page-ill .bar{ transform-box:fill-box; transform-origin:center; }
.page-ill.in .bar{ animation:piBar var(--d,1.6s) ease-in-out var(--dl,0s) infinite alternate; }
.page-ill.in .flicker{ animation:piFlicker var(--d,2.2s) ease-in-out var(--dl,0s) infinite alternate; }
.page-ill .sway{ transform-box:view-box; transform-origin:var(--ox) var(--oy); }
.page-ill.in .sway{ animation:piSway var(--d,5s) ease-in-out var(--dl,0s) infinite alternate; }
.page-ill.in .scan{ animation:piScan var(--d,7s) linear var(--dl,1.5s) infinite; }
.page-ill.off *{ animation-play-state:paused !important; }
@keyframes piFade{ to{ opacity:1; } }
@keyframes piDraw{ to{ stroke-dashoffset:0; } }
@keyframes piGx{ to{ transform:scaleX(1); } }
@keyframes piGy{ to{ transform:scaleY(1); } }
@keyframes piPop{ to{ transform:scale(1); opacity:1; } }
@keyframes piDim{ to{ opacity:0.32; } }
@keyframes piLit{ to{ stroke:#F2F1EC; } }
@keyframes piFly{ 0%{ opacity:0; transform:none; } 14%{ opacity:1; transform:none; } 100%{ opacity:1; transform:translate(var(--tx),var(--ty)) scale(var(--s)); } }
@keyframes piRipple{ 0%{ opacity:0.55; transform:scale(1); } 100%{ opacity:0; transform:scale(var(--k,3.4)); } }
@keyframes piBar{ from{ transform:scaleY(var(--lo,.3)); } to{ transform:scaleY(1); } }
@keyframes piFlicker{ 0%{ opacity:var(--a,.35); } 40%{ opacity:1; } 55%{ opacity:.7; } 100%{ opacity:.95; } }
@keyframes piSway{ from{ transform:rotate(var(--r0,-7deg)); } to{ transform:rotate(var(--r1,7deg)); } }
@keyframes piScan{ 0%{ transform:translateX(0); opacity:0; } 6%{ opacity:.55; } 94%{ opacity:.55; } 100%{ transform:translateX(var(--w,512px)); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .page-ill .fi, .page-ill .flow, .page-ill .fly, .page-ill figcaption{ opacity:1 !important; animation:none !important; transition:none !important; }
  .page-ill .dr{ stroke-dashoffset:0 !important; animation:none !important; }
  .page-ill .gx, .page-ill .gy, .page-ill .pop{ transform:none !important; opacity:1 !important; animation:none !important; }
  .page-ill .ripple, .page-ill .bar, .page-ill .flicker, .page-ill .sway, .page-ill .scan{ animation:none !important; }
}

/* ============ TALENT: coming-soon letter and division contact ============ */
.talent-letter{ margin:34px auto 0; max-width:560px; }
.talent-letter img{
  display:block; width:100%; height:auto;
  box-shadow:0 30px 70px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03);
  animation:letterIn 1.6s cubic-bezier(.16,.8,.24,1) both .2s;
}
@keyframes letterIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.division-contact{ text-align:center; margin-top:10px; padding-top:44px; border-top:1px solid var(--hairline); }
.division-contact .enquiry-heading{ margin:0 0 24px; }
.division-btn{
  display:inline-block; padding:13px 40px 12px; border:1px solid rgba(245,242,235,0.55);
  font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:0.28em; color:var(--fg);
  text-decoration:none; transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.division-btn:hover, .division-btn:focus-visible{ background:var(--fg); color:#000; border-color:var(--fg); outline:none; }
@media (prefers-reduced-motion: reduce){ .talent-letter img{ animation:none; } }
/* closing frames and slow breathing light, used by the section illustrations */
.page-ill .vf{ opacity:0; transform-box:view-box; transform-origin:var(--ox) var(--oy); }
.page-ill.in .vf{ animation:piVf 1.4s cubic-bezier(.16,.8,.24,1) var(--dl,3s) forwards; }
@keyframes piVf{ from{ opacity:0; transform:scale(var(--s0,1.8)); } to{ opacity:1; transform:scale(1); } }
.page-ill .breathe{ transform-box:fill-box; transform-origin:center; }
.page-ill.in .breathe{ animation:piBreathe var(--d,6s) ease-in-out var(--dl,0s) infinite alternate; }
@keyframes piBreathe{ from{ opacity:var(--a,.55); transform:scale(.97); } to{ opacity:1; transform:scale(1.03); } }
@media (prefers-reduced-motion: reduce){
  .page-ill .vf{ opacity:1 !important; transform:none !important; animation:none !important; }
  .page-ill .breathe{ animation:none !important; }
}
}

/* key facts at the top of a legal section */
.legal-facts{ margin:0 0 26px; padding:0; border-top:1px solid var(--hairline); }
.legal-facts div{ display:flex; gap:24px; padding:12px 0; border-bottom:1px solid var(--hairline); }
.legal-facts dt{ flex:none; width:130px; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.legal-facts dd{ margin:0; font-family:var(--sans); font-size:14px; color:var(--fg); }

/* locked private pages: the code box on a black page */
body.private-gate{ background:#000; min-height:100vh; }
.private-gate .code-box{ margin:0; }

/* ============ ABOUT: the name, and how it is said ============ */
.about-stage{
  min-height:calc(100vh - 200px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 24px 100px; text-align:center;
}
.about-line{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0.2em 0.9em;
  font-family:"Cormorant Garamond", var(--serif); font-weight:500; font-size:clamp(26px,4.4vw,52px);
  letter-spacing:0.16em; color:var(--fg); line-height:1.2;
}
.about-name, .about-said{ white-space:nowrap; }
.about-said{ font-style:italic; font-weight:400; letter-spacing:0.12em; color:#d6d5cf; }
/* a quiet, single-gesture entrance: the name settles in as one line while its tracking eases closed,
   the pronunciation follows, a fine gold rule draws from the centre, and the text fades up as one block */
.about-name, .about-said, .about-tilde{ display:inline-block; opacity:0; }
.about-name{ letter-spacing:0.3em; margin-right:-0.14em;
  animation:aboutName 2.4s cubic-bezier(.22,.61,.24,1) .3s forwards; }
.about-tilde{ color:#C9A46A; font-weight:400; animation:aboutFade 1.4s ease 1.35s forwards; }
.about-said{ animation:aboutSaid 1.8s cubic-bezier(.22,.61,.24,1) 1.55s forwards; }
.about-text{
  max-width:440px; margin:22px auto 0; font-family:"Cormorant Garamond", var(--serif); font-size:18px; font-weight:500; line-height:1.75;
  letter-spacing:0.02em; color:#BDB6A8; opacity:0; transform:translateY(6px);
  animation:aboutText 1.8s cubic-bezier(.22,.61,.24,1) 2.75s forwards;
}
.about-rule{ display:block; width:64px; height:1px; margin:44px auto 0; background:linear-gradient(90deg, transparent, #C9A46A, transparent);
  transform:scaleX(0); opacity:0; animation:aboutRule 1.4s cubic-bezier(.22,.61,.24,1) 2.35s forwards; }
@keyframes aboutName{ to{ opacity:1; letter-spacing:0.16em; margin-right:0; } }
@keyframes aboutSaid{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
@keyframes aboutFade{ to{ opacity:1; } }
@keyframes aboutRule{ to{ transform:none; opacity:1; } }
@keyframes aboutText{ to{ opacity:1; transform:none; } }
/* About: the house, where we operate, how to begin */
.ab-sec{ max-width:1040px; margin:0 auto; padding:72px 24px; text-align:center; border-top:1px solid rgba(242,241,236,0.08); }
.ab-k{ margin:0 0 30px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:10px; font-weight:600; letter-spacing:0.34em; color:#8C8A84; }
.ab-depts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; }
.ab-dept{ padding:6px 34px 4px; }
.ab-dept + .ab-dept{ border-left:1px solid rgba(201,164,106,0.22); }
.ab-dept h2{ margin:0 0 14px; font-family:"Cormorant Garamond", var(--serif); font-weight:500; font-size:20px; letter-spacing:0.16em; color:var(--fg); }
.ab-dept p{ margin:0 auto; max-width:280px; font-family:"Cormorant Garamond", var(--serif); font-size:16.5px; font-weight:500; line-height:1.65; color:#BDB6A8; }
.ab-links{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.ab-links a, .ab-cta{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:9.5px; letter-spacing:0.22em; font-weight:500;
  color:rgba(242,241,236,0.72); text-decoration:none; transition:color .35s ease; }
.ab-links a:hover, .ab-cta:hover, .ab-links a:focus-visible, .ab-cta:focus-visible{ color:#C9A46A; }
.ab-cities{ margin:0; font-family:"Cormorant Garamond", var(--serif); font-weight:500; font-size:clamp(22px,3vw,32px); letter-spacing:0.12em; color:var(--fg); }
.ab-cities span{ color:#C9A46A; margin:0 0.35em; }
.ab-body{ margin:22px auto 0; max-width:520px; font-family:"Cormorant Garamond", var(--serif); font-size:17.5px; font-weight:500; line-height:1.75; color:#BDB6A8; }
.ab-lead{ margin:0; font-family:"Cormorant Garamond", var(--serif); font-style:italic; font-weight:500; font-size:clamp(20px,2.6vw,27px); letter-spacing:0.02em; color:var(--fg); }
.ab-cta{ display:inline-block; margin-top:30px; padding:12px 30px; border:1px solid rgba(242,241,236,0.35); color:var(--fg); font-size:10px; letter-spacing:0.28em;
  transition:color .35s ease, border-color .35s ease; }
.ab-cta:hover, .ab-cta:focus-visible{ border-color:#C9A46A; }
.ab-begin{ padding-bottom:96px; }
.ab-io{ opacity:0; transform:translateY(10px); transition:opacity 1.4s cubic-bezier(.22,.61,.24,1), transform 1.4s cubic-bezier(.22,.61,.24,1); }
.ab-io.in{ opacity:1; transform:none; }
.ab-dept.ab-io:nth-child(2){ transition-delay:.15s; } .ab-dept.ab-io:nth-child(3){ transition-delay:.3s; }
@media (max-width:780px){
  .ab-sec{ padding:56px 22px; }
  .ab-depts{ grid-template-columns:1fr; gap:38px; }
  .ab-dept{ padding:0; }
  .ab-dept + .ab-dept{ border-left:0; border-top:1px solid rgba(201,164,106,0.22); padding-top:38px; }
  .ab-dept.ab-io:nth-child(n){ transition-delay:0s; }
  .ab-cities{ line-height:1.55; letter-spacing:0.14em; }
  .ab-cities span{ display:block; height:0; overflow:hidden; margin:0; }
}
@media (prefers-reduced-motion: reduce){
  .ab-io{ opacity:1; transform:none; transition:none; }
  .about-name, .about-said, .about-tilde, .about-text, .about-rule{ opacity:1; transform:none; animation:none; }
  .about-name{ letter-spacing:0.16em; margin-right:0; }
}

/* ============ THE DIAL-RULER SCROLL BAR (computers only; phones keep their own) ============
   The ticks of the clock face, cut from the crystal (the photograph itself, unaltered);
   a white diamond and a crystal needle mark your place. The browser's own bar is hidden behind it. */
html.has-rail{ scrollbar-width:none; }
html.has-rail::-webkit-scrollbar{ width:0; height:0; }
.yh-rail{ position:fixed; top:0; right:0; bottom:0; width:18px; z-index:350; cursor:pointer; touch-action:none; transition:opacity .4s ease; }
.yh-rail.idle{ opacity:0; pointer-events:none; }
.yh-rail-ticks{ position:absolute; inset:0; opacity:1; transition:opacity .3s ease;
  background:url(images/rail-crystal.webp) 78% center / auto 100% no-repeat;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 1.5px,transparent 1.5px 12px) right 4px top 10px / 6px calc(100% - 20px) no-repeat,
               repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 60px) right 4px top 10px / 11px calc(100% - 20px) no-repeat;
          mask:repeating-linear-gradient(180deg,#000 0 1.5px,transparent 1.5px 12px) right 4px top 10px / 6px calc(100% - 20px) no-repeat,
               repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 60px) right 4px top 10px / 11px calc(100% - 20px) no-repeat; }
.yh-rail:hover .yh-rail-ticks, .yh-rail.held .yh-rail-ticks{ opacity:1; }
.yh-rail-mark{ position:absolute; top:0; right:0; width:18px; height:0; will-change:transform; }
.yh-rail-needle{ position:absolute; right:4px; top:-0.75px; width:15px; height:2px;
  background:url(images/rail-crystal.webp) 30% 18% / 240px auto; }
.yh-rail-dia{ position:absolute; right:12px; top:-3.5px; width:7px; height:7px; background:#F2F1EC; transform:rotate(45deg);
  box-shadow:0 0 6px rgba(242,241,236,.35); transition:transform .25s ease; }
.yh-rail:hover .yh-rail-dia, .yh-rail.held .yh-rail-dia{ transform:rotate(45deg) scale(1.25); }
/* scrolling panels inside the page (letters, documents) wear a slim jade capsule */
.lt-box::-webkit-scrollbar, .dial-modal::-webkit-scrollbar{ width:9px; }
.lt-box::-webkit-scrollbar-thumb, .dial-modal::-webkit-scrollbar-thumb{ border-radius:999px; border:2px solid transparent; background-clip:padding-box;
  background-color:#3d4a33; background-image:linear-gradient(180deg,#6b7a58,#2c3626 42%,#41503a 72%,#7a8862); }

/* ============ PHONES ONLY (640px and below) — desktop is untouched ============ */
.home-dial{ display:none; }
@media (max-width:640px){
  /* header: a slimmer ENQUIRE */
  /* equal space on every side: the trailing letter-space is taken off the right, and the box
     centres the capitals by their height rather than by the font's line box */
  .enquire-btn{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
    height:19px; padding:0 calc(7px - 0.12em) 0 7px; font-size:8.5px; line-height:1; letter-spacing:0.12em; }

  /* homepage: the three tiles side by side, as on desktop, sitting a quarter of the way down */
  .front-page{ max-width:none; padding:15vh 10px 0; }
  .tiles-row{ display:flex; align-items:center; gap:7px; max-width:none; margin:0; }
  .tiles-row .tile{ min-width:0; flex:296 1 0; transition:flex-grow .6s cubic-bezier(.22,.61,.24,1), opacity .5s ease; }
  .tiles-row .tile-creative{ flex-grow:340; }
  .tiles-row .tile-ops{ width:auto; }
  /* tap a tile: it grows to a readable size, the other two step back */
  .tiles-row.has-sel .tile{ flex-grow:46; opacity:.5; }
  .tiles-row.has-sel .tile.sel{ flex-grow:1000; opacity:1; }
  /* Curation on phones: nothing hides or fades; red headings, black descriptions */
  .ac-links .ac-link, .ac-links:hover .ac-link, .ac-links .ac-link:hover ~ .ac-link{ opacity:1 !important; }
  .tile-art .ac-label{ color:var(--ac-red); }
  .tile-art .ac-desc{ color:#15120F; opacity:1; }
  /* descriptions only show once a tile is brought forward */
  .tiles-row .tile:not(.sel) .cr-desc, .tiles-row .tile:not(.sel) .ac-desc, .tiles-row .tile:not(.sel) .op-desc{ display:none; }
  .tiles-row .tile{ aspect-ratio:277/345; }
  .tiles-row .tile-creative{ aspect-ratio:340/230; }
  .tiles-row .tile-art{ aspect-ratio:296/361; }
  .cr-title{ font-size:6.1cqw; }
  .cr-year{ font-size:2.15cqw; }
  .cr-links{ top:11.4cqw; width:43cqw; }
  .cr-link{ min-height:14.3cqw; }
  .cr-label{ font-size:3.4cqw; }
  .cr-desc{ font-size:2.4cqw; min-width:max(100%, 27cqw); }
  .cr-statue, .cr-tint{ right:0.6%; width:85%; }

  /* the dial sits between the tiles and the filing system */
  .home-dial{ display:block; margin:9vh auto 8vh; --face:min(232px, 60vw); --lab:9px; }

  /* the filing system runs almost to the screen edges, its file edges kept */
  .db-heading{ padding:40px 16px 0; }
  .filing-cabinet{ padding:0 4px; }

  /* footer: the same text, closer together */
  .site-footer{ padding:18px 14px 20px; }
  .home-footer{ line-height:1.7; }
  .cities-line{ padding-top:8px; line-height:1.7; }
  .legal-links{ margin-top:12px; padding-top:12px; gap:4px 18px; }
}
@media (prefers-reduced-motion:reduce){ .yh-dial *{ transition:none !important; animation:none !important; } }

/* ============ THE DIAL (phone homepage, and the header emblem's panel on desktop) ============ */
.yh-dial{ text-align:center; }
.hd-face{ position:relative; width:var(--face); aspect-ratio:1; margin:0 auto; }
.hd-clock{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hd-clock *{ vector-effect:non-scaling-stroke; }
.hd-ring{ fill:none; stroke:#F2F1EC; stroke-opacity:.5; stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; transform:rotate(-90deg); transform-origin:200px 200px; }
.hd-ticks{ stroke:#F2F1EC; stroke-opacity:.5; stroke-width:1; fill:#F2F1EC; fill-opacity:.35; opacity:0; }
.hd-grid{ stroke:#F2F1EC; stroke-opacity:.28; stroke-width:.9; fill:none; opacity:0; }
.hd-h1, .hd-h2{ transform-origin:200px 200px; opacity:0; }
.hd-h1 line{ stroke:#F2F1EC; stroke-opacity:.75; stroke-width:1.1; }
.hd-h1 circle{ fill:#F2F1EC; filter:drop-shadow(0 0 4px rgba(242,241,236,.8)); }
.hd-h2 line{ stroke:#F2F1EC; stroke-opacity:.5; stroke-width:1; }
.hd-h2{ --r0:152deg; transform:rotate(152deg); }
.hd-jade{ position:absolute; left:50%; top:50%; width:58%; height:auto; transform:translate(-50%,-50%) scale(.96); border-radius:50%;
  opacity:0; box-shadow:0 0 0 1px rgba(242,241,236,.06), 0 0 38px rgba(120,150,110,.10); transition:box-shadow .5s ease; }
.yh-dial.on .hd-ring{ stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .1s; }
.yh-dial.on .hd-ticks{ opacity:1; transition:opacity 1s ease 1s; }
.yh-dial.on .hd-grid{ opacity:1; transition:opacity 1.2s ease .5s; }
.yh-dial.on .hd-h1, .yh-dial.on .hd-h2{ opacity:1; transition:opacity .9s ease 1.3s; }
.yh-dial.on .hd-h2{ animation:hdSpin 14s linear 1.3s infinite; }
.yh-dial.on .hd-jade{ opacity:.8; transform:translate(-50%,-50%) scale(1); transition:opacity 1.6s ease .4s, transform 1.8s cubic-bezier(.22,.61,.24,1) .4s, box-shadow .5s ease; }
@keyframes hdSpin{ from{ transform:rotate(var(--r0)); } to{ transform:rotate(calc(var(--r0) + 360deg)); } }
/* labels sit just outside the ring, in our Helvetica; each appears as the hand passes it */
.yh-dial .hd-title, .yh-dial .hd-lang{ position:absolute; margin:0; white-space:nowrap; font-family:var(--sans); font-weight:500; letter-spacing:0.24em;
  color:#F2F1EC; opacity:0; transition:opacity .7s ease, color .3s ease; }
.yh-dial .hd-title{ font-size:calc(var(--lab) * .94); letter-spacing:0.38em; padding-left:.38em; color:#C9A46A; }
.yh-dial .hd-lang{ font-size:var(--lab); cursor:pointer; padding:6px 4px; display:inline-flex; align-items:flex-start; gap:9px; }
.yh-dial .hd-lang.left{ flex-direction:row-reverse; }
.yh-dial .hd-lang::after{ display:none; }
.yh-dial .hd-lang::before{ content:""; flex:none; margin-top:.32em; width:4px; height:4px; border:1px solid #F2F1EC; transform:rotate(45deg); opacity:0; transition:opacity .3s ease; }
.yh-dial .hd-lang.active::before{ opacity:1; background:#F2F1EC; }
.hd-nm{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.hd-lang.left .hd-nm{ align-items:flex-end; }
.hd-t{ display:inline-block; transform:scaleY(0.9); }
.hd-tz{ display:block; font-size:.8em; letter-spacing:0.14em; opacity:.55; font-variant-numeric:tabular-nums; }
.yh-dial .hd-title.seen{ opacity:.95; }
.yh-dial .hd-lang.seen{ opacity:.45; }
.yh-dial .hd-lang.seen:hover, .yh-dial .hd-lang.seen.active{ opacity:1; }
.hd-sub{ margin:30px 0 0; min-height:16px; font-family:var(--serif); font-size:calc(var(--lab) * 1.45); letter-spacing:0.06em; color:#A79F90; opacity:0; transition:opacity .9s ease; }
.yh-dial.on .hd-sub{ opacity:1; }
.hd-sub.swipe{ opacity:0 !important; }
/* desktop: the panel the header emblem opens */
.dial-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,2,.55); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s; }
.dial-modal.open{ opacity:1; visibility:visible; }
.dm-box{ position:relative; padding:clamp(40px,7vh,64px) clamp(90px,10vw,140px) 34px; border-radius:26px;
  background:rgba(10,10,9,.3); -webkit-backdrop-filter:blur(10px) saturate(110%); backdrop-filter:blur(10px) saturate(110%);
  border:1px solid rgba(242,241,236,.10); box-shadow:0 40px 120px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.97); transition:transform .6s cubic-bezier(.22,.61,.24,1); }
.dial-modal.open .dm-box{ transform:none; }
.dm-dial{ --face:min(380px, 50vh); --lab:11px; }
.dm-dial .hd-sub{ margin:calc(var(--face) * -0.125 + 34px) 0 0; font-size:calc(var(--lab) * 1.2); }
/* in the panel the word LANGUAGES is white, and withdraws once the hand has gone round */
.dm-dial .hd-title{ color:#F2F1EC; }
/* the phone dial: LANGUAGES in white too, and it stays */
.home-dial .hd-title{ color:#F2F1EC; }
.dm-dial .hd-title.gone{ opacity:0 !important; transition:opacity 1.2s ease; }
.dm-dial .hd-face{ cursor:pointer; }
.dm-dial .hd-face:hover .hd-jade{ box-shadow:0 0 0 1px rgba(242,241,236,.14), 0 0 60px rgba(150,180,130,.22); }
.dm-x{ position:absolute; top:14px; right:16px; width:34px; height:34px; font-size:22px; line-height:1; color:#F2F1EC; opacity:.55; background:none; border:0; cursor:pointer; }
.dm-x:hover{ opacity:1; }
.dial-modal.leaving{ background:rgba(3,3,2,1); transition:background .8s ease .15s; }
.dial-modal.leaving .hd-jade{ transform:translate(-50%,-50%) scale(1.1); opacity:1; box-shadow:0 0 0 1px rgba(242,241,236,.2), 0 0 90px rgba(170,200,150,.35); transition:transform .9s cubic-bezier(.22,.61,.24,1), opacity .5s ease, box-shadow .9s ease; }
.dial-modal.leaving .hd-title, .dial-modal.leaving .hd-lang, .dial-modal.leaving .hd-sub, .dial-modal.leaving .dm-x{ opacity:0 !important; transition:opacity .4s ease; }
.dial-modal.leaving .dm-box{ background:rgba(10,10,9,0); border-color:transparent; box-shadow:none; transition:background .6s ease, border-color .6s ease, box-shadow .6s ease; }

/* ============ PRIVATE ART — THE ART OFFICE ============
   The title sits in the top left corner, the drawing in the top right, whole and uncropped. */
.pa-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding:56px clamp(18px,4vw,64px) 0; }
.pa-head{ flex:1 1 auto; min-width:0; }
.pa-title{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,60px); letter-spacing:0.14em; text-transform:uppercase; color:var(--fg); line-height:1.05; }
.pa-sub{ margin:14px 0 0; font-family:var(--serif); font-size:clamp(15px,1.6vw,19px); letter-spacing:0.06em; color:#BDB6A8; }
.pa-ds{ margin-top:34px; max-width:520px; }
.pa-ds p{ margin:0 0 6px; font-family:var(--serif); font-size:13.5px; line-height:1.6; color:#9C978C; }
.pa-ds .pa-ds-k{ margin-bottom:12px; font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:#C9A46A; transform:var(--v-squish); transform-origin:left; }
.pa-city{ display:inline-block; min-width:104px; color:var(--fg); }
/* the two letters: framed cards, each opening its letter */
.pa-letters{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 56px; }
.pa-letter{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; text-decoration:none;
  border:1px solid rgba(242,241,236,.22); background:linear-gradient(180deg, rgba(242,241,236,.045), rgba(242,241,236,0) 70%);
  transition:border-color .4s ease, background-color .4s ease; }
.pa-letter::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(242,241,236,.07); pointer-events:none; transition:border-color .4s ease; }
.pa-letter:hover{ border-color:rgba(201,164,106,.7); background-color:rgba(242,241,236,.03); }
.pa-letter:hover::after{ border-color:rgba(201,164,106,.22); }
.pa-l-k{ font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:#8C8A84; transform:var(--v-squish); transform-origin:left; }
.pa-l-t{ font-family:var(--serif); font-size:clamp(19px,2vw,23px); color:var(--fg); }
.pa-l-arr{ position:absolute; right:22px; bottom:26px; width:16px; height:1px; background:#F2F1EC; opacity:.6; transition:width .5s cubic-bezier(.22,.61,.24,1), opacity .3s ease; }
.pa-l-arr::after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #F2F1EC; border-right:1px solid #F2F1EC; transform:rotate(45deg); }
.pa-letter:hover .pa-l-arr{ width:28px; opacity:1; }
.pa-img{ flex:none; display:block; width:min(440px, 38vw); height:auto; }
.pa-page{ padding-top:64px; }
.pa-page p{ font-family:var(--serif) !important; transform:none !important; }
.pa-page .pa-note{ font-size:13.5px !important; line-height:1.75 !important; color:#9C978C; margin-top:30px; }
.pa-enquiry{ margin-top:56px; padding-top:40px; border-top:1px solid var(--hairline); }
.pa-page .pa-enq-head{ font-size:20px !important; letter-spacing:0.02em; color:var(--fg); margin-bottom:12px; }
.pa-enquiry .pce-btn{ margin-top:14px; }
.rights-line{ margin:22px 0 0; text-align:center; font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#6F6B63; transform:var(--v-squish); }
@media (max-width:640px){
  .pa-top{ flex-direction:column-reverse; gap:28px; padding-top:28px; }
  .pa-img{ width:100%; }
  .pa-letters{ grid-template-columns:1fr; gap:12px; margin-bottom:40px; }
  .pa-city{ display:block; min-width:0; }
  .pa-page{ padding-top:40px; }
}

/* ============ SOUND ARCHITECTURE — LISTENING ============
   One disc, turning while it plays; a quiet list beside it. All in our Helvetica. */
.listening{ max-width:980px; margin:0 auto; padding:40px clamp(18px,4vw,48px) 120px; }
.listening, .listening button{ font-family:var(--sans); }
.lr-body{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(36px,7vw,96px); align-items:center; }
.lr-disc{ position:relative; width:100%; max-width:380px; justify-self:center; aspect-ratio:1; border-radius:50%; will-change:transform; transition:opacity .45s ease; }
.lr-disc.swap{ opacity:0; }
.lr-disc-img{ display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); }
.lr-sheen{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:conic-gradient(from 210deg, transparent 0 8%, rgba(255,255,255,.08) 13%, transparent 20% 52%, rgba(255,255,255,.05) 58%, transparent 66%); }
.lr-k, .lr-no, .lr-name, .lr-dur, .lr-title, .lr-cur, .lr-foot{ font-weight:500; }
.lr-k{ transform:var(--v-squish); transform-origin:left; }
.lr-k{ margin:0 0 22px; font-size:9.5px; letter-spacing:.42em; color:#8C8A84; }
.lr-list{ list-style:none; margin:0 0 34px; padding:0; }
.lr-track{ display:grid; grid-template-columns:40px 1fr auto; align-items:baseline; width:100%; padding:12px 0; text-align:left;
  background:none; border:0; border-bottom:1px solid rgba(242,241,236,.08); color:#8C8A84; cursor:pointer; transition:color .3s ease; transform:var(--v-squish); }
.lr-track:hover, .lr-track.on{ color:var(--fg); }
.lr-no{ font-size:9.5px; letter-spacing:.2em; }
.lr-name{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.lr-dur{ font-size:9.5px; letter-spacing:.2em; color:#5F5C56; }
.lr-now{ display:flex; align-items:center; gap:16px; }
.lr-play{ flex:none; position:relative; width:34px; height:34px; border-radius:50%; cursor:pointer; background:none;
  border:1px solid rgba(242,241,236,.4); transition:border-color .3s ease; }
.lr-play:hover{ border-color:#F2F1EC; }
.lr-ico{ position:absolute; left:50%; top:50%; transform:translate(-35%,-50%); border-left:8px solid #F2F1EC; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.listening.playing .lr-ico{ width:8px; height:9px; border:0; transform:translate(-50%,-50%); background:linear-gradient(90deg,#F2F1EC 0 2px,transparent 2px 6px,#F2F1EC 6px 8px); }
.lr-title{ flex:1; min-width:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform:var(--v-squish); }
.lr-title-no{ color:#8C8A84; margin-right:14px; }
.lr-cur{ font-size:9.5px; letter-spacing:.2em; color:#8C8A84; transform:var(--v-squish); }
.lr-bar{ position:relative; height:1px; margin:18px 0 0; background:rgba(242,241,236,.14); cursor:pointer; }
.lr-bar::before{ content:""; position:absolute; inset:-8px 0; }
.lr-fill{ position:absolute; left:0; top:0; height:1px; width:0; background:#F2F1EC; }
.lr-foot{ display:flex; justify-content:space-between; gap:16px; margin:16px 0 0; white-space:nowrap; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:#5F5C56; }
@media (max-width:760px){
  .lr-body{ grid-template-columns:1fr; }
  .lr-disc{ max-width:300px; }
  .lr-foot{ flex-direction:column; gap:6px; }
}