/* ======================================================================
   SERVICES HUB (services.html) — loaded after services.css
   1 hero: the travel desk · 2 flagship + six service cards
   3 closing band: routes out of Hyderabad · 4 gold strip
   Each service carries its own accent (--c), the same colours the
   homepage services route uses.
   ====================================================================== */

/* ---------------------------------------------------------------- 1 HERO */
.hx2{position:relative;isolation:isolate;overflow:hidden;background:var(--purple-900);color:#fff;
 padding:calc(clamp(96px,9vw,118px) + clamp(28px,5vh,60px)) 0 0}
.hx2-bg{position:absolute;inset:-10% 0;z-index:-2;opacity:.22;transform:translate3d(0,var(--py,0px),0)}
.hx2-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.hx2:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 60% 70% at 78% 45%,rgba(142,44,142,.45),transparent 70%),
            linear-gradient(90deg,rgba(26,5,26,.96) 0%,rgba(26,5,26,.7) 50%,rgba(26,5,26,.55) 100%)}
.hx2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:center;
 padding-bottom:clamp(56px,7vh,90px)}
.hx2-kick{display:flex;align-items:center;gap:14px;margin:0 0 clamp(16px,2vw,24px);font-size:11px;font-weight:600;letter-spacing:.24em;
 text-transform:uppercase;color:rgba(255,255,255,.72);animation:s-up .8s var(--ease) both}
.hx2-kick i{width:44px;height:1px;background:var(--gold)}
.hx2 .s-h1{font-size:clamp(40px,5.2vw,80px)}

/* the desk composition */
.desk{position:relative;aspect-ratio:6/5;max-width:620px;width:100%;justify-self:end}
.desk-route{position:absolute;inset:-6% -8% 0 -12%;width:120%;height:106%;z-index:3;overflow:visible;pointer-events:none}
.dr-line{fill:none;stroke:rgba(253,185,19,.38);stroke-width:1.6;stroke-dasharray:5 9;stroke-linecap:round}
.dr-plane{filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}

/* open passport */
.pp{position:absolute;left:4%;top:6%;width:88%;aspect-ratio:1.42;display:grid;grid-template-columns:1fr 1fr;
 transform:rotate(-6deg);animation:pp-in 1.2s .2s var(--ease) both,pp-float 9s 1.4s ease-in-out infinite;
 filter:drop-shadow(0 40px 50px rgba(5,0,5,.55))}
