/* TrustGate · "The Gate" (v2)
   Layout: an immersive editorial passage. Ivory paper, a single wine-red finale, oxblood and charcoal chapters;
   monumental light Cormorant set against tiny Cinzel captions; the Gate Arc, the seal and the doors as the only ornaments.
   Brand Book V3: burgundy #7D1128, charcoal #2B2B2E, white; support deep burgundy, rose (charcoal only), ivory, warm grey. */

:root {
  --wine: #7D1128;
  --oxblood: #5A0C1D;
  --ink: #2B2B2E;
  --rose: #DA6680;
  --ivory: #FAF7F4;
  --paper: #F1EBE4;
  --white: #FFFFFF;
  --stone: #75706B;
  --mist: #CDC5BD;
  --hair: rgba(43, 43, 46, .14);
  --hair-d: rgba(255, 255, 255, .16);

  --f-disp: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --f-cap: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --door: cubic-bezier(.77, 0, .18, 1);
  --g: clamp(20px, 4.4vw, 72px);
  --hd: 84px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body, .pg { margin: 0; background: var(--ivory); color: var(--ink); font: 400 16px/1.75 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow-x: clip; }
.pg { overflow-x: clip; position: relative; }
body::after, .pg::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 950; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 300; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--wine); color: var(--white); }
:focus-visible { outline: 1px solid var(--wine); outline-offset: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--wine); color: var(--white); padding: 10px 16px; }
.skip:focus { top: 16px; }

/* ---------------------------------------------------------------- type */
.cap { font-family: var(--f-cap); font-weight: 400; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; line-height: 1.6; color: var(--stone); }
.d-xxl { font-family: var(--f-disp); font-weight: 300; font-size: clamp(3.4rem, 12.4vw, 15rem); line-height: .86; letter-spacing: -.028em; }
.d-xl { font-family: var(--f-disp); font-weight: 300; font-size: clamp(3.2rem, 9vw, 10.4rem); line-height: .88; letter-spacing: -.025em; }
.d-l { font-family: var(--f-disp); font-weight: 300; font-size: clamp(2.6rem, 6.2vw, 7rem); line-height: .93; letter-spacing: -.02em; }
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln-i { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------------- arc, gate link, seal */
.arc { display: block; overflow: visible; }
.gl { display: inline-flex; align-items: center; gap: 14px; font: 400 13px/1 var(--f-body); letter-spacing: .06em; color: var(--ink); padding: 8px 0; }
.gl-t { position: relative; padding-bottom: 4px; }
.gl-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .8s var(--ease); }
.gl:hover .gl-t::after { transform: scaleX(0); }
.gl-i { width: 44px; height: 24px; overflow: visible; color: var(--wine); }
.gl-a { transform-origin: 22px 12px; transition: transform .9s var(--ease); }
.gl-s { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .8s var(--ease); }
.gl:hover .gl-a { transform: rotate(-40deg); }
.gl:hover .gl-s { stroke-dashoffset: 0; }
.gl-light, [data-tone="dark"] .gl { color: var(--white); }
[data-tone="dark"] .gl-i { color: var(--white); }

.seal { position: relative; display: block; width: 132px; aspect-ratio: 1; flex: none; color: var(--wine); transition: transform .9s var(--ease); }
.seal-white { color: var(--white); }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 32s linear infinite; }
.seal-ring text { font-family: var(--f-cap); font-size: 7.2px; letter-spacing: .4px; fill: currentColor; }
.seal-c { position: absolute; inset: 27%; border-radius: 50%; display: grid; place-items: center; transition: background-color .7s var(--ease); }
.seal-c img { width: 52%; }
.seal:hover { transform: scale(1.06); }
.seal-burgundy:hover .seal-c { background: var(--wine); }
.seal-white:hover .seal-c { background: var(--white); }
.seal-burgundy:hover .seal-c img { filter: brightness(0) invert(1); }
.seal-white:hover .seal-c img { filter: brightness(0) saturate(100%) invert(10%) sepia(64%) saturate(5500%) hue-rotate(335deg) brightness(78%); }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- doors (arrival, departure, intro) */
.doors { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.door { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--wine); transition: transform 1.05s var(--door); }
.door-l { left: 0; transform: translateX(-101%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .22); }
.door-r { right: 0; transform: translateX(101%); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }
.doors-mark { position: absolute; left: 50%; top: 50%; width: 132px; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s; color: var(--white); }
.doors-mark .arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.doors-mark img { position: absolute; inset: 26%; width: 48%; }
.doors-shut .door { transform: none; }
.doors-shut .doors { pointer-events: auto; }
.doors-shut .doors-mark { opacity: 1; transition-delay: .35s; }
.intro .doors-arc path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .85s var(--ease) .25s forwards; }
.intro .doors-mark img { opacity: 0; transform: scale(.86); animation: settle .7s var(--ease) .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- header */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 600; height: calc(var(--hd) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--g) 0;
  display: flex; align-items: center; color: var(--ink); transition: transform .9s var(--ease), color .5s;
}
.hd.away { transform: translateY(-100%); }
.hd-logo { position: relative; width: 180px; flex: none; }
.hd-logo img { width: 180px; transition: opacity .5s; }
.lg-w { position: absolute; inset: 0; opacity: 0; }
.hd[data-tone="dark"] { color: var(--white); }
.hd[data-tone="dark"] .lg-c { opacity: 0; }
.hd[data-tone="dark"] .lg-w { opacity: 1; }
.hd-clock { position: absolute; left: 50%; transform: translateX(-50%); color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }
.hd-clock span { margin-right: .5em; }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 38px; }
.hd-enq { font-size: 13.5px; letter-spacing: .04em; position: relative; padding: 6px 0; }
.hd-enq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.hd-enq:hover::after { transform: scaleX(1); transform-origin: left; }
.hd-menu { display: flex; align-items: center; gap: 14px; font-size: 13.5px; letter-spacing: .04em; padding: 10px 0; }
.hd-menu-i { width: 28px; height: 10px; position: relative; display: block; }
.hd-menu-i i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .7s var(--ease), top .7s var(--ease), left .7s var(--ease); }
.hd-menu-i i:first-child { top: 1px; }
.hd-menu-i i:last-child { top: 8px; left: 8px; }
.hd-menu:hover .hd-menu-i i:last-child { left: 0; }
.menu-open .hd { color: var(--white); transform: none; }
.menu-open .hd .lg-c { opacity: 0; }
.menu-open .hd .lg-w { opacity: 1; }
.menu-open .hd-menu-i i:first-child { top: 4.5px; transform: rotate(45deg); }
.menu-open .hd-menu-i i:last-child { top: 4.5px; left: 0; transform: rotate(-45deg); }

/* menu: the gate opens from the corner */
.mn {
  position: fixed; inset: 0; z-index: 550; background: var(--oxblood); color: var(--white); overflow: auto;
  clip-path: circle(0% at calc(100% - 70px) 42px); transition: clip-path 1.1s var(--door);
}
.mn.open { clip-path: circle(150% at calc(100% - 70px) 42px); }
.mn-in { min-height: 100%; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto; gap: 40px 6vw; padding: calc(var(--hd) + 7vh) var(--g) 40px; }
.mn-list { align-self: center; }
.mn-list a { display: flex; align-items: baseline; gap: 26px; padding: .5vh 0; transition: opacity .5s, transform .9s var(--ease); }
.mn-n { font: 400 12px var(--f-cap); letter-spacing: .3em; opacity: .5; width: 40px; flex: none; }
.mn-t { font: 300 clamp(2.8rem, 6.6vw, 7rem)/1.04 var(--f-disp); letter-spacing: -.02em; }
.mn-list:hover a:not(:hover) { opacity: .32; }
.mn-list a:hover { transform: translateX(14px); }
.mn-list a:hover .mn-t { font-style: italic; }
.mn-win { position: relative; align-self: center; justify-self: center; width: min(32vw, 52vh); aspect-ratio: 1; }
.mn-ph { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; }
.mn-ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.mn-arc { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); opacity: .7; }
.mn-foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 30px; border-top: 1px solid var(--hair-d); padding-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.mn-foot .cap { color: rgba(255, 255, 255, .5); margin-bottom: 8px; }
.mn-soc { display: flex; gap: 18px; flex-wrap: wrap; }
.mn-soc a:hover { color: var(--white); }

