/* ============================================================
Hawker USA — site styles
Design tokens + bespoke components
============================================================ */
:root{
--gj-ink:#17181a; --gj-charcoal:#323438; --gj-graphite:#3b3b3b;
--gj-champagne:#c6b083; --gj-champagne-lt:#ddc99f;
--gj-bone:#efece6; --gj-ash:#9b9992; --gj-border:rgba(255,255,255,.1);
--gj-shell:1320px; --gj-ease:.3s cubic-bezier(.4,0,.2,1);
--gj-serif:'Cormorant Garamond',Georgia,serif;
--gj-sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--gj-ink);color:var(--gj-bone);font-family:var(--gj-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:url("data:image/svg+xml,") 14 1, auto}
a{color:var(--gj-champagne);text-decoration:none;transition:color var(--gj-ease)}
a:hover{color:var(--gj-champagne-lt)}
::selection{background:var(--gj-champagne);color:var(--gj-ink)}
.gj-shell{max-width:var(--gj-shell);margin:0 auto;padding-left:40px;padding-right:40px}
.gj-serif{font-family:var(--gj-serif)}
.gj-label{font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--gj-champagne)}
.gj-eyebrow{font-size:15px;letter-spacing:.2em;text-transform:uppercase}
.gj-btn{font-family:var(--gj-sans);font-size:15px;letter-spacing:.2em;text-transform:uppercase;padding:14px 30px;border:none;cursor:pointer;transition:background var(--gj-ease),color var(--gj-ease),border-color var(--gj-ease);display:inline-block}
.gj-btn--gold{background:var(--gj-champagne);color:var(--gj-ink)}
.gj-btn--gold:hover{background:var(--gj-champagne-lt);color:var(--gj-ink)}
.gj-btn--ghost{background:transparent;color:var(--gj-bone);border:1px solid rgba(255,255,255,.3)}
.gj-btn--ghost:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-h2{font-family:var(--gj-serif);font-weight:300;font-size:clamp(34px,5vw,60px);margin:0;color:#f6f3ee}
/* ---------- header ---------- */
.gj-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 40px;background:rgba(20,21,23,.92);border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-ash)}
.gj-topbar a{color:var(--gj-ash)}.gj-topbar a.active{color:var(--gj-champagne)}
.gj-header{position:fixed;top:0;left:0;right:0;z-index:1030}
.gj-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 40px;background:rgba(23,24,26,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.gj-nav nav{display:flex;gap:32px;align-items:center;font-size:15px;letter-spacing:.2em;text-transform:uppercase}
.gj-nav nav a,.gj-nav nav .gj-navitem{color:var(--gj-bone);cursor:pointer;white-space:nowrap}
.gj-nav nav a:hover,.gj-nav nav .gj-navitem:hover{color:var(--gj-champagne)}
/* Logo mark as a background, not an ![]()
: a missing file then leaves clean empty space
instead of a broken-image icon, and the artwork swaps without touching markup (same
convention as the --img-* tokens). Shared by the header brand and the footer lockup —
only the size differs. */
.gj-brand .mark,.gj-flogo .mark{flex:0 0 auto;
background:var(--img-logomark) center/contain no-repeat}
.gj-brand{text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:13px}
.gj-brand .mark{width:52px;height:25px}
.gj-brand .wm{font-family:var(--gj-serif);font-weight:500;font-size:26px;letter-spacing:.34em;padding-left:.34em;line-height:1}
.gj-brand .sub{font-size:15px;letter-spacing:.5em;color:var(--gj-champagne);margin-top:5px;padding-left:.5em}
.gj-megamenu{background:rgba(23,24,26,.98);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;max-height:0;transition:max-height .45s var(--gj-ease)}
.gj-megamenu.open{max-height:420px}
.gj-mega-grid{max-width:var(--gj-shell);margin:0 auto;padding:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gj-mega-card{border-top:1px solid var(--gj-border);padding-top:16px;cursor:pointer;transition:border-color var(--gj-ease)}
.gj-mega-card:hover{border-color:var(--gj-champagne)}
.gj-mega-card .thumb{height:110px;margin-bottom:14px;background:linear-gradient(160deg,#3a3a41,#20242a)}
/* ---------- hero ---------- */
.gj-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gj-hero__bg{position:absolute;inset:0;background:linear-gradient(160deg,#6d7175 0%,#4c5054 42%,#34383c 74%,#24272a 100%)}
.gj-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.34),rgba(20,21,23,.22) 50%,rgba(20,21,23,.6))}
.gj-hero__slot{position:absolute;top:106px;left:40px;color:#c9c7c2;font-size:15px;letter-spacing:.24em;text-transform:uppercase;z-index:4}
.gj-cta{position:absolute;top:112px;right:52px;z-index:4;display:flex;align-items:center;gap:22px}
.gj-cta__txt{text-align:right;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#f2efe9;line-height:1.55}
.gj-cta__ring{position:relative;width:88px;height:88px;cursor:pointer;flex:0 0 auto}
.gj-cta__ring span{position:absolute;border-radius:50%}
.gj-cta__ring .r1{inset:0;border:1px solid rgba(255,255,255,.45)}
.gj-cta__ring .r2{inset:0;border:none;background:conic-gradient(from 0deg,transparent 0 70%,var(--gj-champagne) 73% 86%,transparent 89% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px));animation:gj-rotate-plain 3.6s linear infinite}
.gj-cta__ring .r3{inset:16px;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:transform .4s ease,color .3s ease,border-color .3s ease}
.gj-cta__ring:hover .r2{animation-duration:1.1s}
/* same arrow→plane swap as .gj-circle--dbl. Here the "→" is real text in the markup,
so it is collapsed with font-size:0 and the plane comes from ::after — which the
existing flex centring positions for free. */
.gj-cta__ring:hover .r3{color:var(--gj-champagne);border-color:var(--gj-champagne);transform:translateX(3px);font-size:0}
.gj-cta__ring:hover .r3::after{content:"\2708\FE0E";font-size:20px;color:var(--gj-champagne)}
.gj-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(340px,54vmin,580px);height:clamp(340px,54vmin,580px);z-index:2}
.gj-ring__outer{position:absolute;inset:-18px;border:1px dashed rgba(255,255,255,.14);border-radius:50%}
.gj-ring__inner{position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:50%}
.gj-ring__arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* invisible ring that exists only to carry a .gj-flyer at the gold arc's radius,
turning the same way the arc does */
.gj-ring__path{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.gj-ring__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:150%}
.gj-ring__center h1{font-family:var(--gj-serif);font-weight:400;font-size:clamp(22px,3vw,42px);letter-spacing:.12em;text-transform:uppercase;color:#f6f3ee;white-space:nowrap;margin:0}
.gj-node{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.gj-ringlabel{position:absolute;z-index:3;cursor:pointer;font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:#fff;white-space:nowrap}
.gj-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#c9c7c2;font-size:15px;letter-spacing:.3em;text-transform:uppercase;z-index:3}
.gj-scroll .track{width:1px;height:46px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.gj-scroll .track i{position:absolute;top:0;left:0;width:1px;height:14px;background:var(--gj-champagne);animation:gj-scrolldot 2s ease-in-out infinite}
.gj-scroll .plane{position:relative;width:22px;height:46px;overflow:hidden;display:block}
/* dark halo as well as the gold glow — the hero video behind this runs bright */
.gj-scroll .plane i{position:absolute;left:50%;top:0;transform:translate(-50%,0);animation:gj-planedrop 2.1s ease-in-out infinite;color:var(--gj-champagne);font-style:normal;
filter:drop-shadow(0 0 7px rgba(198,176,131,.6)) drop-shadow(0 1px 3px rgba(8,10,13,.95))}
.gj-scroll .plane i b{display:inline-block;transform:rotate(90deg);font-size:17px;font-weight:400}
/* ---------- intro ---------- */
.gj-intro{max-width:1100px;margin:0 auto;padding:120px 40px 90px;text-align:center}
.gj-intro .lead{font-family:var(--gj-serif);font-weight:300;font-size:clamp(24px,3vw,36px);line-height:1.5;color:#e6e2db;text-wrap:pretty}
/* ---------- services row ---------- */
.gj-svcrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gj-border);border:1px solid var(--gj-border)}
.gj-svccell{background:#1c1e20;padding:40px 30px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background var(--gj-ease)}
.gj-svccell:hover{background:#212325}
.gj-svccell .no{font-family:var(--gj-serif);font-size:22px;color:var(--gj-champagne)}
/* ---------- services diamond ---------- */
.gj-diastage{position:relative;width:min(940px,95vw);aspect-ratio:1/1;margin:36px auto 0}
.gj-tile{position:absolute;transform:translate(-50%,-50%) rotate(45deg);width:33%;height:33%;overflow:visible;cursor:pointer;
border:1px solid rgba(198,176,131,.55);filter:drop-shadow(0 22px 46px rgba(0,0,0,.5));transition:border-color var(--gj-ease)}
.gj-tile:hover{border-color:var(--gj-champagne)}
.gj-tile .win{position:absolute;inset:9px;overflow:hidden} /* matte gap between frame line and photo */
.gj-tile .img{position:absolute;top:50%;left:50%;width:158%;height:158%;transform:translate(-50%,-50%) rotate(-45deg);transition:transform 1.2s ease}
.gj-tile:hover .img{transform:translate(-50%,-50%) rotate(-45deg) scale(1.07)}
.gj-tile .veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(20,21,23,.1),rgba(20,21,23,.52))}
.gj-tile .body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);text-align:center;width:132%;z-index:2}
.gj-tile .body h3{font-family:var(--gj-serif);font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.25;margin:0}
.gj-tile .body .arrow{width:40px;height:40px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;margin:14px auto 0;transition:background var(--gj-ease),color var(--gj-ease)}
/* arrow→plane on hover, same idiom as the circle buttons; the "→" text is collapsed
and the glyph comes from ::after, inheriting the flex centring */
.gj-tile:hover .body .arrow{background:var(--gj-champagne);color:var(--gj-ink);border-color:var(--gj-champagne);font-size:0}
.gj-tile:hover .body .arrow::after{content:"\2708\FE0E";font-size:15px;color:var(--gj-ink)}
.gj-tile .body .demo{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:12px}
.gj-tile.top{top:24%;left:50%;z-index:3}
.gj-tile.left{top:50%;left:24%;z-index:2}
.gj-tile.right{top:50%;left:76%;z-index:2}
.gj-tile.bottom{top:76%;left:50%;z-index:3}
.gj-tile.top .img{background:radial-gradient(120% 95% at 50% 25%,#5c6b78 0%,#2c343c 55%,#141a1f 100%)}
.gj-tile.left .img{background:radial-gradient(120% 95% at 50% 30%,#7c7368 0%,#37312a 55%,#1a1713 100%)}
.gj-tile.right .img{background:radial-gradient(120% 95% at 55% 40%,#807770 0%,#3a332d 55%,#1c1815 100%)}
.gj-tile.bottom .img{background:radial-gradient(120% 100% at 50% 78%,#38505f 0%,#182630 55%,#0c1216 100%)}
/* ---------- offices ---------- */
.gj-offices{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--gj-border)}
.gj-offices__list{border-right:1px solid var(--gj-border);max-height:520px;overflow:auto}
.gj-office-item{padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-ash);cursor:pointer;transition:background var(--gj-ease),color var(--gj-ease)}
.gj-office-item .arw{color:var(--gj-champagne);opacity:0}
.gj-office-item.active{background:rgba(198,176,131,.14);color:var(--gj-bone)}
.gj-office-item.active .arw{opacity:1}
.gj-offices__panel{position:relative;min-height:520px;background:#1b1d1f;overflow:hidden}
.gj-offices__panel .bg{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#232527 0 16px,#1e2022 16px 32px)}
.gj-offices__panel .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,24,26,.95),rgba(23,24,26,.5))}
.gj-offices__panel .content{position:relative;padding:56px;max-width:520px}
.gj-offices__panel h3{font-family:var(--gj-serif);font-weight:300;font-size:44px;color:#f6f3ee;margin:0 0 22px}
.gj-offices__panel address{font-style:normal;font-size:15px;line-height:1.9;color:#c9c6c0;white-space:pre-line}
/* ---------- marquee ---------- */
.gj-marquee{border-top:1px solid var(--gj-border);border-bottom:1px solid var(--gj-border);padding:38px 0;overflow:hidden;background:#1b1d1f}
.gj-marquee__track{display:flex;width:max-content;animation:gj-marquee 26s linear infinite}
.gj-marquee__track .row{display:flex;align-items:center}
.gj-marquee__track .row span{font-family:var(--gj-serif);font-style:italic;font-weight:300;font-size:44px;color:#e6e2db;padding:0 40px;white-space:nowrap}
.gj-marquee__track .row b{font-size:44px;color:var(--gj-champagne);font-weight:400}
.gj-chip{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-ash);border:1px solid rgba(255,255,255,.14);padding:9px 18px;cursor:pointer;transition:color var(--gj-ease),border-color var(--gj-ease)}
.gj-chip:hover{color:var(--gj-champagne);border-color:var(--gj-champagne)}
/* ---------- news ---------- */
.gj-news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gj-newscard .thumb{height:220px;overflow:hidden;margin-bottom:18px;background:linear-gradient(160deg,#2a2c2f,#1d1f22)}
.gj-newscard .thumb i{display:block;width:100%;height:100%;transition:transform 1s ease;background:inherit}
.gj-newscard:hover .thumb i{transform:scale(1.05)}
.gj-newscard h3{font-family:var(--gj-serif);font-size:22px;line-height:1.35;color:#e6e2db;margin:0}
/* ---------- contact ---------- */
.gj-form{border:1px solid var(--gj-border);background:#1c1e20;padding:44px}
.gj-field{display:block}
.gj-field span{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-ash)}
.gj-field input{width:100%;margin-top:8px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.18);padding:10px 0;color:var(--gj-bone);font-family:var(--gj-sans);font-size:15px;outline:none}
.gj-field input:focus{border-color:var(--gj-champagne)}
/* ---------- footer ---------- */
.gj-footer{position:relative;background:radial-gradient(130% 100% at 82% 0%,#424951 0%,#282c31 44%,#161a1d 100%);padding:120px 40px 40px;overflow:hidden}
.gj-footer .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.35),rgba(20,21,23,.05) 30%,rgba(20,21,23,.55));pointer-events:none}
.gj-footer .inner{position:relative;max-width:var(--gj-shell);margin:0 auto}
.gj-footer .cols{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:48px;align-items:start}
.gj-footer .wm{font-family:var(--gj-serif);font-weight:500;font-size:34px;letter-spacing:.34em;color:#f3efe8;padding-left:.34em}
.gj-footer .tagline{margin:34px 0 0;max-width:340px;font-family:var(--gj-serif);font-size:26px;line-height:1.4;color:#e6e2db}
.gj-footer .tagline b{color:var(--gj-champagne);font-weight:400}
.gj-footer .fhead{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.gj-footer .fhead .dash{width:26px;height:1px;background:var(--gj-champagne)}
.gj-footer .fhead .t{font-family:var(--gj-serif);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-champagne)}
.gj-footer .flist{display:flex;flex-direction:column;gap:16px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#b7b5b0}
.gj-footer .flist a{color:#b7b5b0}.gj-footer .flist a:hover{color:#fff}
.gj-circle{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.gj-circle--dbl{width:60px;height:60px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.gj-circle--dbl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,var(--gj-champagne) 73% 86%,transparent 89% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));animation:gj-rotate-plain 3.6s linear infinite}
.gj-circle--dbl::after{content:"→";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;transition:transform .4s ease,color .3s ease,border-color .3s ease}
/* Hovering the enclosing link counts, not just the 60px disc — every .gj-circle--dbl on
the site sits inside an , and reacting only to the disc felt broken on the wide
"Contact Us →" style links. */
.gj-circle--dbl:hover::before,a:hover .gj-circle--dbl::before{animation-duration:1.1s}
/* on hover the arrow becomes a plane. The ✈ nose points RIGHT at 0deg, so it already
reads as "forward" with no rotation. `content` can't transition, so the swap is a
clean cut while the colour/nudge still ease. */
.gj-circle--dbl:hover::after,a:hover .gj-circle--dbl::after{content:"\2708\FE0E";color:var(--gj-champagne);border-color:var(--gj-champagne);transform:translateX(3px)}
.gj-circle--single{width:52px;height:52px;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-size:15px;transition:color .3s ease,border-color .3s ease}
.gj-circle--single::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,var(--gj-champagne) 73% 86%,transparent 89% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));animation:gj-rotate-plain 3.6s linear infinite}
.gj-circle--single:hover{color:var(--gj-champagne);border-color:var(--gj-champagne)}
.gj-circle--single:hover::before{animation-duration:1.1s}
.gj-social{display:flex;gap:12px;margin-top:44px}
.gj-social span{width:32px;height:32px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:#cfccc5;cursor:pointer;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-social span:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-footer .ctarow{display:grid;grid-template-columns:1.35fr 2fr;gap:48px;margin-top:54px}
.gj-footer .ctas{display:flex;flex-direction:column;gap:30px}
.gj-footer .cta{display:flex;align-items:center;gap:22px;cursor:pointer}
.gj-footer .cta .lbl{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#efece6}
.gj-footer .contactus{display:flex;align-items:center;gap:20px;cursor:pointer;margin-top:34px}
.gj-footer .contactus .lbl{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#efece6}
.gj-footer .bar{margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:15px;letter-spacing:.14em}
.gj-footer .bar .copy{color:#7d7b76}.gj-footer .bar .copy b{color:var(--gj-champagne);font-weight:400}
/* wraps because the four links no longer fit one phone-width row at the 15px minimum */
.gj-footer .bar .legal{display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--gj-ash)}
.gj-footer .bar .legal span{cursor:pointer}
.gj-top{position:absolute;right:40px;bottom:40px;width:66px;height:66px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;letter-spacing:.2em;color:#efece6;z-index:3;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-top:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].in{opacity:1;transform:none}
/* ---------- keyframes ---------- */
@keyframes gj-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gj-rotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes gj-rotate-plain{to{transform:rotate(360deg)}}
@keyframes gj-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@keyframes gj-scrolldot{0%{transform:translateY(0);opacity:0}40%{opacity:1}100%{transform:translateY(20px);opacity:0}}
/* the -50% X must live INSIDE the keyframes: an animated `transform` replaces the
element's own `translateX(-50%)`, which used to shove the plane off-centre and clip
it against the 22px-wide overflow:hidden track */
@keyframes gj-planedrop{0%{transform:translate(-50%,-5px);opacity:0}40%{opacity:1}100%{transform:translate(-50%,30px);opacity:0}}
/* ============================================================
STANDARD RING MOTION — one system for every ring widget
(hero · services diamond · luxury links · destinations)
Rule: the innermost ring (the one carrying the dots/nodes) is
STATIC by default; the two rings outside it turn very slowly in
opposite directions.
Toggle per ring with a small class:
• no class → static
• .gj-spin → turns (self-centered / inset:0 rings)
• .gj-spin.gj-spin--c → turns (rings centered via translate -50%,-50%)
• add .gj-spin--rev → opposite direction
• speed: --mid (outer-ish, faster of the slow pair)
--out (outermost, slower) · --whisper (barely moves)
So even a "moving" inner ring can get .gj-spin.gj-spin--whisper to
drift far less than the others.
============================================================ */
.gj-spin{animation:gj-rotate-plain var(--spd,150s) linear infinite}
.gj-spin--c{animation-name:gj-rotate} /* keeps translate(-50%,-50%) centering */
.gj-spin--rev{animation-direction:reverse}
.gj-spin--mid{--spd:120s} /* the nearer moving ring */
.gj-spin--out{--spd:175s} /* the outer moving ring (slower) */
.gj-spin--whisper{--spd:520s} /* almost imperceptible drift */
@media(prefers-reduced-motion:reduce){.gj-spin{animation:none}}
/* ---------- .gj-flyer: a plane that rides a rotating ring ----------
Drop ✈ inside any positioned, round element that turns.
It pins to the TOP-CENTRE of that element's box — which a border-radius outline
always touches, so it stays welded to the line even while the ring morphs — and
the ring's own rotation carries it around AND turns the glyph with it, so the
heading is tangent by construction. The ring's spin duration is the lap time.
The ✈ nose points RIGHT at 0deg (verified in-browser), and at the top of a
clockwise lap the heading is right — so a forward ring needs no rotation, and a
.gj-spin--rev ring needs .gj-flyer--rev. Used by the hero ring, Luxury Links and
the services-diamond backdrop. */
.gj-flyer{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
font-size:15px;line-height:1;font-weight:400;font-style:normal;
color:var(--gj-champagne);pointer-events:none;
/* gold glow for the dark sections, plus a dark halo so it still reads where the
backdrop is a bright photo (Luxury Links clouds, the hero) */
filter:drop-shadow(0 0 7px rgba(198,176,131,.55)) drop-shadow(0 1px 3px rgba(8,10,13,.95))}
.gj-flyer--rev{transform:translate(-50%,-50%) rotate(180deg)}
/* ---------- responsive ---------- */
@media(max-width:992px){
.gj-nav{grid-template-columns:1fr auto;gap:16px}
.gj-nav nav.left,.gj-nav nav.right .gj-navitem-hide{display:none}
/* the brand moves into the first column here, where the burger already sits — the
mark would land underneath it. The footer lockup still carries the logo. */
.gj-brand .mark{display:none}
.gj-svcrow,.gj-news{grid-template-columns:1fr 1fr}
.gj-offices{grid-template-columns:1fr}
.gj-offices__list{max-height:260px;border-right:none;border-bottom:1px solid var(--gj-border)}
.gj-footer .cols{grid-template-columns:1fr}
.gj-footer .ctarow{grid-template-columns:1fr;margin-top:40px}
.gj-ringlabel{font-size:15px}
}
/* Below this the brand's grid column gets narrow enough that the wordmark runs under the
absolutely-positioned burger (which ends at x=44). Measured overlap without this: 13px at
640, 24px at 480 and below. The padding clears it; the lockup then sits slightly right of
centre, which is the normal look for a burger + centred logo header. */
@media(max-width:767px){
.gj-brand{padding-left:38px}
/* the brand's grid column is only ~284px here (the quote button takes the rest), and
26px/.34em needs ~262px — with the padding above it wrapped to two lines, so step the
wordmark down to keep it on one */
.gj-brand .wm{font-size:21px;letter-spacing:.26em}
/* "PRIVATE AVIATION" is a descriptor, not the logo. At the 15px readability minimum it
needs ~145px even with no tracking, and the brand column here is 132px — it wrapped to
three lines and made the header four rows tall. Hidden rather than shrunk below 15px. */
.gj-brand .sub{display:none}
}
@media(max-width:640px){
.gj-shell,.gj-topbar,.gj-nav,.gj-footer{padding-left:20px;padding-right:20px}
.gj-cta__txt{display:none}
.gj-svcrow,.gj-news{grid-template-columns:1fr}
.gj-marquee__track .row span{font-size:30px}
}
/* ---------- mobile menu ---------- */
.gj-burger{display:none;position:absolute;left:20px;top:50%;transform:translateY(-50%);flex-direction:column;gap:5px;cursor:pointer;z-index:5}
.gj-burger span{width:24px;height:1.5px;background:var(--gj-bone);display:block}
.gj-drawer{position:fixed;inset:0;z-index:1200;background:rgba(20,21,23,.98);backdrop-filter:blur(12px);padding:80px 28px 40px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);visibility:hidden}
.gj-drawer.open{transform:none;visibility:visible}
.gj-drawer-close{position:absolute;top:22px;right:26px;font-size:30px;line-height:1;color:var(--gj-bone);cursor:pointer}
.gj-drawer-lang{display:flex;gap:22px;margin-bottom:20px;font-size:15px;letter-spacing:.2em;color:var(--gj-ash)}
.gj-drawer-lang .on{color:var(--gj-champagne)}
.gj-drawer-link{font-family:var(--gj-serif);font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--gj-bone);padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){
.gj-nav .left,.gj-nav .right{display:none}
.gj-nav{grid-template-columns:1fr auto 1fr}
.gj-burger{display:flex}
}
/* ============================================================
2026 ENHANCEMENTS
hero video · floating circles · offices · luxury links ·
news slider · destinations · image footer · a11y polish
============================================================ */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:120px}
:focus-visible{outline:2px solid var(--gj-champagne);outline-offset:3px}
img{max-width:100%;display:block}
/* image tokens (Unsplash — loaded from the web) */
:root{
--img-charter:url("../img/jet-exterior-nose.jpg");
--img-mgmt:url("../img/cabin-aisle.jpg");
--img-sales:url("../img/jet-exterior-tarmac.jpg");
--img-design:url("../img/jet-exterior-gate.jpg");
--img-luxe:url("../img/manufacturer-luxury_0.jpg");
--img-logomark:url("../img/logo-hawk.png");
--img-office:url("../img/city-skyline.jpg");
--img-dest:url("../img/mountains-clouds.jpg");
}
/* ---------- hero video ---------- */
.gj-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gj-hero__bg{z-index:0}
.gj-hero__scrim{z-index:1;background:linear-gradient(180deg,rgba(20,21,23,.45),rgba(20,21,23,.3) 50%,rgba(20,21,23,.7))}
.gj-hero .gj-ring,.gj-hero .gj-cta,.gj-hero .gj-scroll{z-index:4}
/* ---------- floating decorative circles ---------- */
.gj-floaters{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.gj-floater{position:absolute;border-radius:50%;border:1px solid rgba(198,176,131,.22);opacity:.55;will-change:transform}
.gj-floater.dot{border:none;background:radial-gradient(circle at 35% 30%,rgba(198,176,131,.5),rgba(198,176,131,0) 70%)}
.gj-floater.pale{border-color:rgba(255,255,255,.14)}
.gj-floater.f1{width:130px;height:130px;top:10%;left:6%;animation:gj-drift1 14s ease-in-out infinite}
.gj-floater.f2{width:60px;height:60px;top:22%;left:82%;animation:gj-drift2 11s ease-in-out infinite}
.gj-floater.f3{width:200px;height:200px;top:58%;left:78%;animation:gj-drift3 18s ease-in-out infinite}
.gj-floater.f4{width:44px;height:44px;top:70%;left:12%;animation:gj-drift4 9s ease-in-out infinite}
.gj-floater.f5{width:90px;height:90px;top:14%;left:44%;animation:gj-drift5 16s ease-in-out infinite}
.gj-floater.f6{width:150px;height:150px;top:64%;left:38%;animation:gj-drift6 20s ease-in-out infinite}
.gj-floater.f7{width:26px;height:26px;top:40%;left:90%;animation:gj-drift4 12s ease-in-out infinite}
.gj-floater.f8{width:70px;height:70px;top:82%;left:60%;animation:gj-drift2 15s ease-in-out infinite}
@keyframes gj-drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-26px)}}
@keyframes gj-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}
@keyframes gj-drift3{0%,100%{transform:translate(0,0)}33%{transform:translate(-26px,-18px)}66%{transform:translate(20px,26px)}}
@keyframes gj-drift4{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,20px)}}
@keyframes gj-drift5{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,-30px)}}
@keyframes gj-drift6{0%,100%{transform:translate(0,0)}40%{transform:translate(30px,-16px)}80%{transform:translate(-18px,22px)}}
/* ---------- services diamond: real photography ---------- */
/* deep vignette: lighter at the top behind the heading, sinking to near-black
at the bottom so the diamond tiles sit on darkness, not on flat grey */
.gj-diasection{position:relative;
background:
radial-gradient(120% 78% at 50% -8%,rgba(198,176,131,.10) 0%,rgba(198,176,131,0) 58%),
linear-gradient(180deg,#1f2225 0%,#17191c 46%,#0e1012 100%)}
.gj-diastage{z-index:2}
.gj-tile.top .img{background:var(--img-charter) center/cover no-repeat}
.gj-tile.left .img{background:var(--img-mgmt) center/cover no-repeat}
.gj-tile.right .img{background:var(--img-design) center/cover no-repeat}
.gj-tile.bottom .img{background:var(--img-sales) center/cover no-repeat}
.gj-tile .veil{background:radial-gradient(circle at 50% 48%,rgba(18,20,23,.28),rgba(18,20,23,.72))}
.gj-tile .body .demo{display:none}
/* ---------- offices (redesigned) ---------- */
/* Full-bleed: the photograph runs the whole viewport width rather than sitting inside a
bordered card, so the section reads as a place rather than a panel. The border and the
.gj-shell wrapper that boxed it in were removed; only the inner column is constrained. */
.gj-officeblk{position:relative;overflow:hidden;background:#15171a}
.gj-officeblk .bg{position:absolute;inset:0;background:var(--img-office) center/cover no-repeat;opacity:.5;filter:grayscale(.25)}
/* stronger at the edges, clearer in the middle — keeps the photo readable full width
while the centre column stays legible */
.gj-officeblk .scrim{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(19,21,24,.96) 0%,rgba(19,21,24,.42) 34%,rgba(19,21,24,.5) 68%,rgba(19,21,24,.97) 100%),
radial-gradient(64% 56% at 50% 52%,rgba(19,21,24,.62),rgba(19,21,24,.30))}
.gj-officeblk .inner{position:relative;max-width:var(--gj-shell);margin:0 auto;
padding:120px 40px 130px;text-align:center}
.gj-officeblk .head{margin-bottom:34px}
.gj-office-names{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 2px;max-width:820px;margin:0 auto 48px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;line-height:2}
.gj-office-names .nm{color:var(--gj-ash);cursor:pointer;padding:2px 6px;transition:color var(--gj-ease)}
.gj-office-names .nm:hover{color:var(--gj-bone)}
.gj-office-names .nm.active{color:var(--gj-champagne)}
.gj-office-names .sep{color:rgba(255,255,255,.22);padding:0 2px}
.gj-office-detail .city{font-family:var(--gj-serif);letter-spacing:.24em;font-size:28px;color:var(--gj-champagne);text-transform:uppercase;margin-bottom:30px}
.gj-office-detail .grp{display:flex;gap:56px;justify-content:center;align-items:center;flex-wrap:wrap;text-align:left}
.gj-office-detail .co{color:var(--gj-champagne);font-size:15px;margin-bottom:8px;letter-spacing:.04em}
.gj-office-detail address{font-style:normal;color:#c9c6c0;line-height:1.85;font-size:15px;white-space:pre-line}
.gj-office-detail .contact{margin-top:16px;font-size:15px;color:#cfccc6;line-height:1.9}
.gj-office-detail .contact a{color:#cfccc6}
.gj-office-detail .contact a:hover{color:var(--gj-champagne)}
.gj-tour{width:110px;height:110px;flex:0 0 auto;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;letter-spacing:.2em;color:var(--gj-bone);cursor:pointer;line-height:1.7}
.gj-tour::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.gj-tour::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 68%,var(--gj-champagne) 72% 86%,transparent 90% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.4px),#000 calc(100% - 1.4px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.4px),#000 calc(100% - 1.4px));animation:gj-rotate-plain 4s linear infinite}
.gj-tour span{position:relative;z-index:1}
/* ---------- luxury links (circular) ---------- */
.gj-luxe{position:relative;overflow:hidden;background:#14171b;padding:96px 24px 110px}
.gj-luxe .bg{position:absolute;inset:0;background:var(--img-luxe) center/cover no-repeat;opacity:.92}
.gj-luxe .scrim{position:absolute;inset:0;background:
radial-gradient(46% 42% at 50% 52%,rgba(10,13,17,.62),transparent 70%),
linear-gradient(180deg,rgba(16,19,23,.5),rgba(16,19,23,.28) 42%,rgba(16,19,23,.72))}
.gj-luxe__center h3,.gj-luxe__label{text-shadow:0 1px 12px rgba(8,10,13,.8),0 0 3px rgba(8,10,13,.7)}
.gj-luxe__head{text-shadow:0 1px 14px rgba(8,10,13,.6)}
.gj-luxe__head{position:relative;text-align:center;z-index:3;margin-bottom:20px}
.gj-luxe__stage{position:relative;z-index:2;width:min(760px,92vw);aspect-ratio:1/1;margin:0 auto}
.gj-luxe__ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(198,176,131,.28)}
.gj-luxe__ring.r-a{width:60%;height:60%;border-color:rgba(198,176,131,.4)} /* node ring — static */
.gj-luxe__ring.r-b{width:74%;height:74%;border-style:dashed;border-color:rgba(255,255,255,.16)} /* mid — turns */
.gj-luxe__arc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86%;height:86%;overflow:visible} /* outer — turns opposite */
/* invisible ring matching the arc's radius, so a .gj-flyer can ride that direction */
.gj-luxe__path{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:86%;height:86%;border-radius:50%;pointer-events:none;z-index:2}
.gj-luxe__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:44%}
.gj-luxe__center h3{font-family:var(--gj-serif);font-weight:400;font-size:clamp(20px,2.6vw,32px);letter-spacing:.06em;text-transform:uppercase;color:#f4f1ea;line-height:1.3;margin:0}
.gj-luxe__label{position:absolute;transform:translate(-50%,-50%);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#d8d5cf;white-space:nowrap;cursor:pointer;transition:color var(--gj-ease);z-index:3}
.gj-luxe__label:hover{color:var(--gj-champagne)}
.gj-luxe__node{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.12);z-index:2}
/* ---------- news slider (Swiper, bleeds off the right edge) ---------- */
.gj-newssec{position:relative;padding-top:110px;padding-bottom:110px}
/* soft clouds drifting behind the heading */
.gj-newssec::before{content:"";position:absolute;top:30px;left:0;right:0;height:440px;z-index:0;pointer-events:none;
background:url("../img/clouds-bg-news@2x.png") top center/100% auto no-repeat;opacity:.5;
-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
.gj-newssec > *{position:relative;z-index:1}
/* left edge aligns with the site container; right side runs to the viewport edge */
.gj-newsbleed{position:relative;padding-left:max(40px,calc((100vw - var(--gj-shell)) / 2 + 40px))}
.gj-newswiper{overflow:hidden} /* clips the peeking card at the right edge */
.gj-newswiper .swiper-wrapper{align-items:stretch}
.swiper-slide.gj-newscard2{width:300px;height:auto;cursor:pointer}
.gj-newscard2 .cover{height:430px;overflow:hidden;background:linear-gradient(160deg,#2a2c2f,#1a1c1f);position:relative}
.gj-newscard2 .cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.gj-newscard2:hover .cover img{transform:scale(1.06)}
.gj-newscard2 .date{margin-top:18px;font-size:15px;letter-spacing:.22em;color:var(--gj-champagne);text-transform:uppercase}
.gj-newscard2 .src{margin-top:10px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#d8d5cf}
.gj-newscard2 .src small{display:block;font-family:var(--gj-serif);font-size:16px;letter-spacing:.02em;text-transform:none;color:#a9a7a1;margin-top:6px;text-wrap:pretty}
.gj-slidebtn{position:absolute;top:215px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,21,23,.55);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;z-index:4;transition:border-color var(--gj-ease),color var(--gj-ease),background var(--gj-ease)}
.gj-slidebtn:hover{border-color:var(--gj-champagne);color:var(--gj-champagne);background:rgba(20,21,23,.75)}
.gj-slidebtn.prev{left:24px}
.gj-slidebtn.next{right:24px}
.gj-slidebtn.swiper-button-disabled{opacity:.25;cursor:default;pointer-events:none}
/* ---------- view destinations ---------- */
/* Backdrop is the shared .gj-diaflow (fluid rings + planes), same as the services diamond.
The world-map globe image and the old .gj-dest__rings line stack were removed. */
.gj-dest{position:relative;overflow:hidden;padding:130px 24px;text-align:center;
background:
radial-gradient(120% 78% at 50% -8%,rgba(198,176,131,.10) 0%,rgba(198,176,131,0) 58%),
linear-gradient(180deg,#1f2225 0%,#17191c 46%,#0e1012 100%)}
.gj-dest .scrim{position:absolute;inset:0;z-index:0;background:radial-gradient(58% 58% at 50% 48%,rgba(22,23,25,.12),rgba(22,23,25,.86))}
/* .gj-diaflow normally sizes off .gj-diastage (110%); here there is no stage, so give it
an explicit size centred on the section. */
.gj-dest .gj-diaflow{width:min(760px,92vw)}
.gj-dest__inner{position:relative;z-index:999;max-width:440px;margin:0 auto}
.gj-dest__inner h2{font-family:var(--gj-serif);font-weight:300;font-size:clamp(30px,4.4vw,50px);letter-spacing:.14em;text-transform:uppercase;color:#f6f3ee;line-height:1.15;margin:0}
.gj-dest__inner .dvd{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gj-champagne),transparent);margin:24px auto 30px}
.gj-dest__inner p{color:var(--gj-ash);line-height:1.9;font-size:15px;margin:0 auto 34px;max-width:360px}
.gj-dest__go{display:inline-flex;align-items:center;gap:20px;cursor:pointer}
.gj-dest__go .lbl{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#efece6}
/* ---------- footer image background ---------- */
.gj-footer{background:#0f1216}
.gj-footer::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(15,18,22,.9) 0%,rgba(15,18,22,.72) 42%,rgba(15,18,22,.46) 100%),
url("../img/footer-bg.png") center center/cover no-repeat}
.gj-footer .veil{background:radial-gradient(120% 90% at 82% 8%,rgba(198,176,131,.06),transparent 55%)}
.gj-flogo{display:flex;align-items:center;gap:14px}
.gj-flogo svg{flex:0 0 auto}
.gj-flogo .mark{width:72px;height:34px}
.gj-flogo .wm{font-size:30px}
.gj-footer .gj-social{gap:14px}
.gj-footer .gj-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#cfccc5;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-footer .gj-social a:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-footer .gj-social a svg{width:15px;height:15px;fill:currentColor}
/* ---------- responsive: enhancements ---------- */
@media(max-width:992px){
.gj-office-detail .grp{gap:34px}
.gj-luxe__label{font-size:15px;letter-spacing:.12em}
.gj-slidebtn{top:auto;bottom:-72px}
.gj-slidebtn.prev{left:calc(50% - 66px)}
.gj-slidebtn.next{right:calc(50% - 66px)}
.gj-newsbleed{padding-bottom:84px}
}
@media(max-width:640px){
.gj-office-detail .grp{flex-direction:column;gap:26px;text-align:center}
.gj-luxe__stage{width:96vw}
.gj-luxe__label{font-size:15px;letter-spacing:.06em;white-space:normal;max-width:92px;text-align:center;line-height:1.25}
.swiper-slide.gj-newscard2{width:78vw}
.gj-newscard2 .cover{height:400px}
.gj-newsbleed{padding-left:20px}
.gj-dest{padding:96px 20px}
}
/* hero corner labels overflow narrow screens — hide (services still listed below) */
@media(max-width:600px){
.gj-ringlabel,.gj-hero .gj-node{display:none}
}
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
.gj-floaters{display:none}
}
/* ============================================================
MOBILE MODERNIZATION — dynamic viewport, safe areas,
touch ergonomics, diamond→cards on phones
============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(198,176,131,.25);overscroll-behavior-y:none}
button{font:inherit}
/* dynamic viewport height — no jump when mobile browser chrome shows/hides */
.gj-hero{height:100vh;height:100svh;min-height:560px}
@supports(height:100dvh){.gj-hero{height:100dvh}}
/* safe-area (notch) padding for edge UI */
.gj-topbar{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
.gj-footer{padding-bottom:max(40px,env(safe-area-inset-bottom))}
.gj-drawer{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right));padding-bottom:max(40px,env(safe-area-inset-bottom))}
/* smoother momentum scrolling on the news rail */
.gj-newstrack{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x}
/* comfortable tap targets on touch / small screens */
@media(hover:none),(max-width:900px){
.gj-chip{padding:12px 20px}
.gj-office-names .nm{padding:8px 8px}
.gj-footer .gj-social a{width:42px;height:42px}
.gj-footer .flist a,.gj-footer .bar .legal span{padding:4px 0;display:inline-block}
.gj-topbar a{padding:4px 2px}
.gj-slidebtn{width:52px;height:52px}
}
/* the rotated diamond is cramped on phones — present the four services
as clean, full-bleed image cards instead */
@media(max-width:680px){
.gj-diasection{padding:80px 0 88px !important}
.gj-diastage{position:static;width:auto;aspect-ratio:auto;margin:30px 20px 0;
display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gj-tile{position:static;transform:none;width:auto;height:190px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.45))}
.gj-tile .win{position:absolute;inset:6px}
.gj-tile .img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;transform:none}
.gj-tile:hover .img,.gj-tile:active .img{transform:scale(1.05)}
.gj-tile .veil{background:linear-gradient(180deg,rgba(18,20,23,.25),rgba(18,20,23,.72))}
.gj-tile .body{position:absolute;inset:0;top:0;left:0;transform:none;width:auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px}
.gj-tile .body h3{font-size:15px !important}
.gj-tile .body .arrow{margin:0 auto}
}
@media(max-width:430px){
.gj-diastage{grid-template-columns:1fr}
.gj-tile{height:170px}
}
/* keep the mega-menu usable if ever shown on small screens */
@media(max-width:760px){
.gj-mega-grid{grid-template-columns:1fr 1fr;gap:18px;padding:24px}
}
/* ============================================================
HEADER over hero video — transparent at top, solid on scroll
============================================================ */
.gj-header{transition:background .4s ease}
.gj-header--transparent::before{content:"";position:absolute;left:0;right:0;top:0;height:210px;
background:linear-gradient(180deg,rgba(12,13,15,.6),rgba(12,13,15,0));pointer-events:none;z-index:-1;
opacity:1;transition:opacity .4s ease}
.gj-header--transparent .gj-topbar{background:transparent;border-bottom-color:transparent;
transition:background .4s ease,border-color .4s ease}
.gj-header--transparent .gj-nav{background:transparent;backdrop-filter:none;border-bottom-color:transparent;
transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease}
.gj-header--transparent.is-solid::before{opacity:0}
.gj-header--transparent.is-solid .gj-topbar{background:rgba(20,21,23,.92);border-bottom-color:rgba(255,255,255,.06)}
.gj-header--transparent.is-solid .gj-nav{background:rgba(23,24,26,.9);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.06)}
/* search trigger (magnifier) */
.gj-searchtrigger{cursor:pointer;color:var(--gj-ash);transition:color var(--gj-ease)}
.gj-searchtrigger:hover{color:var(--gj-champagne)}
.gj-searchtrigger .ic{width:13px;height:13px;border:1px solid currentColor;border-radius:50%;position:relative;display:inline-block}
.gj-searchtrigger .ic::after{content:"";position:absolute;right:-4px;bottom:-3px;width:6px;height:1px;background:currentColor;transform:rotate(45deg)}
/* ---------- search overlay ---------- */
.gj-search{position:fixed;inset:0;z-index:2000;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility .35s}
.gj-search.open{visibility:visible;opacity:1}
.gj-search__backdrop{position:absolute;inset:0;background:rgba(10,11,13,.86);backdrop-filter:blur(8px)}
.gj-search__panel{position:relative;max-width:760px;margin:0 auto;padding:16vh 24px 0;transform:translateY(-16px);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.gj-search.open .gj-search__panel{transform:none}
.gj-search__close{position:absolute;top:5.5vh;right:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1;color:var(--gj-bone);cursor:pointer;transition:color var(--gj-ease)}
.gj-search__close:hover{color:var(--gj-champagne)}
.gj-search__field{display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.28)}
.gj-search__field .mag{width:22px;height:22px;border:1.5px solid var(--gj-champagne);border-radius:50%;position:relative;flex:0 0 auto}
.gj-search__field .mag::after{content:"";position:absolute;right:-6px;bottom:-4px;width:9px;height:1.5px;background:var(--gj-champagne);transform:rotate(45deg)}
.gj-search input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font-family:var(--gj-serif);font-weight:300;font-size:clamp(24px,4.4vw,40px);padding:14px 0;outline:none}
.gj-search input::placeholder{color:var(--gj-ash)}
.gj-search__results{margin-top:18px;max-height:50vh;overflow:auto}
.gj-search__results a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--gj-bone);font-size:15px;letter-spacing:.14em;text-transform:uppercase;transition:color var(--gj-ease),padding-left var(--gj-ease)}
.gj-search__results a:hover,.gj-search__results a.active{color:var(--gj-champagne);padding-left:12px}
.gj-search__results a i{color:var(--gj-ash);font-style:normal;font-size:15px;letter-spacing:.22em;white-space:nowrap}
.gj-search__results .none{color:var(--gj-ash);padding:20px 2px;font-size:15px;letter-spacing:.06em}
/* ---------- services diamond: focus one service on hover (desktop) ---------- */
@media(min-width:681px) and (hover:hover){
.gj-diastage .gj-tile{transition:border-color var(--gj-ease),opacity .5s ease,filter .5s ease,transform .55s cubic-bezier(.4,0,.2,1),box-shadow .5s ease}
.gj-diastage:hover .gj-tile{opacity:.14;filter:grayscale(.6) brightness(.68)}
.gj-diastage:hover .gj-tile:hover{opacity:1;filter:none;transform:translate(-50%,-50%) rotate(45deg) scale(1.09);z-index:6;border-color:var(--gj-champagne)}
.gj-diastage:hover .gj-tile:hover .veil{background:radial-gradient(circle at 50% 48%,rgba(20,21,23,0),rgba(20,21,23,.32))}
}
/* ============================================================
AIRCRAFT DETAIL PAGE (charter → aircraft.html)
============================================================ */
.gj-ac{position:relative;background:#181a1d;overflow:hidden}
.gj-ac-clouds{position:absolute;left:0;right:0;height:900px;z-index:0;pointer-events:none;opacity:.5;
background:url("../img/clouds-bg-news@2x.png") top center/140% auto no-repeat;
-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.gj-ac > section{position:relative;z-index:1}
.gj-ac-h{font-family:var(--gj-serif);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(24px,3.4vw,34px);color:#f6f3ee;text-align:center;margin:0}
.gj-ac-dvd{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gj-champagne),transparent);margin:20px auto 0}
/* hero */
.gj-ac-hero{padding:170px 24px 80px;text-align:center;overflow:hidden}
/* The hero image is a photo with its own dark background; shown as a clipped 900px
rectangle it read as a cramped box. Widened and feathered on every edge with a
radial mask so the rectangle dissolves into the page instead of framing itself. */
.gj-ac-hero .plane{position:absolute;top:70px;left:50%;transform:translateX(-50%);width:min(1240px,102%);opacity:.16;
filter:grayscale(.35) brightness(1.15);pointer-events:none;z-index:0;
-webkit-mask:radial-gradient(70% 72% at 50% 46%,#000 42%,transparent 76%);
mask:radial-gradient(70% 72% at 50% 46%,#000 42%,transparent 76%)}
.gj-ac-hero .bread{position:relative;z-index:2;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-ash);margin-bottom:26px}
.gj-ac-hero .bread a{color:var(--gj-ash)}.gj-ac-hero .bread b{color:var(--gj-champagne);font-weight:400}
.gj-ac-hero .inner{position:relative;z-index:2;max-width:920px;margin:0 auto}
.gj-ac-hero h1{font-family:var(--gj-serif);font-weight:300;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(30px,5vw,50px);color:#f6f3ee;margin:0}
.gj-ac-hero .base{font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--gj-champagne);margin-top:12px}
.gj-ac-hero p{max-width:640px;margin:26px auto 0;font-size:15px;line-height:1.9;color:var(--gj-ash)}
.gj-ac-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 40px;margin-top:34px}
.gj-ac-badge{display:flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.06em;color:#cfccc5}
.gj-ac-badge .ic{width:26px;height:26px;flex:0 0 auto;border:1px solid rgba(198,176,131,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gj-champagne);font-size:15px}
.gj-ac-badge .n{color:#f6f3ee}.gj-ac-badge .n b{color:var(--gj-champagne);font-weight:400;font-family:var(--gj-serif);font-size:16px}
.gj-ac-cbtns{display:flex;justify-content:center;gap:26px;margin-top:44px;flex-wrap:wrap}
.gj-ac-cbtn{width:104px;height:104px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-bone);cursor:pointer;line-height:1.6;background:none;border:none}
.gj-ac-cbtn::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.gj-ac-cbtn::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 68%,var(--gj-champagne) 72% 86%,transparent 90% 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.4px),#000 calc(100% - 1.4px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.4px),#000 calc(100% - 1.4px));animation:gj-rotate-plain 4s linear infinite}
.gj-ac-cbtn span{position:relative;z-index:1;max-width:74px}
.gj-ac-cbtn:hover{color:var(--gj-champagne)}
.gj-ac-cbtn:hover::after{animation-duration:1.2s}
/* interior gallery (ring behind two images) */
.gj-ac-introg{position:relative;padding:20px 24px 90px;display:flex;justify-content:center;align-items:center;min-height:360px}
.gj-ac-introg .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border-radius:50%;
border:1px solid rgba(198,176,131,.28);z-index:0}
.gj-ac-introg .ring.d{width:400px;height:400px;border-style:dashed;border-color:rgba(255,255,255,.14)}
.gj-ac-introg .imgs{position:relative;z-index:1;display:flex;gap:16px}
.gj-ac-introg .imgs img{width:min(300px,42vw);height:230px;object-fit:cover;box-shadow:0 20px 46px rgba(0,0,0,.5)}
/* floor plan */
.gj-ac-floor{padding:70px 24px 60px;text-align:center}
.gj-ac-tabs{display:flex;justify-content:center;gap:34px;margin:26px 0 40px}
.gj-ac-tab{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-ash);cursor:pointer;padding-bottom:7px;border-bottom:1px solid transparent;transition:color var(--gj-ease),border-color var(--gj-ease)}
.gj-ac-tab.active{color:var(--gj-champagne);border-bottom-color:var(--gj-champagne)}
.gj-ac-plan{max-width:860px;margin:0 auto}
.gj-ac-plan svg{width:100%;height:auto;display:none}
.gj-ac-plan svg.on{display:block}
.gj-ac-plandots{display:flex;justify-content:center;gap:9px;margin-top:30px}
.gj-ac-plandots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.gj-ac-plandots span.on{background:var(--gj-champagne);width:22px;border-radius:3px}
/* photo gallery */
.gj-ac-gallery{padding:70px 24px 90px;text-align:center}
.gj-ac-gwrap{position:relative;max-width:1120px;margin:34px auto 0}
.gj-ac-gswiper{overflow:hidden}
.gj-ac-gswiper .swiper-slide{width:min(560px,80%)}
.gj-ac-gswiper .swiper-slide img{width:100%;height:min(500px,56vh);object-fit:cover;display:block}
.gj-ac-gswiper .swiper-slide-active{position:relative}
.gj-ac-gcount{position:absolute;right:20px;bottom:16px;color:#fff;font-family:var(--gj-serif);font-size:22px;letter-spacing:.05em;z-index:3;text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none}
/* specifications */
.gj-ac-specs{max-width:900px;margin:0 auto;padding:70px 24px 110px}
.gj-ac-specgrp{margin-top:20px}
.gj-ac-specgrp .lbl{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gj-champagne);padding:22px 0 10px;border-bottom:1px solid rgba(198,176,131,.25)}
.gj-ac-specrow{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px}
.gj-ac-specrow .k{color:var(--gj-ash);letter-spacing:.1em;text-transform:uppercase}
.gj-ac-specrow .v{color:#e6e2db}
@media(max-width:640px){
.gj-ac-introg .ring{width:88vw;height:88vw}
.gj-ac-introg .imgs{flex-direction:column}
.gj-ac-introg .imgs img{width:min(320px,82vw);height:180px}
.gj-ac-specrow{grid-template-columns:1fr;gap:4px}
.gj-ac-hero{padding-top:140px}
}
/* ============================================================
DESIGN & COMPLETION MANAGEMENT PAGE (design.html)
(reuses .gj-ac, .gj-ac-clouds, .gj-ac-h, .gj-ac-dvd, .gj-ac-cbtn,
.gj-ac-gswiper, .gj-slidebtn)
============================================================ */
.gj-dsn-hero{position:relative;padding:180px 24px 90px;text-align:center;overflow:hidden}
.gj-dsn-hero .bg{position:absolute;inset:0;background:var(--img-mgmt) center/cover no-repeat;opacity:.4;filter:grayscale(.3)}
.gj-dsn-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.78),rgba(18,20,23,.6) 45%,rgba(18,20,23,.92))}
.gj-dsn-hero .inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.gj-dsn-hero h1{font-family:var(--gj-serif);font-weight:300;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(28px,4.4vw,46px);color:#f6f3ee;line-height:1.15;margin:0}
.gj-dsn-hero .sub{font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--gj-champagne);margin:26px 0 22px}
.gj-dsn-hero p{font-size:15px;line-height:1.95;color:var(--gj-ash);margin:0 auto 18px;max-width:680px}
.gj-dsn-hero p b{color:#cfccc5;font-weight:400}
.gj-dsn-hero .contact{position:absolute;top:46%;right:5%;z-index:3}
/* projects achieved — brand diamond */
.gj-dsn-brands{position:relative;max-width:820px;margin:44px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:44px 64px;padding:30px 0}
.gj-dsn-brands .frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:min(320px,60%);aspect-ratio:1/1;border:1px solid rgba(198,176,131,.22);z-index:0}
.gj-dsn-brand{position:relative;z-index:1;width:180px;text-align:center}
.gj-dsn-brand .logo{font-family:var(--gj-serif);font-size:22px;letter-spacing:.06em;color:#eceae4;line-height:1}
.gj-dsn-brand .logo small{display:block;font-family:var(--gj-sans);font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gj-champagne);margin-top:6px}
.gj-dsn-brand .models{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--gj-ash);line-height:1.9;margin-top:12px}
/* services we offer — three circles */
.gj-dsn-svcsec{position:relative;overflow:hidden;padding:80px 24px;text-align:center}
.gj-dsn-svcsec .bg{position:absolute;inset:0;background:var(--img-mgmt) center/cover no-repeat;opacity:.16;filter:grayscale(.5)}
.gj-dsn-svcsec .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.9),rgba(18,20,23,.8))}
.gj-dsn-svcs{position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:30px 46px;margin-top:34px}
.gj-dsn-svc{width:172px;height:172px;border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;cursor:pointer;color:var(--gj-bone);background:none;border:none}
.gj-dsn-svc::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:box-shadow var(--gj-ease)}
.gj-dsn-svc::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,var(--gj-champagne) 73% 87%,transparent 90% 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - 1.3px));opacity:0;transition:opacity var(--gj-ease)}
.gj-dsn-svc:hover::after{opacity:1;animation:gj-rotate-plain 4s linear infinite}
.gj-dsn-svc .t{font-family:var(--gj-serif);font-size:15px;letter-spacing:.04em;line-height:1.3}
.gj-dsn-svc .rm{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gj-champagne);margin-top:12px}
/* accordion */
.gj-acc{max-width:780px;margin:0 auto;padding:60px 24px 10px}
.gj-acc-item{border-top:1px solid rgba(255,255,255,.1)}
.gj-acc-item:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.gj-acc-head{display:flex;align-items:center;gap:22px;padding:24px 4px;cursor:pointer;user-select:none}
.gj-acc-head .no{font-family:var(--gj-serif);color:var(--gj-ash);font-size:17px;width:16px;flex:0 0 auto}
.gj-acc-head .t{flex:1;font-family:var(--gj-serif);font-size:clamp(17px,2.2vw,22px);letter-spacing:.1em;text-transform:uppercase;color:#e2ded7;transition:color var(--gj-ease)}
.gj-acc-item.open .gj-acc-head .t,.gj-acc-head:hover .t{color:var(--gj-champagne)}
.gj-acc-head .pm{position:relative;width:16px;height:16px;flex:0 0 auto}
.gj-acc-head .pm::before,.gj-acc-head .pm::after{content:"";position:absolute;background:var(--gj-champagne);transition:transform var(--gj-ease),opacity var(--gj-ease)}
.gj-acc-head .pm::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.gj-acc-head .pm::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.gj-acc-item.open .gj-acc-head .pm::after{opacity:0;transform:translateX(-50%) rotate(90deg)}
.gj-acc-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.gj-acc-body .in{padding:2px 4px 26px 52px;color:var(--gj-ash);font-size:15px;line-height:1.9}
.gj-acc-body ul{margin:0;padding-left:18px}
.gj-acc-body li{margin-bottom:11px}
.gj-acc-body li::marker{color:var(--gj-champagne)}
/* our projects slider */
.gj-dsn-proj{padding:80px 24px 90px;text-align:center}
.gj-dsn-projwrap{position:relative;max-width:1120px;margin:34px auto 0}
.gj-dsn-projwrap .gj-slidebtn{top:44%}
/* discover CTA */
.gj-dsn-cta{position:relative;overflow:hidden;text-align:center;padding:110px 24px}
.gj-dsn-cta .bg{position:absolute;inset:0;background:var(--img-luxe) center/cover no-repeat;opacity:.3}
.gj-dsn-cta .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.8),rgba(18,20,23,.62) 50%,rgba(18,20,23,.85))}
.gj-dsn-cta .inner{position:relative;z-index:2}
.gj-dsn-cta h2{font-family:var(--gj-serif);font-weight:300;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(22px,3.2vw,34px);color:#f3efe8;margin:0 0 30px}
.gj-dsn-cta .go{display:inline-flex}
@media(max-width:640px){
.gj-dsn-hero .contact{position:static;margin-top:34px;display:flex;justify-content:center}
.gj-dsn-brands .frame{display:none}
.gj-acc-body .in{padding-left:40px}
}
/* ============================================================
AIRCRAFT MANAGEMENT PAGE (management.html) — reuses gj-dsn/gj-acc
============================================================ */
.gj-mgmt-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 72px;max-width:920px;margin:44px auto 0;text-align:center;position:relative;z-index:1}
.gj-mgmt-stat .n{font-family:var(--gj-serif);font-weight:300;font-size:clamp(36px,5vw,58px);color:var(--gj-champagne);line-height:1}
.gj-mgmt-stat .l{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-ash);margin-top:12px}
.gj-mgmt-statsec{position:relative;overflow:hidden;padding:80px 24px;text-align:center}
.gj-mgmt-statsec .bg{position:absolute;inset:0;background:var(--img-luxe) center/cover no-repeat;opacity:.14}
.gj-mgmt-statsec .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.86),rgba(18,20,23,.8))}
/* ============================================================
NEWS / PRESS ROOM LISTING (news.html)
============================================================ */
.gj-newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px;max-width:var(--gj-shell);margin:0 auto;padding:0 40px}
.gj-newsgrid .gj-newscard2{width:auto;max-width:none}
.gj-newsgrid .gj-newscard2 .cover{height:360px}
.gj-newscard2.is-hidden{display:none}
.gj-newsfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px auto 50px;padding:0 24px}
.gj-newsfilter .gj-chip{background:transparent}
.gj-newsfilter .gj-chip.active{background:var(--gj-champagne);color:var(--gj-ink);border-color:var(--gj-champagne)}
.gj-newsmore{display:flex;justify-content:center;padding:60px 24px 0}
.gj-newsempty{text-align:center;color:var(--gj-ash);padding:60px 24px;font-size:15px;letter-spacing:.06em}
@media(max-width:992px){.gj-newsgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gj-newsgrid{grid-template-columns:1fr;padding:0 20px;gap:36px}
.gj-newsgrid .gj-newscard2 .cover{height:320px}}
/* ============================================================
CONTACT PAGE (contact.html)
============================================================ */
.gj-ct-hero{position:relative;overflow:hidden;padding:170px 24px 40px;text-align:center}
.gj-ct-hero .bg{position:absolute;inset:0;background:var(--img-mgmt) center/cover no-repeat;opacity:.3;filter:grayscale(.4)}
.gj-ct-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.82),rgba(18,20,23,.9))}
.gj-ct-hero .inner{position:relative;z-index:2}
.gj-ct-dir{position:relative;z-index:2;max-width:940px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 70px;text-align:left}
.gj-ct-dir h3{font-family:var(--gj-serif);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-champagne);margin:0 0 22px;font-weight:400}
.gj-ct-city{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:9px 0}
.gj-ct-city .city{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-ash)}
.gj-ct-city .mail{display:block;font-size:15px;letter-spacing:.04em;color:var(--gj-ash)}
.gj-ct-city .tel{display:block;font-size:16px;color:#e6e2db;margin-top:2px}
.gj-ct-city .tel:hover,.gj-ct-city .mail:hover{color:var(--gj-champagne)}
.gj-ct-block{margin-bottom:34px}
.gj-ct-block .tel{font-size:16px;color:#e6e2db}
.gj-ct-block .tel:hover{color:var(--gj-champagne)}
/* contact form */
.gj-ct-formsec{padding:70px 24px 110px;text-align:center}
.gj-ct-formsec h2{font-family:var(--gj-serif);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:.2em;text-transform:uppercase;color:var(--gj-champagne);margin:0 0 40px}
.gj-ct-form{max-width:470px;margin:0 auto;text-align:left}
.gj-ct-lbl{display:block;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#cfccc5;margin-bottom:9px}
.gj-ct-lbl i{color:var(--gj-champagne);font-style:normal}
.gj-ct-input{width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);color:#e6e2db;font-family:var(--gj-sans);
font-size:15px;padding:14px 16px;outline:none;margin-bottom:24px;transition:border-color var(--gj-ease);border-radius:0}
.gj-ct-input:focus{border-color:var(--gj-champagne)}
.gj-ct-input::placeholder{color:#6e6c67}
textarea.gj-ct-input{min-height:120px;resize:vertical}
select.gj-ct-input{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--gj-champagne) 50%),linear-gradient(135deg,var(--gj-champagne) 50%,transparent 50%);
background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.gj-ct-phone{display:flex;gap:0;margin-bottom:24px}
.gj-ct-phone select{width:88px;margin-bottom:0;border-right:none}
.gj-ct-phone input{flex:1;margin-bottom:0}
.gj-ct-check{display:flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#cfccc5;margin:4px 0 24px}
.gj-ct-check input{width:16px;height:16px;accent-color:var(--gj-champagne);flex:0 0 auto}
.gj-ct-check a{color:var(--gj-champagne)}
.gj-ct-send{width:100%;border:none;cursor:pointer;background:var(--gj-champagne);color:var(--gj-ink);
font-family:var(--gj-sans);font-size:15px;letter-spacing:.24em;text-transform:uppercase;padding:17px;transition:background var(--gj-ease)}
.gj-ct-send:hover{background:var(--gj-champagne-lt)}
@media(max-width:768px){.gj-ct-dir{grid-template-columns:1fr;gap:8px}}
@media(max-width:480px){.gj-ct-city{grid-template-columns:1fr;gap:2px}}
/* Draft banner — only ever rendered for a signed-in panel user (PageController). */
.gj-draftbar{position:sticky;top:0;z-index:60;background:var(--gj-champagne);color:var(--gj-ink);
text-align:center;padding:9px 16px;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
/* ---------- Faz 6 · form gonderimi ---------- */
/* Honeypot. Moved off-canvas rather than display:none — a bot that skips hidden
fields is exactly the bot we are trying to catch, so it has to look reachable to
a script while never being reachable by a person. tabindex and aria-hidden in the
markup keep it out of the keyboard order and off screen readers. */
.gj-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Server-side validation feedback. Muted brick, not a warning red: it has to sit in
a champagne-on-near-black page without shouting. */
.gj-formerr{border-left:2px solid #a4553f;padding:14px 18px;margin:0 0 26px;
background:rgba(164,85,63,.09);color:#e2d9d4;font-size:15px;line-height:1.6;letter-spacing:.04em}
.gj-formerr ul{margin:0;padding-left:18px}
.gj-formerr li+li{margin-top:6px}
.gj-field-err{display:block;color:#c98871;font-size:15px;letter-spacing:.06em;margin:-16px 0 18px}
.gj-ct-input[aria-invalid="true"],.gj-w-field input[aria-invalid="true"],
.gj-w-field select[aria-invalid="true"],.gj-w-field textarea[aria-invalid="true"]{border-color:#a4553f}
/* The reference line shown after a successful post, and the carried-over itinerary
on /contact when the visitor arrived from the charter quote bar. */
.gj-formnote{border-left:2px solid var(--gj-champagne);padding:14px 18px;margin:0 0 26px;
background:rgba(198,176,131,.07);color:#d8d4cd;font-size:15px;line-height:1.6;letter-spacing:.06em}
.gj-formnote b{color:var(--gj-champagne);font-weight:400;letter-spacing:.14em}
/* ============================================================
CHARTER FLEET PAGE (charter.html)
============================================================ */
.gj-ch-hero{position:relative;overflow:hidden;padding:150px 24px 70px;text-align:center}
.gj-ch-hero .bg{position:absolute;inset:0;background:var(--img-luxe) center/cover no-repeat;opacity:.34}
.gj-ch-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.82),rgba(18,20,23,.55) 45%,rgba(18,20,23,.9))}
.gj-ch-hero .inner{position:relative;z-index:2;margin-top:50px}
.gj-ch-hero h1{font-family:var(--gj-serif);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(20px,3.2vw,32px);color:#f6f3ee;margin:0 0 34px}
/* quote bar */
.gj-ch-quote{position:relative;z-index:2;max-width:1000px;margin:0 auto;text-align:left}
/* tabs */
.gj-ch-qtabs{display:flex;gap:0;border:1px solid var(--gj-border);width:max-content;max-width:100%;flex-wrap:wrap;
background:rgba(20,22,25,.72);backdrop-filter:blur(8px)}
.gj-ch-qtab{flex:0 0 auto;padding:14px 26px;font-family:var(--gj-sans);font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:var(--gj-bone);background:none;border:none;cursor:pointer;transition:color var(--gj-ease),background var(--gj-ease)}
.gj-ch-qtab:hover{color:var(--gj-champagne)}
.gj-ch-qtab.active{background:var(--gj-champagne);color:var(--gj-ink)}
/* leg rows */
.gj-ch-legs{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding-right:22px}
.gj-ch-leg{position:relative;display:grid;grid-template-columns:1fr 1fr 210px 92px 1fr;gap:1px;
background:var(--gj-border);border:1px solid var(--gj-border)}
.gj-ch-leg .f{position:relative;background:rgba(24,26,29,.86);backdrop-filter:blur(8px);
display:flex;align-items:center;gap:11px;padding:0 16px;min-height:66px}
.gj-ch-leg .f svg{width:15px;height:15px;flex:0 0 auto;fill:var(--gj-champagne)}
.gj-ch-leg select,.gj-ch-leg input{width:100%;background:transparent;border:none;outline:none;color:#e6e2db;
font-family:var(--gj-sans);font-size:15px;letter-spacing:.04em}
.gj-ch-leg select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px;
background-image:linear-gradient(45deg,transparent 50%,var(--gj-ash) 50%),linear-gradient(135deg,var(--gj-ash) 50%,transparent 50%);
background-position:calc(100% - 8px) 50%,calc(100% - 4px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.gj-ch-leg select option{background:#1b1d20;color:#e6e2db}
.gj-ch-leg input::placeholder,.gj-ch-leg select:invalid{color:#6e6c67}
/* date + time stacked in one cell */
.gj-ch-leg .f--when{flex-direction:column;gap:0;padding:0;align-items:stretch}
.gj-ch-leg .f--when .w{display:flex;align-items:center;gap:11px;padding:0 16px;flex:1;min-height:33px;position:relative;
border-bottom:1px solid var(--gj-border)}
.gj-ch-leg .f--when .w:last-child{border-bottom:none}
/* let the whole field open the native picker */
.gj-ch-leg input[type=date]::-webkit-calendar-picker-indicator,
.gj-ch-leg input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;margin:0}
.gj-ch-leg .f--pax{justify-content:flex-start}
.gj-ch-leg .f--pax input{width:44px;-moz-appearance:textfield}
.gj-ch-leg .f--pax input::-webkit-outer-spin-button,.gj-ch-leg .f--pax input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* remove-leg button, sitting on the right edge like the reference */
.gj-ch-legdel{position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
border:none;background:var(--gj-champagne);color:var(--gj-ink);font-size:15px;line-height:1;cursor:pointer;z-index:3;
display:flex;align-items:center;justify-content:center;transition:background var(--gj-ease)}
.gj-ch-legdel:hover{background:#fff}
/* footer: add-a-destination + submit */
.gj-ch-qfoot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-right:22px;flex-wrap:wrap}
.gj-ch-add{display:inline-flex;align-items:center;gap:13px;background:none;border:none;cursor:pointer;padding:0;
font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-bone);transition:color var(--gj-ease)}
.gj-ch-add .ic{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;
justify-content:center;font-size:16px;line-height:1;color:var(--gj-champagne);transition:border-color var(--gj-ease)}
.gj-ch-add:hover{color:var(--gj-champagne)} .gj-ch-add:hover .ic{border-color:var(--gj-champagne)}
.gj-ch-add[hidden]{display:none}
.gj-ch-qgo{margin-left:auto;background:var(--gj-champagne);color:var(--gj-ink);border:none;cursor:pointer;padding:19px 40px;
font-family:var(--gj-sans);font-size:15px;letter-spacing:.2em;text-transform:uppercase;transition:background var(--gj-ease)}
.gj-ch-qgo:hover{background:var(--gj-champagne-lt)}
/* fleet list + filters */
.gj-ch-fleet{display:grid;grid-template-columns:170px 1fr;gap:34px;max-width:var(--gj-shell);margin:40px auto 0;padding:0 40px}
.gj-ch-filters{border-top:1px solid rgba(255,255,255,.08)}
.gj-ch-filter{display:block;width:100%;text-align:left;background:none;border:none;padding:11px 2px;font-size:15px;letter-spacing:.14em;
text-transform:uppercase;color:var(--gj-ash);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:color var(--gj-ease)}
.gj-ch-filter:hover{color:var(--gj-bone)}
.gj-ch-filter.active{color:var(--gj-champagne)}
.gj-ch-list{border:1px solid var(--gj-border)}
.gj-ch-row{display:grid;grid-template-columns:150px 1fr 90px 90px 64px;gap:18px;align-items:center;padding:16px 22px;
border-bottom:1px solid rgba(255,255,255,.07);transition:background var(--gj-ease)}
.gj-ch-row:last-child{border-bottom:none}
.gj-ch-row:hover{background:rgba(255,255,255,.03)}
.gj-ch-row .thumb{width:150px;height:66px;overflow:hidden;background:#191b1e}
.gj-ch-row .thumb img{width:100%;height:100%;object-fit:cover}
.gj-ch-row .nm{font-family:var(--gj-serif);font-size:19px;color:#f0ede7}
.gj-ch-row .nm small{display:block;font-family:var(--gj-sans);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-champagne);margin-top:5px}
.gj-ch-row .spec{text-align:center;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-ash)}
.gj-ch-row .spec b{display:block;font-family:var(--gj-serif);font-size:17px;color:#e6e2db;font-weight:400;margin-bottom:3px}
.gj-ch-req{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;
justify-content:center;color:#fff;font-size:15px;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-ch-req:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-ch-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
.gj-ch-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:none;background:rgba(255,255,255,.22);cursor:pointer}
.gj-ch-dots button.on{background:var(--gj-champagne);width:22px;border-radius:4px}
/* most popular jets */
/* staggered fleet ladder on a diamond lattice (rows of 3 / 4 / 3 / 4 / 3) */
.gj-ch-pop{--cell:252px;position:relative;width:min(100%,calc(var(--cell) * 4));margin:40px auto 0;
display:grid;grid-template-columns:repeat(8,1fr);row-gap:4px;padding:34px 0}
/* each item carries its own rotated-square outline; together they read as the
diamond lattice of the reference (replaces the old repeating-gradient grid) */
.gj-ch-popitem{position:relative;z-index:1;grid-row:span 1;height:150px;margin-top:-10px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:12px;padding:10px 6px;text-align:center;cursor:pointer}
.gj-ch-popitem::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:0;margin:auto;
width:170px;height:170px;border:1px solid #757575;transform:rotate(-45deg);pointer-events:none}
.gj-ch-popitem svg{width:calc(var(--s,1) * 150px);max-width:100%;height:auto;color:#eceae4;opacity:.9;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
transition:transform var(--gj-ease),opacity var(--gj-ease),color var(--gj-ease)}
.gj-ch-popitem:hover svg{transform:translateY(-4px);opacity:1;color:#fff}
.gj-ch-popitem .n{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-ash);transition:color var(--gj-ease)}
.gj-ch-popitem:hover .n{color:var(--gj-champagne)}
/* testimonials */
.gj-ch-testi{position:relative;max-width:var(--gj-shell);margin:40px auto 0;padding:0 40px}
.gj-ch-tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.gj-ch-tcard{border-top:1px solid rgba(198,176,131,.35);padding-top:22px}
.gj-ch-tcard .q{font-family:var(--gj-serif);font-size:17px;line-height:1.35;color:var(--gj-champagne);letter-spacing:.04em;min-height:70px}
.gj-ch-tcard p{font-size:15px;line-height:1.85;color:var(--gj-ash);margin:14px 0 12px}
.gj-ch-tcard .who{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#cfccc5}
.gj-ch-tnav{display:flex;justify-content:center;gap:18px;margin-top:36px}
/* approvals */
.gj-ch-appr{max-width:900px;margin:40px auto 0;padding:0 24px}
.gj-ch-apprrow{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.gj-ch-apprrow .k{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-champagne);line-height:1.6}
.gj-ch-apprrow .v{font-size:15px;line-height:1.85;color:var(--gj-ash)}
.gj-ch-apprnote{max-width:900px;margin:26px auto 0;padding:0 24px;font-size:15px;line-height:1.8;color:#6e6c67}
@media(max-width:992px){
.gj-ch-fleet{grid-template-columns:1fr;gap:24px}
.gj-ch-filters{display:flex;flex-wrap:wrap;gap:8px;border:none}
.gj-ch-filter{width:auto;border:1px solid rgba(255,255,255,.14);padding:9px 16px}
.gj-ch-leg{grid-template-columns:1fr 1fr 200px}
.gj-ch-leg .f--pax{grid-column:1/2}
.gj-ch-leg .f--ac{grid-column:2/-1}
.gj-ch-pop{--cell:190px}
.gj-ch-tgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.gj-ch-fleet{padding:0 20px}
.gj-ch-row{grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.gj-ch-row .thumb{width:100%;grid-column:1/-1;height:120px}
.gj-ch-row .nm{grid-column:1/-1}
.gj-ch-req{grid-column:1/-1;width:100%;border-radius:0;height:40px}
.gj-ch-leg{grid-template-columns:1fr 1fr}
.gj-ch-leg .f--when{grid-column:1/-1}
.gj-ch-leg .f--when .w{min-height:44px}
.gj-ch-leg .f--ac{grid-column:1/-1}
.gj-ch-qtab{flex:1 1 auto;padding:12px 14px;font-size:15px;letter-spacing:.1em}
.gj-ch-qtabs{width:100%}
.gj-ch-qfoot{flex-direction:column;align-items:stretch}
.gj-ch-qgo{margin-left:0;width:100%}
/* fleet ladder: drop the stagger, go two-up so the aircraft stay legible */
.gj-ch-pop{--cell:150px;grid-template-columns:repeat(2,1fr);row-gap:14px}
.gj-ch-pop .gj-ch-popitem{grid-column:auto !important}
.gj-ch-popitem::before{display:none}
.gj-ch-popitem svg{width:calc(var(--s,1) * 128px)}
.gj-ch-tgrid{grid-template-columns:1fr}
.gj-ch-apprrow{grid-template-columns:1fr;gap:8px}
.gj-ch-testi{padding:0 20px}
}
/* NOTE: charter.html used to carry its own three-SVG-ring stack here. It now uses the
shared .gj-diaflow backdrop (fluid rings + .gj-flyer planes), same as index.html. */
/* ============================================================
CORPORATE / LEGAL DOCUMENT PAGES
(legal.html · privacy.html · terms.html · copyright.html)
============================================================ */
.gj-doc-hero{position:relative;overflow:hidden;padding:170px 24px 50px;text-align:center}
.gj-doc-hero .bg{position:absolute;inset:0;background:var(--img-luxe) center/cover no-repeat;opacity:.16;filter:grayscale(.5)}
.gj-doc-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.88),rgba(18,20,23,.95))}
.gj-doc-hero .inner{position:relative;z-index:2}
.gj-doc-hero .bread{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-ash);margin-bottom:22px}
.gj-doc-hero .bread a{color:var(--gj-ash)} .gj-doc-hero .bread b{color:var(--gj-champagne);font-weight:400}
.gj-doc-meta{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-ash);margin-top:26px}
.gj-doc{max-width:var(--gj-shell);margin:0 auto;padding:56px 40px 110px;display:grid;grid-template-columns:230px 1fr;gap:60px;align-items:start}
.gj-doc-toc{position:sticky;top:132px;border-left:1px solid var(--gj-border);padding-left:20px}
.gj-doc-toc .t{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gj-champagne);margin-bottom:14px}
.gj-doc-toc a{display:block;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--gj-ash);padding:7px 0;line-height:1.5;transition:color var(--gj-ease),padding-left var(--gj-ease)}
.gj-doc-toc a:hover{color:var(--gj-bone)}
.gj-doc-toc a.active{color:var(--gj-champagne);padding-left:6px}
.gj-doc-body{max-width:780px}
.gj-doc-body section{scroll-margin-top:130px}
.gj-doc-body h2{font-family:var(--gj-serif);font-weight:400;font-size:clamp(19px,2.4vw,24px);letter-spacing:.1em;text-transform:uppercase;color:#f0ede7;margin:52px 0 16px}
.gj-doc-body section:first-child h2{margin-top:0}
.gj-doc-body h3{font-family:var(--gj-serif);font-weight:400;font-size:17px;letter-spacing:.04em;color:var(--gj-champagne);margin:28px 0 10px}
.gj-doc-body p{font-size:15px;line-height:1.95;color:var(--gj-ash);margin:0 0 16px}
.gj-doc-body ul,.gj-doc-body ol{padding-left:20px;margin:0 0 18px}
.gj-doc-body li{font-size:15px;line-height:1.9;color:var(--gj-ash);margin-bottom:9px}
.gj-doc-body li::marker{color:var(--gj-champagne)}
.gj-doc-body a{color:var(--gj-champagne)}
.gj-doc-body strong{color:#d8d5cf;font-weight:500}
.gj-doc-note{border:1px solid rgba(198,176,131,.32);background:rgba(198,176,131,.06);padding:18px 22px;margin:0 0 40px;
font-size:15px;line-height:1.8;color:#cfccc5}
.gj-doc-note b{color:var(--gj-champagne);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:15px;display:block;margin-bottom:6px}
.gj-doc-table{width:100%;border-collapse:collapse;margin:6px 0 22px}
.gj-doc-table th,.gj-doc-table td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;line-height:1.7;color:var(--gj-ash);vertical-align:top}
.gj-doc-table th{color:var(--gj-champagne);font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;white-space:nowrap}
.gj-doc-table tr:last-child td{border-bottom:none}
@media(max-width:900px){
/* minmax(0,1fr), not 1fr: a grid track's implicit minimum is min-content, so the long
legal paragraphs blew the column out to 364px inside a 312px content box and the text
ran off the right edge on phones. */
.gj-doc{grid-template-columns:minmax(0,1fr);gap:34px;padding:40px 24px 90px}
.gj-doc-toc{position:static;border-left:none;border-top:1px solid var(--gj-border);padding:18px 0 0;
display:flex;flex-wrap:wrap;gap:6px 16px}
.gj-doc-toc .t{width:100%;margin-bottom:6px}
.gj-doc-toc a{padding:5px 0}
}
/* The legal tables were the last thing wider than the column on a 360px phone: their
min-content (nowrap headers, long placeholders, an email address) exceeded it. Fixed
layout makes the columns share the available width and the cells wrap instead. */
@media(max-width:640px){
.gj-doc-table{table-layout:fixed}
.gj-doc-table th{white-space:normal}
.gj-doc-table th,.gj-doc-table td{padding:10px 8px;overflow-wrap:anywhere}
}
@media print{
.gj-header,.gj-footer,.gj-doc-toc,.gj-ac-clouds,.gj-doc-hero .bg,.gj-doc-hero .scrim,#gj-plane,.gj-trail{display:none !important}
body{background:#fff;color:#111}
.gj-doc{display:block;padding:0}
.gj-doc-body{max-width:none}
.gj-doc-body h2,.gj-doc-hero h1{color:#111}
.gj-doc-body p,.gj-doc-body li,.gj-doc-table td{color:#333}
}
/* footer legal bar as real links */
.gj-footer .bar .legal a{color:var(--gj-ash);transition:color var(--gj-ease)}
.gj-footer .bar .legal a:hover{color:var(--gj-champagne)}
/* real aircraft renders dropped into assets/img/aircraft/ behave like the silhouettes */
.gj-ch-popitem img{width:calc(var(--s,1) * 150px);max-width:100%;height:auto;display:block;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));transition:transform var(--gj-ease),opacity var(--gj-ease)}
.gj-ch-popitem:hover img{transform:translateY(-4px)}
@media(max-width:640px){.gj-ch-popitem img{width:calc(var(--s,1) * 128px)}}
/* ============================================================
GENERAL TERMS & CONDITIONS — document hub (diamond tiles)
============================================================ */
.gj-gtc-hero{position:relative;overflow:hidden;padding:170px 24px 30px;text-align:center}
.gj-gtc-hero .bg{position:absolute;inset:0;background:url("../img/jet-exterior-nose.jpg") center/cover no-repeat;opacity:.3;filter:grayscale(.55)}
.gj-gtc-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,23,.82),rgba(18,20,23,.9))}
.gj-gtc-hero .inner{position:relative;z-index:2}
/* --gcell drives everything. A square of width W rotated 45deg only fits a
W/1.414 square of upright text at its centre, so the cell has to be sized from the
TITLE outwards, not the other way round: the titles need ~200px, hence a 286px
diamond. They were 213px (150px usable) and the 15px type overflowed them. */
.gj-gtc{--gcell:340px;position:relative;z-index:2;width:min(100%,calc(var(--gcell) * 3.5));margin:10px auto 0;
/* 7 columns, not 6: the offset row places tiles at 2/4/6 spanning 2, so the last one
needs column 7. With 6 it landed in an implicit track and got squeezed. */
display:grid;grid-template-columns:repeat(7,1fr);row-gap:0;padding:26px 0 60px}
.gj-gtc-item{grid-column:span 2;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:30px 14px;min-height:calc(var(--gcell) * 0.86);text-decoration:none}
.gj-gtc-item::before{content:"";position:absolute;top:50%;left:50%;width:calc(var(--gcell) * 0.84);aspect-ratio:1/1;
transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.022);z-index:0;transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-gtc-item:hover::before{border-color:rgba(198,176,131,.45);background:rgba(198,176,131,.05)}
.gj-gtc-item > *{position:relative;z-index:1}
.gj-gtc-item h3{font-family:var(--gj-serif);font-weight:400;font-size:15px;letter-spacing:.13em;text-transform:uppercase;
color:#eceae4;line-height:1.55;margin:0 0 20px;max-width:200px}
.gj-gtc-act{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-champagne)}
.gj-gtc-act .ic{width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.32);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-gtc-item:hover .ic{border-color:var(--gj-champagne);color:var(--gj-champagne)}
@media(max-width:900px){
.gj-gtc{--gcell:300px;grid-template-columns:repeat(2,1fr);width:100%}
.gj-gtc-item{grid-column:auto !important}
}
@media(max-width:560px){.gj-gtc{grid-template-columns:1fr;--gcell:250px}}
/* ============================================================
CHARTER FLEET BROWSER — type chips + manufacturer rail + search
============================================================ */
.gj-fl{max-width:var(--gj-shell);margin:0 auto;padding:0 40px}
.gj-fl-bar{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center;
border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:14px}
.gj-fl-bar .lbl{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-bone)}
.gj-fl-bar .lbl.mid{text-align:center}
.gj-fl-search{display:flex;align-items:center;gap:10px;justify-self:end}
.gj-fl-search input{background:transparent;border:none;outline:none;color:#e6e2db;font-family:var(--gj-sans);
font-size:15px;width:170px;text-align:right}
.gj-fl-search input::placeholder{color:#6e6c67}
.gj-fl-search svg{width:15px;height:15px;fill:var(--gj-bone);flex:0 0 auto}
/* type row */
.gj-fl-types{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;margin:30px 0 38px;
font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.gj-fl-type{background:none;border:none;cursor:pointer;color:var(--gj-ash);padding:5px 11px;transition:color var(--gj-ease)}
.gj-fl-type:hover{color:var(--gj-bone)}
.gj-fl-type.active{color:var(--gj-champagne)}
.gj-fl-types .sep{color:rgba(255,255,255,.2)}
/* layout */
.gj-fl-wrap{display:grid;grid-template-columns:186px 1fr;gap:42px;align-items:start}
.gj-fl-side .h{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gj-ash);margin-bottom:16px}
.gj-fl-side .h .dash{width:22px;height:1px;background:var(--gj-ash)}
.gj-fl-mfr{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:8px 2px;
font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--gj-ash);transition:color var(--gj-ease)}
.gj-fl-mfr:hover{color:var(--gj-bone)}
.gj-fl-mfr.active{color:var(--gj-champagne)}
/* cards */
.gj-fl-card{display:grid;grid-template-columns:250px 1fr 186px;background:rgba(255,255,255,.045);
margin-bottom:14px;transition:background var(--gj-ease)}
.gj-fl-card:hover{background:rgba(255,255,255,.07)}
.gj-fl-card .c1{padding:20px 22px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:6px}
.gj-fl-badge{align-self:flex-start;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#dcd8d1;
border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 11px}
.gj-fl-card .art{margin:4px 0 2px}
.gj-fl-card .art svg{width:100%;max-width:170px;height:auto;color:#eceae4;opacity:.92;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.gj-fl-card .name{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#f0ede7}
.gj-fl-card .reg{font-size:15px;letter-spacing:.1em;color:var(--gj-champagne)}
.gj-fl-card .c2{padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.gj-fl-specs{display:flex;gap:44px;font-size:15px;color:var(--gj-ash);letter-spacing:.04em}
.gj-fl-specs b{color:#e6e2db;font-weight:400;margin-left:6px}
.gj-fl-plan{width:100%;text-align:center}
.gj-fl-plan .t{font-size:15px;color:var(--gj-champagne);margin:6px 0 4px}
.gj-fl-plan svg{width:100%;max-width:250px;height:auto;color:rgba(255,255,255,.5)}
.gj-fl-card .c3{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:16px;
border-left:1px solid rgba(255,255,255,.07)}
.gj-fl-act{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:#e2ded7;transition:color var(--gj-ease)}
.gj-fl-act .ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.3);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-fl-act:hover{color:var(--gj-champagne)} .gj-fl-act:hover .ic{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-fl-empty{padding:60px 20px;text-align:center;color:var(--gj-ash);font-size:15px;letter-spacing:.06em}
/* pagination */
.gj-fl-page{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px}
.gj-fl-page button{min-width:36px;height:36px;padding:0 10px;background:none;border:1px solid rgba(255,255,255,.16);
color:var(--gj-ash);font-family:var(--gj-sans);font-size:15px;letter-spacing:.08em;cursor:pointer;
transition:border-color var(--gj-ease),color var(--gj-ease),background var(--gj-ease)}
.gj-fl-page button:hover:not(:disabled){border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-fl-page button.on{background:var(--gj-champagne);border-color:var(--gj-champagne);color:var(--gj-ink)}
.gj-fl-page button:disabled{opacity:.3;cursor:default}
.gj-fl-page .gap{color:var(--gj-ash);padding:0 4px}
@media(max-width:992px){
.gj-fl-wrap{grid-template-columns:1fr;gap:24px}
.gj-fl-side{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gj-fl-side .h{width:100%;margin-bottom:4px}
.gj-fl-mfr{width:auto;border:1px solid rgba(255,255,255,.14);padding:7px 13px}
.gj-fl-card{grid-template-columns:1fr 1fr}
.gj-fl-card .c3{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:28px;
border-left:none;border-top:1px solid rgba(255,255,255,.07)}
}
@media(max-width:640px){
.gj-fl{padding:0 20px}
.gj-fl-bar{grid-template-columns:1fr;gap:10px}
.gj-fl-bar .lbl.mid{text-align:left}
.gj-fl-search{justify-self:start} .gj-fl-search input{text-align:left;width:100%}
.gj-fl-card{grid-template-columns:1fr}
.gj-fl-card .c1{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
.gj-fl-specs{gap:24px}
.gj-fl-card .c3{flex-direction:column;gap:14px}
}
/* ============================================================
SERVICES DIAMOND — breathing backdrop (replaces the rings/circles)
Three soft layers that continuously stretch left↔right, each on its
own duration so the motion never visibly loops.
============================================================ */
/* Layers are centred with grid (not transform) so the `blob` keyframes in
add.css are free to drive transform, and `float` drives the translate
property independently. Heavy blur turns the blobs into a soft backdrop. */
/* `screen` blending makes the layers ADD light to the dark section instead of
sitting on it as near-black shapes (which is why they were invisible). */
/* Four fluid line rings, no fill. Lives INSIDE .gj-diastage so it centres on the tile
grid itself — anchoring it to the section instead made it drift whenever the section
padding differed (it sat 56px low on charter.html).
Each ring is TWO elements because three effects all want `transform`:
→ rotate (drags the wobble around the ring, which is what sells "water")
→ `blob` (border-radius morph + slight scale) and `float` (uses the
separate `translate` property, so it composes with blob's transform)
The radii sit 5% apart while `blob` scales ±4% and `float` shifts the centre by
up to 10px — so neighbouring rings genuinely cross through each other. Keep them
this close: widen the gaps and they read as plain concentric circles again.
Grid centring, never transform — `blob` owns transform on the . */
.gj-diaflow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:110%;aspect-ratio:1/1;z-index:0;pointer-events:none;
display:grid;place-items:center}
.gj-diaflow span{grid-area:1/1;aspect-ratio:1/1;animation:gj-rotate-plain var(--spin,160s) linear infinite}
.gj-diaflow i{position:relative;display:block;width:100%;height:100%;border-radius:50%;
border:1px solid rgba(198,176,131,.42);will-change:border-radius,transform,translate}
/* Planes are the shared .gj-flyer utility; only the size is dialled up here because
these rings are much larger than the hero / Luxury Links ones. */
.gj-diaflow .gj-flyer{font-size:15px}
.gj-diaflow .r1{width:90%;--spin:100s}
.gj-diaflow .r1 i{border-color:rgba(198,176,131,.40);
animation:blob 26s ease-in-out infinite alternate, float 21s ease-in-out infinite}
.gj-diaflow .r2{width:85%;--spin:124s;animation-direction:reverse}
.gj-diaflow .r2 i{border-color:rgba(255,255,255,.26);
animation:blob 31s ease-in-out infinite alternate-reverse, float 26s ease-in-out infinite}
.gj-diaflow .r3{width:80%;--spin:86s}
.gj-diaflow .r3 i{border-color:rgba(198,176,131,.55);
animation:blob 22s ease-in-out infinite alternate-reverse, float 18s ease-in-out infinite}
.gj-diaflow .r4{width:75%;--spin:138s;animation-direction:reverse}
.gj-diaflow .r4 i{border-color:rgba(198,176,131,.30);
animation:blob 35s ease-in-out infinite alternate, float 30s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gj-diaflow span,.gj-diaflow i{animation:none}}
/* the tile grid goes single-column below 680px, so the rings no longer frame anything */
@media(max-width:680px){.gj-diaflow{display:none}}
/* ============================================================
ORGANIC BLOB KEYFRAMES
Drive the .gj-diaflow rings (services diamond + view
destinations). `blob` drives transform, `float` drives the
separate translate property, `gradient` pans
background-position — so all three compose cleanly.
============================================================ */
@keyframes blob{
0% {border-radius:50%; transform:scale(1)}
15% {border-radius:58% 42% 50% 50% / 45% 55% 45% 55%; transform:scale(1.03,.98)}
30% {border-radius:65% 35% 55% 45% / 50% 60% 40% 50%; transform:scale(.98,1.03)}
45% {border-radius:45% 55% 65% 35% / 40% 55% 45% 60%; transform:scale(1.04,.97)}
60% {border-radius:40% 60% 55% 45% / 60% 40% 55% 45%; transform:scale(.97,1.04)}
75% {border-radius:65% 35% 45% 55% / 45% 60% 40% 55%; transform:scale(1.03,.98)}
90% {border-radius:55% 45% 40% 60% / 55% 45% 60% 40%; transform:scale(.99,1.02)}
100%{border-radius:50%; transform:scale(1)}
}
@keyframes float{
0% {translate:0 0}
25% {translate:10px -8px}
50% {translate:-8px 6px}
75% {translate:8px 10px}
100%{translate:0 0}
}
@keyframes gradient{
0% {background-position:0% 50%}
50% {background-position:100% 50%}
100%{background-position:0% 50%}
}
/* ============================================================
LUXURY LINKS v2 — orbiting constellation
The whole node/line system rotates slowly; each label counter-rotates
by the same duration so the text always stays upright. Hovering a
label lights its own spoke and dims the rest.
============================================================ */
.gj-luxe__stage{--orbit:170s}
/* soft blob light behind the constellation */
.gj-luxe__flow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:92%;aspect-ratio:1/1;z-index:0;pointer-events:none;display:grid;place-items:center;filter:blur(48px)}
.gj-luxe__flow span{grid-area:1/1;border-radius:50%;background-size:250% 250%;mix-blend-mode:screen;
will-change:border-radius,transform,translate}
.gj-luxe__flow .a{width:72%;height:72%;opacity:.55;background:linear-gradient(135deg,#b09355 0%,#20242a 50%,#4d7382 100%);
animation:blob 24s ease-in-out infinite alternate, gradient 14s ease infinite, float 20s ease-in-out infinite}
.gj-luxe__flow .b{width:96%;height:60%;opacity:.4;background:linear-gradient(120deg,#3f6d8c 0%,#181d22 50%,#8b7648 100%);
animation:blob 31s ease-in-out infinite alternate-reverse, gradient 18s ease infinite, float 26s ease-in-out infinite}
/* Split into two layers on purpose: .gj-luxe__orbit (spokes + nodes) keeps turning,
.gj-luxe__labels sits still on top so the links stay readable and in a fixed spot.
Because they are separate trees, the hover pairing is wired up in main.js. */
.gj-luxe__orbit{position:absolute;inset:0;z-index:2;pointer-events:none;
animation:gj-rotate-plain var(--orbit) linear infinite}
.gj-luxe__item{position:absolute;inset:0}
.gj-luxe__labels{position:absolute;inset:0;z-index:3}
@keyframes gj-luxe-in{from{opacity:0}to{opacity:1}}
/* spoke: a light line running from the centre out to the node */
.gj-luxe__item .ln{position:absolute;left:50%;top:50%;height:1px;transform-origin:0 50%;
background:linear-gradient(90deg,rgba(198,176,131,0) 0%,rgba(198,176,131,.10) 45%,rgba(198,176,131,.55) 100%);
opacity:.55;transition:opacity .35s ease}
/* node */
.gj-luxe__item .dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;
transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 12px rgba(255,255,255,.35);
animation:gj-luxe-pulse 3.6s ease-in-out infinite;
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background .35s ease}
@keyframes gj-luxe-pulse{
0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 12px rgba(255,255,255,.30)}
50% {box-shadow:0 0 0 9px rgba(255,255,255,.03),0 0 18px rgba(255,255,255,.16)}}
/* label — anchored by which side of the circle it sits on (set in main.js), so long
names grow outward instead of overlapping the node ring */
.gj-luxe__lab{position:absolute;transform:translate(-50%,-50%);cursor:pointer;
opacity:0;animation:gj-luxe-in .9s cubic-bezier(.22,1,.36,1) forwards;
transition:opacity .4s ease}
.gj-luxe__lab.s-r{transform:translate(0,-50%);padding-left:12px}
.gj-luxe__lab.s-l{transform:translate(-100%,-50%);padding-right:12px;text-align:right}
.gj-luxe__lab .txt{display:block;font-size:15px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:#f2efe8;white-space:nowrap;
text-shadow:0 1px 14px rgba(8,10,13,.95),0 0 4px rgba(8,10,13,.9);
padding-bottom:4px;border-bottom:1px solid rgba(198,176,131,.28);
transition:color .3s ease,letter-spacing .3s ease,border-color .3s ease}
/* hover: focus one link, recede the others. `.is-hot` / `.on` are set by main.js. */
/* !important is required here: the entrance animation uses fill-mode forwards,
and a filled animation outranks plain declarations in the cascade. */
.gj-luxe__labels.is-hot .gj-luxe__lab{opacity:.28 !important}
.gj-luxe__labels.is-hot .gj-luxe__lab.on{opacity:1 !important}
.gj-luxe__lab.on .txt{color:var(--gj-champagne);letter-spacing:.18em;border-bottom-color:var(--gj-champagne)}
.gj-luxe__item.on .ln{opacity:1}
.gj-luxe__item.on .dot{background:var(--gj-champagne);transform:translate(-50%,-50%) scale(1.7);
box-shadow:0 0 0 7px rgba(198,176,131,.18),0 0 22px rgba(198,176,131,.6);animation:none}
/* centre wordmark gets a soft breathing glow */
.gj-luxe__center h3{animation:gj-luxe-glow 7s ease-in-out infinite}
@keyframes gj-luxe-glow{
0%,100%{text-shadow:0 1px 12px rgba(8,10,13,.8),0 0 3px rgba(8,10,13,.7)}
50% {text-shadow:0 1px 14px rgba(8,10,13,.8),0 0 26px rgba(198,176,131,.30)}}
@media(prefers-reduced-motion:reduce){
.gj-luxe__orbit,.gj-luxe__item .dot,.gj-luxe__lab,.gj-luxe__center h3,.gj-luxe__flow span{animation:none}
.gj-luxe__lab{opacity:1}
}
@media(max-width:640px){
/* no text-align here — the .s-l/.s-r anchor classes own it */
.gj-luxe__lab .txt{font-size:15px;letter-spacing:.06em;white-space:normal;max-width:96px;line-height:1.25}
.gj-luxe__item .ln{display:none}
}
/* ============================================================
PAGE TRANSITION + WOW/ANIMATE.CSS GLUE
============================================================ */
/* .wow elements start hidden; WOW makes them visible as they enter the viewport.
If the CDN is blocked, main.js unhides them so content is never lost. */
.wow{visibility:hidden}
/* The fade lives on so it covers everything including the fixed header.
`gj-pt-in` is added by main.js on load and animates to full opacity; `gj-pt-out`
is added just before an internal navigation. */
/* OPACITY ONLY — do not add `transform` here. A transform on makes it the
containing block for every position:fixed descendant, which pulls .gj-drawer
(fixed, translateX(100%), i.e. parked off-screen right) into the document's scroll
width and doubled scrollWidth on every page. */
html.gj-pt-in{animation:gj-page-in .45s ease both}
@keyframes gj-page-in{from{opacity:0}to{opacity:1}}
html.gj-pt-out{opacity:0;transition:opacity .3s ease}
/* Animate.css runs at 1s by default, which is slow next to this site's own easing. */
:root{--animate-duration:.75s}
@media(prefers-reduced-motion:reduce){
.wow{visibility:visible !important}
html.gj-pt-in{animation:none}
html.gj-pt-out{opacity:1;transition:none}
}
/* ---------- offices.html: every office at a glance ---------- */
.gj-officegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
max-width:var(--gj-shell);margin:44px auto 0;padding:0 40px}
.gj-officecard{position:relative;padding:34px 30px 32px;border:1px solid var(--gj-border);
margin:-0.5px;background:rgba(255,255,255,.012);transition:background var(--gj-ease),border-color var(--gj-ease)}
.gj-officecard:hover{background:rgba(198,176,131,.05);border-color:rgba(198,176,131,.34)}
.gj-officecard .city{font-family:var(--gj-serif);font-size:22px;letter-spacing:.22em;
text-transform:uppercase;color:var(--gj-champagne);margin-bottom:18px}
.gj-officecard .co{font-size:15px;color:#d8d5cf;letter-spacing:.04em;margin-bottom:8px}
.gj-officecard address{font-style:normal;font-size:15px;line-height:1.85;color:var(--gj-ash);margin:0 0 16px}
.gj-officecard .contact{display:flex;flex-direction:column;gap:4px;font-size:15px}
.gj-officecard .contact a{color:#cfccc6;transition:color var(--gj-ease)}
.gj-officecard .contact a:hover{color:var(--gj-champagne)}
@media(max-width:992px){.gj-officegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gj-officegrid{grid-template-columns:minmax(0,1fr);padding:0 20px}}
/* ============================================================
WIDGET LIBRARY (.gj-w-*)
Reusable, theme-wide components — see widgets.html for a live
catalogue. They live here rather than in a page-specific file
because they are meant to be dropped into any page.
Interactive ones need assets/js/widgets.js.
============================================================ */
.gj-w{position:relative;border:1px solid var(--gj-border);background:rgba(255,255,255,.015);
padding:26px 24px;transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w:hover{border-color:rgba(198,176,131,.3)}
.gj-w-h{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-champagne);margin-bottom:18px}
.gj-w-lbl{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-ash)}
.gj-w-num{font-family:var(--gj-serif);font-size:34px;line-height:1;color:#f2efe8}
.gj-w-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(198,176,131,.5),transparent)}
/* 01 route strip */
.gj-w-route{display:flex;align-items:center;gap:16px}
.gj-w-route .pt{text-align:center;flex:0 0 auto}
.gj-w-route .code{font-family:var(--gj-serif);font-size:26px;letter-spacing:.14em;color:#f2efe8}
.gj-w-route .sub{font-size:15px;color:var(--gj-ash);letter-spacing:.1em;margin-top:4px}
.gj-w-route .line{flex:1;position:relative;height:1px;background:rgba(255,255,255,.18)}
.gj-w-route .line::before{content:"";position:absolute;left:0;top:0;height:1px;width:var(--pct,60%);background:var(--gj-champagne)}
.gj-w-route .line b{position:absolute;top:50%;left:var(--pct,60%);transform:translate(-50%,-50%);
color:var(--gj-champagne);font-weight:400;font-size:15px}
/* 02 spec table */
.gj-w-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gj-border)}
.gj-w-spec div{background:#15171a;padding:14px 16px}
.gj-w-spec .k{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-ash)}
.gj-w-spec .v{font-family:var(--gj-serif);font-size:20px;color:#f2efe8;margin-top:4px}
/* 03 progress / gauge bar */
.gj-w-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.gj-w-bar i{display:block;height:100%;background:linear-gradient(90deg,#8f7d55,var(--gj-champagne));
width:var(--val,50%);border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
/* 04 chips */
.gj-w-chips{display:flex;flex-wrap:wrap;gap:8px}
.gj-w-chip{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-ash);
border:1px solid var(--gj-border);padding:8px 15px;cursor:pointer;
transition:color var(--gj-ease),border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-chip:hover{color:var(--gj-bone);border-color:rgba(255,255,255,.28)}
.gj-w-chip.on{color:var(--gj-ink);background:var(--gj-champagne);border-color:var(--gj-champagne)}
/* 05 badge */
.gj-w-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(198,176,131,.4);
padding:9px 16px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-champagne)}
.gj-w-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gj-champagne)}
/* 06 stepper */
.gj-w-step{display:inline-flex;align-items:center;border:1px solid var(--gj-border)}
.gj-w-step button{width:42px;height:42px;background:none;border:none;color:var(--gj-bone);
font-size:18px;cursor:pointer;transition:color var(--gj-ease),background var(--gj-ease)}
.gj-w-step button:hover{color:var(--gj-champagne);background:rgba(198,176,131,.08)}
.gj-w-step .n{min-width:52px;text-align:center;font-family:var(--gj-serif);font-size:20px;color:#f2efe8}
/* 07 field */
.gj-w-field{position:relative}
.gj-w-field label{display:block;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:var(--gj-ash);margin-bottom:8px}
.gj-w-field input,.gj-w-field select{width:100%;background:transparent;border:none;
border-bottom:1px solid var(--gj-border);color:var(--gj-bone);font-size:15px;
padding:10px 0;font-family:inherit;transition:border-color var(--gj-ease)}
.gj-w-field input:focus,.gj-w-field select:focus{outline:none;border-bottom-color:var(--gj-champagne)}
.gj-w-field input::placeholder{color:#6f6d69}
.gj-w-field select option{background:#15171a}
/* 08 list rows */
.gj-w-rows{display:flex;flex-direction:column}
.gj-w-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
.gj-w-row:last-child{border-bottom:none}
.gj-w-row .k{color:var(--gj-ash);letter-spacing:.1em}
.gj-w-row .v{color:#e6e3dd}
/* 09 avatar */
.gj-w-person{display:flex;align-items:center;gap:16px}
.gj-w-person .av{width:56px;height:56px;border-radius:50%;flex:0 0 auto;
background:var(--img-office) center/cover no-repeat;filter:grayscale(.5);
box-shadow:inset 0 0 0 1px rgba(198,176,131,.4)}
.gj-w-person .nm{font-family:var(--gj-serif);font-size:19px;color:#f2efe8;letter-spacing:.06em}
.gj-w-person .ro{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-champagne);margin-top:4px}
/* 10 clock grid */
.gj-w-clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;text-align:center}
.gj-w-clocks .c .t{font-family:var(--gj-serif);font-size:24px;color:#f2efe8;letter-spacing:.06em}
.gj-w-clocks .c .z{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-ash);margin-top:5px}
/* 11 banner */
.gj-w-banner{display:flex;align-items:flex-start;gap:14px;border-left:2px solid var(--gj-champagne);
background:rgba(198,176,131,.06);padding:16px 18px;font-size:15px;line-height:1.7;color:#d6d3cd}
.gj-w-banner b{display:block;color:var(--gj-champagne);letter-spacing:.14em;
text-transform:uppercase;font-weight:400;margin-bottom:5px}
/* 12 quote */
.gj-w-quote{font-family:var(--gj-serif);font-size:20px;line-height:1.75;color:#e8e5df;font-style:italic}
.gj-w-quote+.by{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-champagne);margin-top:16px}
/* 13 timeline */
.gj-w-time{position:relative;padding-left:26px}
.gj-w-time::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--gj-border)}
.gj-w-time .it{position:relative;padding-bottom:20px}
.gj-w-time .it:last-child{padding-bottom:0}
.gj-w-time .it::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;
border-radius:50%;background:#15171a;box-shadow:inset 0 0 0 1px var(--gj-champagne)}
.gj-w-time .it.on::before{background:var(--gj-champagne)}
.gj-w-time .t{font-size:15px;color:#e6e3dd;letter-spacing:.06em}
.gj-w-time .d{font-size:15px;color:var(--gj-ash);margin-top:3px}
/* 14 calendar strip */
.gj-w-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.gj-w-days .d{border:1px solid var(--gj-border);padding:11px 4px;cursor:pointer;
transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-days .d:hover{border-color:rgba(198,176,131,.4)}
.gj-w-days .d.on{background:rgba(198,176,131,.12);border-color:var(--gj-champagne)}
.gj-w-days .d.off{opacity:.35;cursor:not-allowed}
.gj-w-days .w{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--gj-ash)}
.gj-w-days .n{font-family:var(--gj-serif);font-size:19px;color:#f2efe8;margin-top:4px}
/* 15 toggle */
.gj-w-toggle{display:inline-flex;border:1px solid var(--gj-border)}
.gj-w-toggle button{background:none;border:none;color:var(--gj-ash);font-family:inherit;
font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;cursor:pointer;
transition:color var(--gj-ease),background var(--gj-ease)}
.gj-w-toggle button.on{color:var(--gj-ink);background:var(--gj-champagne)}
/* ---------- widgets.html: the catalogue layout itself ---------- */
.gj-wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
max-width:var(--gj-shell);margin:44px auto 0;padding:0 40px}
.gj-wc{display:flex;flex-direction:column}
.gj-wc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gj-wc-head .no{font-family:var(--gj-serif);font-size:19px;color:var(--gj-champagne)}
.gj-wc-head .nm{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#e6e3dd}
.gj-wc-head code{font-size:15px;color:#6f6d69;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.gj-wc-demo{flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.gj-wc-note{font-size:15px;line-height:1.6;color:#6f6d69;margin-top:10px}
@media(max-width:992px){.gj-wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gj-wgrid{grid-template-columns:minmax(0,1fr);padding:0 20px}}
/* theme the native checkbox used by .gj-w-rows checklists — the browser default is a
bright blue square that fights the champagne palette */
.gj-w-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
flex:0 0 auto;border:1px solid var(--gj-border);background:transparent;cursor:pointer;
position:relative;transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-row input[type=checkbox]:hover{border-color:rgba(198,176,131,.55)}
.gj-w-row input[type=checkbox]:checked{background:var(--gj-champagne);border-color:var(--gj-champagne)}
.gj-w-row input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;
width:5px;height:10px;border:solid var(--gj-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.gj-w-row:has(input[type=checkbox]){cursor:pointer}
/* Cover image for the spotlight widget. NOTE: this must be a class, not an inline
style — a relative url() inside a custom property resolves against the *document*
when the var is substituted in an inline style attribute, so `var(--img-luxe)` in
markup resolved to /img/… instead of /assets/img/… and silently rendered nothing.
Keep --img-* usage inside this stylesheet. */
.gj-w-cover{height:150px;flex:0 0 auto;margin-bottom:20px;filter:grayscale(.3);
background:var(--img-luxe) center/cover no-repeat}
/* ---------- widget library · editorial / blog & news ---------- */
.gj-w-post{display:flex;flex-direction:column}
.gj-w-post .cover{height:170px;background:var(--img-charter) center/cover no-repeat;flex:0 0 auto}
.gj-w-post .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:15px;letter-spacing:.14em;
text-transform:uppercase;color:var(--gj-champagne);margin:18px 0 10px}
.gj-w-post .meta .sep{color:rgba(255,255,255,.2)}
.gj-w-post h4{font-family:var(--gj-serif);font-size:21px;line-height:1.4;color:#f2efe8;margin:0 0 10px;font-weight:400}
.gj-w-post p{font-size:15px;line-height:1.75;color:var(--gj-ash);margin:0}
.gj-w-split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.gj-w-split .im{background:var(--img-design) center/cover no-repeat;min-height:190px}
.gj-w-split .tx{padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:640px){.gj-w-split{grid-template-columns:1fr}}
.gj-w-metabar{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
padding:14px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
font-size:15px;letter-spacing:.12em;color:var(--gj-ash)}
.gj-w-metabar b{color:var(--gj-champagne);font-weight:400;text-transform:uppercase;letter-spacing:.16em}
.gj-w-pull{border-left:2px solid var(--gj-champagne);padding:6px 0 6px 22px;
font-family:var(--gj-serif);font-size:22px;line-height:1.6;color:#eae7e1;font-style:italic}
.gj-w-related{display:flex;flex-direction:column;gap:16px}
.gj-w-related a{display:flex;gap:14px;align-items:center;color:inherit}
.gj-w-related .th{width:66px;height:52px;flex:0 0 auto;background:var(--img-sales) center/cover no-repeat;filter:grayscale(.4)}
.gj-w-related .tt{font-size:15px;line-height:1.55;color:#dedbd5;transition:color var(--gj-ease)}
.gj-w-related a:hover .tt{color:var(--gj-champagne)}
.gj-w-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gj-w-thumbs span{aspect-ratio:4/3;background:var(--img-mgmt) center/cover no-repeat;
filter:grayscale(.5);cursor:pointer;transition:filter var(--gj-ease),outline-color var(--gj-ease);
outline:1px solid transparent;outline-offset:-1px}
.gj-w-thumbs span:hover,.gj-w-thumbs span.on{filter:none;outline-color:var(--gj-champagne)}
.gj-w-media{position:relative;height:170px;background:var(--img-luxe) center/cover no-repeat;
display:flex;align-items:center;justify-content:center}
.gj-w-media::before{content:"";position:absolute;inset:0;background:rgba(18,20,23,.5)}
.gj-w-media .play{position:relative;width:58px;height:58px;border-radius:50%;
border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
color:#fff;font-size:15px;transition:border-color var(--gj-ease),color var(--gj-ease)}
.gj-w-media:hover .play{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-w-pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gj-w-pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--gj-border);font-size:15px;color:var(--gj-ash);cursor:pointer;
transition:color var(--gj-ease),border-color var(--gj-ease)}
.gj-w-pager span:hover{color:var(--gj-bone);border-color:rgba(255,255,255,.3)}
.gj-w-pager span.on{color:var(--gj-ink);background:var(--gj-champagne);border-color:var(--gj-champagne)}
/* ---------- widget library · aircraft detail ---------- */
.gj-w-acHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gj-w-acHead .nm{font-family:var(--gj-serif);font-size:27px;color:#f4f1eb;letter-spacing:.06em}
.gj-w-acHead .ty{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--gj-champagne);margin-top:6px}
.gj-w-acHead .reg{font-size:15px;letter-spacing:.16em;color:var(--gj-ash);border:1px solid var(--gj-border);padding:7px 13px}
.gj-w-seats{display:flex;flex-direction:column;gap:9px;align-items:center}
.gj-w-seats .row{display:flex;gap:9px}
.gj-w-seats i{width:19px;height:19px;border-radius:3px;background:rgba(255,255,255,.12);display:block}
.gj-w-seats i.on{background:var(--gj-champagne)}
.gj-w-seats .aisle{width:19px}
.gj-w-perf{display:flex;flex-direction:column;gap:16px}
.gj-w-perf .p .t{display:flex;justify-content:space-between;font-size:15px;color:var(--gj-ash);
letter-spacing:.1em;margin-bottom:7px}
.gj-w-perf .p .t b{color:#e6e3dd;font-weight:400}
.gj-w-tabs{display:flex;gap:0;border-bottom:1px solid var(--gj-border);margin-bottom:18px;flex-wrap:wrap}
.gj-w-tabs button{background:none;border:none;border-bottom:1px solid transparent;margin-bottom:-1px;
color:var(--gj-ash);font-family:inherit;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
padding:11px 16px;cursor:pointer;transition:color var(--gj-ease),border-color var(--gj-ease)}
.gj-w-tabs button.on{color:var(--gj-champagne);border-bottom-color:var(--gj-champagne)}
.gj-w-compare{width:100%;border-collapse:collapse;font-size:15px}
.gj-w-compare th,.gj-w-compare td{padding:11px 10px;text-align:left;
border-bottom:1px solid rgba(255,255,255,.08)}
.gj-w-compare th{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-champagne);font-weight:400}
.gj-w-compare td{color:var(--gj-ash)}
.gj-w-compare td:first-child{color:#dedbd5}
.gj-w-amen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px;text-align:center}
.gj-w-amen .a{font-size:15px;letter-spacing:.1em;color:var(--gj-ash);line-height:1.5}
.gj-w-amen .a .ic{display:block;font-size:20px;color:var(--gj-champagne);margin-bottom:8px;font-style:normal}
.gj-w-amen .a.off{opacity:.32}
.gj-w-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gj-border)}
.gj-w-dims div{background:#15171a;padding:16px 12px;text-align:center}
.gj-w-dims .v{font-family:var(--gj-serif);font-size:21px;color:#f2efe8}
.gj-w-dims .k{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gj-ash);margin-top:6px}
.gj-w-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.gj-w-rail .c{flex:0 0 138px;border:1px solid var(--gj-border);padding:14px 13px}
.gj-w-rail .c .n{font-family:var(--gj-serif);font-size:17px;color:#f2efe8;line-height:1.3}
.gj-w-rail .c .s{font-size:15px;color:var(--gj-ash);margin-top:7px;letter-spacing:.08em}
.gj-w-dl{display:flex;justify-content:space-between;align-items:center;gap:16px;
border:1px solid var(--gj-border);padding:16px 18px;font-size:15px;color:#dedbd5;
transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-dl:hover{border-color:rgba(198,176,131,.4);background:rgba(198,176,131,.05)}
.gj-w-dl .ext{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gj-champagne)}
/* ---------- widget library · text & image blocks ---------- */
.gj-w-lead{font-family:var(--gj-serif);font-size:21px;line-height:1.8;color:#e8e5df}
.gj-w-lead::first-letter{float:left;font-size:56px;line-height:.86;padding:4px 12px 0 0;color:var(--gj-champagne)}
.gj-w-cap{font-size:15px;letter-spacing:.12em;color:#6f6d69;margin-top:12px;line-height:1.6}
.gj-w-cap b{color:var(--gj-champagne);font-weight:400;text-transform:uppercase;letter-spacing:.16em}
.gj-w-feature{display:flex;gap:16px;align-items:flex-start}
.gj-w-feature .ic{flex:0 0 auto;width:44px;height:44px;border:1px solid rgba(198,176,131,.4);
border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gj-champagne);font-size:17px}
.gj-w-feature .t{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#e6e3dd;margin-bottom:7px}
.gj-w-feature .d{font-size:15px;line-height:1.75;color:var(--gj-ash)}
.gj-w-statement{text-align:center;font-family:var(--gj-serif);font-weight:300;
font-size:clamp(22px,2.6vw,30px);line-height:1.5;letter-spacing:.06em;color:#f4f1eb}
.gj-w-numlist{counter-reset:gjw;display:flex;flex-direction:column;gap:18px}
.gj-w-numlist .it{position:relative;padding-left:44px;counter-increment:gjw}
.gj-w-numlist .it::before{content:counter(gjw,decimal-leading-zero);position:absolute;left:0;top:0;
font-family:var(--gj-serif);font-size:19px;color:var(--gj-champagne)}
.gj-w-numlist .t{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#e6e3dd;margin-bottom:6px}
.gj-w-numlist .d{font-size:15px;line-height:1.75;color:var(--gj-ash)}
.gj-w-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:88px 88px;gap:8px}
.gj-w-mosaic span{background:var(--img-charter) center/cover no-repeat;filter:grayscale(.35)}
.gj-w-mosaic span:nth-child(2){background-image:var(--img-mgmt)}
.gj-w-mosaic span:nth-child(3){background-image:var(--img-design)}
.gj-w-mosaic span:nth-child(4){background-image:var(--img-sales)}
.gj-w-mosaic span.tall{grid-row:span 2}
.gj-w-callout{border:1px solid rgba(198,176,131,.32);padding:22px 24px;
font-size:15px;line-height:1.8;color:#d8d5cf}
.gj-w-callout .t{font-family:var(--gj-serif);font-size:19px;color:var(--gj-champagne);margin-bottom:10px}
.gj-w-imgtext{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.gj-w-imgtext .im{aspect-ratio:1/1;background:var(--img-luxe) center/cover no-repeat;filter:grayscale(.3)}
/* image variants for the block widgets — same reason as .gj-w-cover: --img-* must not be
substituted from an inline style attribute or the relative url() resolves against the
document and silently 404s */
.gj-w-cover--mgmt{background-image:var(--img-mgmt)}
/* full-width slot in the catalogue for widgets that need room to read */
.gj-wc--wide{grid-column:1/-1}
/* ---------- widget library · photo gallery ---------- */
.gj-w-gal{position:relative}
.gj-w-gal .vp{overflow:hidden}
.gj-w-gal .track{display:flex;gap:22px;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.gj-w-gal .sl{flex:0 0 58%;aspect-ratio:16/10;background-size:cover;background-position:center;
opacity:.35;filter:grayscale(.4);transition:opacity .5s ease,filter .5s ease}
.gj-w-gal .sl.on{opacity:1;filter:none}
.gj-w-gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(18,20,23,.5);
color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:border-color var(--gj-ease),color var(--gj-ease);z-index:2}
.gj-w-gal .nav:hover{border-color:var(--gj-champagne);color:var(--gj-champagne)}
.gj-w-gal .nav.prev{left:14px} .gj-w-gal .nav.next{right:14px}
.gj-w-gal .count{position:absolute;right:24px;bottom:16px;font-family:var(--gj-serif);
font-size:24px;color:rgba(255,255,255,.85);letter-spacing:.08em;z-index:2}
.gj-w-gal .count i{font-style:normal;font-size:17px;color:rgba(255,255,255,.55)}
@media(max-width:640px){.gj-w-gal .sl{flex:0 0 86%}}
/* ---------- widget library · approvals list ---------- */
.gj-w-appr .it{display:grid;grid-template-columns:220px 1fr;gap:26px;padding:26px 0;
border-bottom:1px solid rgba(255,255,255,.09)}
.gj-w-appr .it:last-child{border-bottom:none}
.gj-w-appr .ttl{font-family:var(--gj-serif);font-size:19px;line-height:1.4;letter-spacing:.1em;
text-transform:uppercase;color:var(--gj-champagne)}
.gj-w-appr .bd p{font-size:15px;line-height:1.75;color:var(--gj-ash);margin:0 0 4px}
.gj-w-appr .bd a{display:inline-block;margin-top:10px;font-size:15px;color:var(--gj-champagne);
border-bottom:1px solid transparent;transition:border-color var(--gj-ease)}
.gj-w-appr .bd a:hover{border-bottom-color:var(--gj-champagne)}
@media(max-width:640px){.gj-w-appr .it{grid-template-columns:1fr;gap:12px}}
/* ---------- widget library · linked solution circles ---------- */
.gj-w-circles{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.gj-w-circles .c{width:158px;height:158px;border-radius:50%;border:1px solid rgba(198,176,131,.55);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:20px;flex:0 0 auto;transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-circles .c:hover{border-color:var(--gj-champagne);background:rgba(198,176,131,.05)}
.gj-w-circles .c .t{font-size:15px;line-height:1.45;color:#e2dfd9}
.gj-w-circles .c.on .t{color:var(--gj-champagne)}
.gj-w-circles .c .rm{font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:var(--gj-ash);margin-top:12px}
.gj-w-circles .lk{width:44px;height:1px;background:rgba(198,176,131,.45);position:relative;flex:0 0 auto}
.gj-w-circles .lk::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
border-left:5px solid rgba(198,176,131,.7);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
@media(max-width:640px){.gj-w-circles .lk{width:1px;height:28px}
.gj-w-circles .lk::after{display:none}}
/* ---------- widget library · diamond logo grid ---------- */
.gj-w-diagrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.gj-w-diagrid .d{width:186px;height:186px;transform:rotate(45deg);
border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-w-diagrid .d:hover{border-color:rgba(198,176,131,.5);background:rgba(198,176,131,.04)}
.gj-w-diagrid .in{transform:rotate(-45deg);text-align:center;padding:10px;width:150%}
.gj-w-diagrid .bn{font-family:var(--gj-serif);font-size:19px;letter-spacing:.14em;
text-transform:uppercase;color:#f0ede7}
.gj-w-diagrid .ms{font-size:15px;line-height:1.5;color:var(--gj-ash);margin-top:9px}
/* ---------- widget library · numbered accordion ---------- */
.gj-acc--num .gj-acc-head .no{width:44px;height:44px;border-radius:50%;
border:1px solid rgba(198,176,131,.45);display:inline-flex;align-items:center;justify-content:center;
font-family:var(--gj-serif);font-size:19px;color:var(--gj-champagne);flex:0 0 auto}
.gj-acc--num .gj-acc-body ul{list-style:none;padding:0;margin:0}
.gj-acc--num .gj-acc-body li{position:relative;padding-left:24px;font-size:15px;line-height:1.8;
color:var(--gj-ash);margin-bottom:9px}
.gj-acc--num .gj-acc-body li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
background:var(--gj-champagne);transform:rotate(45deg)}
/* ---------- widget library · fleet bar chart ---------- */
.gj-w-fleet .grp{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start;
padding:26px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.gj-w-fleet .grp:last-child{border-bottom:none}
.gj-w-fleet .bn{font-family:var(--gj-serif);font-size:19px;letter-spacing:.16em;
text-transform:uppercase;color:#e8e5df}
.gj-w-fleet .tot{width:46px;height:46px;border-radius:50%;border:1px solid rgba(198,176,131,.45);
display:flex;align-items:center;justify-content:center;font-family:var(--gj-serif);
font-size:18px;color:var(--gj-champagne);margin-top:16px}
.gj-w-fleet .r{display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:center;margin-bottom:9px}
.gj-w-fleet .r .nm{font-size:15px;color:var(--gj-ash);text-align:right;letter-spacing:.04em}
.gj-w-fleet .r .bar{height:30px;border:1px solid rgba(198,176,131,.35);display:flex;align-items:center;
justify-content:center;font-size:15px;color:#e6e3dd;background:rgba(198,176,131,.05)}
@media(max-width:640px){.gj-w-fleet .grp{grid-template-columns:1fr;gap:14px}
.gj-w-fleet .r{grid-template-columns:1fr 1.4fr}
.gj-w-fleet .r .nm{text-align:left}}
/* gallery demo imagery — classes, never inline var(--img-*) */
.gj-w-gal--a{background-image:var(--img-charter)}
.gj-w-gal--b{background-image:var(--img-mgmt)}
.gj-w-gal--c{background-image:var(--img-design)}
.gj-w-gal--d{background-image:var(--img-sales)}
/* Bootstrap ships `code{color:#d63384}` — bright pink against this palette. Any inline
code on the site (the widget catalogue uses it) gets the theme treatment instead. */
code{color:var(--gj-champagne);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em}
/* ============================================================
CAREERS — job board, filters, application form, values
============================================================ */
.gj-jb{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;
max-width:var(--gj-shell);margin:44px auto 0;padding:0 40px}
.gj-jb-list{display:flex;flex-direction:column;border-top:1px solid var(--gj-border)}
.gj-job{display:block;padding:22px 4px;border-bottom:1px solid var(--gj-border);
transition:background var(--gj-ease),padding-left var(--gj-ease)}
.gj-job:hover{background:rgba(198,176,131,.04);padding-left:12px}
.gj-job .t{font-family:var(--gj-serif);font-size:19px;color:#f0ede7;letter-spacing:.05em;margin-bottom:12px}
.gj-job .tags{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gj-ash)}
.gj-job .tags span{display:inline-flex;align-items:center;gap:8px}
.gj-job .tags i{width:6px;height:6px;background:var(--gj-champagne);transform:rotate(45deg);font-style:normal}
.gj-job .more{display:inline-block;margin-top:14px;font-size:15px;letter-spacing:.16em;
text-transform:uppercase;color:var(--gj-champagne)}
.gj-jb-empty{padding:40px 4px;color:var(--gj-ash);font-size:15px}
.gj-jb-side{border:1px solid var(--gj-border);padding:24px 22px;position:sticky;top:132px}
.gj-jb-side h3{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gj-champagne);
margin:0 0 18px;font-weight:400;font-family:inherit}
.gj-jb-side .grp{margin-bottom:22px}
.gj-jb-side .grp > .lb{font-size:15px;letter-spacing:.16em;text-transform:uppercase;
color:#c9c6c0;margin-bottom:10px}
.gj-jb-side label{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--gj-ash);
padding:5px 0;cursor:pointer;transition:color var(--gj-ease)}
.gj-jb-side label:hover{color:var(--gj-bone)}
.gj-jb-side input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;
flex:0 0 auto;border:1px solid var(--gj-border);background:transparent;position:relative;cursor:pointer;
transition:border-color var(--gj-ease),background var(--gj-ease)}
.gj-jb-side input[type=checkbox]:checked{background:var(--gj-champagne);border-color:var(--gj-champagne)}
.gj-jb-side input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;
width:4px;height:9px;border:solid var(--gj-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@media(max-width:900px){.gj-jb{grid-template-columns:1fr;padding:0 20px}
.gj-jb-side{position:static;order:-1}}
.gj-appform{max-width:640px;margin:0 auto;padding:0 24px}
.gj-appform .row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gj-appform .gj-w-field{margin-bottom:22px}
.gj-appform textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--gj-border);
color:var(--gj-bone);font-size:15px;font-family:inherit;padding:10px 0;min-height:96px;resize:vertical;
transition:border-color var(--gj-ease)}
.gj-appform textarea:focus{outline:none;border-bottom-color:var(--gj-champagne)}
.gj-appform .consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.7;
color:var(--gj-ash);margin:8px 0 26px}
.gj-appform .consent input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:0 0 auto;
margin-top:3px;border:1px solid var(--gj-border);position:relative;cursor:pointer}
.gj-appform .consent input:checked{background:var(--gj-champagne);border-color:var(--gj-champagne)}
.gj-appform .consent input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
border:solid var(--gj-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@media(max-width:640px){.gj-appform .row2{grid-template-columns:1fr}}
.gj-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gj-border);
max-width:var(--gj-shell);margin:44px auto 0}
.gj-value{background:#15171a;padding:36px 30px;position:relative;overflow:hidden}
.gj-value .n{font-family:var(--gj-serif);font-size:15px;letter-spacing:.24em;text-transform:uppercase;
color:var(--gj-champagne);margin-bottom:14px}
.gj-value p{font-size:15px;line-height:1.85;color:var(--gj-ash);margin:0}
@media(max-width:900px){.gj-values{grid-template-columns:1fr}}
.gj-voices{display:flex;flex-direction:column;gap:34px;max-width:760px;margin:44px auto 0;
padding:0 24px;text-align:center}
.gj-voice{font-family:var(--gj-serif);font-size:19px;line-height:1.75;color:#e4e1db;font-style:italic}
.gj-voice::before{content:"";display:block;width:7px;height:7px;background:var(--gj-champagne);
transform:rotate(45deg);margin:0 auto 20px}
/* ---------- widget library · prose with highlighted phrases ---------- */
.gj-w-prose{max-width:720px;margin:0 auto;text-align:center;font-size:15px;line-height:1.95;color:#c9c6c0}
.gj-w-prose em{font-style:normal;color:var(--gj-champagne)}
.gj-w-prose p{margin:0 0 18px}
.gj-w-prose p:last-child{margin-bottom:0}
/* ---------- widget library · diamond-bullet feature list ---------- */
.gj-w-dlist .it{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:start;
padding:26px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.gj-w-dlist .it:last-child{border-bottom:none}
.gj-w-dlist .bul{width:32px;height:32px;border-radius:50%;border:1px solid rgba(198,176,131,.45);
display:flex;align-items:center;justify-content:center}
.gj-w-dlist .bul::before{content:"";width:7px;height:7px;background:var(--gj-champagne);transform:rotate(45deg)}
.gj-w-dlist .bd{font-size:15px;line-height:1.85;color:var(--gj-ash)}
.gj-w-dlist .bd em{font-style:normal;color:var(--gj-champagne)}
/* ---------- widget library · two-column bullet list ---------- */
.gj-w-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 44px}
.gj-w-cols2 .it{display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:start;padding:9px 0}
.gj-w-cols2 .it::before{content:"";width:7px;height:7px;margin-top:8px;background:var(--gj-champagne);
transform:rotate(45deg)}
.gj-w-cols2 .it span{font-size:15px;line-height:1.75;color:var(--gj-ash)}
@media(max-width:640px){.gj-w-cols2{grid-template-columns:1fr}}
/* ---------- widget library · three-column connected process ---------- */
.gj-w-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px}
.gj-w-flow .col{position:relative;padding-left:8px}
/* the spine each column's nodes hang from */
.gj-w-flow .col::before{content:"";position:absolute;left:22px;top:14px;bottom:14px;width:1px;
background:rgba(198,176,131,.3)}
.gj-w-flow .st{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;
align-items:start;padding:12px 0}
.gj-w-flow .nd{width:30px;height:30px;border-radius:50%;border:1px solid rgba(198,176,131,.5);
background:#15171a;display:flex;align-items:center;justify-content:center;margin-left:7px;z-index:1}
.gj-w-flow .nd::before{content:"";width:7px;height:7px;background:var(--gj-champagne);transform:rotate(45deg)}
.gj-w-flow .tx{font-size:15px;line-height:1.7;color:var(--gj-ash);padding-top:5px}
@media(max-width:900px){.gj-w-flow{grid-template-columns:1fr;gap:0}}
/* ---------- language switcher (Faz 5) ----------
Six languages, not the original four abbreviations laid out in a row: at 390px
that row needs more width than the topbar has once the search trigger is in it.
A dropdown keeps the topbar to one label at any width.
Native so it opens without JavaScript — the topbar renders before
main.js and a language switcher that needs a script is the wrong thing to make
conditional. */
.gj-lang{position:relative}
.gj-lang>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--gj-ash)}
.gj-lang>summary::-webkit-details-marker{display:none}
.gj-lang>summary:hover,.gj-lang[open]>summary{color:var(--gj-champagne)}
.gj-lang>summary .caret{font-size:11px;line-height:1;transition:transform .18s ease}
.gj-lang[open]>summary .caret{transform:rotate(180deg)}
.gj-lang__menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:168px;
padding:6px 0;background:#1b1d1f;border:1px solid rgba(255,255,255,.1);
box-shadow:0 18px 40px rgba(0,0,0,.5)}
.gj-lang__menu a{display:block;padding:9px 16px;font-size:15px;letter-spacing:.1em;
text-transform:none;color:var(--gj-ash);white-space:nowrap}
.gj-lang__menu a:hover{background:rgba(255,255,255,.05);color:var(--gj-champagne)}
.gj-lang__menu a[aria-current="true"]{color:var(--gj-champagne)}
/* ---------- Luxury Links: partner logo wall ---------- */
/* ◆ The logos are rendered WHITE by CSS, not by editing the artwork.
`brightness(0)` flattens every colour to black and `invert(1)` turns that white,
so a mixed set of brand files — colour, black, grey — reads as one wall. It
needs a TRANSPARENT background: a logo saved on a white rectangle becomes a
white rectangle. The panel says so where the file is chosen.
Kept at .72 opacity so the wall sits behind the heading rather than shouting,
and comes to full white on hover. */
.gj-luxwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--gj-border);border-left:1px solid var(--gj-border);max-width:1000px;margin:0 auto}
.gj-luxpartner{display:flex;align-items:center;justify-content:center;min-height:118px;padding:26px 22px;border-right:1px solid var(--gj-border);border-bottom:1px solid var(--gj-border);text-decoration:none;transition:background var(--gj-ease)}
.gj-luxpartner[href]{cursor:pointer}
.gj-luxpartner[href]:hover{background:rgba(198,176,131,.06)}
.gj-luxpartner img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
filter:brightness(0) invert(1);opacity:.72;transition:opacity var(--gj-ease)}
.gj-luxpartner[href]:hover img{opacity:1}
/* no artwork yet — the name in the site typeface, as the manufacturer grid does */
.gj-luxpartner .nm{font-family:var(--gj-serif);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--gj-ash);text-align:center;line-height:1.4}
.gj-luxpartner[href]:hover .nm{color:var(--gj-champagne)}
.gj-luxwall__empty{text-align:center;font-size:15px;line-height:1.9;color:var(--gj-ash);margin:0}
@media (max-width:575px){
.gj-luxwall{grid-template-columns:repeat(2,1fr)}
.gj-luxpartner{min-height:96px;padding:18px 14px}
}