/* =============================================
ET VOYAJ, shared design system
============================================= */
/* ---- PAGE-LOAD TRANSITION GUARD ----
is set in the markup of every page and removed by
site.js one frame after window.load. While present, NO transitions run,
so a late-arriving stylesheet (Firefox FOUC, SW latency) snaps elements
straight to their final state instead of animating from the unstyled
default (ghost menu fades, default-blue link color transitions, etc). */
html.preload *,
html.preload *::before,
html.preload *::after{ transition:none !important; }
/* ---- METRIC-MATCHED FONT FALLBACKS ----
Local faces size-adjusted (measured empirically) so that if the webfont
isn't ready at paint time, the fallback occupies almost exactly the same
space — no "big text snaps smaller" shift. Used with display=optional. */
@font-face{
font-family:"Libre Caslon Display Fallback";
src:local("Times New Roman"), local("Times");
size-adjust:91.3%;
}
@font-face{
font-family:"Source Serif 4 Fallback";
src:local("Georgia");
size-adjust:91.8%;
}
@font-face{
font-family:"Figtree Fallback";
src:local("Arial"), local("Helvetica");
size-adjust:101.3%;
}
:root{
--navy:#1f435d;
--gold:#a08858;
--gold-2:#c6a874;
--beige:#e8e1cf;
--warm:#f7f5f0;
--text:#2c2c2c;
--ink:#181613;
--hair:rgba(44,44,44,.18);
--hair-light:rgba(247,245,240,.22);
--display:"Libre Caslon Display", "Libre Caslon Display Fallback", "Times New Roman", serif;
--serif:"Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
--ui:"Figtree", "Figtree Fallback", system-ui, sans-serif;
--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* === Brand photo grade, duotone ===
Maps every photo to the navy→gold luminance ramp via SVG filter.
Dark pixels become navy (#1f435d), bright pixels become gold (#a08858).
This is the proper duotone technique, not a gradient overlay.
RGB normalized:
Navy #1f435d = (0.122, 0.263, 0.365)
Gold #a08858 = (0.627, 0.533, 0.345)
To swap the palette, change the two tableValues stops below. */
--photo-filter: url("data:image/svg+xml;utf8,#dt") contrast(1.04) brightness(.95);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--warm); color:var(--text); }
html{ scroll-behavior:smooth; }
body{
font-family:var(--serif);
font-size:17px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:var(--warm); }
/* ============ BRAND PHOTO GRADE ============
Single SVG-filter duotone applied to every photo-carrying surface.
No pseudo-element overlays, the filter does everything, so no
sibling-overlay conflicts and no z-index gymnastics. */
.frame-ph,
.page-hero .photo {
filter: var(--photo-filter);
}
/* Destination photography keeps natural colour (Chefchaouen must read blue);
just a gentle cinematic grade for cohesion with the brand surfaces.
`.real` marks any frame carrying a real photograph (programs cubes,
services/about frames): natural grade wins over the duotone above. */
.gallery-grid .card .ph,
.drawer .image .ph,
.frame-ph.real,
.page-hero .photo.real,
.pf-cube.real {
filter: saturate(.92) contrast(1.04) brightness(.97);
}
/* ============ UTILITIES ============ */
.ui{ font-family:var(--ui); }
.mono{ font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.label{
font-family:var(--ui);
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
font-weight:500;
}
.rule{
display:inline-block;
width:36px; height:1px;
background:currentColor;
vertical-align:middle;
margin-right:14px;
opacity:.6;
}
.it{ font-style:italic; color:var(--gold); }
.grain-overlay{
position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* ============ NAV ============ */
.nav{
position:fixed; top:0; left:0; right:0;
z-index:50;
padding:18px 36px;
display:flex; align-items:center; justify-content:space-between;
color:var(--warm);
transition:color .4s ease, background .4s ease, border-color .4s ease, backdrop-filter .4s ease, padding .3s ease;
border-bottom:1px solid transparent;
}
.nav.nav-dark{
background:rgba(20,15,10,.4);
-webkit-backdrop-filter:blur(14px) saturate(1.1);
backdrop-filter:blur(14px) saturate(1.1);
color:var(--warm);
border-bottom-color:rgba(247,245,240,.1);
}
.nav.nav-light{
background:rgba(247,245,240,.86);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
backdrop-filter:blur(14px) saturate(1.2);
color:var(--text);
border-bottom-color:var(--hair);
}
.nav.nav-beige{
background:rgba(232,225,207,.88);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
backdrop-filter:blur(14px) saturate(1.2);
color:var(--text);
border-bottom-color:rgba(31,67,93,.18);
}
.nav.nav-top{
background:transparent;
-webkit-backdrop-filter:none;
backdrop-filter:none;
border-bottom-color:transparent;
}
.nav .brand{
display:flex; align-items:center; gap:14px;
font-family:var(--display);
font-size:18px;
letter-spacing:.01em;
}
.nav .brand .mark{
width:32px; height:32px;
border:1px solid currentColor;
display:grid; place-items:center;
font-family:var(--display);
font-size:14px;
transform:rotate(-2deg);
}
.nav .brand .mark span{ display:block; transform:rotate(2deg); }
.nav .brand .brand-logo{
height:34px; width:auto; display:block;
object-fit:contain;
}
.nav .links{
display:flex; gap:30px;
font-family:var(--ui);
font-size:13px;
letter-spacing:.06em;
position:relative;
}
.nav .links .item{ position:relative; }
.nav .links .item > a{
display:inline-flex; align-items:center; gap:6px;
position:relative; padding:4px 0;
}
.nav .links .item > a::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
background:currentColor; transition:right .4s ease;
}
.nav .links .item > a:hover::after,
.nav .links .item.active > a::after{ right:0; }
.nav .links .item > a .chev{
width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
transform:rotate(45deg) translateY(-2px); transition:transform .3s ease;
}
.nav .links .item:hover > a .chev{ transform:rotate(-135deg) translateY(2px); }
.nav .cta{
font-family:var(--ui);
font-size:13px;
letter-spacing:.06em;
border:1px solid currentColor;
padding:10px 18px;
display:inline-flex; align-items:center; gap:10px;
transition:background .3s, color .3s, border-color .3s;
}
.nav .cta:hover{ background:currentColor; }
.nav.nav-dark .cta:hover span{ color:var(--ink); }
.nav.nav-light .cta:hover span,
.nav.nav-beige .cta:hover span{ color:var(--warm); }
.nav.nav-top .cta:hover span{ color:var(--ink); }
.nav .cta .dot{
width:6px; height:6px; border-radius:50%; background:var(--gold);
box-shadow:0 0 0 3px rgba(160,136,88,.25);
}
/* ============ MENU ============ */
.menu{
position:fixed;
left:0; right:0; top:65px;
background:var(--warm);
color:var(--text);
border-bottom:1px solid var(--hair);
box-shadow:0 30px 60px rgba(20,15,10,.08);
padding:50px 8vw 60px;
display:grid;
grid-template-columns:1.2fr 2fr;
gap:80px;
opacity:0;
pointer-events:none;
transform:translateY(-12px);
transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
z-index:55;
}
.menu.open{ opacity:1; pointer-events:auto; transform:translateY(0); z-index:56; }
.menu .lead .label{ color:var(--gold); margin-bottom:18px; }
.menu .lead h4{
font-family:var(--display);
font-weight:400;
font-size:42px;
line-height:1;
letter-spacing:-.01em;
color:var(--navy);
margin:0 0 20px;
}
.menu .lead h4 .it{ font-style:italic; color:var(--gold); }
.menu .lead p{
font-family:var(--serif);
font-size:15px; line-height:1.6;
color:var(--text);
max-width:42ch;
margin:0 0 24px;
}
.menu .lead .ghost{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:var(--navy);
border-bottom:1px solid var(--navy);
padding-bottom:6px;
}
.menu .listing{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 50px;
}
.menu .listing a{
display:grid;
grid-template-columns:32px 1fr auto;
gap:14px;
padding:18px 0;
border-top:1px solid var(--hair);
align-items:center;
transition:padding-left .35s ease, color .3s ease;
}
.menu .listing a:first-child,
.menu .listing a:nth-child(2){ border-top:0; }
.menu .listing a:hover{ padding-left:8px; color:var(--gold); }
.menu .listing a .num{
font-family:var(--ui); font-size:11px; letter-spacing:.18em;
color:var(--gold);
}
.menu .listing a .name{
font-family:var(--display);
font-size:22px;
line-height:1;
}
.menu .listing a .name .it{ font-style:italic; color:var(--gold); }
.menu .listing a .arr{
font-family:var(--display); font-style:italic; font-size:18px; opacity:0;
transition:opacity .3s ease, transform .3s ease;
}
.menu .listing a:hover .arr{ opacity:1; transform:translateX(4px); }
.menu .listing a:hover .name .it{ color:inherit; }
/* ============ MARQUEE ============ */
.marquee-strip{
background:var(--ink);
color:var(--warm);
padding:18px 0;
border-top:1px solid var(--hair-light);
border-bottom:1px solid var(--hair-light);
overflow:hidden;
white-space:nowrap;
}
.marquee-track{
display:inline-flex; gap:60px;
animation:marq 38s linear infinite;
font-family:var(--display);
font-size:42px;
line-height:1;
letter-spacing:-.01em;
}
.marquee-track .it{ font-style:italic; color:var(--gold); }
.marquee-track .star{ color:var(--gold); font-style:normal; font-size:24px; vertical-align:middle; padding:0 6px; }
@keyframes marq{ to{ transform:translateX(-50%); } }
/* ============ BUTTONS ============ */
.btn-primary{
display:inline-flex; align-items:center; gap:16px;
background:var(--gold);
color:var(--ink);
font-family:var(--ui);
font-size:14px; letter-spacing:.08em;
text-transform:uppercase;
padding:22px 30px;
transition:background .3s, color .3s, gap .3s, border-color .3s;
border:1px solid var(--gold);
}
.btn-primary:hover{ background:var(--warm); border-color:var(--warm); gap:24px; }
.btn-primary .ar{ font-family:var(--display); font-size:22px; font-style:italic; line-height:0; }
.btn-ghost{
display:inline-flex; align-items:center; gap:16px;
border:1px solid var(--hair-light);
color:var(--warm);
font-family:var(--ui);
font-size:14px; letter-spacing:.08em;
text-transform:uppercase;
padding:22px 30px;
transition:border-color .3s, color .3s, gap .3s;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); gap:24px; }
.btn-light{
display:inline-flex; align-items:center; gap:16px;
border:1px solid var(--navy);
color:var(--navy);
font-family:var(--ui);
font-size:13px; letter-spacing:.08em;
text-transform:uppercase;
padding:18px 26px;
transition:background .3s, color .3s, gap .3s;
}
.btn-light:hover{ background:var(--navy); color:var(--warm); gap:24px; }
/* ============ SITE FOOTER ============ */
.site-footer{
background:var(--ink);
color:var(--warm);
padding:100px 8vw 0;
position:relative;
overflow:hidden;
isolation:isolate;
}
.site-footer::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse at 90% 0%, rgba(160,136,88,.16), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(31,67,93,.4), transparent 55%);
z-index:-1;
}
.footer-mark{
border-bottom:1px solid var(--hair-light);
padding-bottom:50px;
margin-bottom:60px;
display:grid;
grid-template-columns:1.4fr 1fr;
gap:60px;
align-items:end;
}
.footer-mark .wordmark{
font-family:var(--display);
font-weight:400;
font-size:clamp(48px, 8vw, 128px);
line-height:.85;
letter-spacing:-.02em;
color:var(--warm);
}
.footer-mark .wordmark .it{ font-style:italic; color:var(--gold); }
.footer-mark .tagline{
font-family:var(--serif);
font-size:17px;
line-height:1.55;
color:rgba(247,245,240,.78);
max-width:36ch;
padding-bottom:14px;
}
.footer-mark .tagline .em{
font-family:var(--display); font-style:italic; color:var(--gold); font-size:1.05em;
}
.footer-grid{
display:grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
gap:60px;
padding-bottom:80px;
border-bottom:1px solid var(--hair-light);
}
.footer-col h5{
font-family:var(--ui);
font-size:11px; letter-spacing:.24em; text-transform:uppercase;
color:var(--gold);
margin:0 0 24px;
font-weight:500;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col ul li{ margin-bottom:14px; }
.footer-col ul li a{
font-family:var(--serif);
font-size:16px;
color:rgba(247,245,240,.82);
transition:color .3s, padding-left .3s;
display:inline-block;
position:relative;
}
.footer-col ul li a:hover{ color:var(--gold); padding-left:14px; }
.footer-col ul li a::before{
content:"→";
position:absolute; left:-2px; top:0;
opacity:0; transform:translateX(-8px);
transition:opacity .3s, transform .3s;
color:var(--gold);
}
.footer-col ul li a:hover::before{ opacity:1; transform:translateX(0); }
.footer-col p{
font-family:var(--serif);
font-size:15px;
line-height:1.55;
color:rgba(247,245,240,.75);
margin:0 0 14px;
}
.footer-col p strong{ font-weight:600; color:var(--warm); display:block; }
.footer-col .small{
font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(247,245,240,.5);
margin-top:20px;
}
.footer-brief{
border:1px solid var(--hair-light);
padding:24px;
background:rgba(247,245,240,.02);
}
.footer-brief h5{ color:var(--gold); margin-bottom:14px; }
.footer-brief p{ font-size:14px; color:rgba(247,245,240,.7); margin-bottom:18px; }
.footer-brief .input{
display:flex; border-bottom:1px solid var(--hair-light);
padding-bottom:10px;
align-items:center; gap:10px;
}
.footer-brief .input input{
flex:1; background:transparent; border:0; outline:none;
font-family:var(--serif); font-size:15px; color:var(--warm);
}
.footer-brief .input input::placeholder{ color:rgba(247,245,240,.4); }
.footer-brief .input button{
font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--gold);
background:transparent; border:0; cursor:pointer; padding:0;
display:inline-flex; align-items:center; gap:8px;
}
.footer-brief .input button:hover{ color:var(--warm); }
.footer-brief .small{
font-family:var(--ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:rgba(247,245,240,.4); margin-top:14px;
}
/* brief CTA button — injected by site.js, only shown in the mobile footer */
.brief-btn{ display:none; }
.footer-mid{
display:grid;
grid-template-columns: 1fr auto auto;
gap:40px;
align-items:center;
padding:36px 0;
border-bottom:1px solid var(--hair-light);
}
.footer-mid .offices{
display:flex; flex-wrap:wrap; gap:30px;
font-family:var(--ui); font-size:12px; letter-spacing:.06em;
color:rgba(247,245,240,.7);
}
.footer-mid .offices .o strong{
color:var(--gold); display:block;
font-size:10px; letter-spacing:.22em; text-transform:uppercase;
margin-bottom:4px;
font-weight:500;
}
.footer-mid .langs{
display:flex; gap:18px;
font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.footer-mid .langs a{ color:rgba(247,245,240,.5); transition:color .3s; }
.footer-mid .langs a:hover,
.footer-mid .langs a.active{ color:var(--gold); }
.footer-mid .socials{ display:flex; gap:12px; }
.footer-mid .socials a{
width:36px; height:36px;
border:1px solid var(--hair-light);
display:grid; place-items:center;
color:rgba(247,245,240,.7);
transition:background .3s, color .3s, border-color .3s;
}
.footer-mid .socials a:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.footer-legal{
padding:28px 0 36px;
display:flex; justify-content:space-between; align-items:center;
font-family:var(--ui);
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,245,240,.55);
flex-wrap:wrap; gap:18px;
}
.footer-legal .marq{
font-family:var(--display); font-style:italic;
color:var(--gold);
font-size:28px; letter-spacing:.01em; text-transform:none;
}
/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; }
.reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; }
.reveal-mask{ overflow:hidden; }
.reveal-mask > *{ transform:translateY(110%); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal-mask.in > *{ transform:translateY(0); }
/* ============ FILM-FRAME PHOTO PLACEHOLDER (shared component) ============ */
.frame-ph{
position:relative; overflow:hidden;
background:linear-gradient(160deg, #5a4426, #1f435d);
}
.frame-ph::before{
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(247,245,240,.04) 0 2px, transparent 2px 9px);
z-index:1;
}
.frame-ph .corner{
position:absolute; top:14px; left:14px;
font-family:"JetBrains Mono", ui-monospace, monospace;
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(247,245,240,.7);
z-index:2;
}
.frame-ph .corner.tr{ left:auto; right:14px; }
.frame-ph .corner.bl{ top:auto; bottom:14px; }
.frame-ph .corner.br{ top:auto; bottom:14px; left:auto; right:14px; }
.frame-ph .cap{
position:absolute; left:14px; right:14px; bottom:14px;
font-family:"JetBrains Mono", ui-monospace, monospace;
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(247,245,240,.75);
z-index:2;
text-wrap:balance;
}
.frame-ph .tick{
position:absolute; width:14px; height:14px;
border-color:rgba(247,245,240,.5);
z-index:2;
}
.frame-ph .tick.tl{ top:8px; left:8px; border-top:1px solid; border-left:1px solid; }
.frame-ph .tick.tr{ top:8px; right:8px; border-top:1px solid; border-right:1px solid; }
.frame-ph .tick.bl{ bottom:8px; left:8px; border-bottom:1px solid; border-left:1px solid; }
.frame-ph .tick.br{ bottom:8px; right:8px; border-bottom:1px solid; border-right:1px solid; }
/* ============ PAGE HERO (shared for sub-pages) ============ */
.page-hero{
position:relative;
min-height:88vh;
background:var(--ink);
color:var(--warm);
overflow:hidden;
isolation:isolate;
}
.page-hero .bg{
position:absolute; inset:0; z-index:-2;
background:
radial-gradient(ellipse at 65% 35%, rgba(160,136,88,.5), transparent 55%),
radial-gradient(ellipse at 15% 90%, rgba(31,67,93,.7), transparent 60%),
linear-gradient(180deg, #221a12 0%, #14110d 100%);
}
.page-hero .photo{
position:absolute; inset:0; z-index:-1;
background:
repeating-linear-gradient(115deg, rgba(247,245,240,.04) 0 2px, transparent 2px 8px),
radial-gradient(ellipse at 60% 30%, rgba(217,170,99,.35), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.0) 50%, rgba(0,0,0,.5) 100%);
}
.page-hero .photo .cap{
position:absolute; right:36px; bottom:30px;
font-family:"JetBrains Mono", ui-monospace, monospace;
font-size:10px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(247,245,240,.6);
text-align:right;
z-index:2;
}
.page-hero .frame{
position:relative;
padding:160px 8vw 100px;
min-height:88vh;
display:flex; flex-direction:column; justify-content:flex-end;
}
.page-hero .crumbs{
display:flex; gap:14px; align-items:center;
font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,245,240,.62);
margin-bottom:30px;
}
.page-hero .crumbs a{ color:rgba(247,245,240,.78); transition:color .3s; }
.page-hero .crumbs a:hover{ color:var(--gold); }
.page-hero .crumbs .sep{ color:var(--gold); }
.page-hero .crumbs .current{ color:var(--gold); }
.page-hero h1{
font-family:var(--display);
font-weight:400;
font-size:clamp(56px, 11vw, 180px);
line-height:.88;
letter-spacing:-.015em;
margin:0 0 50px;
max-width:14ch;
}
.page-hero h1 .it{ font-style:italic; color:var(--gold); }
.page-hero .lede{
font-family:var(--serif);
font-size:clamp(18px, 1.6vw, 22px);
line-height:1.5;
color:rgba(247,245,240,.85);
max-width:48ch;
padding-top:30px;
border-top:1px solid var(--hair-light);
}
.page-hero .meta-row{
margin-top:40px;
display:flex; gap:60px; flex-wrap:wrap;
font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,245,240,.55);
}
.page-hero .meta-row strong{
color:var(--gold); display:block; font-weight:500; margin-bottom:6px;
}
/* ============ HERO EMBLEM ADAPTATION (shared, all sub-pages) ============
Hide the (legacy) photo so the dark .bg reads as the emblem's ground,
make the headline vw-proportional like Home, and keep the copy clear of
the centre-anchored emblem. Mobile unlocks full-width copy. */
.page-hero .photo{ display:none; }
.page-hero h1{ font-size:clamp(54px, 9.4vw, 184px); }
.page-hero .lede{ max-width:min(48ch, 40vw); }
.page-hero .meta-row{ max-width:42vw; }
@media (min-height: 900px) and (min-width: 1025px){
.page-hero .frame{ justify-content:center; }
}
@media (max-width: 760px){
.page-hero .lede{ max-width:100%; }
.page-hero .meta-row{ max-width:100%; }
}
/* ============ CTA BLOCK (shared) ============ */
.cta-block{
background:var(--ink);
color:var(--warm);
padding:170px 8vw 140px;
position:relative;
overflow:hidden;
isolation:isolate;
text-align:center;
}
.cta-block::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 50% at 50% 102%, rgba(160,136,88,.42), transparent 62%),
radial-gradient(ellipse 70% 55% at 50% -2%, rgba(31,67,93,.5), transparent 62%);
z-index:-1;
}
.cta-block h2{
font-family:var(--display); font-weight:400;
font-size:clamp(56px, 9vw, 152px);
line-height:.9; letter-spacing:-.02em;
margin:0 auto;
max-width:15ch;
}
.cta-block h2 .it{ font-style:italic; color:var(--gold); }
.cta-block .row{ display:block; margin:0; border:0; padding:0; }
.cta-block .lede{
font-family:var(--serif);
font-size:clamp(18px, 1.5vw, 21px); line-height:1.65;
color:rgba(247,245,240,.82);
max-width:54ch;
margin:42px auto 0;
padding-top:42px;
position:relative;
}
.cta-block .lede::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:48px; height:1px; background:var(--gold); opacity:.7;
}
.cta-block .col{ display:none; }
.cta-block .actions{
margin-top:52px;
display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap;
}
/* ============ SERVICE SUB-PAGE: PREMISE ============ */
.premise{
background:var(--warm);
padding:140px 8vw 120px;
border-bottom:1px solid var(--hair);
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap:60px;
align-items:start;
}
.premise .leftcol .label{ color:var(--gold); margin-bottom:14px; display:block; }
.premise .leftcol .num{
font-family:var(--display); font-size:48px; color:var(--navy); line-height:1;
}
.premise .leftcol .num .it{ font-style:italic; color:var(--gold); }
.premise h2{
font-family:var(--display); font-weight:400;
font-size:clamp(36px, 4.6vw, 72px);
line-height:1.04; letter-spacing:-.015em;
color:var(--navy); margin:0;
}
.premise h2 .it{ font-style:italic; color:var(--gold); }
.premise .rightcol p{
font-family:var(--serif); font-size:16px; line-height:1.65; margin:0 0 16px;
}
.premise .rightcol p .em{ font-family:var(--display); font-style:italic; color:var(--gold); font-size:1.05em; }
/* ============ SERVICE SUB-PAGE: INCLUDED GRID ============ */
.included{
background:var(--beige);
padding:140px 8vw;
border-bottom:1px solid rgba(31,67,93,.15);
}
.included .hdr{
display:grid;
grid-template-columns: 1fr 1.4fr;
gap:60px;
align-items:end;
margin-bottom:70px;
}
.included .hdr .label{ color:var(--gold); }
.included .hdr h2{
font-family:var(--display); font-weight:400;
font-size:clamp(40px, 6vw, 96px);
line-height:.96; letter-spacing:-.015em;
color:var(--navy); margin:18px 0 0;
max-width:18ch;
}
.included .hdr h2 .it{ font-style:italic; color:var(--gold); }
.included .hdr .blurb{
font-family:var(--serif); font-size:17px; line-height:1.6;
color:var(--text); max-width:44ch; padding-bottom:10px;
}
.included-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
border-top:1px solid var(--navy);
border-left:1px solid var(--navy);
}
.included-grid .cell{
border-right:1px solid var(--navy);
border-bottom:1px solid var(--navy);
padding:40px 32px 50px;
position:relative;
background:var(--beige);
transition:background .3s;
}
.included-grid .cell:hover{ background:rgba(160,136,88,.16); }
.included-grid .cell .n{
font-family:var(--ui); font-size:11px; letter-spacing:.2em;
color:var(--gold); margin-bottom:18px;
}
.included-grid .cell h3{
font-family:var(--display); font-weight:400;
font-size:30px; line-height:1.02;
color:var(--navy); margin:0 0 14px;
}
.included-grid .cell h3 .it{ font-style:italic; color:var(--gold); }
.included-grid .cell p{
font-family:var(--serif); font-size:15px; line-height:1.55;
color:var(--text); margin:0;
}
/* ============ SERVICE SUB-PAGE: CASE STUDY ============ */
.case-study{
background:var(--ink);
color:var(--warm);
padding:140px 8vw;
position:relative;
overflow:hidden;
isolation:isolate;
}
.case-study::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse at 100% 0%, rgba(160,136,88,.18), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(31,67,93,.4), transparent 55%);
z-index:-1;
}
.case-study .hdr{
margin-bottom:50px;
border-bottom:1px solid var(--hair-light);
padding-bottom:24px;
display:flex; justify-content:space-between; align-items:baseline;
flex-wrap:wrap; gap:20px;
}
.case-study .hdr .label{ color:var(--gold-2); }
.case-study .hdr h3{
font-family:var(--display); font-style:italic; font-weight:400;
font-size:28px; color:var(--gold-2); margin:0;
}
.case-study .grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:60px;
align-items:center;
}
.case-study .image{
aspect-ratio: 5/4;
}
.case-study .body .marker{
font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:var(--gold-2);
margin-bottom:18px;
}
.case-study .body h2{
font-family:var(--display); font-weight:400;
font-size:clamp(40px, 5vw, 76px);
line-height:.96; letter-spacing:-.015em;
margin:0 0 24px;
color:var(--warm);
max-width:22ch;
}
.case-study .body h2 .it{ font-style:italic; color:var(--gold-2); }
.case-study .body p{
font-family:var(--serif); font-size:17px; line-height:1.65;
color:rgba(247,245,240,.85);
margin:0 0 16px;
max-width:54ch;
}
.case-study .body .specs{
margin-top:30px;
padding-top:24px;
border-top:1px solid var(--hair-light);
display:flex; gap:36px; flex-wrap:wrap;
font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,245,240,.75);
}
.case-study .body .specs .s strong{
display:block;
color:var(--gold-2);
margin-bottom:4px; font-weight:500;
}
/* ============ SERVICE SUB-PAGE: CROSS-LINKS ============ */
.cross{
background:var(--warm);
padding:140px 8vw;
border-bottom:1px solid var(--hair);
}
.cross .hdr{
display:flex; justify-content:space-between; align-items:baseline;
border-bottom:1px solid var(--navy);
padding-bottom:24px;
margin-bottom:0;
flex-wrap:wrap; gap:20px;
}
.cross .hdr .label{ color:var(--gold); }
.cross .hdr h3{
font-family:var(--display); font-style:italic; font-weight:400;
font-size:30px; color:var(--gold); margin:0;
}
.cross-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
border-left:1px solid var(--navy);
}
.cross-card{
border-right:1px solid var(--navy);
border-bottom:1px solid var(--navy);
padding:36px 28px 30px;
display:flex; flex-direction:column;
min-height:240px;
background:var(--warm);
transition:background .3s, color .3s;
position:relative;
}
.cross-card:hover{ background:var(--navy); color:var(--warm); }
.cross-card .n{
font-family:var(--ui); font-size:11px; letter-spacing:.2em; color:var(--gold);
margin-bottom:20px;
}
.cross-card:hover .n{ color:var(--gold-2); }
.cross-card h4{
font-family:var(--display); font-weight:400;
font-size:30px; line-height:1.02;
color:var(--navy);
margin:0 0 14px;
}
.cross-card h4 .it{ font-style:italic; color:var(--gold); }
.cross-card:hover h4{ color:var(--warm); }
.cross-card:hover h4 .it{ color:var(--gold-2); }
.cross-card p{
font-family:var(--serif); font-size:14px; line-height:1.5;
color:var(--text); opacity:.85; margin:0 0 20px; flex:1;
}
.cross-card:hover p{ color:rgba(247,245,240,.82); opacity:1; }
.cross-card .arr{
font-family:var(--display); font-style:italic;
font-size:22px; color:var(--gold);
align-self:flex-end;
}
.cross-card:hover .arr{ color:var(--gold-2); }
/* ============ MOBILE MENU ============ */
.nav-burger{ display:none; }
body.menu-locked{ overflow:hidden; }
.nav-burger{
width:44px; height:44px; padding:0;
background:transparent; border:0; cursor:pointer;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
color:inherit;
-webkit-tap-highlight-color:transparent;
}
.nav-burger span{
display:block; width:24px; height:1.5px;
background:currentColor; border-radius:2px;
transition:transform .34s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu{
position:fixed; inset:0; z-index:1000;
background:var(--ink);
color:var(--warm);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s ease, visibility .22s ease;
overflow-y:auto;
/* own compositor layer: opening fades a pre-painted layer instead of
repainting the full screen on phone GPUs */
transform:translateZ(0);
will-change:opacity;
}
.mobile-menu::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 70% 55% at 80% 100%, rgba(160,136,88,.34), transparent 60%),
radial-gradient(ellipse 70% 55% at 10% 0%, rgba(31,67,93,.5), transparent 60%);
}
.mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu .mm-close{
position:absolute; top:18px; right:5vw; z-index:2;
width:46px; height:46px; padding:0;
background:transparent; border:0; cursor:pointer;
display:grid; place-items:center;
-webkit-tap-highlight-color:transparent;
}
.mobile-menu .mm-close span{
position:absolute; width:26px; height:1.5px; background:var(--warm); border-radius:2px;
transition:background .2s ease;
}
.mobile-menu .mm-close span:nth-child(1){ transform:rotate(45deg); }
.mobile-menu .mm-close span:nth-child(2){ transform:rotate(-45deg); }
.mobile-menu .mm-close:hover span{ background:var(--gold-2); }
.mobile-menu .mm-inner{
position:relative; z-index:1;
min-height:100%;
display:flex; flex-direction:column;
padding:84px 8vw 48px;
}
.mobile-menu .mm-brand{ display:flex; align-items:center; gap:12px; color:var(--warm); font-family:var(--display); font-size:18px; letter-spacing:.01em; text-decoration:none; margin-bottom:30px; }
.mobile-menu .mm-brand .brand-logo{ height:30px; width:auto; display:block; object-fit:contain; }
.mobile-menu .mm-eyebrow{
font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
color:var(--gold-2); opacity:.8; margin-bottom:24px;
}
.mobile-menu .mm-links{
display:flex; flex-direction:column;
border-top:1px solid rgba(247,245,240,.14);
}
.mobile-menu .mm-group{ border-bottom:1px solid rgba(247,245,240,.14); transform:translateY(16px); opacity:0; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.mobile-menu.open .mm-group{ opacity:1; transform:none; }
.mobile-menu.open .mm-group:nth-child(1){ transition-delay:.04s; }
.mobile-menu.open .mm-group:nth-child(2){ transition-delay:.08s; }
.mobile-menu.open .mm-group:nth-child(3){ transition-delay:.12s; }
.mobile-menu.open .mm-group:nth-child(4){ transition-delay:.16s; }
.mobile-menu .mm-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mobile-menu .mm-link{
display:flex; align-items:baseline; gap:16px; flex:1;
padding:24px 2px;
font-family:var(--display); font-weight:400;
font-size:clamp(32px, 10vw, 52px); line-height:1; letter-spacing:-.01em;
color:var(--warm); text-decoration:none;
}
.mobile-menu .mm-link .mm-ar{
font-family:var(--mono); font-size:15px; color:var(--gold-2);
transform:translateY(-4px);
}
.mobile-menu .mm-toggle{ width:46px; height:46px; flex-shrink:0; display:grid; place-items:center; background:transparent; border:1px solid rgba(247,245,240,.2); border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .3s ease, background .3s ease; }
.mobile-menu .mm-toggle:hover{ border-color:var(--gold-2); }
.mobile-menu .mm-chev{ width:9px; height:9px; border-right:1.5px solid var(--gold-2); border-bottom:1.5px solid var(--gold-2); transform:rotate(45deg) translate(-1px,-1px); transition:transform .34s cubic-bezier(.2,.7,.2,1); }
.mobile-menu .mm-group.open .mm-toggle{ background:rgba(160,136,88,.16); border-color:var(--gold-2); }
.mobile-menu .mm-group.open .mm-chev{ transform:rotate(-135deg) translate(2px,2px); }
.mobile-menu .mm-sub{ max-height:0; overflow:hidden; opacity:0; transition:max-height .42s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.mobile-menu .mm-group.open .mm-sub{ max-height:640px; opacity:1; }
.mobile-menu .mm-subinner{ padding:4px 2px 18px; }
.mobile-menu .mm-sublink{ display:flex; align-items:baseline; gap:14px; padding:12px 2px; border-top:1px solid rgba(247,245,240,.08); text-decoration:none; color:rgba(247,245,240,.82); transition:color .25s ease, padding-left .25s ease; }
.mobile-menu .mm-sublink:first-child{ border-top:0; }
.mobile-menu .mm-sublink:hover{ color:var(--gold-2); padding-left:10px; }
.mobile-menu .mm-sublink .mm-subnum{ font-family:var(--ui); font-size:10px; letter-spacing:.2em; color:var(--gold); min-width:22px; }
.mobile-menu .mm-sublink .mm-subname{ font-family:var(--serif); font-size:17px; line-height:1.2; }
.mobile-menu .mm-cta{
display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
margin-top:40px; padding:18px 26px;
background:transparent; border:1px solid rgba(247,245,240,.45); color:var(--warm);
font-family:var(--ui); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
text-decoration:none; border-radius:0;
opacity:0; transition:opacity .35s ease .2s, border-color .3s ease;
}
.mobile-menu.open .mm-cta{ opacity:1; }
.mobile-menu .mm-cta:hover{ border-color:var(--gold-2); }
.mobile-menu .mm-cta .mm-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(160,136,88,.25); flex-shrink:0; }
.mobile-menu .mm-socials{
margin-top:34px; display:flex; align-items:center; gap:18px;
opacity:0; transition:opacity .35s ease .25s;
}
.mobile-menu.open .mm-socials{ opacity:1; }
.mobile-menu .mm-social-label{
font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2);
}
.mobile-menu .mm-social-row{ display:flex; gap:12px; }
.mobile-menu .mm-social-row a{
width:44px; height:44px; border:1px solid rgba(247,245,240,.22); border-radius:50%;
display:grid; place-items:center; color:var(--warm);
transition:background .3s, color .3s, border-color .3s;
}
.mobile-menu .mm-social-row a:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.mobile-menu .mm-foot{
margin-top:auto; padding-top:40px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(247,245,240,.5);
}
@media (max-width: 980px){
.nav-burger{ display:flex; }
.nav .cta{ display:none; }
.nav-lang{ display:none; }
/* Backdrop blur is the single most expensive effect on phone GPUs and is
what makes the nav/menu feel laggy on mobile — swap it for near-opaque
solids of the same hues. Desktop keeps the glass effect. */
.nav.nav-dark, .nav.nav-light, .nav.nav-beige{
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
.nav.nav-dark{ background:rgba(20,15,10,.92); }
.nav.nav-light{ background:rgba(247,245,240,.96); }
.nav.nav-beige{ background:rgba(232,225,207,.96); }
.nav{ transition:color .3s ease, background .3s ease, border-color .3s ease, padding .3s ease; }
/* Menu must feel instant on a phone: fast fade, minimal stagger. */
.mobile-menu{ transition:opacity .12s ease, visibility .12s ease; }
.mobile-menu .mm-group{ transition-duration:.2s; }
.mobile-menu.open .mm-group:nth-child(1){ transition-delay:0s; }
.mobile-menu.open .mm-group:nth-child(2){ transition-delay:.03s; }
.mobile-menu.open .mm-group:nth-child(3){ transition-delay:.06s; }
.mobile-menu.open .mm-group:nth-child(4){ transition-delay:.09s; }
}
/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
.nav{ padding:14px 22px; }
.nav .links{ display:none; }
.menu{ display:none; }
.page-hero .frame{ padding:140px 6vw 80px; }
.page-hero h1{ font-size:clamp(48px, 14vw, 100px); }
.page-hero .meta-row{ gap:30px; }
/* ---- restructured mobile footer (shared) ---- */
.footer-mark{ grid-template-columns:1fr; gap:24px; padding-bottom:36px; margin-bottom:40px; }
.site-footer{ padding-top:72px; }
.footer-mark, .footer-grid, .footer-mid{ border-bottom:none; }
.footer-grid{
grid-template-columns:1fr 1fr;
grid-template-areas:
"services destinations"
"company destinations"
"contact brief";
gap:34px 28px;
padding-bottom:40px;
align-items:start;
}
.footer-grid .footer-col:nth-child(1){ grid-area:services; }
.footer-grid .footer-col:nth-child(2){ grid-area:destinations; }
.footer-grid .footer-col:nth-child(3){ grid-area:company; }
.footer-grid .footer-col:nth-child(4){ grid-area:contact; }
.footer-grid .footer-col:nth-child(5){ grid-area:brief; align-self:start; }
.footer-brief{ border:none; padding:0; background:none; }
.footer-brief p, .footer-brief .input, .footer-brief .small{ display:none; }
.footer-brief h5{ margin-bottom:14px; }
.brief-btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 20px;
border:1px solid var(--gold); color:var(--gold);
font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
text-decoration:none;
transition:background .3s, color .3s;
}
.brief-btn:hover{ background:var(--gold); color:var(--ink); }
.footer-mid{
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"offices offices"
"langs socials";
align-items:center;
gap:22px 16px;
}
.footer-mid .offices{ grid-area:offices; }
.footer-mid .langs{ grid-area:langs; }
.footer-mid .socials{ grid-area:socials; justify-content:flex-end; }
.footer-legal{
flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;
gap:10px; font-size:9.5px; letter-spacing:.12em;
}
.footer-legal .marq{ font-size:13px; white-space:nowrap; }
.footer-legal span{ white-space:nowrap; }
.cta-block .row{ grid-template-columns:1fr; gap:30px; }
.cta-block h2{ font-size:64px; }
.premise{ grid-template-columns:1fr; gap:30px; padding:80px 6vw; }
.included .hdr{ grid-template-columns:1fr; }
.included-grid{ grid-template-columns:1fr; }
.case-study .grid{ grid-template-columns:1fr; gap:40px; }
.cross-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 540px){
.site-footer{ padding-top:60px; }
.footer-grid{ gap:30px 22px; }
.footer-legal{ font-size:8.5px; gap:8px; }
.footer-legal .marq{ font-size:11px; }
}
/* slate / caption deconfliction, keep the placeholder caption visible
but out of the slate's corner. */
.page-hero .photo .cap{
right: auto; bottom: auto;
top: 36px; left: 36px;
text-align: left;
max-width: 50ch;
opacity: .45;
}
/* ============ TRIPADVISOR TRUST STRIP ============ */
.trust-strip{
display:inline-flex; align-items:center; gap:18px;
padding:10px 0;
color:rgba(247,245,240,.75);
transition:color .3s;
opacity:0; animation:trustFade 1s 1.4s forwards;
}
.trust-strip:hover{ color:var(--warm); }
.ta-owl{ flex-shrink:0; opacity:.6; transition:opacity .3s; }
.trust-strip:hover .ta-owl{ opacity:1; }
.ta-info{ display:inline-flex; align-items:center; gap:14px; }
.ta-dots{ display:flex; gap:4px; }
.ta-dots span{
width:13px; height:13px; border-radius:50%;
background:#00aa6c;
}
.ta-label{
font-family:var(--ui);
font-size:13px; letter-spacing:.04em;
color:rgba(247,245,240,.55);
}
.ta-label strong{ font-weight:500; color:rgba(247,245,240,.72); }
@keyframes trustFade{ to{ opacity:1; } }
/* Force arrow characters to render as text, not emoji (mobile fix) */
.ar, .arr, .cta .dot + span::after{
font-family:var(--display), serif;
text-rendering:optimizeLegibility;
-webkit-text-stroke:0;
}
.ar, .arr{
font-variant-emoji:text;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
}
/* ============ LANGUAGE SWITCHER ============ */
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-lang{ position:relative; }
.nav-lang-trigger{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--ui); font-size:12px; letter-spacing:.08em;
color:inherit; background:none; border:0; cursor:pointer;
padding:8px 2px; opacity:.85; transition:opacity .3s ease;
}
.nav-lang-trigger:hover,
.nav-lang:focus-within .nav-lang-trigger,
.nav-lang.open .nav-lang-trigger{ opacity:1; }
.nav-lang-trigger .globe{ color:var(--gold); flex:none; }
.nav-lang-trigger .caret{
width:6px; height:6px;
border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
transform:rotate(45deg) translateY(-2px); opacity:.65;
transition:transform .3s ease;
}
.nav-lang.open .nav-lang-trigger .caret{ transform:rotate(-135deg) translateY(2px); }
.nav-lang-menu{
position:absolute; top:calc(100% + 10px); right:0;
min-width:152px;
background:var(--warm);
border:1px solid var(--hair);
border-radius:3px;
box-shadow:0 20px 44px -18px rgba(20,15,10,.5);
padding:5px;
display:flex; flex-direction:column;
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .22s ease, transform .22s ease, visibility .22s;
pointer-events:none;
}
.nav-lang-menu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-lang:hover .nav-lang-menu,
.nav-lang:focus-within .nav-lang-menu,
.nav-lang.open .nav-lang-menu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.nav-lang-menu a{
display:flex; align-items:center; justify-content:space-between; gap:16px;
font-family:var(--ui); font-size:12.5px; letter-spacing:.03em;
color:var(--text); text-decoration:none;
padding:9px 12px; border-radius:2px;
transition:background .2s ease, color .2s ease;
}
.nav-lang-menu a:hover{ background:rgba(160,136,88,.12); }
.nav-lang-menu a.active{ color:var(--gold); }
.nav-lang-menu a.active::after{ content:"\2713"; font-size:11px; line-height:1; }
.mobile-menu .mm-lang{
align-self:flex-start; margin-top:26px;
display:inline-flex; align-items:stretch;
border:1px solid var(--gold); border-radius:2px; overflow:hidden;
}
.mobile-menu .mm-lang-opt{
font-family:var(--ui); font-size:12.5px; letter-spacing:.03em;
color:var(--gold); text-decoration:none; padding:11px 18px;
transition:background .3s ease, color .3s ease;
}
.mobile-menu .mm-lang-opt + .mm-lang-opt{ border-left:1px solid var(--gold); }
.mobile-menu .mm-lang-opt.active{ background:var(--gold); color:var(--ink); }
.mobile-menu .mm-lang-opt:not(.active):hover{ background:rgba(160,136,88,.14); }
/* ============================================================
FRENCH LANGUAGE OVERRIDES (:lang(fr))
French runs ~15-30% longer than English. Loosen the tight
spots ONLY for French so the English design is untouched.
Hook is on every /fr/ page; values tuned in QA.
============================================================ */
:lang(fr) .page-hero h1{ max-width:18ch; }
:lang(fr) .cta-block h2{ max-width:19ch; }
:lang(fr) .btn-primary,
:lang(fr) .btn-ghost,
:lang(fr) .btn-light{ letter-spacing:.04em; }
:lang(fr) .label,
:lang(fr) .stat .k,
:lang(fr) .page-hero .meta-row{ letter-spacing:.16em; }
:lang(fr) .marquee-track{ animation-duration:46s; }
:lang(fr) .nav .links{ gap:22px; }
:lang(fr) .nav .cta{ padding:10px 14px; }
@media (max-width:980px){
:lang(fr) .mobile-menu .mm-link{ font-size:clamp(28px,9vw,46px); }
}