/* ---------------------------------------------------------------- cursor (fine pointers) */
.cur { position: fixed; left: 0; top: 0; z-index: 800; pointer-events: none; display: none; }
.has-cur .cur { display: block; }
.cur-r {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background-color: var(--wine);
  display: grid; place-items: center; background-size: cover; background-position: center; border: 1px solid transparent;
  transition: width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), background-color .4s, border-color .4s;
}
.cur-t { font: 400 9.5px var(--f-cap); letter-spacing: .28em; color: var(--white); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cur.link .cur-r { width: 46px; height: 46px; margin: -23px 0 0 -23px; background-color: transparent; border-color: var(--wine); }
.cur.img .cur-r { width: 260px; height: 260px; margin: -130px 0 0 -130px; background-color: var(--paper); border-color: transparent; }
.cur.dark .cur-r { background-color: var(--white); }
.cur.dark.link .cur-r { background-color: transparent; border-color: var(--white); }

/* ---------------------------------------------------------------- hero: pass through the gate */
.hx { position: relative; height: max(680px, 100svh); overflow: hidden; background: radial-gradient(120% 95% at 50% 46%, #FCF9F5 0%, #F2E9E0 55%, #E5D7C9 100%); }
.hx-photo { position: absolute; inset: 0; z-index: 2; clip-path: circle(min(23.6vh, 24.4vw) at 50% 50%); will-change: clip-path; }
.hx-img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform-origin: 50% 50%; }
.hx-gate { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(64vh, 66vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.hx-disc { display: none; }
.hx-ring { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 26px 30px rgba(90, 12, 29, .28)); }
.hx-a, .hx-b { position: absolute; z-index: 4; margin: 0; font: 300 clamp(2.8rem, 6.2vw, 7.4rem)/.9 var(--f-disp); letter-spacing: -.03em; }
.hx-a { left: var(--g); top: calc(var(--hd) + 5vh); }
.hx-b { right: var(--g); bottom: 16vh; text-align: right; }
.hx-side { position: absolute; z-index: 4; left: var(--g); bottom: 6vh; max-width: 21rem; }
.hx-k { font: 400 1.45rem/1.12 var(--f-disp); margin-bottom: 1.6vh; }
.hx-txt { font-size: 13px; line-height: 1.65; color: rgba(43, 43, 46, .78); }
.hx-sc { position: absolute; z-index: 4; right: var(--g); bottom: 6vh; display: flex; align-items: center; gap: 16px; }
.hx-sc .cap { font-size: 9.5px; }
.hx-sc i { width: 9vw; height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.hx-sc i::after { content: ""; position: absolute; top: 0; left: -40%; height: 1px; width: 40%; background: var(--wine); animation: slide 2.8s var(--ease) infinite; }
@keyframes slide { to { left: 110%; } }
.hx-plate { position: absolute; z-index: 5; left: var(--g); bottom: 6vh; color: rgba(255, 255, 255, .9); opacity: 0; font-size: 9.5px; }

/* the statement, written over the city dissolved into atmosphere */
.stt { position: relative; overflow: hidden; color: var(--white); background: var(--oxblood); }
.stt-bg { position: absolute; inset: -8%; background: url("../video/dhows.jpg") 50% 50% / cover; filter: blur(30px) brightness(.6) saturate(1.15); transform: scale(1.15); }
.stt-in { position: relative; padding: 24vh var(--g) 12vh; }
.hx-st { display: none; }
.gs .hx-st { display: flex; flex-direction: column; justify-content: center; position: absolute; inset: 0; z-index: 6; color: var(--white); padding: calc(var(--hd) + 4vh) var(--g) 12vh; pointer-events: none; }
.gs .hx-st a { pointer-events: auto; }
.gs .stt { display: none; }
.hx-st .stt-cols { margin-top: 10vh; border-top: 0; }
.stt-h { font: 300 clamp(1.8rem, 3.5vw, 4.2rem)/1.08 var(--f-disp); letter-spacing: -.02em; max-width: 22em; }
.stt-h .ln-i { display: inline; }
.stt-h .ln { overflow: visible; }
.stt-cols { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 4vw; margin-top: 16vh; padding-top: 4vh; border-top: 1px solid rgba(255, 255, 255, .22); }
.stt-mark { display: flex; gap: 16px; align-items: flex-start; }
.stt-arc { width: 34px; flex: none; color: var(--white); }
.stt-mark .cap { color: rgba(255, 255, 255, .7); font-size: 9.5px; }
.stt-cols h3 { font: 400 1.4rem/1.15 var(--f-disp); margin-bottom: 1.4vh; }
.stt-cols p:not(.cap) { font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, .74); }

/* ---------------------------------------------------------------- practice: horizontal gallery */
.pr { position: relative; background: var(--ivory); overflow: hidden; }
.pr-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.pr-panel { position: relative; flex: none; height: 100svh; }
.pr-intro { width: 50vw; padding: 0 6vw 0 var(--g); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pr-intro .cap { margin-bottom: 4vh; }
.pr-ih { font-family: var(--f-disp); font-weight: 300; font-size: clamp(3rem, 6.6vw, 7.8rem); line-height: .92; letter-spacing: -.025em; }
.pr-ip { max-width: 24em; margin: 5vh 0 3vh; color: rgba(43, 43, 46, .8); }
.pr-panel:not(.pr-intro) { width: 98vw; display: grid; grid-template-columns: 36vw 1fr; gap: 5vw; align-items: center; padding: 0 7vw 0 3vw; }
.pr-num { position: absolute; right: 3vw; top: 50%; transform: translateY(-54%); font: 400 34vw/.8 var(--f-cap); color: var(--paper); pointer-events: none; letter-spacing: -.02em; }
.pr-fig { position: relative; height: 76svh; z-index: 1; }
.pr-f { height: 100%; overflow: hidden; }
.pr-img { width: 118%; max-width: none; height: 100%; object-fit: cover; }
.pr-txt { position: relative; z-index: 1; max-width: 38rem; }
.pr-h { font-family: var(--f-disp); font-weight: 300; font-size: clamp(3rem, 7.6vw, 8.8rem); line-height: .9; letter-spacing: -.03em; margin: 2.4vh 0 3.4vh; }
.pr-p { max-width: 26em; color: rgba(43, 43, 46, .8); }
.pr-links { margin-top: 4vh; font: 300 clamp(1.45rem, 2.1vw, 2.2rem)/1.42 var(--f-disp); color: var(--stone); }
.pr-links a { color: var(--ink); background: linear-gradient(var(--wine), var(--wine)) 0 92% / 0 1px no-repeat; transition: background-size .8s var(--ease), color .4s; }
.pr-links a:hover { color: var(--wine); background-size: 100% 1px; }
.pr-bar { position: absolute; left: var(--g); right: var(--g); bottom: 5vh; height: 1px; background: var(--hair); }
.pr-bar i { position: absolute; inset: 0; background: var(--wine); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------------------------------------------------------------- route: typographic index */
.rt { background: var(--white); padding: 20vh var(--g) 16vh; }
.rt-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px 6vw; align-items: end; }
.rt-head .cap { grid-column: 1 / -1; margin-bottom: 1vh; }
.rt-lede { max-width: 28em; color: rgba(43, 43, 46, .8); }
.rt-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 6vw; margin-top: 14vh; }
.rt-aside { position: sticky; top: 24vh; align-self: start; }
.rt-n { font: 400 clamp(6rem, 13vw, 14.5rem)/.8 var(--f-cap); color: var(--wine); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rt-auth { margin: 5vh 0 1.6vh; color: var(--ink); }
.rt-d { font: 300 clamp(1.4rem, 2vw, 2.1rem)/1.3 var(--f-disp); max-width: 17em; }
.rt-list li { position: relative; font: 300 clamp(2.1rem, 4.4vw, 5.2rem)/1.06 var(--f-disp); letter-spacing: -.02em; padding: .12em 0; color: var(--ink); }
.gs .rt-list li { color: var(--mist); transition: color .7s, transform 1s var(--ease); }
.gs .rt-list li.on { color: var(--ink); transform: translateX(.35em); }
.rt-list li::before { content: ""; position: absolute; left: -.2em; top: .62em; width: .16em; height: .16em; border-radius: 50%; background: var(--wine); transform: scale(0); transition: transform .7s var(--ease); }
.gs .rt-list li.on::before { transform: scale(1); }
.rt-m { display: none; }
.rt-note { margin-top: 14vh; max-width: 48em; color: var(--stone); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }

/* ---------------------------------------------------------------- authorities */
.au { background: var(--white); padding: 4vh 0 16vh; overflow: hidden; }
.au-cap { text-align: center; margin-bottom: 4vh; padding-inline: var(--g); }
.au-row { white-space: nowrap; font: italic 300 clamp(2.4rem, 5.8vw, 6.6rem)/1.2 var(--f-disp); letter-spacing: -.015em; will-change: transform; }
.au-r2 { color: var(--stone); }
.au-row i { display: inline-block; width: .34em; margin: 0 .3em; vertical-align: .05em; color: var(--wine); }
.au-g { width: 100%; }

/* ---------------------------------------------------------------- ledger */
.lg { background: var(--ink); color: var(--white); padding: 20vh var(--g); overflow: hidden; }
.lg-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 8vh 7vw; align-items: center; }
.lg-copy .cap { color: var(--rose); margin-bottom: 3vh; }
.lg-copy .d-l { margin-bottom: 5vh; }
.lg-copy p:not(.cap) { color: rgba(255, 255, 255, .74); max-width: 30em; margin-bottom: 1.2em; }
.lg-copy .gl { margin-top: 2vh; }
.lg-paper { background: var(--ivory); color: var(--ink); padding: clamp(28px, 3.4vw, 52px); box-shadow: 0 80px 120px -60px rgba(0, 0, 0, .7); min-width: 0; }
.lg-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lg-top img { width: 30px; }
.lg-top .cap { color: var(--ink); }
.lg-top .lg-ex { margin-left: auto; color: var(--stone); }
.lg-big { display: flex; align-items: flex-end; gap: 22px; margin: 4vh 0 3vh; padding-bottom: 3vh; border-bottom: 1px solid var(--hair); }
.lg-num { font: 300 clamp(5.4rem, 9.4vw, 10rem)/.78 var(--f-disp); color: var(--wine); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lg-big p { font: 400 1.35rem/1.25 var(--f-disp); }
.lg-big p span { font: 400 12.5px/1.6 var(--f-body); color: var(--stone); }
.lg-scroll { overflow-x: auto; }
.lg-paper table { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lg-paper th, .lg-paper td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); font-weight: 400; vertical-align: top; font-size: 13.5px; }
.lg-paper thead th { font: 400 9.5px var(--f-cap); letter-spacing: .3em; color: var(--stone); padding-top: 0; }
.lg-paper tbody th { font: 500 1.08rem/1.25 var(--f-disp); }
.lg-paper small { display: block; font: 400 11.5px var(--f-body); color: var(--stone); margin-top: 2px; }
.lg-paper .due th, .lg-paper .due td { color: var(--wine); }
.lg-fc { margin-top: 18px; font-size: 12px; color: var(--stone); }

/* ---------------------------------------------------------------- three doors */
.dr { background: var(--ivory); padding: 20vh var(--g) 18vh; }
.dr-head, .cls-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px 6vw; align-items: end; }
.dr-head .cap, .cls-head .cap { grid-column: 1 / -1; margin-bottom: 1vh; }
.dr-head p:not(.cap) { max-width: 28em; color: rgba(43, 43, 46, .8); }
.dr-row { display: flex; gap: 10px; height: 80svh; margin-top: 10vh; }
.dr-p { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--ink); color: var(--white); cursor: pointer; transition: flex 1.2s var(--ease); outline-offset: -6px; }
.dr-p.on { flex: 3.6; cursor: default; }
.dr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.8s var(--ease), filter 1s; filter: saturate(.8) brightness(.8); }
.dr-p.on .dr-img { transform: scale(1); filter: none; }
.dr-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 8, 16, .9) 0%, rgba(40, 8, 16, .45) 42%, rgba(40, 8, 16, .08) 75%); }
.dr-num { position: absolute; z-index: 2; top: 26px; left: 28px; font: 400 13px var(--f-cap); letter-spacing: .3em; }
.dr-v { position: absolute; z-index: 2; bottom: 32px; left: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font: 300 clamp(1.8rem, 2.4vw, 2.6rem)/1 var(--f-disp); white-space: nowrap; transition: opacity .5s; }
.dr-p.on .dr-v { opacity: 0; }
.dr-b { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(100%, 680px); padding: clamp(26px, 3vw, 48px); opacity: 0; transform: translateY(28px); transition: opacity .5s, transform .5s; pointer-events: none; }
.dr-p.on .dr-b { opacity: 1; transform: none; transition: opacity .9s var(--ease) .45s, transform 1.1s var(--ease) .45s; pointer-events: auto; }
.dr-b .cap { color: rgba(255, 255, 255, .62); }
.dr-h { font: 300 clamp(2.4rem, 4.4vw, 4.8rem)/.95 var(--f-disp); letter-spacing: -.02em; margin: 12px 0 16px; }
.dr-line { font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 32em; }
.dr-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair-d); }
.dr-dl dt { color: rgba(255, 255, 255, .55); font-size: 9.5px; }
.dr-dl dd { font-size: 13px; line-height: 1.6; margin-top: 6px; color: rgba(255, 255, 255, .9); }

/* ---------------------------------------------------------------- clients: editorial collage */
.cls { background: var(--white); padding: 20vh var(--g) 8vh; }
.cls-head { margin-bottom: 14vh; }
.cl { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; align-items: end; margin-bottom: 18vh; }
.cl-t { max-width: 26rem; }
.cl-h { font: 300 clamp(2.1rem, 3.6vw, 3.9rem)/1 var(--f-disp); letter-spacing: -.015em; margin-bottom: 2.4vh; }
.cl-t p { color: rgba(43, 43, 46, .8); margin-bottom: 2vh; }
.cl-0 .plate { grid-column: 1 / 7; } .cl-0 .cl-t { grid-column: 8 / 12; }
.cl-1 .plate { grid-column: 7 / 13; order: 2; } .cl-1 .cl-t { grid-column: 2 / 6; align-self: start; }
.cl-2 .plate { grid-column: 3 / 8; } .cl-2 .cl-t { grid-column: 9 / 13; }
.cl-3 .plate { grid-column: 6 / 11; order: 2; } .cl-3 .cl-t { grid-column: 1 / 5; align-self: center; }
.cl-0 .plate-f { aspect-ratio: 4/5; } .cl-1 .plate-f { aspect-ratio: 3/2; } .cl-2 .plate-f { aspect-ratio: 1; } .cl-3 .plate-f { aspect-ratio: 4/5; }

/* plates */
.plate-f { position: relative; overflow: hidden; background: var(--paper); }
.plate-i { width: 100%; height: 100%; object-fit: cover; }
.plate-cap { margin-top: 14px; font-size: 9.5px; }

/* ---------------------------------------------------------------- our word */
.wd { background: var(--ivory); padding: 22vh var(--g); }
.wd .cap { margin-bottom: 5vh; }
.wd-p { font: 300 clamp(2rem, 4.2vw, 4.8rem)/1.14 var(--f-disp); letter-spacing: -.015em; max-width: 22em; text-wrap: pretty; }
.wd-p sup { font: 400 .3em/0 var(--f-cap); letter-spacing: .1em; color: var(--wine); vertical-align: 1.9em; }

/* ---------------------------------------------------------------- finale */
.fn { position: relative; background: var(--wine); color: var(--white); padding: 22vh var(--g) 36px; overflow: hidden; }
.fn-arc { position: absolute; width: max(110vh, 70vw); right: -22vw; top: -34vh; color: var(--white); opacity: .16; pointer-events: none; }
.fn-top { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.fn-cap { grid-column: 1 / -1; color: rgba(255, 255, 255, .6); }
.fn-h { font: 300 clamp(4rem, 13.4vw, 16rem)/.84 var(--f-disp); letter-spacing: -.035em; }
.fn-seal { width: clamp(120px, 12vw, 180px); margin-bottom: 2vh; }
.fn-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 14vh; padding-top: 26px; border-top: 1px solid var(--hair-d); }
.fn-grid .cap { color: rgba(255, 255, 255, .55); margin-bottom: 10px; }
.fn-v { font: 400 clamp(1.25rem, 1.6vw, 1.55rem)/1.35 var(--f-disp); font-variant-numeric: tabular-nums; }
.fn-st { display: block; font: 400 12px var(--f-body); color: rgba(255, 255, 255, .65); margin-top: 4px; }
.fn-base { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; margin-top: 14vh; }
.fn-base img { width: 180px; }
.fn-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; font-size: 13px; color: rgba(255, 255, 255, .8); }
.fn-nav a:hover, .fn-soc a:hover { color: var(--white); }
.fn-soc { display: flex; gap: 18px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.fn-legal { grid-column: 1 / -1; border-top: 1px solid var(--hair-d); padding-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .55); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------------------------------------------------------------- inner page heads and bands */
.ph { background: var(--ivory); padding: calc(var(--hd) + 16vh) var(--g) 10vh; }
.ph-cap { margin-bottom: 4vh; }
.ph-row { display: grid; grid-template-columns: 1fr auto; gap: 30px 6vw; align-items: end; margin-top: 8vh; }
.ph-txt { max-width: 30em; font-size: 16px; color: rgba(43, 43, 46, .82); }
.ph-count { font: 400 clamp(4.4rem, 11vw, 12rem)/.8 var(--f-cap); color: var(--mist); letter-spacing: -.02em; }
.toc { min-width: min(100%, 340px); border-top: 1px solid var(--ink); }
.toc a { display: flex; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hair); font: 400 1.35rem var(--f-disp); transition: color .4s, padding .8s var(--ease); }
.toc a:hover { color: var(--wine); padding-left: 10px; }
.toc .cap { width: 28px; color: var(--wine); }
.sh-band, .ix-band { background: var(--ink); }
.band-pl { position: relative; }
.band-pl .plate-f { height: 88svh; }
.band-pl .plate-i { height: 124%; }
.band-pl .plate-f::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent); }
.band-pl .plate-cap { position: absolute; z-index: 1; left: var(--g); bottom: 26px; margin: 0; color: rgba(255, 255, 255, .88); }

/* services index */
.ix { position: relative; background: var(--ivory); padding: 0 var(--g) 16vh; }
.ix-anchor { position: absolute; top: -120px; }
.ix-f { display: flex; flex-wrap: wrap; gap: 6px 34px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.ix-f button { font: 400 11px var(--f-cap); letter-spacing: .3em; color: var(--stone); padding: 8px 0; position: relative; transition: color .4s; }
.ix-f button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--wine); transform: scaleX(0); transition: transform .7s var(--ease); }
.ix-f button.on { color: var(--wine); }
.ix-f button.on::after { transform: scaleX(1); }
.ix-list li.off { display: none; }
.ix-row { display: grid; grid-template-columns: 70px 1fr auto 46px; align-items: center; gap: 24px; padding: 2.4vh 0; border-bottom: 1px solid var(--hair); }
.ix-n { font: 400 12px var(--f-cap); letter-spacing: .2em; color: var(--stone); font-variant-numeric: tabular-nums; }
.ix-t { font: 300 clamp(2.1rem, 5vw, 5.6rem)/1 var(--f-disp); letter-spacing: -.02em; transition: transform 1s var(--ease), color .5s; }
.ix-p { white-space: nowrap; }
.ix-a { width: 40px; color: var(--wine); opacity: .25; transition: transform 1s var(--ease), opacity .5s; }
.ix-list:hover .ix-row:not(:hover) .ix-t { color: var(--mist); }
.ix-row:hover .ix-t { transform: translateX(1.4vw); color: var(--wine); }
.ix-row:hover .ix-a { opacity: 1; transform: rotate(-40deg); }

