/* 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 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; }
@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(1320px, calc((100vh - 81px) * 1.9 + 180px)); 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;
}
.cr-desc{
  position:relative; z-index:1; box-sizing:border-box; padding:0.7cqw 1cqw; border-radius:0.4cqw;
  background:rgba(252,247,240,0.86); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:block; margin:0.8cqw 0 0 -1cqw; width:0; min-width:max(100%, 27cqw); text-align:left;
  font-size:2.4cqw; font-weight:500; line-height:1.4; letter-spacing:0.012em; color:#3B332E;
  opacity:0; transition:opacity .18s ease;
}
/* 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:1.6cqw; max-width:56cqw;
  font-size:3.45cqw; font-style:italic; font-weight:500; line-height:1.38; letter-spacing:0.005em; color:#3A322B;
  opacity:0; transition:opacity .18s ease;
}
/* 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; } }

/* ============ 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:68%; }
.folder:nth-child(2) .folder-tab{ margin-left:8%; }
.folder:nth-child(3) .folder-tab{ margin-left:42%; }
.folder:nth-child(4) .folder-tab{ margin-left:20%; }
.folder:nth-child(5) .folder-tab{ margin-left:57%; }
.folder:nth-child(6) .folder-tab{ margin-left:4%; }
.folder:nth-child(7) .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-1.jpg"); }
.folder:nth-child(2) .folder-body{ --metal:url("images/folder-steel3-2.jpg"); }
.folder:nth-child(3) .folder-body{ --metal:url("images/folder-steel3-3.jpg"); }
.folder:nth-child(4) .folder-body{ --metal:url("images/folder-steel3-4.jpg"); }
.folder:nth-child(5) .folder-body{ --metal:url("images/folder-steel3-5.jpg"); }
.folder:nth-child(6) .folder-body{ --metal:url("images/folder-steel3-6.jpg"); }
.folder:nth-child(7) .folder-body{ --metal:url("images/folder-steel3-7.jpg"); }
.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:22%; }
  .folder:nth-child(2) .folder-tab{ margin-left:6%; }
  .folder:nth-child(3) .folder-tab{ margin-left:30%; }
  .folder:nth-child(4) .folder-tab{ margin-left:12%; }
  .folder:nth-child(5) .folder-tab{ margin-left:36%; }
  .folder:nth-child(6) .folder-tab{ margin-left:4%; }
  .folder:nth-child(7) .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; }
}

/* ============ 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-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; }
}