/* ============================================================
UTS · UNITED TRAVEL SERVICES
"ÇİNİ" DESIGN SYSTEM v3
Iznik cobalt on ivory ground. Marcellus / Cormorant Garamond / Jost.
The v2 vocabulary (hero and scrim, gold eyebrows and mounts, cards,
nazar, ledger, member rings, grain) on the v3 base (self-hosted fonts,
responsive pictures, inline maps, dialog menu, reduced-motion gating).
Sections: 1 fonts · 2 tokens · 3 base · 4 type and signatures · 5 header and menu
6 buttons · 7 hero · 8 layout · 9 components · 10 maps and films · 11 forms
12 footer · 13 motion · 14 utilities
============================================================ */
/* ---------- 1. fonts (self-hosted subsets, tools/fonts.mjs): Marcellus 400 for display (a single-weight face, so every display rule stays at 400 and font-synthesis is off), Cormorant Garamond italic 400-500 for the editorial italics, Jost 300-600 for text and interface (its italic only as a guard against a synthesised slant) ---------- */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/cormorant-garamond-italic-400_500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/cormorant-garamond-italic-400_500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/jost-normal-300_600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/jost-normal-300_600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/jost-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/jost-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric fallbacks, so the swap from the local face to the web face does not reflow: each local face is scaled (size-adjust) to the web face's average advance on the site's own text, and its ascent and descent are overridden to the web face's (Marcellus .974/.280, Cormorant Garamond .924/.287, Jost 1.07/.375 of the em); the overrides are relative to the adjusted em, so each is the web value divided by size-adjust */
@font-face{font-family:'Marcellus Fallback';src:local('Georgia');size-adjust:99%;ascent-override:98.4%;descent-override:28.3%;line-gap-override:0%}
@font-face{font-family:'Cormorant Fallback';font-style:italic;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT');size-adjust:87.5%;ascent-override:105.6%;descent-override:32.8%;line-gap-override:0%}
@font-face{font-family:'Jost Fallback';src:local('Arial'),local('ArialMT');size-adjust:93%;ascent-override:115.1%;descent-override:40.3%;line-gap-override:0%}
/* ---------- 2. tokens ---------- */
:root{
--cobalt:#17356E; --cobalt-deep:#0D1F44; --turquoise:#2A8794; --coral:#AE3B2A; --gold:#A9873C;
--ivory:#F9F6EF; --ivory-2:#F1ECDF; --ink:#141824; --gold-text:#806227; --gold-on-cobalt:#D4B36B;
--line:rgba(23,53,110,.16); --line-gold:rgba(169,135,60,.45); --caption:rgba(23,53,110,.82); --body-soft:rgba(20,24,36,.72);
--frit:var(--ivory); --deep:var(--cobalt-deep); --firuze:var(--turquoise); --bole:var(--coral);
--disp:'Marcellus','Marcellus Fallback',Georgia,serif; --edit:'Cormorant Garamond','Cormorant Fallback','Times New Roman',serif; --ui:'Jost','Jost Fallback',Arial,sans-serif;
--font-text:var(--ui); --font-ui:var(--ui);
--max:1180px; --gutter:28px;
--sec:clamp(64px,9vw,112px); --sec-tight:clamp(48px,6.5vw,76px);
--section-major:var(--sec); --section-minor:var(--sec-tight); --block:clamp(32px,4vw,48px);
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
--header-h:64px; --tap:44px; --row:56px; --control:48px;
--ease:cubic-bezier(.22,.61,.36,1); --ease-settle:var(--ease); --ease-pen:cubic-bezier(.4,0,.6,1);
--d-state:250ms; --d-menu-in:260ms; --d-menu-out:180ms; --d-mark:220ms; --d-route:800ms; --d-film:900ms; --d-view:300ms;
--shadow:0 26px 48px -30px rgba(13,31,68,.4);
--fs-display:clamp(2.5rem,1.4rem + 4.4vw,4.9rem);
}
@media (prefers-reduced-motion:reduce){:root{--d-state:0ms;--d-menu-in:0ms;--d-menu-out:0ms;--d-mark:0ms;--d-route:0ms;--d-film:0ms;--d-view:0ms}}
/* ---------- 3. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ivory);color:var(--ink);font:300 17px/1.75 var(--ui);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:1023px){html{scroll-padding-top:calc(var(--header-h) + 16px)}}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;position:relative}
main{flex:1 0 auto;outline:none}
@media (min-width:961px){
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.12 0 0 0 0 0.26 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
}
img,svg,video{display:block;max-width:100%;height:auto}
img{color:var(--cobalt);font:.8rem/1.4 var(--ui)}
figure{margin:0}
p{margin:0;max-width:62ch;text-wrap:pretty}
p+p,ul+p,p+ul{margin-top:14px}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--cobalt);text-decoration:none;text-underline-offset:.18em;text-decoration-thickness:1px}
p a,li a:not(.btn),.textlink{text-decoration:underline;text-decoration-color:var(--line-gold);transition:text-decoration-color var(--d-state)}
p a:hover,li a:hover,.textlink:hover{text-decoration-color:var(--gold)}
::selection{background:var(--cobalt);color:var(--ivory)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--turquoise);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em,i{font-style:italic}
strong,b{font-weight:500;color:var(--cobalt)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--cobalt);color:var(--ivory);padding:12px 18px;font:500 .72rem/1.4 var(--ui);letter-spacing:.22em;text-transform:uppercase}
.skip:focus{top:12px}
/* ---------- 4. type and signature elements ---------- */
h1,h2,h3,.disp,.display{font-family:var(--disp);font-weight:400;color:var(--cobalt);line-height:1.12;letter-spacing:.005em;text-wrap:balance;margin:0}
h1,.display{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.005em}
h2{font-size:clamp(1.75rem,1.1rem + 2.5vw,2.85rem);line-height:1.12}
h3{font-size:1.3rem;letter-spacing:.02em;line-height:1.28}
h4{font:500 .72rem/1.5 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0}
h1+p,h2+p,h3+p,h1+.lede,h2+.lede,h2+ul,h2+.list,h2+.row,h2+.plate,h2+.work,h2+.cards{margin-top:18px}
.text>h3,.text>p+h3{margin-top:40px}.text>h3:first-child{margin-top:0}
h3+p{margin-top:10px}
.eyebrow{font:500 .72rem/1.5 var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin:0 0 18px;max-width:none}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--gold);flex:none}
.lede{font-family:var(--edit);font-style:italic;font-weight:500;font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);color:var(--cobalt);line-height:1.5;max-width:50ch}
.muted{color:rgba(20,24,36,.62)}
.cap,.figcap{font-family:var(--edit);font-style:italic;font-weight:500;font-size:1rem;color:var(--caption);margin-top:12px;line-height:1.5;max-width:none;display:flex;gap:10px;align-items:flex-start}
.cap .star{flex:0 0 12px;margin-top:7px}
.fact,.note,.when,cite,.ui{font:500 .7rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-style:normal}
.when{display:block;margin-bottom:8px}
.margin p,.margin li{font:500 .7rem/1.7 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.margin p+p{margin-top:6px}
.margin .cap{text-transform:none;letter-spacing:0;font:500 1rem/1.5 var(--edit);font-style:italic;color:var(--caption)}
/* nazar: the evil-eye marker replaces every bullet */
.list li,.nazar li{position:relative;padding:6px 0 6px 40px}
.list li::before,.nazar li::before{content:'';position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 42% 42%,var(--ink) 0 15%,#fff 15% 32%,var(--turquoise) 32% 58%,#fff 58% 70%,var(--cobalt) 70% 100%)}
.band .list li::before,.band .nazar li::before{background:radial-gradient(circle at 42% 42%,var(--ink) 0 15%,#fff 15% 32%,var(--turquoise) 32% 58%,#fff 58% 70%,var(--gold) 70% 100%)}
.star{width:12px;height:12px;color:var(--gold)}
.star.is-lit path:first-child{fill:var(--turquoise)}
/* medallion: Iznik plate in line-work, hero grounds only */
.medallion{position:absolute;right:-180px;top:50%;translate:0 -50%;width:720px;height:720px;opacity:.09;pointer-events:none;z-index:1;color:var(--ivory)}
html.motion .medallion{animation:medallion-turn 240s linear infinite}
@keyframes medallion-turn{to{rotate:360deg}}
/* ---------- 5. topbar, header and menu ---------- */
.topbar{background:var(--cobalt-deep);color:rgba(249,246,239,.78);font:400 .7rem/1.6 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:rgba(249,246,239,.92);transition:color var(--d-state)}
.topbar a:hover{color:#fff}
.site-header{position:sticky;top:0;z-index:60;background:rgba(249,246,239,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:box-shadow var(--d-state) var(--ease)}
.site-header.is-scrolled{box-shadow:0 14px 32px -24px rgba(13,31,68,.38)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:62px;width:auto;max-width:none}
.site-header .head-cta{display:none}
.nav{display:none}
.menu-btn,.close-btn{display:inline-block;font:500 .66rem/1.4 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--cobalt);border:1px solid var(--cobalt);padding:11px 16px;min-height:var(--tap);flex:none;transition:background var(--d-state),color var(--d-state)}
.menu-btn:hover,.close-btn:hover{background:var(--cobalt);color:var(--ivory)}
@media (max-width:1023px){.site-header .wrap{gap:12px;padding:10px var(--gutter)}.logo img{height:44px}}
@media (min-width:1024px){
.menu-btn{display:none}
.site-header .head-cta{display:inline-flex;flex:none}
.site-header .wrap{gap:clamp(18px,2.4vw,40px)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);font:500 .76rem/1.5 var(--ui);letter-spacing:.22em;text-transform:uppercase}
.nav a{position:relative;color:var(--ink);padding:8px 0;white-space:nowrap;transition:color var(--d-state);display:inline-flex;align-items:center;min-height:var(--tap)}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--cobalt)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav .lang{margin-left:6px;padding-left:22px;border-left:1px solid var(--line)}
}
@media (max-width:1180px) and (min-width:1024px){.logo img{height:52px}.nav{gap:16px;font-size:.66rem;letter-spacing:.14em}.head-cta{padding:11px 16px;font-size:.66rem;letter-spacing:.18em}}
.menu{border:0;padding:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;inset:0;background:var(--ivory);color:var(--ink)}
.menu::backdrop{background:transparent}
.menu .wrap{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:40px}
.menu-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);padding:10px 0}
.menu-top .logo img{height:44px}
.menu-list{margin-top:24px;border-top:1px solid var(--line)}
.menu-list a{display:flex;align-items:center;min-height:56px;padding:14px 2px;border-bottom:1px solid var(--line);font:400 1.15rem/1.3 var(--disp);letter-spacing:.1em;color:var(--ink)}
.menu-list a[aria-current=page]{color:var(--cobalt);padding-left:14px;border-left:2px solid var(--gold)}
.menu-foot{margin-top:auto;padding-top:32px;display:grid;gap:16px}
.menu-foot .lang{font:500 .7rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt)}
html.js .menu:not([open]){display:none}
/* ---------- 6. buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 .76rem/1.4 var(--ui);letter-spacing:.26em;text-transform:uppercase;padding:15px 34px;min-height:var(--control);border:1px solid var(--cobalt);color:var(--cobalt);background:transparent;cursor:pointer;text-align:center;text-decoration:none;transition:background var(--d-state) var(--ease),color var(--d-state) var(--ease),border-color var(--d-state) var(--ease),transform var(--d-state) var(--ease)}
.btn:hover{background:var(--cobalt);color:var(--ivory)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--cobalt);color:var(--ivory)}
.btn.solid:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep)}
.btn.ghost{border-color:rgba(249,246,239,.6);color:var(--ivory)}
.btn.ghost:hover{background:var(--ivory);color:var(--cobalt);border-color:var(--ivory)}
.btn.sm{padding:12px 22px;white-space:nowrap}
.btn[disabled]{opacity:.6;cursor:default}
.btn--block{width:100%}
.btn:focus-visible{outline-offset:3px}
.lede+.btn,p+.btn{margin-top:30px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center}
@media (max-width:480px){.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}}
/* ---------- 7. hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--cobalt-deep);color:var(--ivory);isolation:isolate}
.hero picture,.hero video{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero picture img,.hero .hero-media{width:100%;height:100%;object-fit:cover;display:block}
html.motion .hero picture img{animation:hero-drift 36s var(--ease) infinite alternate;will-change:transform}
@keyframes hero-drift{from{transform:scale(1.02)}to{transform:scale(1.11) translate(-1.2%,-.8%)}}
.hero video{object-fit:cover;opacity:0;transition:opacity var(--d-film) var(--ease);pointer-events:none}
.hero.is-playing video{opacity:1}
html.motion .hero.is-playing picture img{animation-play-state:paused}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(92deg,rgba(13,31,68,.9) 16%,rgba(13,31,68,.56) 58%,rgba(13,31,68,.32)),linear-gradient(0deg,rgba(13,31,68,.74),rgba(13,31,68,0) 52%)}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(560px,84svh,840px);padding-top:96px;padding-bottom:64px}
.hero.short .wrap{min-height:clamp(380px,50svh,560px);padding-top:72px;padding-bottom:54px}
.hero h1{color:var(--ivory);max-width:16ch}
.hero.short h1{font-size:clamp(2.2rem,1.3rem + 3.4vw,3.9rem);max-width:18ch}
.hero .eyebrow{color:var(--gold)}
.hero .lede{color:rgba(249,246,239,.86);max-width:50ch;margin:22px 0 0}
.hero .lede+.lede{margin-top:8px}
.hero .actions .btn.solid{border-color:transparent}
.hero .film-ctl{color:rgba(249,246,239,.8);font:500 .66rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase;text-decoration:underline;text-decoration-color:rgba(169,135,60,.6);text-underline-offset:4px;padding:12px 0;visibility:hidden}
.hero .film-ctl.is-ready{visibility:visible}
.hero .film-ctl:hover{text-decoration-color:var(--gold);color:var(--ivory)}
.glance{display:flex;flex-wrap:wrap;margin-top:48px;border-top:1px solid rgba(249,246,239,.22);padding:0;list-style:none}
.glance li{font:500 .7rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:rgba(249,246,239,.78);padding:16px 26px 0 0;margin-right:26px;border-right:1px solid rgba(249,246,239,.16)}
.glance li:last-child{border-right:0}
.scrollcue{position:absolute;left:50%;bottom:20px;width:1px;height:46px;background:rgba(249,246,239,.4);overflow:hidden;z-index:2}
html.motion .scrollcue::after{content:'';position:absolute;left:0;top:-46px;width:1px;height:46px;background:var(--gold);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{top:-46px}60%{top:46px}100%{top:46px}}
@media (max-width:1023px){.hero .wrap{min-height:clamp(520px,80svh,760px)}.eyebrow{letter-spacing:.2em;font-size:.64rem;gap:10px}.eyebrow::before{width:22px}}
@media (max-width:700px){:root{--gutter:22px}.hero .wrap{padding-top:64px;padding-bottom:56px}.hero.short .wrap{min-height:clamp(340px,46svh,480px);padding-top:56px;padding-bottom:44px}.glance{margin-top:34px}.glance li{padding:12px 16px 0 0;margin-right:14px;font-size:.6rem;letter-spacing:.2em}.scrollcue{display:none}.medallion{width:460px;height:460px;right:-200px}}
@media (max-width:480px){.glance li{border-right:0;padding-right:0;flex:1 1 46%}}
/* ---------- 8. layout ---------- */
.sec{padding:var(--sec) 0}
.sec--minor,.tight{padding:var(--sec-tight) 0}
.band{background:var(--cobalt);color:var(--ivory)}
.band h2,.band h3{color:var(--ivory)}
.band .lede{color:rgba(249,246,239,.86)}
.band .eyebrow{color:var(--gold)}
.band p{color:rgba(249,246,239,.86)}
.band .btn{border-color:rgba(249,246,239,.6);color:var(--ivory)}
.band .btn:hover{background:var(--ivory);color:var(--cobalt);border-color:var(--ivory)}
.band.deep{background:var(--cobalt-deep)}
.panel{background:var(--ivory-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,80px);align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:960px){.split,.grid2,.grid3,.grid4{grid-template-columns:1fr}.split{gap:36px}}
@media (max-width:960px) and (min-width:640px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
.row{display:block}
.row+.row{margin-top:var(--block)}
.row+.row--minor{margin-top:var(--sec-tight)}
.group .row+.row{margin-top:var(--sec-tight)}
.margin{margin-bottom:12px}
.text{max-width:62ch}
.aside{margin-top:24px}
.wide,.full{max-width:none}
@media (min-width:1024px){
.row{display:grid;grid-template-columns:240px minmax(0,640px) minmax(0,1fr);column-gap:36px;align-items:start}
.margin{grid-column:1;margin:0;padding-top:8px}
.text{grid-column:2;max-width:none}
.aside{grid-column:3;margin:0;padding-top:8px}
.wide{grid-column:2 / -1}
.full{grid-column:1 / -1}
.text--wide{grid-column:2 / -1;max-width:none}
}
.main-start{padding-top:var(--sec)}
.page-end{padding-bottom:var(--sec)}
/* ---------- 9. components ---------- */
/* mounted photograph: a gold hairline frame offset behind the image */
.plate{position:relative}
.plate picture,.mount{position:relative;isolation:isolate;display:block;margin-bottom:22px}
.plate picture::after,.mount::after{content:'';position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--line-gold);pointer-events:none;z-index:-1}
.band .plate picture::after,.band .mount::after{border-color:rgba(249,246,239,.32)}
.plate picture img,.mount>img{position:relative;z-index:1;width:100%;height:auto;background:rgba(23,53,110,.05)}
.plate .cap{margin-top:0}
@media (max-width:700px){.plate picture,.mount{margin-bottom:16px}.plate picture::after,.mount::after{inset:10px -10px -10px 10px}}
/* trust bar: partner marks rest in monochrome and return to colour on hover */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ivory)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 52px;padding:28px var(--gutter)}
.trust a{display:flex;align-items:center;min-height:var(--tap);filter:grayscale(1);opacity:.72;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.trust a:hover,.trust a:focus-visible{filter:none;opacity:1}
@media (hover:none){.trust a{filter:none;opacity:1}}
.trust img{height:46px;width:auto;max-width:none;object-fit:contain}
.trust img.h66{height:66px}.trust img.h56{height:56px}.trust img.h48{height:48px}.trust img.h44{height:44px}.trust img.h36{height:36px}.trust img.h50{height:50px}
@media (max-width:700px){.trust img{height:auto !important;max-height:40px;max-width:130px}.trust .wrap{gap:14px 30px;padding:20px 18px}}
/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr;gap:16px}}
.card{background:#fff;border:1px solid var(--line);padding:40px 34px;position:relative;display:block;color:inherit;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.card::before{content:'';position:absolute;left:34px;right:34px;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.card:hover,.card:focus-within{border-color:var(--line-gold);transform:translateY(-5px);box-shadow:var(--shadow)}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
.card h3{margin:18px 0 12px}
.card p{font-size:.95rem;color:var(--body-soft)}
.card .star{width:30px;height:30px}
.card a{text-decoration:none}
.card a::after{content:'';position:absolute;inset:0}
@media (max-width:700px){.card{padding:28px 24px}.card::before{left:24px;right:24px}}
/* destination tiles */
.dest{position:relative;overflow:hidden;isolation:isolate;display:block}
.dest picture{margin:0}
.dest picture::after{display:none}
.dest img{transition:transform 1.6s var(--ease)}
.dest:hover img{transform:scale(1.06)}
.dest .tcap{position:absolute;inset:auto 0 0 0;padding:76px 22px 20px;color:var(--ivory);font:400 .95rem/1.4 var(--disp);letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(transparent,rgba(13,31,68,.9));z-index:2;margin:0}
.dest .tcap::after{content:'';display:block;width:28px;height:1px;background:var(--gold);margin-top:10px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.dest:hover .tcap::after{transform:scaleX(1)}
.dest .tcap small{display:block;font:500 .66rem/1.6 var(--ui);letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:960px){.tiles{grid-template-columns:1fr 1fr;gap:16px}}
/* quotations */
.quote-block{max-width:820px;margin:0 auto;text-align:center}
.quote,.quote-block blockquote{font-family:var(--edit);font-style:italic;font-weight:500;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.2rem);line-height:1.45;color:var(--cobalt);text-wrap:pretty;margin:0}
.quote+cite,.quote-block cite{display:block;margin-top:28px;font:500 .72rem/1.6 var(--ui);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.quote-block cite a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-gold)}
/* guest book entries as testimonial cards */
.ledger{display:grid;gap:28px}
@media (min-width:640px){.ledger{grid-template-columns:1fr 1fr}}
.entry,.tq{background:#fff;border:1px solid var(--line);padding:32px 30px;display:flex;flex-direction:column;gap:18px;position:relative;font-family:var(--edit);font-style:italic;font-weight:500;font-size:1.1rem;line-height:1.6;color:var(--ink);transition:border-color .4s,transform .45s var(--ease),box-shadow .45s var(--ease)}
.entry::before,.tq::before{content:'';position:absolute;left:30px;top:-1px;width:34px;height:1px;background:var(--gold)}
.entry:hover,.tq:hover{border-color:var(--line-gold)}
.entry .when{order:2;margin:auto 0 0;font-style:normal}
.ledger li+li{margin-top:0}
@media (max-width:700px){.entry,.tq{padding:26px 24px;font-size:1rem}}
/* awards */
.awards{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;list-style:none}
.award{border:1px solid var(--line-gold);background:#fff;padding:32px 42px;text-align:center;min-width:280px;position:relative}
.award::before,.award::after{content:'';position:absolute;width:10px;height:10px;border:1px solid var(--line-gold)}
.award::before{top:6px;left:6px;border-right:0;border-bottom:0}
.award::after{bottom:6px;right:6px;border-left:0;border-top:0}
.award .a-title{font-family:var(--disp);font-size:1.4rem;color:var(--cobalt);letter-spacing:.04em;display:block}
.award .a-by{font:500 .66rem/1.6 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:10px;display:block}
.award .a-note{font-family:var(--edit);font-style:italic;color:rgba(23,53,110,.78);font-size:1.02rem;margin-top:6px;display:block}
.band .award{background:transparent;border-color:rgba(249,246,239,.35)}
.band .award::before,.band .award::after{border-color:rgba(249,246,239,.35)}
.band .award .a-title{color:var(--ivory)}.band .award .a-note{color:rgba(249,246,239,.75)}
@media (max-width:700px){.awards{gap:14px}.award{min-width:0;width:100%;padding:24px}}
/* people */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:960px){.people{grid-template-columns:repeat(2,1fr);gap:16px}}
.people li{background:#fff;border:1px solid var(--line);text-align:center;padding:36px 20px 28px;transition:border-color .4s,transform .45s var(--ease),box-shadow .45s var(--ease)}
.people li:hover{border-color:var(--line-gold);transform:translateY(-4px);box-shadow:var(--shadow)}
.people picture{display:block;width:136px;height:136px;border-radius:50%;margin:0 auto 22px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#E7EDF7,#C9D5E8);box-shadow:0 0 0 1px var(--line),0 0 0 6px #fff,0 0 0 7px var(--line-gold)}
.people picture::after{display:none}
.people img{width:100%;height:100%;object-fit:cover;object-position:top;background:none}
.people .who{display:block;font:400 1.05rem/1.3 var(--disp);color:var(--cobalt);margin-bottom:6px}
.people .role{display:block;font:500 .66rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.people--two{grid-template-columns:repeat(2,minmax(0,280px))}
@media (max-width:700px){.people picture{width:108px;height:108px}}
/* milestones as a ledger: year column, hairline rows, nazar at the margin */
.milestones{border-top:1px solid var(--line-gold)}
.milestones li{display:grid;grid-template-columns:20px minmax(72px,118px) 1fr;gap:0 22px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line-gold)}
.milestones li::before{content:'';width:19px;height:19px;border-radius:50%;margin-top:10px;background:radial-gradient(circle at 42% 42%,var(--ink) 0 15%,#fff 15% 32%,var(--turquoise) 32% 58%,#fff 58% 70%,var(--cobalt) 70% 100%)}
.milestones .year{font-family:var(--disp);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--cobalt);letter-spacing:.06em;line-height:1.1}
.milestones p{font-size:.98rem;color:rgba(20,24,36,.74);max-width:58ch}
@media (max-width:700px){.milestones li{grid-template-columns:18px 1fr;gap:4px 14px;padding:22px 0}.milestones li::before{margin-top:6px;width:16px;height:16px}.milestones p{grid-column:2}}
.motto{font-family:var(--edit);font-style:italic;font-weight:500;font-size:clamp(2rem,1.2rem + 3vw,3.6rem);line-height:1.2;color:var(--cobalt);max-width:none}
.motto+p{margin-top:14px}
/* work list and rows */
.work li{border-top:1px solid var(--line-gold);padding:22px 0}
.work li:last-child{border-bottom:1px solid var(--line-gold)}
.work a{font:400 1.3rem/1.3 var(--disp);letter-spacing:.02em;color:var(--cobalt);display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.work a span{border-bottom:1px solid var(--line-gold);transition:border-color var(--d-state)}
.work a:hover span{border-color:var(--gold)}
.work p{margin-top:4px;color:var(--body-soft);font-size:.98rem}
@media (min-width:768px){.work li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:baseline}.work p{margin-top:0}}
.rows li+li{margin-top:0}
.rows a,.rowlink{display:flex;align-items:center;min-height:var(--tap);font:500 .74rem/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;gap:12px}
.rows a span:first-child{border-bottom:1px solid var(--line-gold);transition:border-color var(--d-state)}
.rows a:hover span:first-child{border-color:var(--gold)}
.textlink{display:inline-block;padding-block:10px;margin-block:-10px;font:500 .72rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase}
.taprow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--row);padding:10px 0;border-top:1px solid var(--line-gold);text-decoration:none}
.taprow:last-of-type{border-bottom:1px solid var(--line-gold)}
.taprow .k{font:500 .68rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);flex:0 0 auto}
.taprow .v{color:var(--cobalt);font:400 1.05rem/1.4 var(--ui);text-align:right;border-bottom:1px solid transparent;transition:border-color var(--d-state)}
.taprow:hover .v{border-color:var(--gold)}
.taprow .sub{display:block;font:400 .8rem/1.5 var(--ui);letter-spacing:0;text-transform:none;color:var(--body-soft)}
@media (max-width:767px){.taprow{flex-wrap:wrap}.taprow .k{flex:1 1 100%}.taprow .v{text-align:left}}
.marks{display:flex;flex-wrap:wrap;gap:16px 36px;align-items:center;margin-top:28px}
.marks img{height:30px;width:auto;filter:grayscale(1);opacity:.75}.marks img.tall{height:44px}
.pair-list{display:grid;gap:32px}
@media (min-width:768px){.pair-list{grid-template-columns:1fr 1fr;gap:48px}}
.pair-list h3+ul{margin-top:14px}
.chip{display:inline-block;border:1px solid var(--line-gold);color:var(--gold);font:500 .64rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase;padding:6px 14px;margin:4px 6px 4px 0}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:22px}
.legend li+li{margin-top:0}
.legend a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;gap:10px}
.legend a span{border:1px solid var(--line-gold);color:var(--gold);font:500 .64rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase;padding:7px 14px;transition:background var(--d-state),color var(--d-state)}
.legend a:hover span,.legend a:focus-visible span{background:var(--gold);color:#fff}
/* ---------- 10. maps and films ---------- */
.map{position:relative}
.map svg{width:100%;height:auto;display:block}
.map text{font-family:var(--ui)}
.map .sea{font-family:var(--edit);font-size:16px}
.map .bear{font-family:var(--edit)}
.map .place{font-family:var(--ui);font-weight:500;letter-spacing:.08em;font-size:12px}
.map .mark{color:var(--gold)}
.map-note{display:none;margin-top:8px}
@media (max-width:767px){
.map-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.map-scroll svg{width:594px;max-width:none}.map-scroll svg.chart{width:100%}
.map-scroll>svg{scroll-snap-align:start}
.map-note{display:block}
}
html.motion .map:not(.is-drawn) .mark{stroke-dasharray:1;stroke-dashoffset:1}
html.motion .map.is-drawn .mark{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--d-mark) var(--ease-pen) calc(var(--i,0) * 80ms)}
html.motion .map:not(.is-drawn) .route{stroke-dasharray:1;stroke-dashoffset:1}
html.motion .map.is-drawn .route{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--d-route) var(--ease-pen) calc(var(--i,0) * 120ms)}
.map .route,.map .mark{transition:stroke var(--d-state) var(--ease),stroke-width var(--d-state) var(--ease)}
.map .route.is-lit{stroke:var(--gold);stroke-width:2}
.map .mark.is-lit .star-in,.map .mark.is-current .star-in{fill:var(--turquoise)}
.locator{width:160px;height:62px;color:var(--cobalt);display:block}
.locator--s{width:96px;height:37px}.locator--xs{width:64px;height:25px}
@media (max-width:1023px){.aside .locator{width:96px;height:37px}}
.locator .loc-star{fill:var(--turquoise);stroke:var(--gold);stroke-width:.6}
.locator .loc-route{fill:none;stroke:var(--cobalt);stroke-width:1;vector-effect:non-scaling-stroke}
.cap-loc{display:inline-block;vertical-align:middle;margin-right:8px}
.port-film{position:relative}
.port-film video{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:0;z-index:3;pointer-events:none;transition:opacity var(--d-film) var(--ease)}
.port-film.is-playing video{opacity:1}
.port-film .film-btn{display:block;width:100%;position:relative;text-align:left;cursor:pointer;z-index:2}
.port-film .film-btn picture{margin-bottom:22px}
.port-film .film-label{position:absolute;left:12px;bottom:34px;z-index:4;background:var(--ivory);color:var(--cobalt);font:500 .64rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase;padding:10px 14px;min-height:40px;display:inline-flex;align-items:center}
.port-film.is-playing .film-label{visibility:visible}
.port-film .film-btn:focus-visible{outline-offset:4px}
.film-ctl{font:500 .66rem/1.5 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt);text-decoration:underline;text-decoration-color:var(--line-gold);text-underline-offset:4px;padding-block:12px;margin-block:-12px;visibility:hidden}
.film-ctl.is-ready{visibility:visible}
/* ---------- 11. forms ---------- */
.form{display:block}
.field{margin-bottom:26px;position:relative}
.field label{display:block;font:500 .68rem/1.6 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--cobalt);margin-bottom:4px}
.field label .opt{color:var(--body-soft);letter-spacing:.1em;text-transform:none}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid rgba(23,53,110,.34);background:transparent;border-radius:0;padding:12px 0;font:400 1rem/1.5 var(--ui);color:var(--ink);min-height:var(--control);transition:border-color var(--d-state),box-shadow var(--d-state);scroll-margin-top:calc(var(--header-h) + 24px)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-bottom-color:var(--cobalt);box-shadow:0 1px 0 var(--cobalt)}
.field textarea{resize:vertical;min-height:132px}
.field .err{display:none;font:500 .74rem/1.5 var(--ui);color:var(--coral);margin-top:8px}
.field.is-invalid .err{display:block}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--coral)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.status{font-family:var(--edit);font-style:italic;font-size:1.05rem;line-height:1.6;min-height:1.6em;margin-top:18px;color:var(--cobalt)}
.status.is-error{color:var(--coral)}
form[id]{scroll-margin-top:24px}
@media (max-width:1023px){form[id]{scroll-margin-top:calc(var(--header-h) + 16px)}}
/* ---------- 12. footer (the figure at its top, once the İstanbul frieze, is the whirling dervish of section 27) ---------- */
.site-footer{background:var(--cobalt-deep);color:rgba(249,246,239,.72);font-size:.88rem;border-top:1px solid rgba(169,135,60,.5)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px;padding:28px 0 34px}
@media (max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:600px){.site-footer .cols{grid-template-columns:1fr;gap:24px}}
.site-footer h2{font:500 .66rem/1.6 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.site-footer a{color:rgba(249,246,239,.86);transition:color var(--d-state)}
.site-footer a:hover{color:#fff}
.site-footer p{line-height:1.6;max-width:none}
.site-footer .rows a{font:400 .88rem/1.5 var(--ui);letter-spacing:0;text-transform:none;min-height:30px}
.site-footer .rows a span:first-child{border:0}
.site-footer .rows a:hover span:first-child{text-decoration:underline;text-decoration-color:var(--gold)}
.site-footer .blurb{margin-top:14px;max-width:34ch;line-height:1.65}
.site-footer .logo-f img{height:56px;width:auto;opacity:.92}
.site-footer .office p+p{margin-top:8px}
.site-footer .office .sub{font-size:.76rem;color:rgba(249,246,239,.55)}
.legalbar{border-top:1px solid rgba(249,246,239,.14);padding:16px 0 calc(16px + env(safe-area-inset-bottom));font:400 .66rem/1.6 var(--ui);letter-spacing:.16em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:rgba(249,246,239,.6)}
@media (max-width:700px){.site-footer .logo-f img{height:48px}}
/* ---------- 13. motion ---------- */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js.motion .rv:not(.in){opacity:0;transform:translateY(26px)}
.grid2>.rv:nth-child(2),.grid3>.rv:nth-child(2),.grid4>.rv:nth-child(2),.cards>.rv:nth-child(2),.tiles>.rv:nth-child(2),.people>.rv:nth-child(2),.awards>.rv:nth-child(2),.split>.rv:nth-child(2),.ledger>.rv:nth-child(2){transition-delay:.12s}
.grid3>.rv:nth-child(3),.grid4>.rv:nth-child(3),.cards>.rv:nth-child(3),.tiles>.rv:nth-child(3),.people>.rv:nth-child(3),.awards>.rv:nth-child(3),.ledger>.rv:nth-child(3){transition-delay:.24s}
.grid4>.rv:nth-child(4),.cards>.rv:nth-child(4),.tiles>.rv:nth-child(4),.people>.rv:nth-child(4),.ledger>.rv:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}
.site-header{view-transition-name:site-header}
.menu[open]{animation:menu-in var(--d-menu-in) var(--ease)}
.menu.is-closing{animation:menu-out var(--d-menu-out) var(--ease) forwards}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes menu-out{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:0ms !important;animation-duration:0ms !important}
html.motion .hero picture img,.medallion{animation:none}
}
/* ---------- 14. utilities ---------- */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.centered{text-align:center}
.centered .text,.centered .lede,.centered p{margin-inline:auto}
.centered .rows a{justify-content:center}
.centered .map{max-width:720px;margin-inline:auto}
.mt-0{margin-top:0 !important}.mt-4{margin-top:16px}.mt-5{margin-top:24px}.mt-6{margin-top:32px}.mt-7{margin-top:48px}.mt-8{margin-top:64px}
.measure{max-width:62ch}
.phone-only{display:block}.desk-only{display:none}
@media (min-width:1024px){.phone-only{display:none}.desk-only{display:block}}
section[id],article[id]{scroll-margin-top:24px}
@media (max-width:1023px){section[id],article[id]{scroll-margin-top:calc(var(--header-h) + 16px)}}
.lang-note{font:500 .68rem/1.6 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
/* ---------- 15. original layouts restored, bigger tiles, interactive map, quieter frieze ---------- */
.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r34{aspect-ratio:3/4}
.imgfit{width:100%;height:100%;object-fit:cover;display:block}
.mount>iframe{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/3;border:0;background:var(--ivory-2)}
.xcard{padding:0;overflow:hidden}
.xcard::before{display:none}
.xcard picture{margin:0}
.xcard picture::after{display:none}
.xcard img{transition:transform 1.4s var(--ease)}
.xcard:hover img{transform:scale(1.04)}
.xcard .xbody{padding:26px 26px 30px}
.xcard h3{margin:0 0 10px}
.card .num{font-family:var(--edit);font-style:italic;font-size:1.05rem;color:var(--gold)}
.port{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(44px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.port:nth-child(even){grid-template-columns:1fr 1.05fr}
.port:nth-child(even)>:first-child{order:2}
.port:last-child{border-bottom:0}
.port .plate picture{margin-bottom:0}
@media (max-width:960px){.port,.port:nth-child(even){grid-template-columns:1fr}.port:nth-child(even)>:first-child{order:0}}
/* destination tiles: two up, caption beneath, lit together with the map */
.tiles{grid-template-columns:repeat(2,1fr);gap:44px 36px}
@media (max-width:640px){.tiles{grid-template-columns:1fr;gap:32px}}
.dest{overflow:visible;scroll-margin-top:120px}
.dest picture{margin-bottom:0}
.dest .tcap{position:static;padding:0;background:none;color:var(--cobalt);font:400 1.25rem/1.3 var(--disp);letter-spacing:.06em;text-transform:none;margin-top:16px;transition:color var(--d-state)}
.dest .tcap::after{display:none}
.dest .tcap small{display:block;font:500 1.02rem/1.5 var(--edit);font-style:italic;letter-spacing:0;text-transform:none;color:var(--caption);margin-top:4px}
.dest.is-lit .tcap{color:var(--gold)}
.dest.is-lit img{transform:scale(1.04)}
.map a.mark-link{cursor:pointer;outline:none}
.map a.mark-link .place{transition:fill var(--d-state)}
.map a.mark-link:hover .place,.map a.mark-link:focus-visible .place,.map .mark.is-lit+.place{fill:var(--gold)}
.map a.mark-link:hover .mark .star-in,.map a.mark-link:focus-visible .mark .star-in{fill:var(--turquoise)}
.map .mark use{transition:transform var(--d-state) var(--ease);transform-box:fill-box;transform-origin:center}
.map a.mark-link:hover .mark use,.map a.mark-link:focus-visible .mark use,.map .mark.is-lit use{transform:scale(1.5)}
@media (max-width:1023px){.map a.mark-link:hover .mark use,.map .mark.is-lit use{transform:scale(2.4)}}
.map a.mark-link:focus-visible .mark .star-out{stroke:var(--turquoise);stroke-width:1.6}
.map-hint{font:500 .66rem/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:14px}
/* (the quieter frieze of this round is retired: the footer figure is section 27) */
/* ---------- 16. after the page revert ---------- */
.port .plate picture,.port .port-film .film-btn picture{margin-bottom:22px}
.port h3{font-size:1.7rem;letter-spacing:.01em}
.port h3+p{margin-top:12px}
.port .chips{margin-top:16px}
.port:nth-child(even){grid-template-columns:1.05fr 1fr}
.port:nth-child(even)>:first-child{order:0}
.port:nth-of-type(even){grid-template-columns:1fr 1.05fr}
.port:nth-of-type(even)>:first-child{order:2}
@media (max-width:960px){.port,.port:nth-of-type(even){grid-template-columns:1fr}.port:nth-of-type(even)>:first-child{order:0}}
.xcard picture img{aspect-ratio:16/9;object-fit:cover}
.card a::after{content:none}
.card h3 a::after{content:'';position:absolute;inset:0}
.card h3 a{text-decoration:none}
.center .card,.card.center{text-align:center}
.center .card .star,.card.center .star{margin-inline:auto}
.ledger.one{grid-template-columns:1fr;max-width:620px}
.centered .eyebrow{justify-content:center}
.centered h1,.centered h2,.centered .lede{margin-inline:auto}
.hero.centered .wrap{align-items:center;text-align:center}
.band .trust{border:0;background:var(--ivory);margin-top:28px}
.band .trust .wrap{padding:22px 24px}
.band .awards{margin-top:28px}
.band.centered .awards{justify-content:center}
.lede+ul.rows{margin-top:24px}
/* ---------- 17. the İznik ornament set (assets/cini-*.svg) ---------- */
.medallion{opacity:.12;width:760px;height:760px;right:-200px}
@media (max-width:700px){.medallion{width:480px;height:480px;right:-210px;opacity:.1}}
.cini-band{height:44px;background:url(/assets/cini-bordur.svg) center top / auto 44px repeat-x;background-color:var(--ivory)}
@media (max-width:700px){.cini-band{height:34px;background-size:auto 34px}}
.eyebrow::before{width:26px;height:26px;background:url(/assets/cini-rosette.svg) center / contain no-repeat;margin-top:-2px}
.hero .eyebrow::before,.band .eyebrow::before,.site-footer .eyebrow::before{width:34px;height:1px;background:var(--gold);margin-top:0}
@media (max-width:1023px){.eyebrow::before{width:22px;height:22px}.hero .eyebrow::before,.band .eyebrow::before{width:22px;height:1px}}
/* ---------- 18. the Spanish navigation is wider ---------- */
@media (min-width:1024px){
html[lang=es] .nav{gap:clamp(12px,1.5vw,22px);font-size:.68rem;letter-spacing:.14em}
html[lang=es] .site-header .head-cta{padding:11px 16px;font-size:.66rem;letter-spacing:.16em}
html[lang=es] .site-header .wrap{gap:clamp(14px,1.8vw,28px)}
}
@media (min-width:1024px) and (max-width:1199px){html[lang=es] .site-header .head-cta{display:none}}
/* ---------- 19. audit fixes ---------- */
:root{--header-h:64px}
@media (min-width:1024px){:root{--header-h:88px}}
@media (min-width:1024px) and (max-width:1180px){:root{--header-h:78px}}
html{scroll-padding-top:calc(var(--header-h) + 16px)}
section[id],article[id],form[id],.dest,.card[id],.port[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* gold as text needs a deeper tone than gold as a rule */
.eyebrow,.fact,.note,.when,cite,.ui,.margin p,.margin li,.quote+cite,.quote-block cite,.award .a-by,.people .role,.taprow .k,.chip,.map-hint,.lang-note,.entry .when{color:var(--gold-text)}
.chip{border-color:var(--gold-text)}
.dest.is-lit .tcap{color:var(--gold-text)}
.hero .eyebrow,.site-footer h2,.site-footer .taprow .k{color:var(--gold)}
.band .eyebrow,.band .award .a-by,.band cite,.band .quote-block cite{color:var(--gold-on-cobalt)}
.band :focus-visible,.hero :focus-visible{outline-color:var(--ivory)}
.field input,.field textarea{border-bottom-color:rgba(23,53,110,.6)}
.site-footer .rows a{min-height:40px}
.site-footer .logo-f img{filter:brightness(0) invert(1);opacity:.92}
/* ---------- 20. modern luxury pass: the display and text faces of that round (since returned to the original Marcellus, Cormorant Garamond and Jost, sections 1 and 25), watermark, play button, no stars ---------- */
html{font-weight:300}
h1,h2,h3,.disp,.display{font-family:var(--disp);font-weight:400;letter-spacing:0;line-height:1.08;font-optical-sizing:auto}
h1,.display{font-size:clamp(2.6rem,1.5rem + 4.6vw,5.2rem);line-height:1.02;letter-spacing:-.012em}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.005em}
h3{font-size:1.45rem;line-height:1.25}
.hero.short h1{font-size:clamp(2.3rem,1.3rem + 3.6vw,4.2rem)}
.lede{font-family:var(--disp);font-style:normal;font-weight:400;font-size:clamp(1.2rem,1.02rem + .8vw,1.5rem);line-height:1.5;letter-spacing:.004em}
.hero .lede{font-size:clamp(1.15rem,1rem + .7vw,1.4rem)}
.motto,.quote,.quote-block blockquote,.cap,.figcap,.award .a-note,.card .num,.entry,.tq,.status,.margin .cap,.dest .tcap small{font-family:var(--edit);font-style:italic;font-weight:400}
.motto{font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1.15}
.quote,.quote-block blockquote{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.1rem);line-height:1.4}
.cap,.figcap{font-size:1.02rem;line-height:1.5}
.entry,.tq{font-size:1.12rem;line-height:1.6}
.menu-list a{font-family:var(--disp);font-size:1.6rem;letter-spacing:0}
.milestones .year{font-family:var(--disp);letter-spacing:.02em}
.people .who{font-family:var(--disp);font-size:1.2rem}
.dest .tcap{font-family:var(--disp);font-size:1.5rem;letter-spacing:0}
.work a,.award .a-title{font-family:var(--disp)}
.port h3{font-size:1.9rem}
.eyebrow,.fact,.note,.when,cite,.ui,.glance li,.topbar,.nav,.btn,.menu-btn,.close-btn,.chip,.people .role,.award .a-by,.taprow .k,.textlink,.rows a,.film-ctl,.legalbar,.site-footer h2,.field label{font-weight:500}
.eyebrow{letter-spacing:.3em}
.btn{letter-spacing:.24em;font-weight:500}
.nav{font-weight:500}
/* the hero copy sits bottom-left, always */
.hero .wrap{align-items:flex-start;text-align:left}
.hero .medallion{display:none}
/* the medallion becomes a watermark in the ivory space under the visual */
.has-watermark{position:relative;overflow:hidden}
.has-watermark>.wrap{position:relative;z-index:1}
.watermark{position:absolute;right:-160px;top:-40px;width:720px;height:720px;color:var(--cobalt);opacity:.09;pointer-events:none;z-index:0}
.watermark svg,.watermark .medallion{position:static;translate:none;width:100%;height:100%;display:block;opacity:1;right:auto;top:auto;color:var(--cobalt)}
html.motion .watermark svg{animation:medallion-turn 300s linear infinite}
@media (max-width:700px){.watermark{width:440px;height:440px;right:-220px;top:-90px;opacity:.07}}
/* the bordür, a touch softer */
.cini-band{opacity:.82}
/* round play button */
.port-film .film-btn{cursor:pointer}
.port-film .film-label{position:absolute;left:50%;top:calc(50% - 11px);bottom:auto;transform:translate(-50%,-50%);width:72px;height:72px;min-height:0;padding:0;border-radius:50%;background:rgba(249,246,239,.92);color:var(--cobalt);box-shadow:0 14px 34px -14px rgba(13,31,68,.55);font-size:0;letter-spacing:0;display:flex;align-items:center;justify-content:center;transition:transform var(--d-state) var(--ease),opacity var(--d-state) var(--ease),background var(--d-state)}
.port-film .film-label::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent var(--cobalt);margin-left:5px}
.port-film .film-btn:hover .film-label,.port-film .film-btn:focus-visible .film-label{transform:translate(-50%,-50%) scale(1.06);background:var(--ivory)}
.port-film.is-playing .film-label{opacity:0}
.port-film.is-playing .film-btn:hover .film-label,.port-film.is-playing .film-btn:focus-visible .film-label{opacity:1}
.port-film.is-playing .film-label::after{width:18px;height:22px;border:0;border-left:6px solid var(--cobalt);border-right:6px solid var(--cobalt);margin:0}
@media (max-width:700px){.port-film .film-label{width:60px;height:60px}}
/* cards, calmer */
.card{border-color:rgba(23,53,110,.12);padding:36px 32px}
.card:hover,.card:focus-within{transform:none;box-shadow:0 18px 40px -28px rgba(13,31,68,.35)}
.card h3{margin-top:0}
.card .star{display:none}
.star{display:none}
.cap .star{display:none}
/* ---------- 21. round three: lightbox, icon film controls, Español pill, bigger family photograph ---------- */
.split--photo{grid-template-columns:1.18fr 1fr}
@media (max-width:960px){.split--photo{grid-template-columns:1fr}}
.scrollcue{display:none}
/* hero film control as a round icon */
.hero .film-ctl{width:48px;height:48px;border-radius:50%;border:1px solid rgba(249,246,239,.6);padding:0;margin:0;font-size:0;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ivory);transition:background var(--d-state),border-color var(--d-state)}
.hero .film-ctl:hover{background:rgba(249,246,239,.15);border-color:var(--ivory)}
.hero .film-ctl::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--ivory);margin-left:3px}
.hero.is-playing .film-ctl::after{width:12px;height:14px;border:0;border-left:4px solid var(--ivory);border-right:4px solid var(--ivory);margin:0}
/* Español, easy to find */
@media (min-width:1024px){
.nav .lang{border:1px solid var(--cobalt);padding:9px 16px;min-height:0;border-radius:999px;margin-left:10px;font-size:.66rem;letter-spacing:.2em;color:var(--cobalt);transition:background var(--d-state),color var(--d-state)}
.nav .lang::after{display:none}
.nav .lang:hover,.nav .lang:focus-visible{background:var(--cobalt);color:var(--ivory)}
}
.menu-foot .lang{display:flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--cobalt);border-radius:999px;color:var(--cobalt);text-decoration:none}
.site-footer .legalbar .lang{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--gold)}
/* photographs open large: a zoom affordance on hover, a dialog lightbox */
.plate,.dest{position:relative}
.zoom{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(249,246,239,.92) url("data:image/svg+xml;utf8,") center/18px no-repeat;box-shadow:0 10px 24px -12px rgba(13,31,68,.55);opacity:0;transform:translateY(-4px);transition:opacity var(--d-state) var(--ease),transform var(--d-state) var(--ease),background-color var(--d-state);cursor:zoom-in}
.plate:hover .zoom,.dest:hover .zoom,.zoom:focus-visible{opacity:1;transform:none}
.zoom:hover{background-color:var(--ivory)}
@media (hover:none){.zoom{opacity:.92;transform:none}}
.port-film .zoom{display:none}
.lightbox{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;color:var(--ivory)}
html.js .lightbox:not([open]){display:none}
.lightbox[open]{display:grid;place-items:center;animation:menu-in var(--d-menu-in) var(--ease)}
.lightbox::backdrop{background:rgba(13,31,68,.94)}
.lb-frame{display:grid;gap:16px;justify-items:center;max-width:min(92vw,1400px);padding:0 16px}
.lb-frame img{max-width:min(92vw,1400px);max-height:76dvh;width:auto;height:auto;display:block;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.lb-cap{font-family:var(--edit);font-style:italic;font-size:1.08rem;line-height:1.5;text-align:center;max-width:70ch;color:rgba(249,246,239,.88);margin:0}
.lb-close,.lb-prev,.lb-next{position:fixed;z-index:2;width:52px;height:52px;border-radius:50%;background:rgba(249,246,239,.1);border:1px solid rgba(249,246,239,.35);color:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--d-state)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(249,246,239,.24)}
.lb-close{top:22px;right:22px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close::before,.lb-close::after{content:'';position:absolute;width:20px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-prev::before,.lb-next::before{content:'';width:12px;height:12px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(-45deg);margin-left:4px}
.lb-next::before{transform:rotate(135deg);margin:0 4px 0 0}
.lightbox :focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
@media (max-width:700px){.lb-prev,.lb-next{top:auto;bottom:18px;transform:none}.lb-prev{left:18px}.lb-next{right:18px}.lb-frame img{max-height:66dvh}}
/* ---------- 22. mobile pass: a small-format edition of Çini v3 (header pill, the header opened as the menu, phone scale and rhythm) ---------- */
/* Appended LAST on purpose: several rules win only by order against sections 5, 7, 9, 12, 16, 19, 20 and 21.
Every rule lives inside a max-width or hover query, targets the dialog menu (which exists only below 1024px)
or is hidden at min-width:1024px. The two marked DESKTOP are the band-caption contrast fix (a WCAG bug the
hard rules require at every size) and .mt-list, whose desktop value equals the inline style it replaces. */
/* 22.1 phone scale and rhythm (<=700): one root step down, display sizes re-clamped, one heading-to-list step */
ul.mt-list{margin-top:36px} /* DESKTOP: identical to the inline style="margin-top:36px" it replaces on the four home lists */
@media (max-width:700px){
html{font-size:16px;line-height:1.7}
:root{--sec:56px;--sec-tight:40px;--block:28px}
h1,.display{font-size:clamp(2.2rem,1.4rem + 4vw,2.75rem);line-height:1.04}
.hero.short h1{font-size:clamp(1.9rem,1.2rem + 3.2vw,2.4rem)}
h2{font-size:clamp(1.8rem,1.2rem + 2.6vw,2.4rem);line-height:1.1}
h3{font-size:1.3rem}
.lede{font-size:1.2rem;line-height:1.5}
h1+p,h2+p,h3+p,h1+.lede,h2+.lede,h2+ul,h2+.list,h2+.plate,h2+.cards{margin-top:14px}
.eyebrow{font-size:.66rem;letter-spacing:.2em;margin-bottom:14px}
.cap,.figcap,.lb-cap{font-size:.94rem;line-height:1.45;margin-top:10px}
.dest .tcap{font-size:1.35rem;margin-top:12px}
.dest .tcap small{font-size:.94rem}
.motto{font-size:clamp(1.7rem,1.2rem + 3vw,2.2rem)}
.quote-block blockquote{font-size:clamp(1.35rem,1.1rem + 1.7vw,1.7rem);line-height:1.4}
.quote-block cite{margin-top:20px;font-size:.66rem;letter-spacing:.2em}
.when,.entry .when{font-size:.66rem;letter-spacing:.18em}
.ph-nb{white-space:nowrap} /* keeps "· May 2026" and "Point Piper" together on phones; plain spaces, so the desktop cites wrap exactly as before */
.when,.quote-block cite{text-wrap:pretty}
.entry .when > .ph-nb:last-child{display:block;margin-top:3px}.entry .when > .ph-nb:last-child .sep{display:none} /* guest-book cards: the date on its own line (25.7 also puts the place on its own line on phones) */
.mt-7{margin-top:32px}
ul.mt-list{margin-top:28px}
.sec:not(.panel):not(.band)+.sec:not(.panel):not(.band),.sec.panel+.sec.panel{padding-top:28px}
.split{gap:28px}
}
/* 22.2 safe areas (identical to today wherever the insets are 0) */
@media (max-width:1023px){
.wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.site-header{padding-top:env(safe-area-inset-top,0px)}
/* the sticky header is taller by the top inset on notched phones, so every anchor offset (sections 3, 11, 14, 19) is re-derived with it; identical where the inset is 0 */
html{scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px)}
section[id],article[id],form[id],.dest,.card[id],.port[id]{scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px)}
.field input,.field textarea{scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px)}
}
/* 22.3 header bar: logo · EN|ES control · MENU. The language control is the same two-segment .lang-sw as in the menu (one convention everywhere: EN then ES, the current edition filled); MENU and CLOSE share one 96x44 footprint; the solid fill is the open state, never a sticky touch hover */
@media (max-width:1023px){
.site-header .wrap>.lang-sw{margin-left:auto}
.menu-btn,.close-btn{display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:var(--tap);padding:0 14px;font-size:.66rem;line-height:1;letter-spacing:.22em;text-indent:.22em;white-space:nowrap}
.menu-btn:active{background:var(--cobalt);color:var(--ivory)}
}
.close-btn{background:var(--cobalt);color:var(--ivory);border-color:var(--cobalt)}
@media (hover:none){.menu-btn:hover{background:transparent;color:var(--cobalt)}}
@media (hover:hover){.close-btn:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep);color:var(--ivory)}}
@media (min-width:1024px){.site-header .wrap>.lang-sw{display:none}}
/* 22.4 the menu: the header, opened. The top row mirrors the header (same height, hairline, logo, the language control where the pill was, CLOSE on MENU's footprint); a contents-page list; one CTA and two quiet tap rows; fixed rhythm, no dead band. The dialog exists only below 1024px. */
.menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.menu-open,html.menu-open body{overflow:hidden}
.menu .wrap{min-height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.menu-top{justify-content:flex-start;gap:12px;min-height:var(--header-h);padding:10px 0;border-bottom:1px solid var(--line)}
.menu-top .lang-sw{margin-left:auto}
/* language: the two-segment control (EN then ES in both editions, the current edition filled), in the exact spot of the header control */
.lang-sw{display:inline-flex;align-items:center;flex:none;padding:2px;border:1px solid var(--cobalt);border-radius:999px;font:500 .66rem/1 var(--ui);letter-spacing:.18em;text-indent:.18em;text-transform:uppercase}
.lang-sw>*{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:38px;padding:0 8px;border-radius:999px;color:var(--cobalt);text-decoration:none;transition:background var(--d-state),color var(--d-state)}
.lang-sw .cur{background:var(--cobalt);color:var(--ivory)}
.lang-sw .lang::after{content:'';position:absolute;inset:-5px -6px} /* 46x48 hit area at 390 (44x48 at <=389) without growing the 44px pill; symmetric, since the link is the left segment in Spanish and the right one in English */
.lang-sw .lang:focus-visible{outline-offset:3px}
.lang-sw .lang:active{background:var(--ivory-2)}
@media (hover:hover){.lang-sw .lang:hover{background:var(--ivory-2)}}
/* contents page: gold folio numbers (silent for assistive tech), serif entries (the display face, section 25), the nazar at the trailing edge of the current page */
.menu-list{margin-top:8px;border-top:0;counter-reset:menu}
.menu-list a{align-items:baseline;gap:0;min-height:56px;padding:13px 2px;font-size:1.5rem;line-height:1.2;color:var(--ink);counter-increment:menu;transition:color var(--d-state)}
.menu-list a::before{content:counter(menu,decimal-leading-zero);content:counter(menu,decimal-leading-zero) / "";flex:none;width:36px;font:500 .64rem/1 var(--ui);letter-spacing:.2em;color:var(--gold-text)}
.menu-list a:active{color:var(--cobalt)}
@media (hover:hover){.menu-list a:hover{color:var(--cobalt)}}
.menu-list a:focus-visible{outline-offset:-2px}
.menu-list a[aria-current=page]{color:var(--cobalt);padding-left:2px;border-left:0}
.menu-list a[aria-current=page]::after{content:'';flex:none;align-self:center;margin-left:auto;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 42% 42%,var(--ink) 0 15%,#fff 15% 32%,var(--turquoise) 32% 58%,#fff 58% 70%,var(--gold) 70% 100%)}
/* foot: one solid action, then three quiet label-left / value-right rows between gold hairlines (WhatsApp, office, e-mail: the three channels of the desktop topbar); margin-top:auto pins it to the bottom of the sheet (the .wrap is a flex column of 100dvh, section 5) so the sheet composes to the viewport on every phone height */
.menu-foot{margin-top:auto;padding-top:24px;display:grid;gap:0}
.menu-foot .btn{min-height:var(--control);margin-bottom:20px}
.menu-foot .taprow{flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;border-top:1px solid var(--line-gold)}
.menu-foot .taprow:last-of-type{border-bottom:1px solid var(--line-gold)}
.menu-foot .taprow .k{flex:0 1 auto;font-size:.64rem;letter-spacing:.2em;line-height:1.4;color:var(--gold-text);white-space:nowrap}
.menu-foot .taprow .v{flex:none;text-align:right;font-size:.98rem;line-height:1.3;color:var(--cobalt)}
.menu-foot .taprow--mail .v{flex:0 1 auto;min-width:0;font-size:.92rem;overflow-wrap:anywhere}
@media (hover:none){.taprow:hover .v{border-color:transparent}}
/* tall phones get more generous rows */
@media (min-height:760px) and (max-width:1023px){.menu-list{margin-top:12px}.menu-list a{min-height:64px;padding:16px 2px;font-size:1.65rem}.menu-foot{padding-top:32px}}
/* narrow phones (360/320 Androids, 375 iPhones): one size down so "Excursiones en puerto" with the folio and the nazar stays on one line; placed after the tall-phone tier so it wins at 360x800 too */
@media (max-width:374px){.menu-list a{font-size:1.36rem}}
@media (max-width:359px){.menu-list a{font-size:1.25rem}}
/* tablets: not an enlarged phone but a 520px sheet at the right edge over the dimmed page; CLOSE still sits on MENU's footprint because both keep the gutter from the right edge */
@media (min-width:600px) and (max-width:1023px){
.menu{left:auto;right:0;width:min(520px,100%);box-shadow:-30px 0 70px -40px rgba(13,31,68,.5)}
.menu::backdrop{background:rgba(13,31,68,.42)}
.menu[open]{animation:sheet-in var(--d-menu-in) var(--ease)}
.menu.is-closing{animation:sheet-out var(--d-menu-out) var(--ease) forwards}
.menu-list,.menu-foot{max-width:none}
.menu-list a{min-height:68px;padding:15px 2px;font-size:1.8rem}
.menu-foot{margin-top:48px} /* on the tall tablet sheet the foot follows the list rather than pinning half a screen lower */
}
@keyframes sheet-in{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes sheet-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(24px)}}
/* entries settle in 30ms apart; html.motion only, and the reduced-motion block in section 13 zeroes every duration */
html.motion .menu[open] .menu-list a{animation:menu-item var(--d-menu-in) var(--ease) both}
html.motion .menu[open] .menu-list a:nth-child(2){animation-delay:30ms}
html.motion .menu[open] .menu-list a:nth-child(3){animation-delay:60ms}
html.motion .menu[open] .menu-list a:nth-child(4){animation-delay:90ms}
html.motion .menu[open] .menu-list a:nth-child(5){animation-delay:120ms}
html.motion .menu[open] .menu-foot{animation:menu-item var(--d-menu-in) var(--ease) 140ms both}
html.motion .menu.is-closing .menu-list a,html.motion .menu.is-closing .menu-foot{animation:none}
@keyframes menu-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* narrow phones: at 375px the menu top row keeps 30px of slack (131 logo + 70 control + 84 CLOSE + 16 gaps of 331); at 320px, 11px */
@media (max-width:389px){
.site-header .wrap,.menu-top{gap:8px}
.menu-btn,.close-btn{min-width:84px;padding:0 10px}
.lang-sw>*{min-width:32px;padding:0 7px}
}
@media (max-width:359px){
:root{--gutter:18px}
.logo img,.menu-top .logo img{height:36px}
.menu-btn,.close-btn{min-width:80px}
.menu-foot .taprow--mail .v{font-size:.84rem}
.band .trust .wrap{gap:14px 18px} /* the About band strip has 256px inside its two gutters at 320: a 4px tighter column gap keeps the 3 / 2 / 2 composition */
}
/* 22.5 the language link in the footer legal bar: a quiet pill on phones and tablets, hidden on desktop */
@media (max-width:1023px){
.site-footer .legalbar{align-items:center}
.site-footer .legalbar .lang{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 16px;border:1px solid rgba(249,246,239,.4);border-radius:999px;color:var(--ivory);text-decoration:none;letter-spacing:.2em;text-indent:.2em;transition:background var(--d-state),color var(--d-state)}
.site-footer .legalbar .lang:focus-visible,.site-footer .legalbar .lang:active{background:var(--ivory);color:var(--cobalt-deep)}
}
@media (hover:hover){.site-footer .legalbar .lang:hover{background:var(--ivory);color:var(--cobalt-deep)}}
@media (max-width:700px){.site-footer .legalbar{flex-direction:column;align-items:flex-start;gap:4px;padding-top:18px}.site-footer .legalbar .lang{order:-1;margin-bottom:10px}}
@media (min-width:1024px){.site-footer .legalbar .lang{display:none}}
/* 22.6 hero: a first screen that ends on the glance rule */
@media (max-width:1023px){
.hero .film-ctl{display:none}
.hero .eyebrow{align-items:flex-start}
.hero .eyebrow::before{margin-top:.6em}
}
@media (max-width:700px){
.hero .wrap{min-height:min(calc(100svh - var(--header-h)),780px);padding-top:48px;padding-bottom:36px}
.hero.short .wrap{min-height:clamp(320px,44svh,440px);padding-top:48px;padding-bottom:40px}
.hero .lede{font-size:1.1rem;line-height:1.5;margin-top:16px}
.hero .lede+.lede{margin-top:8px}
.glance{margin-top:26px}
}
@media (max-width:480px){
.hero h1{max-width:none}
html[lang=es] .hero:not(.short) h1{font-size:2.3rem}
html[lang=es] .hero.short h1{font-size:1.95rem}
.hero .eyebrow{font-size:.64rem;letter-spacing:.14em;gap:10px}
.hero .eyebrow::before{width:20px}
.hero .actions{align-self:stretch;width:100%;gap:12px;margin-top:26px}
.hero .actions .btn{width:100%}
.hero .actions .btn.solid{order:-1}
.glance{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;margin-top:26px;padding-top:6px}
.glance li{padding:8px 0 0;margin:0;border:0;font-size:.68rem;letter-spacing:.16em;line-height:1.5;color:rgba(249,246,239,.8)}
.glance li:nth-child(n+3){grid-column:1 / -1}
html[lang=es] .glance{grid-template-columns:1fr}
}
@media (max-width:359px){.glance{grid-template-columns:1fr}} /* at 320 "Three generations" no longer fits beside the first fact, so every fact takes its own line, as in Spanish */
/* 22.7 buttons on phones: full-width labels may wrap centred, never clip; .ph-hide trims the middle of a long label below 480px (inline, so the desktop render is byte-identical) */
@media (max-width:480px){
.ph-hide{display:none}
.btn{padding:14px 22px;letter-spacing:.2em;white-space:normal;line-height:1.45}
.btn.sm{padding:12px 18px}
.lede+.btn,p+.btn{margin-top:24px}
.actions{gap:12px;margin-top:26px}
}
/* 22.8 photographs, ports, cards, ledger, awards, people, trust marks, ornament */
.band .cap,.band .figcap,.band figcaption{color:rgba(249,246,239,.8)} /* DESKTOP too: cobalt on cobalt-deep was ~1.1:1; ivory .8 is ~11:1 */
@media (max-width:960px){
.port,.port:nth-child(even),.port:nth-of-type(even){grid-template-columns:1fr}
.port:nth-child(even)>:first-child,.port:nth-of-type(even)>:first-child{order:0}
}
@media (max-width:1023px){.card.xcard{padding:0}.xcard picture img{width:100%}}
@media (max-width:700px){
.port{padding:32px 0;gap:22px}
.port h3{font-size:1.55rem}
.port .plate picture,.port .port-film .film-btn picture{margin-bottom:16px}
.cards,.grid2,.grid3,.grid4{gap:14px}
.card{padding:24px 22px 26px}
.card::before{left:22px;right:22px}
.card h3{font-size:1.3rem;margin-bottom:8px}
.card p{font-size:.95rem;line-height:1.6}
.xcard .xbody{padding:20px 22px 24px}
.ledger{gap:14px}
.entry{padding:22px 20px 20px;font-size:1.02rem;gap:14px}
.entry::before{left:20px}
.awards{gap:12px}
.award{padding:22px 20px}
.award .a-title{font-size:1.25rem}
.award .a-by{font-size:.66rem;letter-spacing:.24em}
.award .a-note{font-size:.95rem}
.milestones li{padding:20px 0}
.milestones p{font-size:.95rem}
.trust .wrap{gap:14px 22px;padding:18px 16px}
/* the marks (Virtuoso, Ensemble, ASTA, Go Türkiye) and the wordmarks (Signature, USTOA, TÜRSAB) get their own boxes so they weigh the same; the last four take half a row each, so the seven compose 3 / 2 / 2; no phone greyscale, section 7 (hover:none) keeps them in full colour */
.trust img{max-height:40px;max-width:120px}
.trust img.h36,.trust img.h44,.trust img.h46{max-height:26px;max-width:96px}
.trust img.h66{max-height:52px} /* the Virtuoso PNG carries its own padding, so at the common cap it read a size smaller than the rest */
.trust img.h48{max-height:34px}.trust img.h50{max-height:36px} /* ASTA and Go Türkiye a notch down, so the seven read as one weight */
.trust a:nth-child(n+4){flex:0 0 calc(50% - 11px);justify-content:center}
.band .trust{margin-top:22px}
.band .trust .wrap{padding:16px 14px}
.watermark{width:320px;height:320px;right:-150px;top:-130px;opacity:.06}
.chip{font-size:.66rem;letter-spacing:.18em;padding:6px 11px;margin:3px 5px 3px 0}
}
@media (max-width:359px){.trust img.h66{max-height:42px}} /* keeps the 3 / 2 / 2 strip composed on the About band at 320 */
@media (max-width:480px){
.people{gap:12px}
.people li{padding:24px 12px 20px}
.people picture{width:96px;height:96px;margin-bottom:16px}
.people .who{font-size:1.1rem;text-wrap:balance}
.people .role{font-size:.66rem;letter-spacing:.14em;text-wrap:balance}
}
/* touch: the zoom mark is a quiet 44px translucent glyph, not a white badge; the map lets the page scroll over it */
@media (hover:none){
.zoom{width:44px;height:44px;top:10px;right:10px;opacity:1;transform:none;box-shadow:none;background-color:rgba(13,31,68,.42);background-image:url("data:image/svg+xml;utf8,");background-size:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zoom:hover{background-color:rgba(13,31,68,.42)}
.zoom:focus-visible{outline-color:var(--ivory)}
.mount>iframe{pointer-events:none}
}
/* 22.9 contact sheet, form, lightbox */
@media (max-width:1023px){
.center .card p>a{display:inline-flex;align-items:center;min-height:var(--tap)}
.map-open{margin-top:4px}.map-open a{display:inline-flex;align-items:center;min-height:var(--tap)} /* the embedded map is inert on touch screens (22.8), so the way into Google Maps sits right under it */
.lb-close{top:calc(22px + env(safe-area-inset-top,0px))}
}
@media (max-width:700px){
.grid3.center{gap:12px}
.center .card,.card.center{text-align:left;padding:22px 22px 24px}
.center .card h3{font-size:1.25rem;margin:0 0 6px;text-wrap:pretty}
.center .card p{font-size:.95rem;line-height:1.6}
.center .card p+p{margin-top:8px}
.field{margin-bottom:22px}
.form .btn{width:100%;margin-top:4px}
.form .status{min-height:0;margin-top:0}
.form .status:not(:empty){margin-top:14px}
.lb-prev,.lb-next{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
/* 22.10 footer: two lists side by side under the brand, 44px rows without sitemap underlines, office links with real hit areas */
@media (max-width:1023px){
.site-footer .rows a{text-decoration:none;min-height:var(--tap)}
.site-footer .rows a:focus-visible span:first-child{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.site-footer .office a{display:inline-block;padding-block:10px;margin-block:-10px}
.site-footer .office p+p{margin-top:12px}
}
@media (max-width:600px){
.site-footer .cols{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:26px;padding:20px 0 28px}
.site-footer .brand,.site-footer .office{grid-column:1 / -1}
.site-footer h2{margin-bottom:6px}
.site-footer .blurb{margin-top:12px;font-size:.86rem}
.site-footer .rows a{font-size:.86rem;line-height:1.35}
.site-footer .logo-f img{height:44px}
}
/* ---------- 23. the Heritage affiliations band: the partner marks as ivory renditions straight on the cobalt (img/*-mono-480w.png from tools/mono.mjs, the logo wall on a dark ground), between two quiet hairlines; the ivory box is gone, the award plaques beneath are unchanged ---------- */
.band .trust{background:transparent;border-top:1px solid rgba(249,246,239,.16);border-bottom:1px solid rgba(249,246,239,.16);margin-top:32px}
.band .trust .wrap{padding:30px 0;gap:20px 40px} /* no inner gutter: the hairlines are the frame, and the seven marks fit one row inside the band wrap at 1440 */
.band .trust a{filter:none;opacity:.82}
.band .trust a:hover,.band .trust a:focus-visible{opacity:1}
@media (max-width:700px){.band .trust{margin-top:24px}.band .trust .wrap{padding:22px 14px;gap:14px 22px}} /* the 22px column gap is what the 3 / 2 / 2 phone composition in 22.8 (calc(50% - 11px)) assumes */
@media (max-width:359px){.band .trust .wrap{gap:14px 18px}} /* as 22.4 at 320 */
/* ---------- 24. (retired in round seven) the footer frieze, the İstanbul skyline drawn as one fountain-pen line: replaced by the whirling dervish of section 27. assets/frieze-istanbul.svg stays in the repository, unreferenced ---------- */
/* ---------- 25. the type system on the original faces (round seven, at the client's request: "the original fonts"): Marcellus for display, Cormorant Garamond italic for the editorial voice, Jost for text and the interface, as on the first UTS site (section 1). The approved structure of round five is kept and the faces are swapped into it, after the client's travel poster, whose mechanism is one short word set wide and letterspaced between two soft italic lines. On the home page the headline is that word: an italic gold line, the headline in Marcellus capitals with generous tracking (lining figures), an italic lede. On the interior pages the word is the page name: the hero eyebrow becomes the poster word (Marcellus capitals, wide tracking, a 56px gold rule under it instead of the hairline before it), then the headline in Marcellus mixed case and the lede in italic. Marcellus has a single weight, so every display role is 400 with font-synthesis off and the hierarchy comes from size, case and tracking, never from a faux bold. Cormorant Garamond's x-height is small (.41 of the em against .53 for the face it replaces), so every italic role is set about a fifth larger than in round five, which keeps the measures and line breaks of the approved layout while the italics read at least as large; all italics are 500, the weight the original used for its ledes and quotations. Jost is 300 for running text (17px/1.75, 16px/1.7 on phones, section 3 and 22.1) and 500 in tracked capitals for navigation, buttons, eyebrows, facts, chips, guest-book signatures and the footer lists, at the sizes and tracking of sections 4 to 22. Appended after the phone pass on purpose: the phone tiers repeat the selectors of 22.1, 22.6, 22.8 and 22.9 at equal or higher specificity, so they win by order. ---------- */
/* 25.1 the display roles: Marcellus 400 everywhere, synthesis off as a guard; the scale */
:root{--fs-display:clamp(2.4rem,1.3rem + 4.1vw,4.5rem)}
h1,h2,h3,.disp,.display,.hero.short .eyebrow,.award .a-title,.people .who,.dest .tcap,.milestones .year,.work a,.menu-list a{font-family:var(--disp);font-weight:400;font-style:normal;font-synthesis:none}
h1,h2,h3,.disp,.display{color:var(--cobalt);line-height:1.14;letter-spacing:.005em;text-wrap:balance;margin:0}
h1,.display{font-size:var(--fs-display);line-height:1.08;letter-spacing:0}
h2{font-size:clamp(1.75rem,1.1rem + 2.05vw,2.45rem);line-height:1.15;letter-spacing:0} /* 42px at 1440: the split-column h2s ("Three decades of holding / our guests’ hands") keep their two lines */
h3{font-size:1.32rem;line-height:1.3;letter-spacing:.02em}
.port h3{font-size:1.65rem;line-height:1.2;letter-spacing:.01em}
.card h3{font-size:1.24rem;line-height:1.3;letter-spacing:.015em} /* the four-up home cards balance "Tailor-made / journeys" onto two lines */
/* 25.2 the home hero, the poster's three lines: italic line · TRACKED CAPITALS · italic line. The headline is the poster word here (Marcellus capitals at .12em, lining figures), the eyebrow the soft line above it in gold italic with its rule kept, the lede the soft line below. Türkiye is marked lang="tr" in the two home h1s so the capitals read TÜRKİYE */
.hero h1{color:var(--ivory);max-width:13em}
.hero:not(.short) .eyebrow{font:italic 500 clamp(1.3rem,1.1rem + .6vw,1.6rem)/1.35 var(--edit);font-synthesis:none;letter-spacing:.005em;text-transform:none;color:var(--gold-on-cobalt);margin:0 0 16px;gap:14px;align-items:center}
.hero:not(.short) .eyebrow::before{width:34px;height:1px;background:var(--gold);margin-top:0}
.hero:not(.short) h1{text-transform:uppercase;letter-spacing:.12em;line-height:1.14;font-size:clamp(2.3rem,1.2rem + 3.3vw,4.1rem);max-width:min(100%,14em);font-variant-numeric:lining-nums}
.hero .lede{font-family:var(--edit);font-style:italic;font-weight:500;font-size:clamp(1.3rem,1.1rem + .6vw,1.55rem);line-height:1.45;letter-spacing:.005em;color:rgba(249,246,239,.9);max-width:50ch;margin:22px 0 0}
.hero .lede+.lede{margin-top:8px;text-wrap:balance} /* the closing soft line: "Private, precise, and / personally accompanied." on narrow phones, never one word alone */
/* 25.3 the interior heroes: the page name as the poster word (Heritage, Services, Shore excursions, Contact, 404 and the Spanish forms) in Marcellus capitals at .16em, the short gold rule under it, then the headline in Marcellus mixed case, visibly larger than the section h2s beneath (47px against 42px at 1440, and set apart by the rule), and the lede in italic. Spanish page names are long (Excursiones en puerto), so they take a smaller cap and hold one line at 1440 */
.hero.short .eyebrow{display:block;font-size:clamp(2.3rem,1.3rem + 3vw,3.9rem);line-height:1.06;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--ivory);margin:0 0 22px;max-width:none;text-wrap:balance;text-indent:0}
.hero.short .eyebrow::before{display:none}
.hero.short .eyebrow::after{content:'';display:block;width:56px;height:1px;background:var(--gold);margin:22px 0 0}
html[lang=es] .hero.short .eyebrow{font-size:clamp(2.1rem,1.25rem + 2.5vw,3.4rem);letter-spacing:.14em}
.hero.short h1{font-size:clamp(2rem,1.2rem + 2.1vw,2.75rem);line-height:1.16;letter-spacing:.005em;max-width:min(100%,17em)} /* em, not ch: Marcellus figures are wide, so 28ch would let the Spanish headlines run on one long line */
.hero.short .lede{font-size:clamp(1.28rem,1.1rem + .55vw,1.5rem);max-width:50ch;margin-top:16px}
h1 .ph-nb{white-space:nowrap} /* headline phrases held together at every width (the phone-only rule is 22.1): the Spanish Services headline reads "Todo lo que hay entre / la puerta del avión y el recuerdo" from 701px up, not "entre la / puerta" */
/* 25.4 the editorial italics, all Cormorant Garamond italic 500: ledes, the motto, quotations and their signatures, captions, the guest book, award and tile notes, the form status, the footer blurb. The quotation measure is 880px so the Services quotation holds two lines instead of breaking at "1-to-/10". The pull-quote signature is the poster's small italic last line, in gold; the guest-book signatures (.entry .when) stay in Jost capitals, where "Mark J." cannot read as "Mark F." */
.lede,.motto,.quote,.quote-block blockquote,.quote+cite,.quote-block cite,.cap,.figcap,.margin .cap,.lb-cap,.status,.card .num,.entry,.tq,.award .a-note,.dest .tcap small,.site-footer .blurb{font-family:var(--edit);font-style:italic;font-weight:500;font-synthesis:none;text-wrap:pretty}
.lede{font-size:clamp(1.28rem,1.08rem + .6vw,1.5rem);line-height:1.5;letter-spacing:.005em;color:var(--cobalt);max-width:50ch}
.band .lede{color:rgba(249,246,239,.88)}
.motto{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.5rem);line-height:1.2;letter-spacing:0;color:var(--cobalt);max-width:none}
.quote-block{max-width:880px}
.quote,.quote-block blockquote{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.1rem);line-height:1.45;letter-spacing:0;color:var(--cobalt);font-variant-numeric:lining-nums} /* lining figures in the quotations: Cormorant's old-style 1 reads as a dotless i in "1-to-10" and "117" */
.quote+cite,.quote-block cite{display:block;margin-top:24px;font-size:1.26rem;line-height:1.45;letter-spacing:.005em;text-transform:none;color:var(--gold-text)}
.band cite,.band .quote-block cite{color:var(--gold-on-cobalt)}
.cap,.figcap,.margin .cap{font-size:1.16rem;line-height:1.5;letter-spacing:.005em}
.lb-cap{font-size:1.26rem;line-height:1.45}
.status{font-size:1.22rem;line-height:1.55}
.card .num{font-size:1.2rem}
.entry,.tq{font-size:1.26rem;line-height:1.55;letter-spacing:.005em}
.award .a-note{font-size:1.16rem;line-height:1.45}
.dest .tcap small{font-size:1.16rem;line-height:1.45;letter-spacing:.005em}
.site-footer .blurb{font-size:1.16rem;line-height:1.55;color:rgba(249,246,239,.8)}
.site-footer .office .sub{font-weight:400} /* the 12px notes under the office numbers, on the deep cobalt: Jost 300 is too fine at that size on a dark ground */
.entry .when .ph-nb{white-space:nowrap}.entry .when > .ph-nb:last-child{display:block;margin-top:3px}.entry .when > .ph-nb:last-child .sep{display:none} /* guest-book signatures at every width: from 701px up, name · place on one line and the date on its own; on phones (25.7) name / place / date on three lines with no separators, so no line ever starts or ends on a stray dot and no date splits as "mayo / de 2026" */
@media (max-width:1180px){.entry .when{letter-spacing:.18em}} /* the phone tracking from 1180 down, so the place line holds in the narrower cards at 1024 */
.list li{text-wrap:pretty} /* the nazar proof-point lists, like p: no single-word last line (“travelling / guest.” at 1440) */
#work .card p,.xcard p{text-wrap:balance} /* the four-up and three-up card texts end on a full line, never on "imposibles." or "requests." alone */
#founder .motto+.lede{text-wrap:balance} /* the translation under the Turkish motto breaks between its two halves: "the work you love, / in the style you love." */
/* 25.5 the small display roles, Marcellus 400 with a little air; the ledger years in lining figures so they sit level; the menu list with the tiers of 22.4 */
.award .a-title{font-size:1.34rem;line-height:1.25;letter-spacing:.03em}
.people .who{font-size:1.14rem;line-height:1.3;letter-spacing:.02em}
.people .role{text-wrap:balance} /* at every width, as 22.9 does on phones: "VICE CHAIRMAN / OF THE BOARD", never "BOARD" alone */
.dest .tcap{font-size:1.36rem;line-height:1.25;letter-spacing:.03em}
.milestones .year{font-size:clamp(1.45rem,1.15rem + .9vw,1.85rem);line-height:1.1;letter-spacing:.06em;font-variant-numeric:lining-nums}
.work a{font-size:1.22rem;line-height:1.3;letter-spacing:.015em}
.menu-list a{font-size:1.4rem;line-height:1.2;letter-spacing:.03em}
@media (min-height:760px) and (max-width:1023px){.menu-list a{font-size:1.5rem}}
@media (max-width:374px){.menu-list a{font-size:1.28rem}} /* after the tall-phone tier, so it wins at 360x800 as in 22.4 */
@media (max-width:359px){.menu-list a{font-size:1.18rem}}
@media (min-width:600px) and (max-width:1023px){.menu-list a{font-size:1.65rem}}
/* 25.6 phones and tablets: the home eyebrow is one italic line, so its rule sits centred on it (22.6 pins the rule to the first line of a wrapping tracked label) */
@media (max-width:1023px){
.hero:not(.short) .eyebrow{align-items:center;gap:12px}
.hero:not(.short) .eyebrow::before{width:22px;margin-top:0}
}
/* 25.7 phones (<=700): one step down. Home: eyebrow 20px, capitals 31px at .1em on two lines, lede 20px. Interiors: poster word 31px (Spanish 28px), headline 26px, lede 20px, the first screen still ending on the glance rule */
@media (max-width:700px){
h1,.display{font-size:clamp(2.05rem,1.25rem + 3.6vw,2.5rem);line-height:1.1}
.hero:not(.short) .eyebrow{font-size:1.25rem;margin-bottom:12px}
.hero:not(.short) h1{font-size:clamp(1.8rem,1.25rem + 2.9vw,2.1rem);letter-spacing:.1em;line-height:1.18;max-width:none}
.hero.short .eyebrow{font-size:clamp(1.95rem,1.15rem + 3vw,2.45rem);letter-spacing:.14em;margin-bottom:16px}
.hero.short .eyebrow::after{width:44px;margin-top:14px}
html[lang=es] .hero.short .eyebrow{font-size:clamp(1.75rem,1.05rem + 2.6vw,2.15rem);letter-spacing:.12em}
.hero.short h1{font-size:clamp(1.55rem,1.15rem + 1.7vw,1.8rem);line-height:1.2;max-width:none}
h2{font-size:clamp(1.6rem,1.15rem + 2.2vw,2.05rem);line-height:1.18}
h3{font-size:1.24rem}
.port h3{font-size:1.5rem}
.card h3{font-size:1.2rem;margin-bottom:8px}
.center .card h3{font-size:1.2rem;text-wrap:balance} /* balance over the pretty of 22.9: "Llámenos o escríbanos / por WhatsApp" at 360, 320 and 700, never "WhatsApp" alone */
.lede{font-size:1.28rem;line-height:1.5}
.hero .lede,.hero.short .lede{font-size:1.24rem;line-height:1.45;margin-top:16px}
.hero .lede+.lede{margin-top:8px}
.cap,.figcap,.margin .cap{font-size:1.1rem;line-height:1.45;margin-top:10px}
.lb-cap{font-size:1.1rem;line-height:1.45} /* keeps its margin:0 inside the lightbox grid */
.dest .tcap{font-size:1.3rem;margin-top:12px}
.dest .tcap small{font-size:1.1rem}
.motto{font-size:clamp(1.8rem,1.3rem + 2.4vw,2.25rem);line-height:1.25}
.quote,.quote-block blockquote{font-size:clamp(1.42rem,1.2rem + 1.4vw,1.72rem);line-height:1.45}
.quote-block cite{margin-top:18px;font-size:1.16rem;letter-spacing:.005em}
.entry,.tq{font-size:1.18rem;line-height:1.5}
.award .a-title{font-size:1.24rem}
.award .a-note{font-size:1.1rem}
.people .who{font-size:1.08rem}
.work a{font-size:1.14rem}
.site-footer .blurb{font-size:1.1rem}
.entry .when .pl{display:block;margin-top:3px}.entry .when .sep{display:none} /* guest-book signatures: name / place / date, the same three lines on every card, no separators */
}
/* 25.8 narrow phones: the Spanish capitals (EN TÜRKİYE, CUENTE / CON NOSOTROS) hold two lines at 390 and 375 and at most three at 360 and 320; the English ones one step down at 320 */
@media (max-width:480px){
.hero h1,.hero:not(.short) h1{max-width:none}
.hero:not(.short) .eyebrow{font-size:1.22rem;letter-spacing:.005em;gap:10px}
.hero:not(.short) .eyebrow::before{width:20px}
html[lang=es] .hero:not(.short) h1{font-size:1.74rem;letter-spacing:.08em}
html[lang=es] .hero.short h1{font-size:1.5rem}
.people .who{font-size:1.05rem;letter-spacing:0} /* two-up cards: "Joebert Opulencia" holds one line at 390 */
}
@media (max-width:374px){html[lang=es] .hero:not(.short) h1{font-size:1.64rem}}
@media (max-width:359px){
.hero:not(.short) h1{font-size:1.6rem}
html[lang=es] .hero:not(.short) h1{font-size:1.45rem}
.hero.short h1{font-size:1.45rem}
html[lang=es] .hero.short h1{font-size:1.4rem}
}
/* 25.9 the desktop header fits its 1180px column: the vw gaps of sections 5 and 18 kept growing past 1236px while the column stopped, so the CTA overhung the topbar and page edge (76px in English at 1440); with these gaps it ends on the column edge from 1181 up in both languages (1024-1180 keep the tier of section 5) */
@media (min-width:1181px){.nav{gap:clamp(18px,1.55vw,22px)}.site-header .wrap{gap:28px}html[lang=es] .nav{gap:clamp(12px,1.4vw,18px)}}
/* 25.10 the home hero glance row holds one line: the Spanish facts a little less tracked from 1024 up (the last one needs no trailing space), and both languages tighter between 1024 and 1180, so no fact drops to a second row on its own after a hanging divider; phones (22.6) are untouched */
@media (min-width:1024px){html[lang=es] .glance li{letter-spacing:.17em}html[lang=es] .glance li:last-child{margin-right:0;padding-right:0}}
@media (min-width:1024px) and (max-width:1180px){.glance li{letter-spacing:.14em;padding-right:16px;margin-right:16px}html[lang=es] .glance li{letter-spacing:.1em;padding-right:12px;margin-right:12px}}
/* ---------- 26. round six: the balloon film plays on phones and tablets too ---------- */
/* the round play/pause control of section 21 shows wherever the film runs (js/site.js marks it .is-ready); on narrow phones the
actions stack full width, so the control sits in the hero's top-right corner, over the sky */
@media (max-width:1023px){.hero .film-ctl{display:inline-flex}}
@media (max-width:480px){
.hero .film-ctl{position:absolute;top:18px;right:max(var(--gutter),env(safe-area-inset-right,0px));width:44px;height:44px;background:rgba(13,31,68,.24);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero .film-ctl::after{border-width:6px 0 6px 10px;margin-left:3px}
.hero.is-playing .film-ctl::after{width:10px;height:12px;border-left-width:3px;border-right-width:3px;margin:0}
}
/* ---------- 27. the whirling dervish in the footer (round seven, in place of the frieze of section 24): a small white figure of the sema, a smooth-shaded porcelain figurine drawn in a canvas by js/site.js, turning in place on the deep cobalt, counter-clockwise seen from above as in the ceremony (its facing sweeps to the viewer's right, away, to the left and back), one turn every 3 s, only while it is in view. The two faint ivory hairlines of the frieze run out to either side and meet its floor line, which js draws at 0.93 of the canvas height (margin-bottom = 0.07 x height - 0.5px puts the 1px line's centre on it). The canvas is 75x100 on desktop and tablet and 63x84 on phones, where the figure stands about 89 and 75px tall, in pure white (no opacity, unlike the frieze). img/dervish-static.png, the same figure at 30 deg, stands in until the canvas has drawn its first frame, and stays for no-JS or any failure; under reduced motion the canvas draws that one still frame and stops. ---------- */
.dervish{display:flex;align-items:flex-end;justify-content:center;gap:22px;padding:30px 0 10px;pointer-events:none}
.dervish::before,.dervish::after{content:'';flex:1;height:1px;margin-bottom:6.5px;background:rgba(249,246,239,.22)}
.dervish img,.dervish canvas{display:block;flex:0 0 auto;width:75px;height:100px;max-width:none}
.dervish.is-live img,.dervish:not(.is-live) canvas{display:none}
@media (max-width:767px){
.dervish{padding:22px 0 6px;gap:16px}
.dervish::before,.dervish::after{margin-bottom:5.38px}
.dervish img,.dervish canvas{width:63px;height:84px}
}
/* ---------- 28. v4, quiet luxury (October 2026): fewer things on the page, more room around each. Luxiachy becomes the display face of every headline (it replaces Marcellus through --disp, so the Marcellus files are no longer requested); the İznik band, the medallion watermarks, the eyebrow rosettes, the mounted-photo frames, the evil-eye bullets and the paper grain are retired; boxes give way to hairlines; the interior heroes open on their headline (the page name is no longer printed above it). Appended last so it wins by order; the phone tiers at the end repeat selectors of 22 and 25 at equal or higher specificity. ---------- */
/* 28.1 the display face. Luxiachy (UICreative, licensed to UTS) with İ Ş ş Ğ ğ composed from its own Ç, i and caron parts; a high-contrast face whose wide word space is tightened here */
@font-face{font-family:'Luxiachy';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/luxiachy-400.woff2) format('woff2')}
:root{
--disp:'Luxiachy','Marcellus Fallback',Georgia,serif;
--sec:clamp(84px,10.5vw,152px); --sec-tight:clamp(60px,7vw,100px);
--line-soft:rgba(23,53,110,.12);
}
h1,h2,h3,.disp,.display,.hero.short .eyebrow,.award .a-title,.people .who,.dest .tcap,.milestones .year,.work a,.menu-list a{font-family:var(--disp);font-weight:400;font-synthesis:none;word-spacing:-.06em;letter-spacing:0}
h1,.display{line-height:1.04}
h2{font-size:clamp(2.05rem,1.25rem + 2.6vw,3.35rem);line-height:1.08}
h3{font-size:clamp(1.42rem,1.25rem + .45vw,1.65rem);line-height:1.2;letter-spacing:.005em}
.card h3,.port h3{letter-spacing:.005em}
.port h3{font-size:clamp(1.8rem,1.3rem + 1.3vw,2.4rem);line-height:1.12}
/* 28.2 retired ornaments and texture */
.cini-band,.watermark{display:none}
body::after{content:none}
.plate picture::after,.mount::after{display:none}
.plate picture,.mount{margin-bottom:18px}
.eyebrow::before,.hero .eyebrow::before,.band .eyebrow::before{width:28px;height:1px;background:var(--gold);margin-top:0}
.eyebrow{letter-spacing:.3em;font-size:.7rem;margin-bottom:22px;gap:16px}
.list li,.nazar li{padding:7px 0 7px 32px}
.list li::before,.nazar li::before,.band .list li::before,.band .nazar li::before{width:14px;height:1px;border-radius:0;background:var(--gold);top:1.25em}
.menu-list a[aria-current=page]::after{width:18px;height:1px;border-radius:0;background:var(--gold)}
/* 28.3 section rhythm: headings stand further from what follows them */
h2+p,h2+.lede,h1+.lede,h2+ul,h2+.list,h2+.cards{margin-top:24px}
.lede{max-width:46ch}
ul.mt-list,.mt-7{margin-top:56px}
/* 28.4 header: the language link without its pill; the topbar quieter */
.topbar{font-size:.66rem;letter-spacing:.18em;color:rgba(249,246,239,.68)}
@media (min-width:1024px){
.site-header .wrap{padding-top:16px;padding-bottom:16px}
.nav .lang{border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 22px;margin-left:4px;min-height:var(--tap);font-size:.68rem;letter-spacing:.2em;color:var(--body-soft);background:none}
.nav .lang:hover,.nav .lang:focus-visible{background:none;color:var(--cobalt)}
}
/* 28.5 the home hero: a small credential, the headline in Luxiachy at full size, the two soft lines, two actions */
.hero .scrim{background:linear-gradient(90deg,rgba(13,31,68,.78) 0%,rgba(13,31,68,.46) 46%,rgba(13,31,68,.14) 100%),linear-gradient(0deg,rgba(13,31,68,.62),rgba(13,31,68,0) 46%)}
.hero:not(.short) .wrap{min-height:clamp(620px,calc(100svh - 120px),940px);padding-bottom:clamp(64px,8vw,104px)}
html[lang] .hero:not(.short) .eyebrow{font:500 .72rem/1.5 var(--ui);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-on-cobalt);margin:0 0 26px;gap:16px}
html[lang] .hero:not(.short) h1{text-transform:none;letter-spacing:-.005em;word-spacing:-.06em;font-size:clamp(3rem,1.4rem + 5.9vw,6.7rem);line-height:.98;max-width:9.2em}
.hero .lede{font-size:clamp(1.28rem,1.12rem + .5vw,1.55rem);max-width:44ch;margin-top:28px}
.hero .lede+.lede{margin-top:6px}
.hero .actions{margin-top:44px}
/* 28.6 the interior heroes: the headline is the first thing read; the 404 keeps a small label */
.hero.short .wrap{min-height:clamp(460px,64svh,680px);padding-bottom:clamp(56px,7vw,92px)}
html[lang] .hero.short .eyebrow{display:flex;font:500 .72rem/1.5 var(--ui);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-on-cobalt);margin:0 0 24px;word-spacing:0}
html[lang] .hero.short .eyebrow::before{display:block;content:'';width:28px;height:1px;background:var(--gold)}
html[lang] .hero.short .eyebrow::after{content:none}
html[lang] .hero.short h1{font-size:clamp(2.6rem,1.4rem + 4.1vw,5rem);line-height:1.04;letter-spacing:-.005em;max-width:13.5em}
html[lang] .hero.short .lede{margin-top:26px;max-width:46ch}
/* 28.7 the partner strip: one quiet row */
.trust{border-top:0;border-bottom:1px solid var(--line-soft)}
.trust .wrap{gap:20px 44px;padding-top:34px;padding-bottom:34px}
.trust a{opacity:.72}
@media (hover:none){.trust a{opacity:1}}
.trust img.h66{height:54px}.trust img.h56{height:44px}.trust img.h50{height:40px}.trust img.h48{height:38px}.trust img{height:36px}.trust img.h44{height:34px}.trust img.h36{height:28px}
@media (min-width:1180px){.trust:not(.mt-7) .wrap{flex-wrap:nowrap;justify-content:space-between}}
/* 28.8 cards without boxes: a gold hairline above, a numeral, the title, the text (home "What we do", Heritage "Three habits") */
.cards{counter-reset:card;gap:0 clamp(28px,3.6vw,56px)}
.cards--three{grid-template-columns:repeat(3,1fr)}
.cards .card{background:none;border:0;border-top:1px solid var(--line-gold);padding:30px 0 0;box-shadow:none;transform:none}
.cards .card::before{content:counter(card,decimal-leading-zero);counter-increment:card;position:static;display:block;inset:auto;width:auto;height:auto;background:none;transform:none;font:400 1.05rem/1 var(--disp);letter-spacing:.06em;color:var(--gold-text);margin:0 0 26px}
.cards .card:hover,.cards .card:focus-within{transform:none;box-shadow:none;border-color:var(--gold)}
.cards .card h3{margin:0 0 14px;font-size:clamp(1.42rem,1.2rem + .55vw,1.7rem)}
.cards .card h3 a{background:linear-gradient(var(--gold),var(--gold)) 0 100% / 0 1px no-repeat;transition:background-size .5s var(--ease)}
.cards .card:hover h3 a,.cards .card h3 a:focus-visible{background-size:100% 1px}
.cards .card p{font-size:1rem;line-height:1.7;color:var(--body-soft)}
@media (max-width:960px){.cards--three{grid-template-columns:1fr 1fr}}
/* contact sheet: the three ways to reach us as columns between hairlines */
.grid3.center{gap:0}
.grid3.center .card{background:none;border:0;border-left:1px solid var(--line-gold);padding:6px clamp(20px,3vw,44px) 4px;box-shadow:none;transform:none}
.grid3.center .card:first-child{border-left:0}
.grid3.center .card::before{content:none}
.grid3.center .card h3{margin:0 0 14px}
/* 28.9 Services: the four services as editorial rows, title left, text and places right */
.svc{border-top:1px solid var(--line-gold)}
.sec:has(>.wrap>.svc){padding-top:clamp(64px,7vw,104px)}
.svc>.card{background:none;border:0;border-bottom:1px solid var(--line-gold);box-shadow:none;transform:none;padding:44px 0}
.svc>.card::before{content:none}
.svc>.card:hover{box-shadow:none;transform:none}
.svc h3{margin:0;font-size:clamp(1.7rem,1.3rem + 1.1vw,2.3rem);line-height:1.1}
.svc p{color:var(--body-soft);font-size:1.02rem;max-width:58ch}
@media (min-width:961px){
.svc>.card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.svc>.card>h3{grid-column:1;grid-row:1 / span 2;padding-top:4px}
.svc>.card>p,.svc>.card>div{grid-column:2}
.svc>.card>h3+p{margin-top:0}
}
/* places and durations as a quiet line of small capitals, not boxed chips */
.chip{border:0;padding:0;margin:0;font-size:.66rem;letter-spacing:.24em;color:var(--gold-text);background:none}
.mt-4:has(>.chip),.mt-5:has(>.chip){margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 26px}
/* the three experiences: photograph, title, text; no card */
.card.xcard{background:none;border:0;box-shadow:none;transform:none;padding:0}
.xcard .xbody{padding:24px 0 0}
.xcard h3{font-size:clamp(1.42rem,1.2rem + .5vw,1.65rem)}
.xcard p{color:var(--body-soft)}
/* 28.10 recognition as a strip of credentials between hairlines, no plaques */
.awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;justify-content:stretch}
.awards--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.awards--four .award{padding-inline:clamp(12px,1.6vw,26px)}
.awards--four .award .a-title{font-size:clamp(1.45rem,1.2rem + .55vw,1.8rem);text-wrap:balance}
.award{background:none;border:0;border-left:1px solid var(--line-gold);min-width:0;padding:10px clamp(16px,2.4vw,36px);text-align:center}
.award:first-child{border-left:0}
.award::before,.award::after{content:none}
.award .a-title{font-size:clamp(1.55rem,1.25rem + .8vw,2.1rem);line-height:1.12;letter-spacing:0}
.award .a-by{margin-top:14px}
.award .a-note{margin-top:6px;font-size:1.08rem}
.band .award{border-color:rgba(249,246,239,.22);background:none}
.credentials{background:var(--ivory-2);padding:clamp(56px,6.5vw,92px) 0}
.credentials .awards{margin-top:0}
.band .awards{margin-top:56px}
/* 28.11 Heritage: the people without cards; milestones as a clean ledger */
.people li{background:none;border:0;padding:0;box-shadow:none;transform:none}
.people li:hover{transform:none;box-shadow:none}
.people picture{width:148px;height:148px;margin-bottom:24px;box-shadow:0 0 0 1px var(--line-gold)}
.people .who{font-size:1.4rem}
.people .role{margin-top:4px}
.milestones li{grid-template-columns:minmax(84px,150px) minmax(0,1fr);gap:0 32px;padding:34px 0}
.milestones li::before{content:none}
.milestones .year{font-size:clamp(1.9rem,1.4rem + 1.2vw,2.6rem);line-height:1;letter-spacing:.01em}
.milestones p{font-size:1.02rem;max-width:62ch}
/* 28.12 the guest book: the long quotation leads, the four entries follow as open columns */
.words .wrap>.eyebrow{justify-content:center}
.words .wrap>h2{text-align:center;margin-inline:auto}
.quote-lead{margin-top:44px;max-width:900px}
.quote-lead blockquote{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem)}
.ledger{grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px);margin-top:72px;text-align:left;border-top:1px solid var(--line-gold)}
.entry,.tq{background:none;border:0;border-bottom:1px solid var(--line-gold);padding:34px 0;font-size:1.22rem;line-height:1.55}
.entry::before,.tq::before{content:none}
.entry:hover,.tq:hover{border-color:var(--line-gold)}
.ledger-note{margin:30px auto 0;text-align:center;max-width:60ch}
/* 28.13 destinations: larger photographs, more air */
.tiles{gap:72px clamp(32px,4vw,56px)}
.dest .tcap{font-size:clamp(1.6rem,1.3rem + .8vw,2.1rem);margin-top:20px;letter-spacing:0}
.dest .tcap small{margin-top:6px}
/* 28.14 the closing invitation over a photograph (home) */
.cta-photo{position:relative;overflow:hidden;isolation:isolate;background:var(--cobalt-deep);padding:clamp(120px,15vw,220px) 0;text-align:center}
.cta-photo picture{position:absolute;inset:0;z-index:0;margin:0}
.cta-photo picture img{width:100%;height:100%;object-fit:cover;display:block}
.cta-photo .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,31,68,.58),rgba(13,31,68,.74))}
.cta-photo .wrap{position:relative;z-index:2}
.cta-photo h2{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);max-width:14em;margin-inline:auto}
.cta-photo .lede,.cta-photo p{margin-inline:auto}
.cta-photo .lede{color:rgba(249,246,239,.9)}
.band:not(.cta-photo) h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.4rem)}
/* 28.15 tablets */
@media (max-width:1023px){
html[lang] .hero:not(.short) h1{font-size:clamp(2.7rem,1.6rem + 4.6vw,4.4rem)}
html[lang] .hero.short h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,3.6rem)}
.awards--four{grid-template-columns:1fr 1fr}
.awards--four .award:nth-child(3){border-left:0}
.awards--four .award:nth-child(n+3){margin-top:36px}
}
/* 28.16 phones (<=700): one column, the same calm */
@media (max-width:700px){
:root{--sec:76px;--sec-tight:56px}
.sec:not(.panel):not(.band)+.sec:not(.panel):not(.band),.sec.panel+.sec.panel{padding-top:var(--sec-tight)}
h2{font-size:clamp(1.95rem,1.3rem + 2.8vw,2.4rem);line-height:1.1}
h3{font-size:1.45rem}
.eyebrow{font-size:.64rem;letter-spacing:.22em;margin-bottom:16px;gap:12px}
.eyebrow::before,.hero .eyebrow::before,.band .eyebrow::before{width:20px}
html[lang] .hero:not(.short) .eyebrow{font-size:.62rem;letter-spacing:.2em;margin-bottom:18px}
html[lang] .hero:not(.short) h1{font-size:clamp(2.55rem,1.6rem + 4.6vw,3.1rem);line-height:1.02;letter-spacing:-.005em;max-width:none}
.hero .lede{font-size:1.18rem;margin-top:18px}
html[lang] .hero.short .eyebrow{font-size:.62rem;letter-spacing:.22em;margin-bottom:16px}
html[lang] .hero.short h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,2.6rem);line-height:1.06;max-width:none}
html[lang] .hero.short .lede{font-size:1.16rem;margin-top:16px}
.hero.short .wrap{min-height:clamp(380px,56svh,520px);padding-bottom:44px}
.hero .actions{margin-top:30px}
.cards,.cards--three{grid-template-columns:1fr;gap:40px}
.cards .card{padding-top:24px}
.cards .card::before{margin-bottom:16px}
.card h3,.cards .card h3{font-size:1.45rem}
.grid3.center .card{border-left:0;border-top:1px solid var(--line-gold);padding:26px 0 0}
.grid3.center .card:first-child{border-top:0;padding-top:0}
.grid3.center{gap:30px}
.svc>.card{padding:32px 0}
.svc h3{font-size:1.65rem;margin-bottom:12px}
.awards,.awards--four{grid-template-columns:1fr;gap:0}
.award,.awards--four .award:nth-child(3){border-left:0;border-top:1px solid var(--line-gold);padding:26px 0;margin-top:0}
.awards--four .award:nth-child(n+3){margin-top:0}
.award:first-child{border-top:0;padding-top:0}
.award:last-child{padding-bottom:0}
.band .award{border-color:rgba(249,246,239,.22)}
.award .a-title{font-size:1.7rem}
.credentials{padding:56px 0}
.ledger{grid-template-columns:1fr;margin-top:48px}
.entry{padding:26px 0;font-size:1.12rem}
.quote-lead{margin-top:28px}
.people picture{width:112px;height:112px;margin-bottom:16px}
.people .who{font-size:1.2rem}
.milestones li{grid-template-columns:1fr;gap:6px;padding:24px 0}
.milestones .year{font-size:1.8rem}
.milestones p{grid-column:1}
.tiles{gap:44px}
.dest .tcap{font-size:1.6rem;margin-top:14px}
.port h3{font-size:1.85rem}
.cta-photo{padding:104px 0}
.cta-photo h2{font-size:clamp(2.1rem,1.4rem + 3.4vw,2.6rem)}
.band:not(.cta-photo) h2{font-size:clamp(1.95rem,1.3rem + 2.8vw,2.4rem)}
.trust .wrap{padding-top:22px;padding-bottom:22px;gap:14px 22px}
.chip{padding:0;margin:0;font-size:.62rem;letter-spacing:.2em}
}
@media (max-width:480px){
html[lang] .hero:not(.short) h1{font-size:2.75rem}
html[lang=es] .hero:not(.short) h1{font-size:2.35rem}
html[lang] .hero.short h1{font-size:2.15rem}
html[lang=es] .hero.short h1{font-size:2rem}
}
@media (max-width:359px){
html[lang] .hero:not(.short) h1{font-size:2.2rem}
html[lang] .hero.short h1,html[lang=es] .hero.short h1{font-size:1.85rem}
}
/* ---------- 29. v4.1 (October 2026): every hero on its own photograph under a deep-cobalt shade, with a caption at its lower right; the footer composed around the dervish, who turns on the T of the UTS logo ---------- */
/* 29.1 the hero shade: a cobalt grade over the whole photograph or film (the hue moves toward the house blue, the light is kept), then the legibility gradients of 28.5 a little lighter */
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--cobalt);mix-blend-mode:color;opacity:.38}
.hero .scrim{background:linear-gradient(90deg,rgba(13,31,68,.66) 0%,rgba(13,31,68,.38) 48%,rgba(13,31,68,.16) 100%),linear-gradient(0deg,rgba(13,31,68,.58),rgba(13,31,68,0) 50%),rgba(13,31,68,.14)}
/* the Galata Tower stands at the left of its photograph, behind the headline: a lighter veil there so it still glows through */
.hero:has(img[src*="galata-night-hd"]) .scrim{background:linear-gradient(90deg,rgba(13,31,68,.42) 0%,rgba(13,31,68,.26) 48%,rgba(13,31,68,.12) 100%),linear-gradient(0deg,rgba(13,31,68,.62),rgba(13,31,68,0) 46%)}
.hero .wrap{z-index:3}
/* where each photograph is anchored when the hero crops it */
.hero img[src*="zeugma-gypsy-girl"]{object-position:50% 64%}
.hero img[src*="nisantasi-night"]{object-position:50% 60%}
.hero img[src*="kusadasi-port-morning"]{object-position:50% 58%}
.hero img[src*="galata-night-hd"]{object-position:20% 50%}
@media (max-width:767px){.hero img[src*="-r34-"]{object-position:50% 50%}}
/* 29.2 the caption: one quiet italic line at the lower right, on the column edge; tablets and desktops only, phones keep the photograph clear */
.hero-cap{position:absolute;z-index:3;bottom:clamp(18px,2.4vw,30px);right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));left:auto;max-width:min(58ch,calc(100% - 2 * var(--gutter)));margin:0;text-align:right;
font:italic 500 1rem/1.4 var(--edit);font-synthesis:none;letter-spacing:.005em;color:rgba(249,246,239,.74);text-wrap:balance;pointer-events:none}
@media (min-width:768px){
.hero:not(.short) .wrap{padding-bottom:clamp(84px,9vw,124px)}
.hero.short .wrap{padding-bottom:clamp(76px,8vw,112px)}
}
@media (max-width:767px){.hero-cap{display:none}}
/* 29.3 the footer: the logo with the dervish turning at its right, the pair as tall as the logo; the blurb beneath, then three centred columns and the legal line */
.site-footer .f-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 0 clamp(36px,4vw,48px)}
.site-footer .f-mark{display:flex;flex-direction:row;align-items:flex-start;gap:18px;width:max-content}
.site-footer .f-mark .dervish{display:block;order:2;flex:none;padding:0;width:60px;height:80px;margin:-4px 0 -4px}
.site-footer .f-mark .dervish img,.site-footer .f-mark .dervish canvas{width:60px;height:80px}
/* the figure runs from 5% to 94.5% of its canvas: an 80px canvas raised 4px puts the top of the hat level with the top of the 72px logo and the feet
level with its foot */
.site-footer .f-mark .dervish::before,.site-footer .f-mark .dervish::after{content:none}
.site-footer .f-mark .logo-f{display:block}
.site-footer .f-mark .logo-f img,.site-footer .logo-f img{height:72px;width:auto;opacity:.95}
.site-footer .f-head .blurb{margin:22px auto 0;max-width:40ch;text-align:center}
.site-footer .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:36px 0 44px;border-top:1px solid rgba(249,246,239,.14);text-align:center}
.site-footer .cols .rows a{justify-content:center}
.site-footer .cols h2{margin-bottom:16px}
.site-footer .office p{margin-inline:auto}
.legalbar{justify-content:center;gap:8px 28px}
@media (max-width:767px){
.site-footer .f-mark{gap:14px}
.site-footer .f-mark .dervish{width:49px;height:65px;margin:-3px 0 -3px}
.site-footer .f-mark .dervish img,.site-footer .f-mark .dervish canvas{width:49px;height:65px}
.site-footer .f-mark .logo-f img,.site-footer .logo-f img{height:58px}
.site-footer .f-head{padding:40px 0 30px}
.site-footer .cols{grid-template-columns:1fr 1fr;row-gap:30px;column-gap:20px;padding:30px 0 32px}
.site-footer .cols .office{grid-column:1 / -1;order:-1}
}
@media (max-width:700px){.site-footer .legalbar{align-items:center}}
/* ---------- 30. v4.4 (October 2026): the phone menu marks each page with a glass nazar, as in the UTS e-mail signature, in place of the folio
numbers; films play by themselves on touch screens, so their round play button is not shown there ---------- */
.menu-list a::before{content:'';content:'' / '';flex:none;align-self:center;width:18px;height:18px;margin-right:18px;border-radius:50%;
background:url(/img/nazar-bead-64w.png) center / contain no-repeat;background-image:image-set(url(/img/nazar-bead-64w.webp) type("image/webp"),url(/img/nazar-bead-64w.png) type("image/png"))}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
.port-film .film-label{display:none}
.hero .film-ctl{display:none}
}