/* service detail */
.sh { background: var(--ivory); padding: calc(var(--hd) + 14vh) var(--g) 12vh; }
.sh-crumb { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sh-crumb a:hover { color: var(--wine); }
.sh-h { margin: 6vh 0 9vh; }
.sh-row { display: grid; grid-template-columns: 7fr 4fr; gap: 50px 8vw; align-items: start; }
.sh-sub { font: 300 clamp(1.8rem, 3vw, 3.2rem)/1.12 var(--f-disp); letter-spacing: -.01em; max-width: 17em; }
.sh-txt { max-width: 34em; margin: 4vh 0 3vh; color: rgba(43, 43, 46, .82); }
.sh-file { border-top: 1px solid var(--ink); }
.sh-file > div { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.sh-file dd { margin-top: 8px; font-size: 14.5px; }
.sh-file dd li + li { margin-top: 2px; }
.sh-file a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .3s; }
.sh-file a:hover { color: var(--wine); }
.sv { background: var(--white); padding: 20vh var(--g); display: grid; grid-template-columns: 4fr 7fr; gap: 50px 6vw; }
.sv-h .cap, .stp-h .cap { margin-bottom: 3vh; }
.sv-list { border-top: 1px solid var(--ink); }
.sv-list li { display: grid; grid-template-columns: 64px 1fr; padding: 2.3vh 0; border-bottom: 1px solid var(--hair); font: 300 clamp(1.45rem, 2.3vw, 2.4rem)/1.2 var(--f-disp); }
.sv-r { font: 400 10.5px var(--f-cap); letter-spacing: .2em; color: var(--wine); padding-top: .95em; }
.stp { background: var(--ivory); padding: 20vh var(--g); }
.stp-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10vh; border-top: 1px solid var(--ink); }
.stp-list li { padding: 34px 3vw 0 0; }
.stp-list li + li { padding-left: 2vw; border-left: 1px solid var(--hair); }
.st-n { display: block; font: 400 clamp(3.4rem, 5vw, 5.4rem)/1 var(--f-cap); color: var(--wine); margin-bottom: 4vh; }
.stp-list h3 { font: 400 1.85rem/1.1 var(--f-disp); margin-bottom: 1.4vh; }
.stp-list p { font-size: 15px; color: rgba(43, 43, 46, .8); }
.nt { background: var(--white); padding: 20vh var(--g); display: grid; grid-template-columns: 7fr 4fr; gap: 60px 8vw; align-items: start; }
.nt-q { position: relative; }
.nt-arc { position: absolute; width: clamp(140px, 16vw, 240px); left: -4vw; top: -6vh; color: var(--wine); opacity: .14; }
.nt-q .cap { margin-bottom: 3vh; position: relative; }
.nt-p { position: relative; font: 300 clamp(2rem, 3.6vw, 3.9rem)/1.12 var(--f-disp); letter-spacing: -.01em; }
.nd .cap { margin-bottom: 2vh; }
.nd-list { border-top: 1px solid var(--ink); }
.nd-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.nd-a { width: 15px; flex: none; color: var(--wine); margin-top: 5px; }
.nd-s { margin-top: 18px; font-size: 13px; color: var(--stone); }
.nx { position: relative; display: block; background: var(--ivory); padding: 18vh var(--g); border-top: 1px solid var(--hair); overflow: hidden; }
.nx-t { display: block; margin-top: 3vh; font: 300 clamp(3.2rem, 10vw, 12rem)/.9 var(--f-disp); letter-spacing: -.03em; transition: color .6s, transform 1.2s var(--ease); }
.nx:hover .nx-t { color: var(--wine); transform: translateX(1.5vw); }
.nx-a { position: absolute; right: var(--g); bottom: 18vh; width: clamp(70px, 9vw, 150px); color: var(--wine); transition: transform 1.2s var(--ease); }
.nx:hover .nx-a { transform: rotate(-40deg); }

/* guide */
.gd { position: relative; background: var(--ivory); padding: 18vh var(--g); overflow: hidden; }
.gd + .gd:not(.gd-dark) { padding-top: 6vh; }
.gd-dark { background: var(--oxblood); color: var(--white); }
.gd-dark + .gd { padding-top: 18vh; }
.gd-h { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 6vw; align-items: end; }
.gd-h .cap { grid-column: 1 / -1; }
.gd-h p:not(.cap) { max-width: 30em; opacity: .82; }
.gd-dark .cap { color: rgba(255, 255, 255, .55); }
.gd-r { position: absolute; right: 0; top: -6vh; font: 400 clamp(8rem, 20vw, 23rem)/.8 var(--f-cap); color: var(--paper); pointer-events: none; }
.gd-dark .gd-r { color: rgba(255, 255, 255, .05); }
.gd-h > *:not(.gd-r) { position: relative; }
.gt-wrap { overflow-x: auto; margin-top: 10vh; }
.gt { width: 100%; min-width: 760px; border-collapse: collapse; }
.gt thead th { text-align: left; padding: 0 24px 22px 0; font: 300 clamp(1.8rem, 2.6vw, 2.8rem)/1 var(--f-disp); vertical-align: bottom; }
.gt thead .cap { display: block; margin-bottom: 12px; color: var(--wine); }
.gt tbody th { text-align: left; padding: 22px 24px 22px 0; border-top: 1px solid var(--hair); vertical-align: top; width: 14%; }
.gt td { padding: 22px 24px 22px 0; border-top: 1px solid var(--hair); vertical-align: top; font-size: 15px; width: 28.6%; }
.gt tbody tr:first-child > * { border-top-color: var(--ink); }
.gd-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; margin-top: 10vh; }
.gd-list li { display: grid; grid-template-columns: 80px 1fr; padding: 3vh 0; border-top: 1px solid var(--hair-d); }
.gd-n { font: 400 1.7rem/1 var(--f-cap); color: rgba(255, 255, 255, .42); }
.gd-list .cap { color: rgba(255, 255, 255, .55); font-size: 9.5px; }
.gd-list h3 { font: 400 1.9rem/1.1 var(--f-disp); margin: 6px 0 8px; }
.gd-list p:last-child { font-size: 15px; color: rgba(255, 255, 255, .78); }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 10vh; }
.gp h3 { font: 400 1.9rem/1.1 var(--f-disp); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.gp li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.fqs { margin-top: 10vh; border-top: 1px solid var(--ink); }
.fq { border-bottom: 1px solid var(--hair); }
.fq summary { list-style: none; display: grid; grid-template-columns: 70px 1fr 30px; align-items: center; gap: 10px; padding: 3.4vh 0; cursor: pointer; }
.fq summary::-webkit-details-marker { display: none; }
.fq-n { color: var(--wine); }
.fq-q { font: 300 clamp(1.5rem, 2.8vw, 2.9rem)/1.12 var(--f-disp); transition: color .4s; }
.fq summary:hover .fq-q { color: var(--wine); }
.fq-x { position: relative; width: 20px; height: 20px; justify-self: end; }
.fq-x::before, .fq-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .7s var(--ease); }
.fq-x::after { transform: rotate(90deg); }
.fq[open] .fq-x::after { transform: rotate(0); }
.fq p { padding: 0 60px 4vh 80px; max-width: 52em; color: rgba(43, 43, 46, .82); }

/* about */
.ab-seal { width: clamp(120px, 11vw, 170px); }
.ab { background: var(--white); padding: 20vh var(--g); }
.ab-cols { display: grid; grid-template-columns: 6fr 5fr; gap: 40px 7vw; margin-top: 5vh; }
.ab-lead { font: 300 clamp(2rem, 3.5vw, 3.8rem)/1.12 var(--f-disp); letter-spacing: -.01em; }
.ab-txt p { color: rgba(43, 43, 46, .82); margin-bottom: 1.3em; max-width: 34em; }
.ab-txt p:first-child::first-letter { float: left; font: 300 5.4em/.78 var(--f-disp); color: var(--wine); padding: .06em .1em 0 0; }
.vl { background: var(--ivory); padding: 20vh var(--g); }
.vl-list { margin-top: 6vh; border-top: 1px solid var(--ink); }
.vl-i { display: grid; grid-template-columns: 90px 1fr minmax(0, 26em); align-items: baseline; gap: 20px; padding: 3vh 0; border-bottom: 1px solid var(--hair); }
.vl-i .cap { color: var(--wine); }
.vl-w { font: 300 clamp(3.2rem, 9.4vw, 10.6rem)/.92 var(--f-disp); letter-spacing: -.03em; }
.gs .vl-w { color: var(--mist); transition: color 1.2s var(--ease); }
.gs .vl-i.on .vl-w { color: var(--ink); }
.vl-d { font-size: 15px; color: rgba(43, 43, 46, .8); }
.rg { background: var(--ink); color: var(--white); padding: 18vh var(--g); display: grid; grid-template-columns: auto 1fr; gap: 50px 8vw; align-items: center; }
.rg-seal { width: clamp(180px, 20vw, 280px); }
.rg-seal .seal-ring text { font-size: 6.4px; }
.rg-dl > div { padding: 18px 0; border-bottom: 1px solid var(--hair-d); }
.rg-dl .cap { color: var(--rose); }
.rg-dl dd { font: 400 1.45rem/1.3 var(--f-disp); margin-top: 6px; }