@keyframes pp-in{from{opacity:0;transform:rotate(-14deg) translateY(40px) scale(.94)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes pp-float{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-8px)}}
.pp-page{position:relative;background:#F7F1E6;overflow:hidden;
 background-image:repeating-radial-gradient(circle at 50% 120%,rgba(94,26,94,.07) 0 1px,transparent 1px 9px),
                  linear-gradient(#F7F1E6,#EFE6D6)}
.pp-page.l{border-radius:10px 0 0 10px;box-shadow:inset -18px 0 22px -14px rgba(60,30,20,.35)}
.pp-page.r{border-radius:0 10px 10px 0;box-shadow:inset 18px 0 22px -14px rgba(60,30,20,.35)}
.pp:before{content:"";position:absolute;inset:-8px -10px;z-index:-1;border-radius:14px;background:#4A1449;
 box-shadow:inset 0 0 0 2px rgba(253,185,19,.3)}
.pp-h{position:absolute;left:0;right:0;top:7%;text-align:center;font-size:clamp(7px,.75vw,9px);font-weight:700;letter-spacing:.4em;
 text-transform:uppercase;color:rgba(94,26,94,.35)}

/* stamps land one after another */
.stamp{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
 width:23%;aspect-ratio:1;border-radius:50%;border:2.5px double var(--c);color:var(--c);text-align:center;
 font-family:'Courier New',ui-monospace,monospace;mix-blend-mode:multiply;opacity:0;
 transform:rotate(var(--r)) scale(2.2);animation:stampin .45s cubic-bezier(.3,1.5,.5,1) forwards}
.stamp b{font-size:clamp(9px,1vw,13px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.stamp small{font-size:clamp(6px,.6vw,8px);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:2px}
.stamp i{font-size:clamp(12px,1.3vw,17px)}
.stamp.sq{border-radius:10%;aspect-ratio:1.3;width:25%}
.stamp.ov{border-radius:50%;aspect-ratio:1.5;width:27%}
@keyframes stampin{0%{opacity:0;transform:rotate(var(--r)) scale(2.2)}60%{opacity:.95}100%{opacity:.9;transform:rotate(var(--r)) scale(1)}}
.st1{left:6%;top:16%;animation-delay:1.1s}
.st2{left:27%;top:52%;animation-delay:1.45s}
.st3{left:5%;top:62%;animation-delay:1.8s}
.st4{left:56%;top:13%;animation-delay:2.15s}
.st5{left:74%;top:36%;animation-delay:2.5s}
.st6{left:52%;top:47%;animation-delay:2.85s}
.st7{left:72%;top:66%;animation-delay:3.2s}

/* boarding pass */
.bpass{position:absolute;left:18%;right:0;bottom:2%;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) 22%;
 transform:rotate(3deg);animation:bp-in 1s 3.5s var(--ease) both;filter:drop-shadow(0 26px 30px rgba(5,0,5,.5))}
@keyframes bp-in{from{opacity:0;transform:rotate(9deg) translate(20%,30%)}to{opacity:1;transform:rotate(3deg)}}
.bp-l,.bp-r{background:#fff;color:var(--purple-900)}
.bp-l{padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,22px);border-radius:10px 0 0 10px;border-right:2px dashed #D9C6D4}
.bp-r{border-radius:0 10px 10px 0;display:flex;align-items:center;justify-content:center;padding:10px}
.bp-k{display:block;font-size:clamp(7px,.7vw,9px);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-500)}
.bp-route{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.bp-route div{display:flex;flex-direction:column}
.bp-route b{font-family:'Courier New',ui-monospace,monospace;font-size:clamp(18px,2vw,28px);font-weight:700;letter-spacing:.06em;line-height:1}
.bp-route small{font-size:clamp(7px,.7vw,9px);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.bp-route i{flex:1;text-align:center;color:var(--gold);font-size:clamp(13px,1.3vw,17px);transform:rotate(90deg);position:relative}
.bp-meta{display:flex;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap}
.bp-meta span{font-size:clamp(9px,.85vw,11.5px);font-weight:600}
.bp-meta small{display:block;font-size:clamp(6.5px,.6vw,8px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bp-bar{width:58%;height:78%;background:repeating-linear-gradient(0deg,var(--purple-900) 0 2px,transparent 2px 4px,var(--purple-900) 4px 5px,transparent 5px 8px,var(--purple-900) 8px 11px,transparent 11px 13px)}

/* departures ticker */
.tick{position:relative;overflow:hidden;background:#1A051A;border-top:1px solid rgba(255,255,255,.08)}
.tick-belt{display:flex;width:max-content;animation:tick 38s linear infinite}
.tick:hover .tick-belt{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-set{display:flex;flex:none}
.tick-set span{display:inline-flex;align-items:center;gap:12px;padding:18px 34px;white-space:nowrap;
 font-family:'Courier New',ui-monospace,monospace;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F2E6C8;
 border-right:1px solid rgba(255,255,255,.07)}
.tick-set i{color:var(--gold);font-size:16px}

/* ------------------------------------------------------------ 2 SERVICES */
.sg{position:relative;background:#FBF7F2;padding:clamp(72px,8vw,120px) 0 clamp(72px,8vw,120px);overflow:hidden}
.sg:before{content:"";position:absolute;right:-10%;top:-6%;width:46%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(142,44,142,.14);pointer-events:none}
.sg-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px 40px;margin-bottom:clamp(34px,4vw,56px)}
.sg-head h2{font-size:clamp(32px,4vw,58px);color:var(--purple-700);margin:0;line-height:1.05;max-width:12em;text-wrap:balance}
.sg-head h2 em{font-style:italic;color:var(--purple-500)}
.sg-jump{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;justify-content:flex-end}
.sg-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
 font-size:12.5px;font-weight:500;color:#4A4450;text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--ease)}
.sg-jump a i{color:var(--c)}
.sg-jump a:hover{background:var(--c);border-color:var(--c);color:#fff;transform:translateY(-2px)}
.sg-jump a:hover i{color:#fff}

/* shared card text */
.card-k{display:flex;align-items:center;gap:9px;margin:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.hook{margin:8px 0 0;font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(16px,1.35vw,19px);line-height:1.45;color:#5C4E5A}
.handle{list-style:none;margin:10px 0 0;padding:0}
.handle li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:#3F3943}
.handle li:before{content:"\F26E";font-family:'bootstrap-icons';position:absolute;left:0;top:7px;display:flex;align-items:center;justify-content:center;
 width:19px;height:19px;border-radius:50%;background:var(--c);color:#fff;font-size:13px}
.handle.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.wk{margin:18px 0 0;padding:14px 16px 14px 46px;position:relative;background:#FFF6E0;border-radius:8px;font-size:14px;line-height:1.65;color:#4A3A12}
.wk:before{content:"\F33A";font-family:'bootstrap-icons';position:absolute;left:15px;top:14px;font-size:18px;color:#C99A06}
.wk b{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9A6B00;margin-bottom:3px}
.card-go{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:22px}
.card-go .btn{display:inline-flex;align-items:center;gap:9px}

/* ★ flagship */
.flag{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:#fff;border-radius:18px;overflow:hidden;
 box-shadow:0 40px 80px rgba(94,26,94,.14),0 2px 6px rgba(94,26,94,.06);margin-bottom:clamp(22px,2.4vw,32px)}
.flag-pic{position:relative;margin:0;min-height:460px;overflow:hidden;background:var(--purple-800)}
.flag-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.flag.is-in .flag-pic img,.flag:not(.srv) .flag-pic img{transform:scale(1)}
.flag:hover .flag-pic img{transform:scale(1.05)}
.flag-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(26,5,26,.15),rgba(26,5,26,0) 50%,rgba(94,26,94,.35))}
/* curtain that lifts when the card scrolls in */
.js-srv .flag-pic:before{content:"";position:absolute;inset:0;z-index:2;background:var(--purple-900);transform-origin:top;
 transition:transform 1.1s cubic-bezier(.65,0,.25,1) .1s}
.js-srv .flag.is-in .flag-pic:before{transform:scaleY(0)}
.flag-no{position:absolute;left:24px;bottom:12px;z-index:1;font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(90px,10vw,150px);
 line-height:1;color:rgba(255,255,255,.88);text-shadow:0 10px 40px rgba(0,0,0,.35)}
.flag-body{position:relative;padding:clamp(28px,3.6vw,56px)}
.flag-body h3{font-size:clamp(34px,3.6vw,52px);color:var(--purple-700);margin:12px 0 0;line-height:1.05}
.flag-body .sk{margin-top:22px}
.flag-stamp{position:absolute;top:clamp(18px,2.4vw,30px);right:clamp(18px,2.4vw,30px);width:clamp(84px,8vw,112px);color:var(--c);opacity:.85;
 transform:rotate(-12deg);transition:transform .8s var(--ease)}
.flag-stamp svg{display:block;width:100%;height:auto;overflow:visible;animation:hspin2 40s linear infinite}
@keyframes hspin2{to{transform:rotate(360deg)}}
.flag:hover .flag-stamp{transform:rotate(0) scale(1.06)}

/* the six */
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px);perspective:1400px}
.sc{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:16px;
 box-shadow:0 14px 34px rgba(94,26,94,.09),0 1px 3px rgba(94,26,94,.06);
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transform-style:preserve-3d;
 transition:transform .5s var(--ease),box-shadow .5s ease}
.sc:hover{--ty:-6px;box-shadow:0 34px 64px rgba(94,26,94,.18),0 2px 6px rgba(94,26,94,.08)}
.sc.is-tilting{transition:transform .1s linear,box-shadow .5s ease}
/* the whole card is the link; real links above it stay clickable */
.sc-hit{position:absolute;inset:0;z-index:3;border-radius:16px}
.sc-hit:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sc-pic{position:relative;margin:0;aspect-ratio:16/11;overflow:hidden;border-radius:16px 16px 0 0;background:var(--purple-800)}
.sc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease),filter .6s ease}
.sc:hover .sc-pic img{transform:scale(1.1)}
.sc-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,4,20,.55),rgba(20,4,20,0) 55%)}
.js-srv .sc-pic{clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.25,1)}
.js-srv .sc.is-in .sc-pic{clip-path:inset(0 0 0 0)}
.sc-no{position:absolute;right:16px;bottom:8px;z-index:1;font-family:'Playfair Display',serif;font-style:italic;font-size:56px;line-height:1;color:rgba(255,255,255,.9)}
.sc-ic{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:-29px 0 0 22px;border-radius:50%;
 background:var(--c);color:#fff;font-size:24px;box-shadow:0 0 0 5px #fff,0 12px 24px rgba(0,0,0,.18);transform:translateZ(30px);
 transition:transform .6s var(--ease)}
.sc:hover .sc-ic{transform:translateZ(30px) rotate(-12deg) scale(1.08)}
.sc-body{padding:14px 22px 4px;flex:1}
.sc-body h3{font-size:clamp(22px,1.9vw,27px);color:var(--purple-700);margin:0;line-height:1.15}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.chips li{padding:6px 11px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--c) 9%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,#fff);
 font-size:12.5px;line-height:1.35;color:#3F3943}
/* boarding-pass stub: perforation with punched notches */
.sc-stub{position:relative;margin-top:20px;padding:18px 22px 20px;border-top:2px dashed #E6D8E1;border-radius:0 0 16px 16px;
 background:linear-gradient(#fff,#FDFAF6)}
.sc-stub:before,.sc-stub:after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:#FBF7F2}
.sc-stub:before{left:-10px}
.sc-stub:after{right:-10px}
.sc-stub p{margin:0;font-size:13.5px;line-height:1.62;color:#4A4450}
.sc-stub p b{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c);margin-bottom:5px}
.sc-stub p b:before{content:"";width:16px;height:2px;background:var(--c)}
.sc-more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-700)}
.sc-more i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
 transition:background .3s ease,color .3s ease,border-color .3s ease,transform .4s var(--ease)}
.sc:hover .sc-more i{background:var(--c);border-color:var(--c);color:#fff;transform:translateX(4px)}
/* light sweep that follows the pointer */
.sc-glare{position:absolute;inset:0;z-index:2;border-radius:16px;pointer-events:none;opacity:0;transition:opacity .4s ease;
 background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.38),rgba(255,255,255,0) 45%)}
.sc:hover .sc-glare{opacity:1}

/* ---------------------------------------------------------- 3 CLOSING */
.cb{position:relative;isolation:isolate;overflow:hidden;background:var(--purple-900);color:#fff;padding:clamp(80px,9vw,140px) 0}
.cb-map{position:absolute;right:-8%;top:50%;width:min(1100px,95%);aspect-ratio:1200/601;transform:translateY(-50%);z-index:-1;opacity:.85}
.cb-map img{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.cb-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:arc 5s var(--ease) infinite}
.a2{animation-delay:.6s}.a3{animation-delay:1.2s}.a4{animation-delay:1.8s}.a5{animation-delay:2.4s}
@keyframes arc{0%{stroke-dashoffset:420;opacity:1}45%{stroke-dashoffset:0;opacity:1}80%{opacity:0;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.hub-pin{fill:var(--gold)}
.hub-ring{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(4);opacity:0}}
.cb:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--purple-900) 30%,rgba(42,10,42,.4) 70%,rgba(42,10,42,.2))}
.cb-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:end}
.cb .eyebrow{color:#F3D9EC}
.cb h2{font-size:clamp(34px,4.6vw,66px);font-weight:500;line-height:1.05;color:#fff;margin:0;max-width:12em;text-wrap:balance}
.cb h2 em{font-style:italic;color:var(--gold)}
.cb p{margin:20px 0 0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.78);max-width:28em}
.cb-act{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:360px;width:100%;justify-self:end}
.cb-act .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.cb-line{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;text-decoration:none;
 background:rgba(255,255,255,.04);transition:background .25s ease,border-color .25s ease,transform .3s var(--ease)}
.cb-line i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(253,185,19,.14);color:var(--gold);font-size:17px;flex:none}
.cb-line small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cb-line span{font-size:15px;font-weight:600}
.cb-line:hover{background:rgba(255,255,255,.1);border-color:var(--gold);transform:translateX(4px)}

/* ---------------------------------------------------------- 4 GOLD STRIP */
.gold{background:var(--gold);color:var(--purple-900);padding:clamp(18px,2vw,26px) 0}
.gold .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px}
.gold p{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(20px,2vw,27px);font-weight:600}
.gold-act{display:flex;flex-wrap:wrap;gap:10px}
.gold-act a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-pill);border:1px solid rgba(42,10,42,.4);
 color:var(--purple-900);font-size:13px;font-weight:600;text-decoration:none;transition:background .25s ease,color .25s ease}