/* contact: the letter */
.ct { background: var(--ivory); padding: calc(var(--hd) + 14vh) var(--g) 16vh; display: grid; grid-template-columns: 5fr 6fr; gap: 60px 6vw; align-items: start; }
.ct-l .d-xl { margin: 0 0 5vh; }
.ct-l .ph-txt { margin-bottom: 6vh; }
.ct-dl { border-top: 1px solid var(--ink); }
.ct-dl > div { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ct-dl dd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 6px; }
.ct-v { font: 400 clamp(1.35rem, 1.8vw, 1.7rem)/1.3 var(--f-disp); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ct-st { font-size: 13px; color: var(--stone); }
.cp { padding: 6px 0; font-size: 9.5px; transition: color .3s; flex: none; }
.cp:hover, .cp.done { color: var(--wine); }
.lt { position: relative; background: var(--white); padding: clamp(32px, 5vw, 80px); box-shadow: 0 60px 100px -60px rgba(43, 43, 46, .35); font: 300 clamp(1.4rem, 1.9vw, 1.95rem)/1.9 var(--f-disp); }
.lt-date { text-align: right; margin-bottom: 4vh; }
.lt-p + .lt-p { margin-top: 2.2vh; }
.lt input, .lt select, .lt textarea { font: inherit; color: var(--wine); background: transparent; border: 0; border-bottom: 1px solid var(--mist); border-radius: 0; padding: 0 .1em; margin: 0 .1em; max-width: 100%; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.lt select { padding-right: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237D1128' stroke-width='1.2'/%3E%3C/svg%3E") right center / .4em no-repeat; cursor: pointer; }
.lt textarea { width: 100%; margin: 0; resize: vertical; line-height: 1.6; padding-top: .3em; }
.lt input:focus, .lt select:focus, .lt textarea:focus { outline: none; border-bottom-color: var(--wine); }
.lt [aria-invalid="true"] { border-bottom-color: var(--wine); background: rgba(125, 17, 40, .05); }
.lt ::placeholder { color: var(--mist); font-style: italic; }
.lt-sign { font-style: italic; }
.lt-err { margin-top: 2vh; font: 400 14px var(--f-body); color: var(--wine); }
.lt-send { display: inline-flex; align-items: center; gap: 18px; margin-top: 4vh; font: 400 12px var(--f-cap); letter-spacing: .32em; color: var(--wine); }
.lt-a { width: 46px; transition: transform 1s var(--ease); }
.lt-send:hover .lt-a { transform: rotate(-40deg); }
.lt-done { position: absolute; inset: 0; background: var(--white); padding: inherit; display: flex; flex-direction: column; gap: 2.4vh; z-index: 2; }
.lt-dn { font: 400 15px/1.7 var(--f-body); color: rgba(43, 43, 46, .82); max-width: 34em; }
.lt-sum { white-space: pre-wrap; font: 400 14px/1.7 var(--f-body); background: var(--ivory); padding: 22px; margin: 0; overflow: auto; max-height: 50%; }
.lt-done .cp { align-self: flex-start; font-size: 11px; color: var(--wine); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .hd-clock { display: none; }
  .dr-dl { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1000px) {
  :root { --hd: 72px; }
  .hd-logo, .hd-logo img { width: 160px; }
  .hd-enq { display: none; }
  .mn-in { grid-template-columns: 1fr; }
  .mn-win { display: none; }
  .mn-foot { grid-template-columns: 1fr; gap: 18px; }
  .pr-track { flex-direction: column; width: auto; align-items: stretch; }
  .pr-panel, .pr-intro, .pr-panel:not(.pr-intro) { width: auto; height: auto; }
  .pr-intro { padding: 16vh var(--g) 6vh; }
  .pr-panel:not(.pr-intro) { grid-template-columns: 1fr; padding: 6vh var(--g); gap: 5vh; }
  .pr-fig { height: 62vh; }
  .pr-img { width: 100%; }
  .pr-num { font-size: 46vw; top: 20%; }
  .pr-bar { display: none; }
  .rt-head, .dr-head, .cls-head, .gd-h, .sh-row, .sv, .nt, .ab-cols, .ct, .rg, .lg-grid, .ph-row { grid-template-columns: 1fr; }
  .rt-grid { grid-template-columns: 1fr; margin-top: 8vh; }
  .rt-aside { display: none; }
  .rt-list li { padding: 2.4vh 0; border-bottom: 1px solid var(--hair); }
  .gs .rt-list li.on { transform: none; }
  .rt-m { display: block; font: 400 14.5px/1.6 var(--f-body); color: var(--stone); letter-spacing: 0; margin-top: 10px; }
  .rt-m .cap { display: block; color: var(--wine); font-size: 9.5px; margin-bottom: 4px; }
  .rt-list li::before { display: none; }
  .dr-row { flex-direction: column; height: auto; }
  .dr-p, .dr-p.on { flex: none; height: 78svh; }
  .dr-p .dr-v { opacity: 0; }
  .dr-p .dr-b { opacity: 1; transform: none; pointer-events: auto; }
  .dr-p .dr-img { transform: none; filter: none; }
  .cl { grid-template-columns: 1fr; row-gap: 4vh; margin-bottom: 12vh; }
  .cl .plate, .cl .cl-t { grid-column: 1 / -1 !important; order: 0 !important; }
  .fn-top { grid-template-columns: 1fr; }
  .fn-grid { grid-template-columns: 1fr 1fr; }
  .fn-base { grid-template-columns: 1fr; }
  .fn-nav { justify-content: flex-start; }
  .stp-list { grid-template-columns: 1fr 1fr; row-gap: 6vh; }
  .stp-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .gd-list, .gp-grid { grid-template-columns: 1fr; }
  .vl-i { grid-template-columns: 50px 1fr; }
  .vl-d { grid-column: 2; }
  .band-pl .plate-f { height: 64svh; }
  .ix-row { grid-template-columns: 44px 1fr 30px; }
  .ix-p { display: none; }
  .ix-a { width: 28px; }
  .rg-seal { width: 180px; }
}
@media (max-width: 640px) {
  body, .pg { font-size: 15.5px; }
  .fn-grid, .stp-list { grid-template-columns: 1fr; }
  .stp-list li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); padding-top: 30px; }
  .fq summary { grid-template-columns: 44px 1fr 24px; }
  .fq p { padding: 0 0 4vh 54px; }
  .lt { padding: 28px 22px; }
  .mn-t { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}

/* ---------------------------------------------------------------- the seal: filed, approved */
.sl { position: relative; height: max(720px, 100svh); overflow: hidden; background: radial-gradient(110% 85% at 50% 58%, #F8F2EB 0%, #EADFD3 62%, #DDCDBD 100%); }
.sl-h { margin: 0; font: inherit; }
.sl-l, .sl-r { position: absolute; z-index: 3; top: 50%; transform: translateY(-58%); font: 300 clamp(3.4rem, 9.4vw, 11rem)/.9 var(--f-disp); letter-spacing: -.035em; }
.sl-l { left: var(--g); }
.sl-r { right: var(--g); }
.sl-k { position: absolute; z-index: 1; left: var(--g); top: calc(50% + 5.4vw); font-size: 13px; line-height: 1.5; color: rgba(43, 43, 46, .75); }
.sl-stage { position: absolute; z-index: 2; left: 50%; top: 53%; width: min(44vh, 30vw); aspect-ratio: 210 / 297; transform: translate(-50%, -50%); }
.sl-doc { position: absolute; inset: 0; background: var(--white); padding: 11% 11%; transform: rotate(-4deg); box-shadow: 0 50px 80px -40px rgba(60, 30, 20, .45), 0 2px 6px rgba(60, 30, 20, .08); }
.sl-doc .cap { font-size: 7.5px; color: var(--wine); }
.sl-doc-t { font: 300 clamp(1.4rem, 2.2vw, 2.3rem)/1 var(--f-disp); margin: 6% 0 12%; }
.sl-doc i { display: block; height: 1px; background: var(--hair); margin-bottom: 9%; }
.sl-doc i:nth-of-type(2) { width: 80%; } .sl-doc i:nth-of-type(4) { width: 64%; } .sl-doc i:nth-of-type(5) { width: 40%; }
.sl-doc-n { position: absolute; left: 11%; bottom: 7%; font-size: 6.5px; }
.imp { position: absolute; width: 58%; right: 4%; bottom: 6%; transform: rotate(-9deg); opacity: .72; mix-blend-mode: multiply; }
.gs .imp { opacity: 0; }
.sl-seal { position: absolute; z-index: 4; width: 64%; right: 1%; bottom: 3%; transform-origin: 50% 50%; filter: drop-shadow(0 18px 18px rgba(60, 10, 20, .38)); }
.gs .sl-seal { will-change: transform; }
.wax { display: block; width: 100%; overflow: visible; }
.sl-spec { position: absolute; z-index: 1; width: 15rem; border-top: 1px solid var(--hair); padding-top: 10px; }
.sl-spec .cap { color: var(--wine); font-size: 9.5px; }
.sl-sa { font: 400 1.18rem/1.2 var(--f-disp); margin: 4px 0 4px; }
.sl-sd { font-size: 12px; line-height: 1.55; color: var(--stone); }
.sl-s0 { left: var(--g); top: calc(var(--hd) + 6vh); }
.sl-s1 { right: var(--g); top: calc(var(--hd) + 6vh); }
.sl-s2 { left: var(--g); bottom: 7vh; }
.sl-s3 { right: var(--g); bottom: 7vh; }
.sl-foot { display: none; }

/* ---------------------------------------------------------------- Qatar in dots */
.qa { position: relative; height: max(760px, 100svh); overflow: hidden; color: var(--white); background: radial-gradient(85% 75% at 64% 50%, #3A383C 0%, #2B2B2E 48%, #1D1C1E 100%); --ground: var(--ink); }
.qa-word { position: absolute; left: -1.5vw; bottom: -7vw; font: 300 33vw/.8 var(--f-disp); letter-spacing: -.05em; color: rgba(255, 255, 255, .045); pointer-events: none; white-space: nowrap; }
.qa-map { position: absolute; right: 8vw; top: 50%; transform: translateY(-50%); width: 40vw; height: 86vh; }
.qa-pin { position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); font-size: 9.5px; opacity: 0; transition: opacity .6s; white-space: nowrap; }
.qa-pin.on { opacity: 1; }
.qa-pin i { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 0 rgba(218, 102, 128, .6); animation: pin 2.4s var(--ease) infinite; }
@keyframes pin { 70% { box-shadow: 0 0 0 16px rgba(218, 102, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(218, 102, 128, 0); } }
.qa-pick { position: absolute; z-index: 2; left: var(--g); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 26px; }
.qa-lbl { font: 400 clamp(1.5rem, 1.9vw, 2rem)/1 var(--f-disp); white-space: nowrap; }
.qa-arr { width: 40px; flex: none; color: var(--rose); }
.qa-win { height: 17.5em; overflow: hidden; font: 300 clamp(1.3rem, 1.75vw, 1.85rem)/2.5em var(--f-disp); -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.qa-list { transition: transform 1s var(--ease); }
.qa-list li { line-height: 2.5em; white-space: nowrap; color: rgba(255, 255, 255, .34); transition: color .6s; }
.qa-list li.on { color: var(--white); }
.qa-card { position: absolute; z-index: 3; right: var(--g); bottom: 8vh; width: 290px; background: var(--ivory); color: var(--ink); padding: 26px 26px 20px; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .6); }
.qa-c-top { display: flex; justify-content: space-between; align-items: flex-start; }
.qa-c-big { font: 300 5.4rem/.8 var(--f-cap); color: var(--wine); letter-spacing: -.02em; }
.qa-bars { width: 26px; height: 74px; background: repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 6px, var(--ink) 6px 7px, transparent 7px 10px); }
.qa-c-t { font: 400 1.25rem/1.2 var(--f-disp); margin: 18px 0 16px; }
.qa-c-dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 12px; }
.qa-c-dl dt { font-size: 8.5px; }
.qa-c-f { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 11px; line-height: 1.5; color: var(--stone); }
.qa-c-f img { width: 24px; flex: none; }

/* ---------------------------------------------------------------- floating call to action */
.pill {
  position: fixed; z-index: 590; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px; padding: 5px 5px 5px 22px; background: var(--white); color: var(--ink);
  font-size: 13px; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 18px 40px -18px rgba(43, 43, 46, .45); transition: transform .9s var(--ease), opacity .6s;
}
.pill-i { width: 40px; height: 40px; display: grid; place-items: center; background: var(--wine); color: var(--white); }
.pill-i svg { width: 24px; overflow: visible; }
.pill-i path:first-child { transform-origin: 22px 12px; transition: transform .9s var(--ease); }
.pill:hover .pill-i path:first-child { transform: rotate(-40deg); }
.pill.off { transform: translate(-50%, 160%); opacity: 0; }
.contact .pill { display: none; }

/* giant mark closing every page */
.fn-mark { position: relative; margin-top: 12vh; }
.fn-mark img { width: 100%; height: auto; opacity: .96; }

@media (max-width: 1000px) {
  .hx-gate { width: min(56vh, 84vw); top: 52%; }
  .hx-photo { clip-path: circle(min(20.7vh, 31vw) at 50% 52%); }
  .hx-a { font-size: clamp(2.6rem, 11vw, 4.6rem); }
  .hx-b { font-size: clamp(2.2rem, 9vw, 3.8rem); bottom: 22vh; }
  .hx-side { bottom: 4vh; max-width: 70vw; }
  .hx-txt { display: none; }
  .hx-sc { display: none; }
  .stt-cols { grid-template-columns: 1fr 1fr; row-gap: 5vh; }
  .stt-mark { grid-column: 1 / -1; }
  .sl { height: auto; padding: 16vh var(--g) 12vh; display: grid; gap: 4vh; }
  .sl-l, .sl-r, .sl-k, .sl-spec, .sl-stage { position: static; transform: none; width: auto; }
  .sl-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .3em; }
  .sl-l, .sl-r { font-size: clamp(2.8rem, 12vw, 5rem); }
  .sl-stage { position: relative; left: auto; top: auto; width: min(70vw, 360px); margin: 4vh auto; }
  .sl-foot { display: block; font-size: 14px; color: var(--stone); }
  .qa { height: auto; padding: 16vh var(--g) 12vh; display: grid; gap: 6vh; }
  .qa-pick, .qa-card, .qa-map { position: static; transform: none; }
  .qa-pick { flex-wrap: wrap; }
  .qa-map { width: 100%; height: 60vh; }
  .qa-pin { display: none; }
  .qa-word { font-size: 50vw; }
  .qa-card { width: 100%; max-width: 360px; }
  .pill { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .stt-cols { grid-template-columns: 1fr; }
  .stt-in { padding-top: 16vh; }
}


/* ================================================================ v3 */
/* hero: living water inside the gate, an orbit of text around it, a gate that leans toward the cursor */
.hx { perspective: 1400px; }
.hx-gate { transform-style: preserve-3d; }
.hx-orbit { position: absolute; inset: -14%; width: 128%; height: 128%; animation: turn 70s linear infinite; }
.hx-orbit text { font: 400 5.4px var(--f-cap); letter-spacing: .9px; fill: var(--ink); opacity: .55; }
video.hx-img { object-position: 50% 55%; }
.hx-a, .hx-b { font-size: clamp(2.8rem, 6.6vw, 8rem); }
.hx-a .ln-i, .hx-b .ln-i { will-change: transform, filter; }

/* full-bleed video hero for inner pages */
.vh { position: relative; min-height: max(640px, 100svh); color: var(--white); overflow: hidden; display: flex; align-items: flex-end; background: var(--ink); }
.vh-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.vh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 10, 14, .35) 0%, rgba(25, 10, 14, .08) 35%, rgba(25, 10, 14, .72) 100%); }
.vh-in { position: relative; width: 100%; padding: 0 var(--g) 8vh; }
.vh-in > .cap { color: rgba(255, 255, 255, .7); margin-bottom: 3vh; }
.vh-h { font: 300 clamp(3.6rem, 12vw, 15rem)/.84 var(--f-disp); letter-spacing: -.035em; }
.vh-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 6vh; padding-top: 3vh; border-top: 1px solid rgba(255, 255, 255, .25); }
.vh-row > p { max-width: 30em; font-size: 15.5px; color: rgba(255, 255, 255, .85); }
.vh-seal { width: clamp(110px, 10vw, 150px); }
.vh-toc { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-toc a { border: 1px solid rgba(255, 255, 255, .4); padding: 10px 16px; font-size: 13px; transition: background .4s, color .4s; }
.vh-toc a:hover { background: var(--white); color: var(--ink); }

/* services: sticky picture, list that drives it */
.sx { display: grid; grid-template-columns: 1fr 1fr; background: var(--ivory); }
.sx-media { position: relative; }
.sx-frame { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ink); }
.sx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1s var(--ease), transform 2.2s var(--ease); }
.sx-img.on { opacity: 1; transform: scale(1); }
.sx-cap { position: absolute; left: 32px; bottom: 30px; color: var(--white); z-index: 2; display: flex; gap: 12px; align-items: center; }
.sx-cap::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sx-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); }
.sx-col { padding: 16vh var(--g) 14vh 5vw; }
.sx-g + .sx-g { margin-top: 16vh; }
.sx-gh { margin-bottom: 5vh; }
.sx-gh .cap { color: var(--wine); }
.sx-gt { font: 300 clamp(2.4rem, 4vw, 4.4rem)/.95 var(--f-disp); letter-spacing: -.02em; margin: 1.6vh 0 2vh; }
.sx-gh p:last-child { max-width: 30em; color: rgba(43, 43, 46, .78); font-size: 15px; }
.sx-list { border-top: 1px solid var(--ink); }
.sx-item { display: grid; grid-template-columns: 46px 1fr 34px; gap: 4px 16px; padding: 2.6vh 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.sx-n { font: 400 11px var(--f-cap); letter-spacing: .2em; color: var(--stone); }
.sx-t { font: 300 clamp(1.8rem, 2.8vw, 3rem)/1.05 var(--f-disp); letter-spacing: -.015em; transition: color .5s, transform .9s var(--ease); }
.sx-d { grid-column: 2; font-size: 14px; color: var(--stone); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease), opacity .6s; }
.sx-a { grid-row: 1; grid-column: 3; width: 30px; color: var(--wine); opacity: .2; transition: transform 1s var(--ease), opacity .4s; align-self: center; }
.sx-item.on .sx-t, .sx-item:hover .sx-t { color: var(--wine); transform: translateX(10px); }
.sx-item.on .sx-d, .sx-item:hover .sx-d { max-height: 4em; opacity: 1; }
.sx-item.on .sx-a, .sx-item:hover .sx-a { opacity: 1; transform: rotate(-40deg); }
.hp { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; padding: 20vh var(--g); background: var(--white); }
.hp-t .d-l { margin: 3vh 0 4vh; }
.hp-t p:not(.cap) { max-width: 30em; color: rgba(43, 43, 46, .82); margin-bottom: 3vh; }
.gate-frame { position: relative; aspect-ratio: 1; max-width: 560px; }
.gate-frame img { position: absolute; inset: 10.5%; width: 79%; height: 79%; border-radius: 50%; object-fit: cover; }
.gate-frame-arc { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--wine); }

/* service detail */
.sd { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--ivory); }
.sd-l { padding: calc(var(--hd) + 12vh) 5vw 10vh var(--g); display: flex; flex-direction: column; justify-content: center; }
.sd-crumb { display: flex; gap: 12px; margin-bottom: 5vh; }
.sd-crumb a:hover { color: var(--wine); }
.sd-h { font: 300 clamp(3.2rem, 7.4vw, 8.6rem)/.86 var(--f-disp); letter-spacing: -.035em; }
.sd-sub { font: 400 clamp(1.5rem, 2.2vw, 2.3rem)/1.15 var(--f-disp); margin: 5vh 0 2.4vh; max-width: 16em; color: var(--wine); }
.sd-txt { max-width: 30em; color: rgba(43, 43, 46, .82); margin-bottom: 3vh; }
.sd-r { position: relative; min-height: 70svh; }
.sd-ph { position: absolute; inset: 0; overflow: hidden; }
.sd-img { width: 100%; height: 118%; object-fit: cover; }
.sd-card { position: absolute; left: -4vw; bottom: 8vh; width: min(340px, 80%); background: var(--white); padding: 24px 26px 10px; box-shadow: 0 40px 70px -30px rgba(43, 43, 46, .45); z-index: 2; }
.sd-card > div { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.sd-card > div:last-child { border-bottom: 0; }
.sd-card dt { color: var(--wine); margin-bottom: 6px; font-size: 9.5px; }
.sd-card dd { margin: 0; }
.sd-card a:hover { color: var(--wine); }
.sc { display: grid; grid-template-columns: 4fr 7fr; gap: 6vw; padding: 20vh var(--g); background: var(--white); }
.sc-head { position: sticky; top: 30vh; align-self: start; }
.sc-count { font: 300 clamp(4rem, 9vw, 9rem)/.9 var(--f-disp); letter-spacing: -.03em; margin-top: 3vh; color: var(--mist); }
.sc-count b { font-weight: 300; color: var(--wine); font-variant-numeric: tabular-nums; }
.sc-list { border-top: 1px solid var(--ink); }
.sc-i { display: grid; grid-template-columns: 44px 1fr; align-items: center; padding: 3vh 0; border-bottom: 1px solid var(--hair); font: 300 clamp(1.4rem, 2.2vw, 2.3rem)/1.2 var(--f-disp); transition: color .6s; }
.sc-c { width: 28px; color: var(--mist); transition: color .6s; }
.sc-c path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) .1s; }
.sc-i.on .sc-c { color: var(--wine); }
.sc-i.on .sc-c path { stroke-dashoffset: 0; }
.gs .sc-i:not(.on) { color: var(--stone); }
.sp { position: relative; background: var(--wine); color: var(--white); padding: 18vh var(--g); overflow: hidden; }
.sp-head .cap { color: rgba(255, 255, 255, .6); margin-bottom: 3vh; }
.sp-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; margin-top: 10vh; }
.sp-i { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 3vh; }
.sp-n { display: block; font: 400 clamp(4rem, 8vw, 9rem)/.85 var(--f-cap); color: rgba(255, 255, 255, .18); margin-bottom: 3vh; transition: color .8s; }
.sp-i.on .sp-n { color: var(--white); }
.sp-i h3 { font: 400 1.8rem/1.1 var(--f-disp); margin-bottom: 1.2vh; }
.sp-i p { font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.sp-bar { display: none; }
.sn { position: relative; min-height: 90svh; display: grid; place-items: center; overflow: hidden; color: var(--white); background: var(--oxblood); }
.sn-bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(34px) brightness(.55) saturate(1.1); transform: scale(1.1); }
.sn-in { position: relative; max-width: 1100px; padding: 16vh var(--g); text-align: center; }
.sn-in .cap { color: rgba(255, 255, 255, .7); margin-bottom: 4vh; }
.sn-p { font: 300 clamp(2rem, 4.2vw, 4.8rem)/1.1 var(--f-disp); letter-spacing: -.015em; }
.sb { background: radial-gradient(110% 85% at 50% 50%, #F8F2EB 0%, #EADFD3 70%, #DDCDBD 100%); padding: 18vh var(--g); display: grid; place-items: center; }
.sb-paper { position: relative; width: min(760px, 100%); background: var(--white); padding: clamp(32px, 5vw, 70px); box-shadow: 0 60px 90px -50px rgba(60, 30, 20, .5); transform: rotate(-1.2deg); }
.sb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 3vh; }
.sb-top .cap { color: var(--wine); }
.sb-seal { width: 110px; margin: -60px -60px 0 0; }
.sb-list li { display: flex; gap: 14px; padding: 2vh 0; border-bottom: 1px solid var(--hair); font: 400 clamp(1.2rem, 1.6vw, 1.55rem)/1.3 var(--f-disp); }
.sb-s { margin-top: 3vh; font-size: 13px; color: var(--stone); }
.nx { position: relative; display: block; min-height: 70svh; padding: 18vh var(--g); color: var(--white); overflow: hidden; background: var(--ink); border: 0; }
.nx-bg { position: absolute; inset: 0; }
.nx-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: brightness(.45); transition: transform 2s var(--ease), filter 1s; }
.nx:hover .nx-img { transform: scale(1); filter: brightness(.6); }
.nx .cap, .nx-t, .nx-a { position: relative; }
.nx .cap { color: rgba(255, 255, 255, .7); }
.nx:hover .nx-t { color: var(--white); }
.nx-a { position: absolute; color: var(--white); }

/* guide */
.rus { background: var(--ivory); padding: 18vh var(--g); }
.ru-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-top: 10vh; }
.ru-ph { position: relative; aspect-ratio: 3/4; overflow: hidden; margin-bottom: 3vh; }
.ru-ph img { transition: transform 1.6s var(--ease); }
.ru:hover .ru-ph img { transform: scale(1.06); }
.ru-n { position: absolute; left: 20px; top: 18px; font: 400 14px var(--f-cap); letter-spacing: .3em; color: var(--white); }
.ru h3 { font: 300 clamp(2rem, 3vw, 3.2rem)/1 var(--f-disp); margin: 1vh 0 2vh; }
.ru-l { color: rgba(43, 43, 46, .8); margin-bottom: 2vh; font-size: 15px; }
.ru dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.ru dt { color: var(--wine); font-size: 9.5px; padding-top: 3px; }
.ru dd { margin: 0; }
.rp { background: var(--ink); color: var(--white); padding: 18vh var(--g); }
.rp .cap { color: rgba(255, 255, 255, .6); }
.rp .gd-h p:not(.cap) { color: rgba(255, 255, 255, .8); }
.rp-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8vh; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.rp-tab { display: flex; align-items: baseline; gap: 14px; padding: 18px 34px 18px 0; font: 300 clamp(1.5rem, 2.4vw, 2.5rem)/1 var(--f-disp); color: rgba(255, 255, 255, .45); position: relative; transition: color .4s; }
.rp-tab .cap { font-size: 10px; }
.rp-tab::after { content: ""; position: absolute; left: 0; right: 34px; bottom: -1px; height: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.rp-tab[aria-selected="true"] { color: var(--white); }
.rp-tab[aria-selected="true"]::after { transform: scaleX(1); }
.rp-panel:not([hidden]) { animation: rise .8s var(--ease) both; }
.rp-auth { margin: 5vh 0 3vh; color: var(--rose) !important; }
.rp-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; }
.rp-list li { display: grid; grid-template-columns: 80px 1fr; padding: 3vh 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.rp-panel:not([hidden]) .rp-list li { animation: rise .9s var(--ease) both; }
.rp-list li:nth-child(2) { animation-delay: .06s !important; } .rp-list li:nth-child(3) { animation-delay: .12s !important; } .rp-list li:nth-child(4) { animation-delay: .18s !important; }
.rp-list li:nth-child(5) { animation-delay: .24s !important; } .rp-list li:nth-child(6) { animation-delay: .3s !important; } .rp-list li:nth-child(n+7) { animation-delay: .36s !important; }
.rp-n { font: 400 1.8rem/1 var(--f-cap); color: var(--rose); }
.rp-list .cap { font-size: 9.5px; }
.rp-list h3 { font: 400 1.85rem/1.1 var(--f-disp); margin: 6px 0 8px; }
.rp-list p:last-child { font-size: 14.5px; color: rgba(255, 255, 255, .78); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.dc { background: var(--ivory); padding: 18vh var(--g); }
.dc-head { display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: end; }
.dc-head p:not(.cap) { max-width: 30em; color: rgba(43, 43, 46, .8); margin-top: 3vh; }
.dc-ring { position: relative; width: 190px; aspect-ratio: 1; color: var(--wine); }
.dc-ring svg { width: 100%; height: 100%; }
.dc-prog { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.dc-ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dc-ring b { font: 300 3.6rem/1 var(--f-disp); }
.dc-ring span { font-size: 12px; color: var(--stone); }
.dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 10vh; }
.dc-g h3 { font: 400 1.8rem/1.1 var(--f-disp); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.dc-g label { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hair); cursor: pointer; font-size: 15px; transition: color .3s; }
.dc-g input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-box { width: 22px; height: 22px; flex: none; border: 1px solid var(--line-strong, rgba(43,43,46,.35)); display: grid; place-items: center; transition: background .4s, border-color .4s; }
.dc-g input:checked + .dc-box { background: var(--wine); border-color: var(--wine); }
.dc-g input:checked + .dc-box::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); }
.dc-g input:checked ~ span:last-child { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--wine); }
.dc-g input:focus-visible + .dc-box { outline: 1px solid var(--wine); outline-offset: 3px; }

/* about */
.ah { position: relative; min-height: max(760px, 112svh); display: grid; place-items: center; overflow: hidden; background: radial-gradient(110% 90% at 50% 50%, #FCF9F5 0%, #F2E9E0 60%, #E7DACC 100%); }
.ah-in { position: relative; z-index: 2; text-align: center; max-width: 1100px; padding: 0 var(--g); }
.ah-in .cap { margin-bottom: 3vh; }
.ah-h { font: 300 clamp(3.4rem, 10vw, 12rem)/.86 var(--f-disp); letter-spacing: -.035em; }
.ah-p { max-width: 30em; margin: 5vh auto 0; color: rgba(43, 43, 46, .82); }
.af { position: absolute; margin: 0; z-index: 1; will-change: transform; }
.af-in { overflow: hidden; box-shadow: 0 40px 60px -30px rgba(43, 43, 46, .45); }
.af img { display: block; }
.f1 { width: 15vw; aspect-ratio: 3/4; left: 4vw; top: 14vh; }
.f2 { width: 11vw; aspect-ratio: 3/4; left: 22vw; bottom: 6vh; }
.f3 { width: 12vw; aspect-ratio: 3/4; right: 22vw; top: 9vh; }
.f4 { width: 16vw; aspect-ratio: 4/3; right: 4vw; top: 30vh; }
.f5 { width: 10vw; aspect-ratio: 4/5; right: 12vw; bottom: 5vh; }
.f6 { width: 10vw; aspect-ratio: 1; left: 6vw; bottom: 22vh; border-radius: 50%; }
.f6 .af-in { border-radius: 50%; }
.ah-in { background: radial-gradient(closest-side, rgba(250, 247, 244, .9), rgba(250, 247, 244, 0)); padding-block: 8vh; }
.as { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); }
.as-sticky { position: relative; }
.as-frame { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.as-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.2s var(--ease), transform 2.4s var(--ease); }
.as-img.on { opacity: 1; transform: scale(1); }
.as-list { padding: 0 var(--g) 0 6vw; }
.as-c { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.as-c .cap { color: var(--wine); margin-bottom: 2vh; }
.as-c .d-l { margin-bottom: 4vh; }
.as-c > p:last-child { max-width: 28em; font: 300 clamp(1.3rem, 1.8vw, 1.85rem)/1.45 var(--f-disp); color: rgba(43, 43, 46, .9); }
.as-m { display: none; }
.avs { background: var(--ink); color: var(--white); padding: 18vh 0 16vh; overflow: hidden; }
.avs-head { padding: 0 var(--g); }
.avs-head .cap { color: var(--rose); margin-bottom: 3vh; }
.avs-track { display: flex; gap: 3vw; padding: 10vh var(--g) 0; width: max-content; will-change: transform; }
.av { width: clamp(280px, 28vw, 440px); flex: none; }
.av-ph { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 3vh; }
.av .cap { color: var(--rose); }
.av h3 { font: 300 clamp(2.4rem, 3.8vw, 4.2rem)/1 var(--f-disp); margin: 1vh 0 2vh; }
.av p:last-child { color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 26em; }
.rg-seal-w { width: clamp(200px, 22vw, 320px); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.rg-h { font: 300 clamp(2rem, 3.4vw, 3.6rem)/1.08 var(--f-disp); margin: 2vh 0 4vh; max-width: 14em; }
.rg > div > .cap { color: var(--rose); }

/* contact */
.cx { position: relative; min-height: 100svh; display: grid; grid-template-columns: 5fr 6fr; gap: 6vw; align-items: center; padding: calc(var(--hd) + 8vh) var(--g) 10vh; color: var(--white); overflow: hidden; background: var(--ink); }
.cx-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 8, 12, .78) 0%, rgba(20, 8, 12, .45) 55%, rgba(20, 8, 12, .2) 100%); }
.cx-l, .cx .lt { position: relative; z-index: 1; }
.cx-l .cap { color: rgba(255, 255, 255, .65); }
.cx-l .d-xl { margin: 3vh 0 3vh; }
.cx-p { max-width: 26em; color: rgba(255, 255, 255, .85); margin-bottom: 5vh; }
.cx .ct-dl { border-top-color: rgba(255, 255, 255, .4); }
.cx .ct-dl > div { border-bottom-color: rgba(255, 255, 255, .16); }
.cx .ct-st, .cx .cp { color: rgba(255, 255, 255, .7); }
.cx .lt { color: var(--ink); box-shadow: 0 80px 120px -50px rgba(0, 0, 0, .7); }