.gold-act a:hover,.gold-act a.is-main{background:var(--purple-900);color:#fff;border-color:var(--purple-900)}
.gold-act a.is-main:hover{background:var(--purple-700)}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1100px){
  .six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flag{grid-template-columns:minmax(0,1fr)}
  .flag-pic{min-height:0;aspect-ratio:16/8}
}
@media (max-width:900px){
  .hx2-grid{grid-template-columns:minmax(0,1fr)}
  .desk{justify-self:center;max-width:540px}
  .sg-jump{justify-content:flex-start}
  .cb-in{grid-template-columns:minmax(0,1fr)}
  .cb-act{justify-self:start}
  .cb-map{right:-30%;width:150%;opacity:.5}
}
@media (max-width:640px){
  .hx2 .s-h1{font-size:clamp(36px,10.4vw,50px)}
  .s-cta .btn{flex:1 1 100%;justify-content:center}
  .six{grid-template-columns:minmax(0,1fr)}
  .handle.two{grid-template-columns:minmax(0,1fr)}
  .flag-pic{aspect-ratio:4/3}
  .flag-stamp{width:70px}
  .card-go .btn{flex:1 1 100%;justify-content:center}
  .sg-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px 6px;max-width:none}
  .sg-jump::-webkit-scrollbar{display:none}
  .sg-jump a{flex:none}
  .tick-set span{padding:14px 22px;font-size:12px}
  .cb-act{max-width:none}
  .gold-act{width:100%}
  .gold-act a{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hub *,.hub *:before,.hub *:after{animation:none !important}
  .stamp{opacity:.9;transform:rotate(var(--r))}
  .arc{stroke-dashoffset:0}
  .sc,.sc-pic,.flag-pic:before{transition:none}
  .js-srv .sc-pic{clip-path:none}
  .js-srv .flag-pic:before{display:none}
}