@media (max-width: 1000px) {
  .hx-orbit { display: none; }
  .vh-row { flex-direction: column; align-items: flex-start; }
  .sx { grid-template-columns: 1fr; }
  .sx-media { display: none; }
  .sx-col { padding: 12vh var(--g); }
  .sx-d { max-height: none; opacity: 1; }
  .hp, .sd, .sc, .dc-head, .cx { grid-template-columns: 1fr; }
  .sd-r { min-height: 70svh; }
  .sd-card { left: var(--g); bottom: -6vh; }
  .sd { padding-bottom: 8vh; }
  .sc-head { position: static; }
  .sp-list, .rp-list { grid-template-columns: 1fr; }
  .ru-grid, .dc-grid { grid-template-columns: 1fr; }
  .af { display: none; }
  .f1, .f4 { display: block; width: 34vw; }
  .f1 { top: 10vh; left: -6vw; } .f4 { top: auto; bottom: 6vh; right: -6vw; }
  .as { grid-template-columns: 1fr; }
  .as-sticky { display: none; }
  .as-c { min-height: 0; padding: 10vh 0; }
  .as-m { display: block; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 4vh; }
  .avs-track { width: auto; flex-direction: column; padding-top: 6vh; }
  .av { width: 100%; }
  .sb-seal { margin: -40px -30px 0 0; width: 90px; }
}


/* ================================================================ v4: bright, warm, modern (after Jesko Jets and Antigravity) */
:root { --f-disp: "Lato", "Helvetica Neue", Arial, sans-serif; --r: 22px; --sand: #EFE5DA; }
.d-xxl, .d-xl, .d-l, .hx-a, .hx-b, .vh-h, .ah-h, .sd-h, .fn-h, .pr-ih, .pr-h, .mn-t, .sl-l, .sl-r { font-weight: 300; letter-spacing: -.045em; }
.d-l { font-size: clamp(2.4rem, 5.4vw, 6.2rem); line-height: .98; }
.mn-list a:hover .mn-t { font-style: normal; }
.hx { background: radial-gradient(120% 100% at 50% 52%, #FCF8F3 0%, #F1E6DA 52%, #DCC8B5 100%); }
.hx::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 0% 0%, rgba(90, 60, 45, .16), transparent 70%); pointer-events: none; }
.hx-a, .hx-b { font-size: clamp(2.6rem, 6.4vw, 7.6rem); line-height: .94; }
.hx-k { font: 400 1.25rem/1.25 var(--f-body); letter-spacing: -.01em; }
.hx-sky { position: absolute; inset: 0; z-index: 5; display: none; }
.gs .hx-sky { display: block; opacity: 0; }
.hx-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 40, 80, .28), rgba(12, 40, 80, .05) 60%, rgba(12, 40, 80, .2)); }
.stt-bg { background-image: url("../img/sky-deep-sm.jpg"); filter: none; transform: none; }
.stt { background: #3E78B8; }
.stt-h { font: 300 clamp(1.8rem, 3.4vw, 4.2rem)/1.12 var(--f-body); letter-spacing: -.03em; }
.stt-cols h3 { font: 400 1.05rem/1.3 var(--f-body); letter-spacing: 0; }
.stt-cols p:not(.cap) { color: rgba(255, 255, 255, .86); }

/* rounded media, like Antigravity */
.plate-f, .pr-f, .sd-ph, .ru-ph, .av-ph, .as-m, .cc-ph, .ac-frame, .dr-p, .gate-frame img, .mn-ph { border-radius: var(--r); }
.gate-frame img, .mn-ph { border-radius: 50%; }
.lg-paper, .qa-card, .sb-paper, .lt, .sd-card { border-radius: 14px; }
.sl-doc { border-radius: 6px; }
.pill { border-radius: 999px; padding: 6px 6px 6px 24px; }
.pill-i { border-radius: 50%; }
.vh-toc a { border-radius: 999px; }
.pr-txt .pr-links, .pr-p, .pr-ip, .rt-lede, .dr-head p, .sx-gh p { font-size: 15.5px; }
.pr-links { font: 300 clamp(1.25rem, 1.7vw, 1.8rem)/1.45 var(--f-body); letter-spacing: -.01em; }
.rt-list li { font-weight: 300; letter-spacing: -.035em; }
.rt-d, .sd-sub, .ab-lead, .as-c > p:last-child, .sn-p, .nt-p { font-family: var(--f-body); font-weight: 300; letter-spacing: -.015em; }
.sd-sub { color: var(--wine); }
.sx-t, .sc-i, .sb-list li, .ct-v, .fn-v, .rg-dl dd, .dc-g h3, .rp-list h3, .ru h3, .av h3, .stp-list h3, .sp-i h3, .lg-big p, .lg-paper tbody th, .qa-c-t, .qa-lbl, .qa-win, .toc a, .fq-q, .mega-h { font-family: var(--f-body); letter-spacing: -.02em; }
.sx-t, .fq-q, .ru h3, .av h3 { font-weight: 300; }
.lt { font-family: var(--f-body); font-weight: 300; letter-spacing: -.01em; }

/* accordion with picture (Jesko) */
.ac { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: 20vh var(--g); background: var(--white); align-items: center; }
.ac-l .d-l { margin: 3vh 0 6vh; }
.ac-list { border-top: 1px solid var(--ink); }
.acc { border-bottom: 1px solid var(--hair); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 2.8vh 0; cursor: pointer; font: 300 clamp(1.4rem, 2vw, 2rem)/1.2 var(--f-body); letter-spacing: -.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 18px; height: 18px; flex: none; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .6s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i::after { transform: rotate(0); }
.acc[open] summary { color: var(--wine); }
.acc p { padding: 0 40px 3vh 0; color: rgba(43, 43, 46, .8); max-width: 34em; animation: rise .6s var(--ease); }
.ac-frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--sand); }
.ac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.8s var(--ease); }
.ac-img.on { opacity: 1; transform: none; }

/* carousel of rounded cards (Antigravity) */
.cls { padding: 20vh 0 14vh; background: var(--ivory); }
.cls-head { padding: 0 var(--g); margin-bottom: 8vh; }
.cc-nav { display: flex; gap: 10px; justify-self: end; }
.cc-b { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong, rgba(43,43,46,.3)); font-size: 18px; transition: background .4s, color .4s; }
.cc-b:hover { background: var(--ink); color: var(--white); }
.cc-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 31vw, 480px); gap: 2vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--g) 4vh; scroll-padding: 0 var(--g); scrollbar-width: none; }
.cc-track::-webkit-scrollbar { display: none; }
.cc { scroll-snap-align: start; }
.cc-ph { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 3vh; }
.cc-ph img { transition: transform 1.6s var(--ease); }
.cc:hover .cc-ph img { transform: scale(1.05); }
.cc h3 { font: 300 clamp(1.6rem, 2.2vw, 2.3rem)/1.1 var(--f-body); letter-spacing: -.03em; margin-bottom: 1.4vh; }
.cc p { color: rgba(43, 43, 46, .8); font-size: 15px; margin-bottom: 1.6vh; max-width: 30em; }