/* scroll reveal + tilt share one transform on the cards */
.js-srv .sc.srv{transform:translateY(46px);transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .5s ease}
.js-srv .sc.srv.is-in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.js-srv .sc.srv.is-in.is-tilting{transition:transform .1s linear,box-shadow .5s ease}
.js-srv .sc.srv.is-in:not(.is-tilting){transition:transform .6s var(--ease),box-shadow .5s ease,opacity .9s var(--ease)}

/* layout refinements */
.desk{margin-top:clamp(10px,3vw,40px)}
.sg-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.sg-jump{max-width:470px}
.cb-map{right:22%}
@media (max-width:900px){
  .sg-head{grid-template-columns:minmax(0,1fr)}
  .cb-map{right:-30%}
}
@media (max-width:1100px){
  /* the stamp moves onto the photograph once the flagship stacks */
  .flag-stamp{top:16px;right:16px;color:#fff;opacity:.92;z-index:3}
  .flag-body{position:static}
}

/* ======================================================================
   SHORTER SERVICE CARDS
   Photo 16:10, compact tags. On devices with a mouse, "Worth knowing"
   slides up over the photo on hover/focus instead of always taking
   space below; touch screens keep it in the stub, in full.
   ====================================================================== */
.sc-pic{aspect-ratio:16/10}
.sc-no{font-size:46px}
.sc-ic{width:52px;height:52px;margin:-26px 0 0 20px;font-size:21px}
.sc-body{padding:12px 20px 0}
.sc-body h3{font-size:clamp(21px,1.7vw,24px)}
.sc-body .hook{font-size:clamp(15px,1.15vw,16.5px);margin-top:6px}
.chips{gap:5px;margin-top:12px}
.chips li{padding:4px 10px;font-size:12px;line-height:1.4}
.sc-stub{margin-top:16px;padding:14px 20px 16px}
.sc-more{margin-top:12px}
.sc-tip{display:none}

@media (hover:hover) and (pointer:fine) and (min-width:641px){
  .sc-stub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:12px 20px}
  /* static, so the note can line up with the card; notches drawn in the background instead */
  .sc-stub{position:static;background:radial-gradient(circle at 0 0,#FBF7F2 10px,transparent 10.5px),radial-gradient(circle at 100% 0,#FBF7F2 10px,transparent 10.5px),linear-gradient(#fff,#FDFAF6)}
  .sc-stub:before,.sc-stub:after{display:none}
  .sc-more{margin-top:0}
  .sc-tip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);transition:opacity .3s ease}
  .sc-tip i{color:var(--c)}
  .sc:hover .sc-tip,.sc:focus-within .sc-tip{opacity:0}
  /* the note lives in the stub's markup but sits over the photograph */
  .sc-stub p{position:absolute;left:0;right:0;top:0;z-index:2;aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:flex-end;
   padding:22px 22px 26px;border-radius:16px 16px 0 0;color:#fff;font-size:13.5px;line-height:1.6;pointer-events:none;
   background:linear-gradient(to top,rgba(20,4,20,.94) 0%,rgba(20,4,20,.82) 55%,rgba(20,4,20,.35) 100%);
   opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s var(--ease)}
  .sc-stub p b{color:#fff}
  .sc-stub p b:before{background:var(--gold)}
  .sc:hover .sc-stub p,.sc:focus-within .sc-stub p{opacity:1;transform:none}
}
.sc-more,.sc-tip{white-space:nowrap}
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  /* keep the note clear of the round icon that overlaps the photo's foot */
  .sc-stub p{justify-content:center;padding:16px 22px 38px;font-size:13px;line-height:1.55}
  .sc-tip:after{content:"\F145";font-family:'bootstrap-icons';font-size:10px;margin-left:2px}
}

/* ======================================================================
   QUIETER LABELS (services hub only)
   No drawn dashes before headings, no wide-tracked capitals, no pill
   boxes around list items: small headings read like ordinary type.
   ====================================================================== */
.hub .eyebrow,.hx2-kick,.card-k{display:block;gap:0;margin-bottom:12px;font-family:'Playfair Display',Georgia,serif;font-style:italic;
 font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:0;text-transform:none}
.hub .eyebrow:before{display:none}
.hub .eyebrow{color:var(--purple-500)}
.hub .cb .eyebrow,.hx2-kick{color:var(--gold)}
.hx2-kick i{display:none}
.card-k{margin:0;font-size:16px;color:var(--c)}
.hub .sk{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--purple-700)}
.wk b,.sc-stub p b{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
.sc-stub p b:before{display:none}
.sc-more{font-size:13px;letter-spacing:0;text-transform:none}
.slink{letter-spacing:0;text-transform:none;font-size:14px}

/* card lists: plain lines, no boxes */
.plain{list-style:none;margin:12px 0 0;padding:0}
.plain li{position:relative;padding:3px 0 3px 18px;font-size:13.5px;line-height:1.5;color:#3F3943}
.plain li:before{content:"";position:absolute;left:2px;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--c)}

/* ======================================================================
   TYPE: one consistent heading system for the services hub
   Playfair Display is loaded at 500/600/700 upright and 500 italic only.
   Every italic is pinned to 500 and faux bold/italic is switched off, so
   the browser never smears a synthetic bold italic.
   ====================================================================== */
.hub{font-synthesis:none}
.hub em,.hub .hook,.hub .card-k,.hub .eyebrow,.hx2-kick,.flag-no,.sc-no{font-weight:500}
/* display headings: light, tight, balanced */
.hub .s-h1,.sg-head h2,.cb h2{font-weight:500;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
.sg-head h2{font-size:clamp(34px,4vw,56px)}
/* card titles: a step heavier so they hold their own beside photographs */
.flag-body h3,.sc-body h3{font-weight:600;letter-spacing:-.012em}
.flag-body h3{font-size:clamp(34px,3.4vw,48px);line-height:1.04}
.sc-body h3{font-size:clamp(21px,1.75vw,25px);line-height:1.15}
.hub .hook{color:#5C4E5A;letter-spacing:0}
/* body copy stays in Poppins at a readable weight */
.hub .plain li,.hub .handle li,.hub .wk,.sc-stub p{font-weight:400}
.flag-no,.sc-no{font-variant-numeric:lining-nums;letter-spacing:-.02em}

/* ======================================================================
   ONE HEADING STYLE: every heading on the services hub uses the same
   face as "Pick what you need." (Playfair Display, upright, 500).
   Second lines keep their accent colour but are no longer italic.
   ====================================================================== */
.hub h1,.hub h2,.hub h3,.hub .s-h1,.flag-body h3,.sc-body h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-style:normal}
.hub h1 em,.hub h2 em,.hub h3 em,.hub .s-h1 em{font-style:normal;font-weight:500}
.hub .eyebrow,.hx2-kick,.card-k{font-family:'Playfair Display',Georgia,serif;font-style:normal;font-weight:500}
.flag-no,.sc-no{font-style:normal;font-weight:500}

/* worth-knowing notes removed from the hub cards: the stub is just a footer */
.sc-stub{display:flex;align-items:center;margin-top:18px;padding:12px 20px}
.sc-more{margin-top:0}

/* ======================================================================
   HERO ART — THE WINDOW SEAT
   A cabin wall with two oval windows. Each blind lifts on load to show
   the view; a seat tag sits below. Everything sizes from .cabin's width.
   ====================================================================== */
.cabin{position:relative;width:100%;max-width:560px;justify-self:end;padding-bottom:42px}
.cabin-wall{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);
 padding:clamp(28px,3.6vw,48px) clamp(24px,3.4vw,46px);border-radius:28px;overflow:hidden;
 background:linear-gradient(180deg,#F4EFEA 0%,#E6DED6 55%,#D8CEC4 100%);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -14px 30px rgba(80,50,40,.12),0 40px 80px rgba(8,1,8,.5);
 animation:s-up 1.1s .25s var(--ease) both}
/* panel seams in the cabin lining */
.cabin-seam{position:absolute;top:0;bottom:0;width:1px;background:rgba(120,90,80,.18);box-shadow:1px 0 0 rgba(255,255,255,.55)}
.cabin-seam.s1{left:8%}
.cabin-seam.s2{right:8%}
.cabin-light{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
 background:radial-gradient(ellipse 70% 100% at 50% 0,rgba(255,240,210,.55),transparent 70%)}

/* the window: a moulded surround, then the glass */
.win{position:relative;z-index:1;aspect-ratio:3/4.3;border-radius:46% / 34%;padding:9%;
 background:linear-gradient(145deg,#FFFFFF,#E2D9D0);
 box-shadow:inset 0 -6px 12px rgba(90,60,50,.18),inset 0 4px 8px rgba(255,255,255,.9),0 10px 20px rgba(90,60,50,.18)}
.glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:46% / 34%;background:#9EC4E6;
 box-shadow:inset 0 0 0 3px rgba(60,40,40,.25),inset 0 8px 22px rgba(0,0,0,.35)}
.view{position:absolute;inset:-12% -12%;width:124%;height:124%;object-fit:cover;
 transform:translate3d(0,var(--py,0px),0) scale(1.06);animation:view-drift 14s ease-in-out infinite alternate}
.w2 .view{animation-duration:17s;animation-direction:alternate-reverse}
@keyframes view-drift{from{translate:-3% 0}to{translate:3% 0}}
.shine{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
 background:linear-gradient(120deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%)}
/* the blind slides up, its pull-tab leading */
.blind{position:absolute;inset:0;z-index:3;border-radius:inherit;
 background:repeating-linear-gradient(180deg,#EDE6DE 0 9px,#E1D8CE 9px 10px);
 box-shadow:inset 0 -3px 0 #CFC4B8;transform:translateY(0);animation:blind-up 1.4s cubic-bezier(.65,0,.25,1) forwards}
.w1 .blind{animation-delay:.9s}
.w2 .blind{animation-delay:1.3s}
.blind i{position:absolute;left:50%;bottom:7px;width:30%;height:7px;margin-left:-15%;border-radius:4px;background:#BFB2A5}
@keyframes blind-up{to{transform:translateY(-91%)}}

/* the seat tag */
.seat-tag{position:absolute;left:clamp(16px,3vw,34px);bottom:0;z-index:4;display:flex;align-items:center;gap:14px;
 padding:12px 20px 12px 12px;background:#fff;color:var(--purple-900);border-radius:12px;
 box-shadow:0 22px 44px rgba(8,1,8,.42);animation:s-up .9s 2s var(--ease) both}
.seat-no{display:flex;align-items:baseline;justify-content:center;width:56px;height:56px;padding-top:9px;border-radius:10px;
 background:var(--purple-900);color:#fff;font-family:'Playfair Display',serif;font-size:24px;font-weight:500;line-height:1}
.seat-no em{font-style:normal;color:var(--gold);margin-left:1px}
.seat-tx{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted);line-height:1.45}
.seat-tx b{font-family:'Playfair Display',serif;font-size:18px;font-weight:500;color:var(--purple-900)}

@media (max-width:900px){
  .cabin{justify-self:center;max-width:460px;margin-top:8px}
}
@media (max-width:640px){
  .cabin-wall{border-radius:20px;gap:14px;padding:22px 18px}
  .seat-no{width:46px;height:46px;font-size:20px;padding-top:8px}
  .seat-tx b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .blind{transform:translateY(-91%)}
  .view{animation:none !important}
}

/* ======================================================================
   HERO ART — THE TRIP CHECKLIST
   The seven services as a pre-trip checklist that ticks itself off,
   laid over a passport-and-boarding-pass photograph. Every line is a
   link to that service. (Replaces the window-seat art.)
   ====================================================================== */
.tk{position:relative;width:100%;max-width:560px;justify-self:end;padding:0 0 0 clamp(40px,7vw,96px)}
.tk-photo{position:absolute;left:0;top:8%;width:64%;height:78%;margin:0;overflow:hidden;border-radius:18px;
 box-shadow:0 30px 60px rgba(8,1,8,.5);transform:rotate(-4deg);animation:tk-photo 1.2s .2s var(--ease) both}
@keyframes tk-photo{from{opacity:0;transform:rotate(-9deg) translateY(30px)}to{opacity:1;transform:rotate(-4deg)}}
.tk-photo img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0px),0)}
.tk-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(26,5,26,0) 40%,rgba(26,5,26,.55))}