/* light, airy chapters */
.lg { background: radial-gradient(110% 90% at 70% 50%, #F8F2EB 0%, #EADFD3 70%, #DCCBBB 100%); color: var(--ink); }
.lg .cap, .lg-copy .cap { color: var(--wine); }
.lg-copy p:not(.cap) { color: rgba(43, 43, 46, .8); }
.lg .gl, .lg .gl-light { color: var(--ink); }
.lg .gl-i { color: var(--wine); }
.lg-paper { background: var(--white); box-shadow: 0 60px 100px -50px rgba(60, 30, 20, .45); }
.sp { background: radial-gradient(110% 90% at 30% 50%, #F8F2EB 0%, #EADFD3 70%, #DDCDBD 100%); color: var(--ink); }
.sp-head .cap { color: var(--wine); }
.sp-i { border-top-color: var(--ink); }
.sp-n { color: var(--mist); }
.sp-i.on .sp-n { color: var(--wine); }
.sp-i p { color: rgba(43, 43, 46, .8); }
.sn { background: #9CC3E8; color: var(--ink); }
.sn-bg { inset: 0; filter: none; transform: none; }
.sn-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .28); }
.sn-in .cap { color: var(--wine); }
.sn-p { font-size: clamp(1.8rem, 3.6vw, 4.2rem); line-height: 1.12; }
.avs { background: var(--ivory); color: var(--ink); }
.avs-head .cap, .av .cap { color: var(--wine); }
.av p:last-child { color: rgba(43, 43, 46, .8); }
.ah { background: radial-gradient(110% 90% at 50% 50%, #FCF9F5 0%, #F1E8DE 60%, #E2D3C3 100%); }

/* finale: light page, one burgundy card with living dots, then the full logo */
.fn { background: var(--ivory); color: var(--ink); padding: 8vh var(--g) 34px; }
.fn-card { position: relative; background: var(--wine); color: var(--white); border-radius: 28px; padding: 16vh 5vw 6vh; overflow: hidden; }
.fn-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.fn-card .fn-arc { width: max(90vh, 60vw); right: -18vw; top: -40vh; }
.fn-h { font-family: var(--f-body); }
.fn-grid { border-top-color: rgba(255, 255, 255, .25); }
.fn-v { font-family: var(--f-body); font-size: 1.1rem; letter-spacing: 0; }
.fn-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px; margin-top: 6vh; color: var(--ink); }
.fn-nav, .fn-soc { color: var(--ink); justify-content: flex-start; }
.fn-nav a, .fn-soc a { color: rgba(43, 43, 46, .75); }
.fn-nav a:hover, .fn-soc a:hover { color: var(--wine); }
.fn-mark { margin-top: 8vh; }
.fn-mark img { width: 100%; opacity: 1; }
.fn-legal { margin-top: 4vh; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--stone); font-size: 12px; }

/* frames hold their ratio whatever the photo's shape */
.cc-ph, .av-ph, .ru-ph, .as-m, .rt-img, .st-img { position: relative; }
.cc-ph > img, .av-ph > img, .ru-ph > img, .as-m > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-sky::after { background: linear-gradient(180deg, rgba(10, 32, 66, .42) 0%, rgba(10, 32, 66, .12) 45%, rgba(10, 32, 66, .5) 100%); }
.hx-st .stt-h, .stt-h { text-shadow: 0 2px 30px rgba(8, 24, 52, .35); }
.hx-st .stt-cols { border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 3vh; }

@media (max-width: 1000px) {
  .ac { grid-template-columns: 1fr; }
  .ac-r { order: -1; }
  .ac-frame { aspect-ratio: 4/3; }
  .cls-head { grid-template-columns: 1fr; }
  .cc-nav { justify-self: start; }
  .cc-track { grid-auto-columns: 82vw; }
  .fn-card { padding: 12vh 6vw 5vh; border-radius: 20px; }
}


/* ================================================================ v5: back to the brand serif, calmer hero, warm ivory instead of sky */
:root { --f-disp: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif; }
.d-xxl, .d-xl, .d-l, .vh-h, .ah-h, .sd-h, .fn-h, .pr-ih, .pr-h, .mn-t, .sl-l, .sl-r { font-weight: 400; letter-spacing: -.02em; }
.d-l { font-size: clamp(2.5rem, 5.4vw, 6.2rem); line-height: .98; }
.pr-links, .rt-d, .sd-sub, .ab-lead, .as-c > p:last-child, .sn-p, .nt-p, .stt-h, .cc h3, .acc summary, .sx-t, .sc-i, .sb-list li, .rg-dl dd,
.dc-g h3, .rp-list h3, .ru h3, .av h3, .sp-i h3, .lg-big p, .lg-paper tbody th, .qa-c-t, .qa-lbl, .qa-win, .toc a, .fq-q, .mega-h, .fn-h, .lt, .hx-k, .rt-list li, .sx-gt, .stt-cols h3 {
  font-family: var(--f-disp); letter-spacing: -.005em; }
.acc summary, .lt, .cc h3, .fq-q, .sc-i, .sb-list li, .sx-t, .ru h3, .av h3, .stt-cols h3, .sp-i h3, .rp-list h3, .dc-g h3, .qa-lbl { font-weight: 400; }
.pr-links { font-size: clamp(1.4rem, 1.9vw, 2rem); }
.rt-list li { font-weight: 300; letter-spacing: -.015em; }
.stt-cols h3 { font-size: 1.35rem; }
.fn-v { font-family: var(--f-body); }

/* hero: one clear composition */
.hx-a, .hx-b { font: 400 clamp(2.8rem, 5.3vw, 6.4rem)/.96 var(--f-disp); letter-spacing: -.02em; }
.hx-a { top: calc(var(--hd) + 7vh); }
.hx-b { bottom: 17vh; }
.hx-gate { width: min(58vh, 44vw); }
.hx-gate::before, .hx-gate::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(125, 17, 40, .16); pointer-events: none; animation: breathe 7s ease-in-out infinite; }
.hx-gate::before { inset: -9%; }
.hx-gate::after { inset: -19%; border-color: rgba(125, 17, 40, .08); animation-delay: -3.5s; }
@keyframes breathe { 50% { transform: scale(1.025); opacity: .6; } }
.hx-orbit { display: none; }
.hx-k { font: 400 1.45rem/1.15 var(--f-disp); }
.hx-photo { clip-path: circle(min(21.5vh, 16.3vw) at 50% 50%); }
video.hx-img { object-position: 50% 60%; filter: brightness(1.08) saturate(1.08); }

/* after the gate: the harbour dissolves into warm ivory, and the story is written on it */
.hx-sky { background: radial-gradient(120% 100% at 50% 50%, #FCF9F5 0%, #F3EADF 58%, #E6D6C6 100%); }
.hx-sky::after { display: none; }
.gs .hx-st { opacity: 0; color: var(--ink); }
.hx-st .stt-h, .stt-h { color: var(--ink); text-shadow: none; font: 300 clamp(2rem, 3.9vw, 4.6rem)/1.1 var(--f-disp); letter-spacing: -.015em; }
.hx-st .stt-h .ln:nth-child(3) .ln-i { color: var(--wine); font-style: italic; }
.hx-st .stt-cols { border-top: 1px solid var(--hair); }
.hx-st .stt-cols p:not(.cap), .stt .stt-cols p:not(.cap) { color: rgba(43, 43, 46, .78); }
.hx-st .stt-mark .cap, .stt .stt-mark .cap { color: var(--stone); }
.hx-st .stt-arc, .stt .stt-arc { color: var(--wine); }
.stt { background: var(--ivory); color: var(--ink); }
.stt-bg { display: none; }
.stt .stt-cols { border-top-color: var(--hair); }

@media (max-width: 1000px) {
  .hx-gate { width: min(56vh, 84vw); top: 52%; }
  .hx-photo { clip-path: circle(min(20.8vh, 31.2vw) at 50% 52%); }
  .hx-a { font-size: clamp(2.5rem, 10.5vw, 4.4rem); }
  .hx-b { font-size: clamp(2.2rem, 9vw, 3.8rem); bottom: 20vh; }
  .hx-st .stt-h { font-size: clamp(1.6rem, 6.4vw, 2.4rem); }
  .hx-st .stt-cols { display: none; }
  .gs .stt { display: block; }
  .gs .stt .stt-h { display: none; }
  .stt .stt-in { padding-top: 6vh; }
  .stt .stt-cols { margin-top: 0; }
}
/* v6: the story is written over the harbour itself */
.hx-sky { background: linear-gradient(90deg, rgba(28, 12, 16, .74) 0%, rgba(28, 12, 16, .5) 48%, rgba(28, 12, 16, .12) 100%), linear-gradient(0deg, rgba(28, 12, 16, .55) 0%, transparent 45%); }
.gs .hx-st { color: var(--white); }
.hx-st .stt-h { color: var(--white); text-shadow: 0 2px 24px rgba(20, 8, 12, .35); max-width: 19em; }
.hx-st .stt-h .ln:nth-child(3) .ln-i { color: #F3D9DF; }
.hx-st .stt-cols { border-top-color: rgba(255, 255, 255, .3); }
.hx-st .stt-cols p:not(.cap) { color: rgba(255, 255, 255, .82); }
.hx-st .stt-mark .cap { color: rgba(255, 255, 255, .7); }
.hx-st .stt-arc { color: var(--white); }
/* service note on warm sand, not sky */
.sn { background: radial-gradient(110% 90% at 50% 50%, #FBF6F0 0%, #EEE3D7 65%, #E0D0C0 100%); }
.sn-bg { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* v7 footage */
video.hx-img { object-position: 46% 30%; filter: none; }
.hx-sky { background: var(--ink); }
.hx-sky-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hx-sky::after { content: ""; display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 12, 16, .78) 0%, rgba(28, 12, 16, .55) 50%, rgba(28, 12, 16, .15) 100%), linear-gradient(0deg, rgba(28, 12, 16, .6) 0%, transparent 50%); }
@media (max-width: 1000px) { video.hx-img { object-position: 62% 18%; } }

/* v8: one continuous West Bay shot, gate to story */
video.hx-img { object-position: 50% 35%; }
.hx-sky { background: transparent; }
@media (max-width: 1000px) { video.hx-img { object-position: 38% 30%; } }

/* v9: night footage, a bigger gate */
video.hx-img { object-position: 50% 40%; }
.hx-gate { width: min(76vh, 52vw); }
.hx-photo { clip-path: circle(min(28.3vh, 19.3vw) at 50% 50%); }
.hx-a { top: calc(var(--hd) + 5vh); }
.hx-a, .hx-b { font-size: clamp(2.6rem, 4.6vw, 5.8rem); }
@media (max-width: 1000px) {
  .hx-gate { width: min(64vh, 96vw); }
  .hx-photo { clip-path: circle(min(23.8vh, 35.7vw) at 50% 52%); }
  video.hx-img { object-position: 60% 40%; }
}
video.hx-img { object-position: 54% 60%; }
.hx-gate { width: min(72vh, 50vw); }
.hx-photo { clip-path: circle(min(26.8vh, 18.6vw) at 50% 50%); }
@media (max-width: 1000px) { video.hx-img { object-position: 60% 40%; } .hx-gate { width: min(64vh, 96vw); } .hx-photo { clip-path: circle(min(23.8vh, 35.7vw) at 50% 52%); } }
video.hx-img { object-position: 50% 36%; }
@media (max-width: 1000px) { video.hx-img { object-position: 50% 40%; } }

/* v10: golden dunes */
video.hx-img { object-position: 50% 50%; }
@media (max-width: 1000px) { video.hx-img { object-position: 40% 50%; } }
.hx-sky { background: linear-gradient(90deg, rgba(40, 14, 18, .62) 0%, rgba(40, 14, 18, .38) 50%, rgba(40, 14, 18, .05) 100%), linear-gradient(0deg, rgba(40, 14, 18, .5) 0%, transparent 45%); }

/* v11: West Bay at dusk, 4K */
video.hx-img { object-position: 55% 42%; }
@media (max-width: 1000px) { video.hx-img { object-position: 62% 40%; } }

/* ================================================================ v6 (8 Oct 2026): calmer type scale, one-row client cards, address links */
/* menu and display type, about a third smaller */
.mn-t { font-size: clamp(2rem, 4.2vw, 4.6rem); line-height: 1.12; }
.mn-list a { gap: 22px; padding: .3vh 0; }
.d-xl { font-size: clamp(2.6rem, 6.2vw, 7.2rem); }
.d-l { font-size: clamp(2.1rem, 4.2vw, 4.8rem); }
.vh-h { font-size: clamp(2.8rem, 8vw, 9.6rem); }
.ah-h { font-size: clamp(2.8rem, 7vw, 8.2rem); }
.sd-h { font-size: clamp(2.6rem, 5.4vw, 6.2rem); }
.fn-h { font-size: clamp(3rem, 8.4vw, 9.8rem); }
.pr-h { font-size: clamp(2.4rem, 5vw, 5.8rem); }
.pr-ih { font-size: clamp(2.4rem, 4.8vw, 5.6rem); }
.sl-l, .sl-r { font-size: clamp(2.8rem, 6.6vw, 7.6rem); }
.rt-list li { font-size: clamp(1.7rem, 3.2vw, 3.8rem); }
.sx-t { font-size: clamp(1.5rem, 2.2vw, 2.4rem); }
.sx-gt { font-size: clamp(2rem, 3.2vw, 3.6rem); }
.as-c > p:last-child { font-size: clamp(1.2rem, 1.5vw, 1.55rem); }
.sn-p { font-size: clamp(1.6rem, 2.8vw, 3.3rem); }
.nx-t { font-size: clamp(2.6rem, 6.6vw, 8rem); }

/* the home statement: serif headline, a rose rule, sans detail, italic promise */
.stt-h .ln:nth-child(1) .ln-i { font: 400 clamp(1.9rem, 3.4vw, 4rem)/1.08 var(--f-disp); letter-spacing: -.01em; }
.stt-h .ln:nth-child(2), .stt-h .ln:nth-child(4) { margin-top: .5em; }
.stt-h .ln:nth-child(2) .ln-i, .stt-h .ln:nth-child(4) .ln-i { font: 300 clamp(1.05rem, 1.55vw, 1.6rem)/1.45 var(--f-body); letter-spacing: 0; max-width: 46em; }
.stt-h .ln:nth-child(2) { padding-top: .9em; position: relative; }
.stt-h .ln:nth-child(2)::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 2px; background: var(--rose); }
.stt-h .ln:nth-child(3) { margin-top: .45em; }
.stt-h .ln:nth-child(3) .ln-i { font: italic 400 clamp(1.8rem, 3.2vw, 3.8rem)/1.1 var(--f-disp); color: var(--wine); }
.hx-st .stt-h .ln:nth-child(3) .ln-i { color: #F3D9DF; }

/* who we work with: all four in one row on desktop */
@media (min-width: 1001px) {
  .cls { padding: 16vh 0 12vh; }
  .cls-head { margin-bottom: 6vh; }
  .cc-nav { display: none; }
  .cc-track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 1.8vw; }
  .cc-ph { aspect-ratio: 4/3; margin-bottom: 2.4vh; }
  .cc h3 { font-size: clamp(1.3rem, 1.6vw, 1.8rem); }
  .cc p { font-size: 14.5px; }
}

/* the address itself opens Google Maps */
.map-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; transition: color .4s, text-decoration-color .4s; }
.map-a:hover { text-decoration-color: transparent; }
.ct-v .map-a:hover, .mn-foot .map-a:hover, .fn-card .map-a:hover { color: #F3D9DF; }
.rg-dl .map-a:hover { color: var(--rose); }

/* next service: a burgundy panel, so no photograph appears twice */
.nx { background: var(--oxblood); }
.nx-bg { background: radial-gradient(90% 120% at 85% 100%, rgba(218, 102, 128, .22), transparent 60%); }
.stt-h .ln:nth-child(1) { font: 400 clamp(1.9rem, 3.4vw, 4rem)/1.08 var(--f-disp); }
.stt-h .ln:nth-child(2), .stt-h .ln:nth-child(4) { font: 300 clamp(1.05rem, 1.55vw, 1.6rem)/1.45 var(--f-body); }
.stt-h .ln:nth-child(3) { font: italic 400 clamp(1.8rem, 3.2vw, 3.8rem)/1.1 var(--f-disp); }
.stt-h .ln:nth-child(2) { margin-top: 1.4em; }
.stt-h .ln:nth-child(4) { margin-top: .9em; }
.menu-open .pill { opacity: 0; pointer-events: none; }

/* ================================================================ v7 (8 Oct 2026): justified copy, round brand frames, values in one row */
/* body copy is justified across the site */
main p:not([class]), .sd-txt, .sn-p, .sb-s, .sl-sd, .sl-foot, .ru-l, .pr-p, .pr-ip, .dr-line, .rt-note, .rt-lede, .rt-d, .hx-txt, .cx-p, .ah-p,
.lt-dn, .acc p, .fq p, .cc p, .av p, .as-c > p, .fn-legal, .dr-head p, .gd-h p, .dc-head p, .sx-gh p, .hp-t p:not(.cap), .lg-copy p:not(.cap), .vh-row p, .stt-cols p {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.ah-p { text-align-last: center; }
.stt-h .ln:nth-child(2) .ln-i, .stt-h .ln:nth-child(4) .ln-i { display: block; text-align: justify; hyphens: auto; }

/* about: the floating pictures are larger and round, each held by an open Gate Arc */
.af-in { border-radius: 50%; aspect-ratio: 1; }
.af-in img { width: 100%; height: 100%; object-fit: cover; }
.af::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; border: 2px solid var(--wine); border-right-color: transparent; transform: rotate(-45deg); opacity: .85; pointer-events: none; }
.f1 { width: 19vw; left: 3vw; top: 13vh; }
.f2 { width: 13vw; left: 22vw; bottom: 4vh; }
.f3 { width: 14vw; right: 21vw; top: 8vh; }
.f4 { width: 17vw; right: 3vw; top: 34vh; }
.f5 { width: 12vw; right: 17vw; bottom: 3vh; }
.f6 { width: 12vw; left: 5vw; bottom: 16vh; }
.f1, .f2, .f3, .f4, .f5, .f6 { aspect-ratio: 1; }
@media (max-width: 1000px) { .f1, .f4 { width: 38vw; } }

/* about: values in one row, like the client cards */
@media (min-width: 1001px) {
  .avs { padding: 16vh 0 12vh; }
  .avs-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8vw; width: auto; padding: 6vh var(--g) 0; transform: none !important; }
  .av { width: auto; }
  .av-ph { aspect-ratio: 4/3; margin-bottom: 2.4vh; }
  .av h3 { font-size: clamp(1.6rem, 2.2vw, 2.4rem); }
  .av p:last-child { font-size: 14.5px; }
}

/* hero: the sharper 4K harbour, framed on the dhows and the towers */
video.hx-img { object-position: 50% 42%; }
@media (max-width: 1000px) { video.hx-img { object-position: 50% 45%; } }
/* justified, but words are never broken across lines */
main p, .fn-legal, .stt-h .ln-i { hyphens: manual !important; -webkit-hyphens: manual !important; }

/* ================================================================ v8 (8 Oct 2026) */
/* the masked heading lines leave room for descenders, so g, p, y and q are never clipped */
.ln { padding-bottom: .26em; margin-bottom: -.26em; }
.ln + .ln { margin-top: 0; }
/* the practice service list is justified like the rest of the copy */
.pr-links { text-align: justify; text-justify: inter-word; }
/* about: the kites over Doha, larger and in front */
.f3 { width: 22vw; right: 17vw; top: 6vh; z-index: 2; }
.f4 { top: 46vh; }
@media (max-width: 1000px) { .f3 { display: block; width: 44vw; right: -4vw; top: 6vh; } }
/* home accordion: the picture people love opens first and a little larger */
@media (min-width: 1001px) { .ac { grid-template-columns: .9fr 1.1fr; } .ac-frame { aspect-ratio: 5/6; } }

/* ================================================================ v8.1 */
/* practice panels: the description and the service list share one width, so the block reads justified edge to edge */
.pr-txt { max-width: 40rem; }
.pr-p, .pr-links, .pr-ip { max-width: none; text-align: justify; text-justify: inter-word; }
.sl-k, .qa-c-t, .sx-gh p, .rp-list p, .ru dd, .dr-dl dd, .sp-i p, .sb-list span, .dc-g li span { text-align: justify; text-justify: inter-word; }
/* about: frame the kites on the people, the skyline and the kites rather than empty sky */
.af-in img[src*="park-kites"] { object-position: 50% 78%; }

/* ================================================================ v8.3 */
/* the certificate sits exactly in the centre, clear of "Checked," and "then stamped." */
@media (min-width: 1001px) { .sl-stage { top: 50%; width: min(40vh, 23vw); } }
/* about: the kites, a little smaller */
.f3 { width: 17vw; right: 19vw; }
/* every running paragraph, list item and description on the site is justified */
main p:not(.cap):not(.hx-a):not(.hx-b):not(.qa-word):not(.sl-doc-t):not(.rt-n):not(.lg-num), main li, main dd, .acc p, .fn-legal, .stt-h .ln-i {
  text-align: justify; text-justify: inter-word; }
.pr-txt { width: min(40rem, 100%); }
.pr-p, .pr-links { width: 100%; }

/* ================================================================ v9 (8 Oct 2026): a smaller seal; phones and tablets get the laptop experience */
.sl-seal { width: 50%; right: 4%; bottom: 6%; }
.imp { width: 46%; right: 6%; bottom: 8%; }

@media (max-width: 1000px) {
  /* practice: the same sideways gallery, one full screen per practice */
  .pr-track { flex-direction: row; width: max-content; align-items: center; }
  .pr-panel, .pr-intro, .pr-panel:not(.pr-intro) { width: 100vw; height: 100svh; }
  .pr-intro { padding: calc(var(--hd) + 4vh) var(--g) 10vh; }
  .pr-panel:not(.pr-intro) { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 3.2vh; padding: calc(var(--hd) + 1vh) var(--g) 9vh; }
  .pr-fig { height: 40svh; }
  .pr-img { width: 112%; }
  .pr-num { font-size: 62vw; top: 62%; right: 2vw; }
  .pr-h { font-size: clamp(2rem, 8.4vw, 3.6rem); margin: 1.4vh 0 1.8vh; }
  .pr-p { font-size: 14.5px; }
  .pr-links { font-size: clamp(1.05rem, 4.2vw, 1.4rem); margin-top: 2vh; }
  .pr-bar { display: block; bottom: 4vh; }

  /* the stamp: one pinned screen, words above, certificate in the middle, ministries below */
  .sl { height: 100svh; padding: 0; display: block; }
  .sl-h { position: absolute; z-index: 3; left: var(--g); right: var(--g); top: calc(var(--hd) + 3vh); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .3em; }
  .sl-l, .sl-r { position: static; transform: none; font-size: clamp(2.4rem, 10.5vw, 4.6rem); }
  .sl-k, .sl-foot, .sl-sd { display: none; }
  .sl-stage { position: absolute; left: 50%; top: 51%; width: min(50vw, 31svh); margin: 0; transform: translate(-50%, -50%); }
  .sl-spec { position: absolute; width: calc(50vw - var(--g) - 10px); padding-top: 8px; }
  .sl-spec .sl-sa { font-size: 14px; line-height: 1.3; }
  .sl-s0 { left: var(--g); top: auto; bottom: calc(13vh + 64px); }
  .sl-s1 { right: var(--g); left: auto; top: auto; bottom: calc(13vh + 64px); }
  .sl-s2 { left: var(--g); bottom: 13vh; }
  .sl-s3 { right: var(--g); left: auto; bottom: 13vh; }

  /* services: the picture follows the list, held at the top of the screen */
  .sx { display: block; }
  .sx-media { display: block; position: sticky; top: 0; z-index: 2; height: 38svh; }
  .sx-frame { position: relative; top: auto; height: 100%; }
  .sx-col { padding: 8vh var(--g) 12vh; }

  /* about: more of the floating circles */
  .f3, .f6 { display: block; }
  .f1 { width: 30vw; top: 9vh; left: -4vw; }
  .f3 { width: 26vw; right: -3vw; left: auto; top: 13vh; }
  .f4 { width: 30vw; bottom: 7vh; right: -5vw; top: auto; }
  .f6 { width: 22vw; left: 2vw; bottom: 12vh; }
}
@media (min-width: 640px) and (max-width: 1000px) {
  /* tablets: a wider stage and side-by-side practice panels */
  .pr-panel:not(.pr-intro) { grid-template-columns: 44vw 1fr; grid-template-rows: none; gap: 5vw; }
  .pr-fig { height: 58svh; }
  .pr-h { font-size: clamp(2.6rem, 6vw, 4.4rem); }
  .sl-stage { width: min(38vw, 34svh); }
  .sl-spec { width: 34vw; }
  .sx-media { height: 44svh; }
}

/* ================================================================ v9.1: phones, tested at real in-app heights (about 600px) */
@media (max-width: 1000px) {
  /* the header gets a soft backing once the page moves, so text never runs under the logo */
  .hd::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s, background .4s;
    background: rgba(250, 247, 244, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair); }
  .hd.solid::before { opacity: 1; }
  .hd[data-tone="dark"]::before { background: rgba(30, 12, 18, .55); box-shadow: none; }
  .menu-open .hd::before { opacity: 0; }
}
@media (max-width: 640px) {
  /* the stamp: words, then a certificate sized to the space that is left, then the four ministries */
  .sl { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "h h" "st st" "a b" "c d"; column-gap: 18px; row-gap: 10px;
        height: 100svh; padding: calc(var(--hd) + 1.5vh) var(--g) calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sl-h { grid-area: h; position: static; display: block; }
  .sl-l, .sl-r { display: inline; font-size: clamp(2rem, 9.6vw, 3rem); line-height: 1; }
  .sl-stage { grid-area: st; position: relative; left: auto; top: auto; transform: none; justify-self: center; align-self: center;
              height: 100%; width: auto; max-width: 62vw; max-height: 100%; aspect-ratio: 210 / 297; margin: 1.5vh 0; }
  .sl-spec { position: static; width: auto; padding-top: 6px; }
  .sl-s0 { grid-area: a; } .sl-s1 { grid-area: b; } .sl-s2 { grid-area: c; } .sl-s3 { grid-area: d; }
  .sl-spec .cap { font-size: 8.5px; letter-spacing: .26em; }
  .sl-spec .sl-sa { font-size: 13px; line-height: 1.25; text-align: left; }
  .sl-doc .cap { font-size: 6px; }
  .sl-doc-t { font-size: 1.15rem; }
}
@media (max-width: 640px) and (max-height: 760px) {
  /* short in-app screens: the practice panels keep picture and words on one screen */
  .pr-fig { height: 30svh; }
  .pr-panel:not(.pr-intro) { gap: 2vh; padding-bottom: 7vh; }
  .pr-h { font-size: clamp(1.7rem, 7.4vw, 2.4rem); margin: .8vh 0 1.2vh; }
  .pr-p { font-size: 13.5px; line-height: 1.6; }
  .pr-links { font-size: 1rem; line-height: 1.45; margin-top: 1.2vh; }
}
@media (max-width: 640px) {
  /* renewal calendar: document and expiry only, so nothing is cut off */
  .lg-paper table { min-width: 0; }
  .lg-paper th:nth-child(3), .lg-paper td:nth-child(3), .lg-paper th:nth-child(4), .lg-paper td:nth-child(4),
  .lg-paper thead th:nth-child(3), .lg-paper thead th:nth-child(4) { display: none; }
  .lg-paper td { white-space: nowrap; text-align: right; }
  /* the three routes: a deeper shade under the words so they stay readable */
  .dr-p::after { background: linear-gradient(to top, rgba(40, 8, 16, .94) 0%, rgba(40, 8, 16, .7) 55%, rgba(40, 8, 16, .25) 100%); }
  .dr-p, .dr-p.on { height: auto; min-height: 76svh; }
  .dr-b { position: relative; padding-top: 30svh; }
  /* the dotted map is shorter, so the section does not feel empty */
  .qa-map { height: 40vh; }
}

/* ================================================================ v9.2: WhatsApp, and a calmer, cleaner phone */
.ph-l { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wa { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid currentColor;
      font: 400 11px/1 var(--f-body); letter-spacing: .06em; text-decoration: none; opacity: .9; transition: background .3s, color .3s, opacity .3s; vertical-align: middle; }
.wa svg { width: 15px; height: 15px; flex: none; }
.wa:hover { opacity: 1; background: #25D366; border-color: #25D366; color: #fff; }
.ct-dl dd .wa { margin: 0 10px 0 14px; }

@media (max-width: 1000px) {
  /* header: a firmer backing on dark sections */
  .hd[data-tone="dark"]::before { background: rgba(30, 12, 18, .78); }
  /* hero: headline, gate and promise each get their own space, clear of the pill */
  .hx-a { top: calc(var(--hd) + 2.5vh); font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hx-gate { top: 50%; width: min(52svh, 86vw); }
  .hx-photo { clip-path: circle(min(19.3svh, 32vw) at 50% 50%); }
  .hx-b { bottom: calc(14svh + 34px); font-size: clamp(1.9rem, 8.6vw, 3rem); }
  .hx-side { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-width: 80vw; }
  .hx-k { font-size: 1.05rem; }
  .hx-plate { display: none; }
  /* video page heads: the copy sits below the header and scales to the screen */
  .vh { min-height: 100svh; align-items: flex-end; }
  .vh-in { padding: calc(var(--hd) + 4vh) var(--g) 6vh; }
  .vh-h { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .vh-row { margin-top: 3vh; gap: 22px; }
  .vh-row > p { font-size: 14.5px; }
  .vh-seal { width: 92px; }
  .vh-toc { display: flex; flex-wrap: wrap; gap: 8px; }
  .cx { padding: calc(var(--hd) + 5vh) var(--g) 8vh; }
  /* the floating pill is smaller on phones */
  .pill { padding: 4px 4px 4px 18px; font-size: 13px; }
  .pill-i { width: 40px; height: 40px; }
}
/* contact details are never stretched by justification */
.ct-dl dd, .ct-v, .fn-v, .mn-foot p, .rg-dl dd, .sd-card dd, .sd-card li, .qa-c-dl dd, .lg-paper td, .lg-paper th { text-align: left !important; }
@media (max-width: 1000px) {
  /* video heads: a deeper shade so white words always read */
  .vh-shade { background: linear-gradient(180deg, rgba(20, 8, 12, .55) 0%, rgba(20, 8, 12, .35) 40%, rgba(20, 8, 12, .8) 100%) !important; }
  .cx-shade { background: linear-gradient(180deg, rgba(20, 8, 12, .6), rgba(20, 8, 12, .8)) !important; }
}

/* ================================================================ v9.3 */
/* WhatsApp: a quiet round mark beside each number */
.wa { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid currentColor; opacity: .7; gap: 0; }
.wa svg { width: 14px; height: 14px; }
.wa:hover, .wa:focus-visible { opacity: 1; background: var(--white); border-color: var(--white); color: var(--wine); }
.fn-v .ph-l, .mn-foot .ph-l { gap: 14px; }
.ph-l + br { line-height: 2.4; }
.fn-v .ph-l { margin: 3px 0; }
.ct-dl dd .wa { margin: 0 8px 0 14px; }
/* small capitals are never stretched */
.cap, .sx-gh .cap, p.cap { text-align: left !important; }
.ah-in .cap { text-align: center !important; }
/* the route has a picture on phones only */
.rt-ph { display: none; }

@media (max-width: 1000px) {
  /* the promises sit on the harbour, as on the laptop */
  .stt { background: #1E0C12 url("../video/doha-dhows-hd.jpg") center / cover no-repeat; color: var(--white); }
  .stt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 10, 16, .82), rgba(28, 10, 16, .66) 50%, rgba(28, 10, 16, .88)); }
  .stt .stt-in { position: relative; padding: 10vh var(--g) 12vh; }
  .stt .stt-cols { border-top-color: rgba(255, 255, 255, .28); }
  .stt .stt-cols h3 { color: var(--white); }
  .stt .stt-cols p:not(.cap) { color: rgba(255, 255, 255, .82); }
  .stt .stt-mark .cap { color: rgba(255, 255, 255, .7); }
  .stt .stt-arc { color: var(--white); }
  .stt-cols { grid-template-columns: 1fr; row-gap: 3.6vh; }
  /* the route opens with a photograph */
  .rt-ph { display: block; margin: 4vh 0 3vh; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; position: relative; }
  .rt-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* the authorities roll through a three-line window, the current one bright */
  .qa-win { height: 7.5em; font-size: 1.35rem; }
  .qa-list li.on { color: var(--white); }
  /* services: the picture sits under the header, not behind it */
  .sx-media { top: var(--hd); }
}

/* ================================================================ v9.4: the phone reads well even when the device asks for reduced motion */
@media (max-width: 1000px) {
  .stt .stt-h { display: block; color: var(--white); text-shadow: 0 2px 20px rgba(20, 8, 12, .35); margin-bottom: 6vh; }
  .gs .stt .stt-h { display: none; }
  .stt .stt-h .ln:nth-child(3) .ln-i { color: #F3D9DF; }
  .stt .stt-h .ln:nth-child(2) .ln-i, .stt .stt-h .ln:nth-child(4) .ln-i { color: rgba(255, 255, 255, .86); }
  .qa-list li { transition: color .6s; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-list { transition: transform .8s ease !important; }
  .qa-list li { transition: color .6s !important; }
}
/* the certificate sits in the gap between "Checked," and "then stamped." */
@media (min-width: 1001px) { .sl-stage { left: 44.2%; } }