.tk-card{position:relative;z-index:1;margin-left:auto;width:min(100%,380px);padding:22px 22px 18px;background:#FFFDF9;color:var(--purple-900);
 border-radius:18px;box-shadow:0 40px 80px rgba(8,1,8,.55),0 2px 6px rgba(8,1,8,.2);animation:s-up 1s .45s var(--ease) both}
.tk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px dashed #E4D6DF}
.tk-k{display:block;font-size:12.5px;color:var(--muted)}
.tk-head b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:500;line-height:1.15;color:var(--purple-900)}
.tk-count{font-family:'Playfair Display',Georgia,serif;font-size:15px;color:var(--muted);white-space:nowrap}
.tk-count em{font-style:normal;font-size:28px;color:var(--purple-700);margin-right:1px;display:inline-block;animation:tk-num .4s 3.1s var(--ease) both}
@keyframes tk-num{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.tk-list{list-style:none;margin:0;padding:0}
.tk-list li + li{border-top:1px solid #F1E8EE}
.tk-list a{display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:12px;padding:9px 6px;margin:0 -6px;border-radius:10px;
 color:inherit;text-decoration:none;transition:background .25s ease}
.tk-list a:hover,.tk-list a:focus-visible{background:color-mix(in srgb,var(--c) 8%,#fff)}
.tk-list a:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tk-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;font-size:17px;
 background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);transition:background .25s ease,color .25s ease}
.tk-list a:hover .tk-ic{background:var(--c);color:#fff}
.tk-tx{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tk-tx b{font-size:14.5px;font-weight:600;color:var(--purple-900)}
.tk-tx small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* each line ticks itself off in turn */
.tk-ok{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #D9CBD4;color:#fff;font-size:15px;
 animation:tk-tick .45s calc(1.1s + var(--i) * .26s) cubic-bezier(.3,1.5,.5,1) both}
.tk-ok i{opacity:0;animation:tk-i .3s calc(1.2s + var(--i) * .26s) ease both}
@keyframes tk-tick{from{background:transparent;border-color:#D9CBD4;transform:scale(.8)}to{background:var(--c);border-color:var(--c);transform:none}}
@keyframes tk-i{to{opacity:1}}
.tk-list a:hover .tk-ok{transform:scale(1.1)}
.tk-foot{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1.5px dashed #E4D6DF;font-size:12.5px;color:var(--muted)}
.tk-foot i{color:var(--purple-500);font-size:15px}

@media (max-width:900px){
  .tk{justify-self:center;max-width:520px;margin-top:8px}
}
@media (max-width:640px){
  .tk{padding-left:0}
  .tk-photo{width:70%;height:46%;top:-4%;left:auto;right:-4%}
  .tk-card{margin:70px auto 0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tk-ok{background:var(--c);border-color:var(--c)}
  .tk-ok i{opacity:1}
}

/* ======================================================================
   HERO — FULL-BLEED (current)
   Photography fills the screen and crossfades slowly between places
   (js/services.js), each frame drifting in a slow push. The headline sits
   low-left; the place now showing sits low-right; the seven services run
   along the foot as a hairline strip.
   ====================================================================== */
.hz{position:relative;isolation:isolate;overflow:hidden;background:#140314;color:#fff;
 min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:flex-end}
.hz-media{position:absolute;inset:0;z-index:-2}
.hz-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.hz-slide.is-on{opacity:1}
.hz-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.hz-slide.is-on img{transform:scale(1.02)}
.hz-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(18,3,18,.78) 0%,rgba(18,3,18,.45) 38%,rgba(18,3,18,0) 68%),
            linear-gradient(to top,rgba(18,3,18,.92) 0%,rgba(18,3,18,.55) 26%,rgba(18,3,18,0) 55%),
            linear-gradient(to bottom,rgba(18,3,18,.55) 0%,rgba(18,3,18,0) 22%)}

.hz-main{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
 padding-top:clamp(140px,22vh,220px);padding-bottom:clamp(36px,6vh,64px)}
.hz-copy{max-width:640px}
.hz-kick{margin:0 0 18px;font-family:'Playfair Display',Georgia,serif;font-size:clamp(17px,1.4vw,20px);color:var(--gold);
 animation:s-up .8s var(--ease) both}
.hz .s-h1{font-size:clamp(44px,6vw,92px);line-height:1.02;text-shadow:0 4px 40px rgba(0,0,0,.25)}
.hz .s-sub{color:rgba(255,255,255,.86);max-width:28em}

.hz-now{display:grid;grid-template-columns:auto 120px;align-items:center;gap:10px 16px;min-width:260px;padding-bottom:6px;
 animation:s-up 1s .7s var(--ease) both}
.hz-count{font-family:'Playfair Display',Georgia,serif;font-size:14px;color:rgba(255,255,255,.65)}
.hz-count b{font-weight:500;font-size:22px;color:#fff}
.hz-bar{position:relative;height:1px;background:rgba(255,255,255,.3);overflow:hidden}
.hz-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.hz-bar i.run{animation:hz-run var(--dur,7s) linear forwards}
@keyframes hz-run{to{transform:scaleX(1)}}
.hz-place{grid-column:1/-1;display:flex;flex-direction:column;transition:opacity .5s ease,transform .6s var(--ease)}
.hz-place.out{opacity:0;transform:translateY(8px)}
.hz-place b{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:500}
.hz-place small{font-size:12.5px;color:rgba(255,255,255,.7)}

/* the seven services, a hairline strip along the foot */
.hz-svc{position:relative;border-top:1px solid rgba(255,255,255,.18);background:rgba(18,3,18,.35);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:s-up 1s .9s var(--ease) both}
.hz-svc-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.hz-svc a{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px 8px;color:rgba(255,255,255,.88);
 text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .3s ease,background .3s ease}
.hz-svc a + a{border-left:1px solid rgba(255,255,255,.12)}
.hz-svc a i{font-size:16px;color:var(--gold);transition:transform .4s var(--ease)}
.hz-svc a:after{content:"";position:absolute;left:20%;right:20%;top:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--ease)}
.hz-svc a:hover,.hz-svc a:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.hz-svc a:hover i{transform:translateY(-2px)}
.hz-svc a:hover:after,.hz-svc a:focus-visible:after{transform:scaleX(1)}
.hz-svc a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

@media (max-width:1100px){
  .hz-svc-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hz-svc a:nth-child(5){border-left:0}
  .hz-svc a:nth-child(n+5){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:900px){
  .hz-main{flex-direction:column;align-items:flex-start}
  .hz-now{min-width:0;width:100%;max-width:340px}
}
@media (max-width:640px){
  .hz{min-height:max(600px,100svh)}
  .hz .s-h1{font-size:clamp(38px,11vw,52px)}
  .hz .s-cta .btn{flex:1 1 100%;justify-content:center}
  .hz-svc-row{display:flex;overflow-x:auto;scrollbar-width:none}
  .hz-svc-row::-webkit-scrollbar{display:none}
  .hz-svc a{flex:none;padding:16px 18px;border-top:0 !important}
  .hz-svc a:nth-child(5){border-left:1px solid rgba(255,255,255,.12)}
  .hz-now{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hz-slide,.hz-slide img{transition:none}
  .hz-slide img{transform:none}
}

/* the hero is a flex column: let its wraps take the full width so the copy
   lines up with the logo instead of shrinking to its content */
.hz > .wrap{width:100%}

/* the services strip scrolls left continuously; two copies make the loop
   seamless. Hover or keyboard focus pauses it so a link can be picked. */
.hz-svc{overflow:hidden}
.hz-svc .wrap{width:100%;max-width:none;padding:0}
.hz-svc-belt{display:flex;width:max-content;animation:hz-belt 34s linear infinite}
.hz-svc:hover .hz-svc-belt,.hz-svc:focus-within .hz-svc-belt{animation-play-state:paused}
@keyframes hz-belt{to{transform:translateX(-50%)}}
.hz-svc .hz-svc-row{display:flex;flex:none;overflow:visible}
.hz-svc .hz-svc-row a{flex:none;padding:20px 40px;border-top:0 !important;border-left:1px solid rgba(255,255,255,.12) !important}
@media (max-width:640px){
  .hz-svc .hz-svc-row a{padding:16px 26px}
  .hz-svc-belt{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
  .hz-svc-belt{animation:none}
  .hz-svc{overflow-x:auto}
  .hz-svc .hz-svc-row[aria-hidden]{display:none}
}

/* keep the whole hero, services strip included, inside the first screen:
   height is the viewport, and type and spacing also scale with height
   (short laptop screens, 125% Windows scaling) */
.hz{height:100svh;min-height:560px}
.hz-main{flex:1;align-items:flex-end;padding-top:clamp(96px,15vh,190px);padding-bottom:clamp(20px,4.5vh,60px);min-height:0}
.hz .s-h1{font-size:clamp(36px,min(6vw,9.6vh),92px)}
.hz-kick{margin-bottom:clamp(8px,1.8vh,18px)}
.hz .s-sub{margin-top:clamp(10px,2vh,24px)}
.hz .s-cta{margin-top:clamp(16px,3vh,34px)}
.hz-svc .hz-svc-row a{padding-block:clamp(14px,2.4vh,20px)}
@media (max-height:620px) and (min-width:641px){
  .hz .s-sub{display:none}
}
@media (max-width:640px){
  .hz{height:auto;min-height:100svh}
}

/* copy sits in the optical middle of the space between the header and the
   services strip, not pinned to the bottom */
.hz-main{align-items:center;padding-top:clamp(110px,14vh,150px);padding-bottom:clamp(24px,5vh,56px)}
@media (max-width:900px){
  .hz-main{justify-content:center}
}
@media (max-width:900px){
  .hz-main{align-items:flex-start}
}

/* ======================================================================
   MATCH THE HOMEPAGE HERO
   Same eyebrow lockup, same Poppins headline at the same size, same
   lead-line style and the same purple wash over the photograph.
   ====================================================================== */
.hz-kick2{animation:s-up .8s var(--ease) both}
.hz .s-h1{font-family:'Poppins',system-ui,sans-serif;font-weight:600;color:#fff;
 font-size:clamp(28px,min(4.2vw,5.4vh),52px);line-height:1.14;letter-spacing:-.025em;
 margin:clamp(12px,1.8vh,24px) 0 0;text-shadow:none;font-synthesis:weight style}
.hz .s-h1 em{font-style:normal;font-weight:500;color:rgba(255,255,255,.86);letter-spacing:-.02em}
.hz .s-sub{font-size:clamp(13.5px,min(1.25vw,2vh),18px);color:#fff;font-weight:400;line-height:1.55;max-width:31em;
 margin-top:clamp(10px,1.5vh,20px)}
.hz .s-cta{margin-top:clamp(16px,2.6vh,32px)}
.hz-scrim{background:linear-gradient(100deg,rgba(26,5,26,.94) 0%,rgba(40,9,40,.88) 36%,rgba(56,14,54,.72) 64%,rgba(70,20,66,.52) 100%)}
@media (max-width:640px){
  .hz .s-h1{font-size:clamp(30px,8.6vw,40px)}
}