/* ═══════════════════════════════════════════════════════════════
DESTINATIONZ 360 · d360-v1.css
Loaded AFTER site-v9.css and cro-v1.css. brand-v9.css was dropped sitewide on
22 Sep: it capped .hero h1 at 56px against the Master Brief 70px.
RULING, Krishna, 17 Sep 2026: "The visual design etc needs to be exactly
like zubilant." This supersedes the 11 Sep "sibling, own accent" ruling.
Every colour token, type size, radius, shadow and motion curve now comes
from the pristine Zubilant v9 sheets, untouched. THERE ARE NO COLOUR
OVERRIDES IN THIS FILE. If you add one, you break the ruling.
What remains here is only what Zubilant has no equivalent of: the D360
wordmark, the phone nav fit, and the handful of components this site needs
that the Zubilant pages never had. All of them draw Zubilant's own tokens.
═══════════════════════════════════════════════════════════════ */
/* ── WORDMARK ──────────────────────────────────────────────────
No D360 logo file exists (board 4.1 #4). Until one does, the brand is set
in type so it stays sharp at every size and recolours with the nav state,
instead of shipping a placeholder image. */
.brand.d360{gap:0;text-decoration:none;line-height:1}
.wm{display:inline-flex;align-items:baseline;gap:0;font-weight:700;
letter-spacing:-.018em;font-size:20px;white-space:nowrap;color:#fff}
.wm .wm-z{font-weight:300;letter-spacing:.01em}
.wm .wm-360{font-weight:700;font-size:.84em;letter-spacing:.02em;margin-left:.34em;
padding:.16em .44em;border-radius:999px;background:var(--orange500);color:#fff;
transform:translateY(-.06em)}
.nav.scrolled .wm,.nav.solid .wm{color:var(--ink900)}
.flogo .wm{color:var(--ink900);font-size:26px}
.nmtop .wm{color:var(--ink900);font-size:19px}
@media (max-width:640px){.wm{font-size:16px}}
/* ── NAV FIT ON A PHONE ────────────────────────────────────────
Measured, not assumed: at 390 the pill has 342px of room and the Zubilant
arrangement (wordmark + the full phone number + burger) needs 418, which
pushes the burger off the screen entirely. The number collapses to a Call
button below 640 and the wordmark steps down with it. */
.telshort{display:none;align-items:center;gap:7px}
.telshort svg{width:17px;height:17px}
@media (max-width:640px){
.nav .in{gap:10px}
.navright{gap:8px}
.telfull{display:none}
.telshort{display:inline-flex}
.brand.d360{min-width:0}
}
@media (max-width:400px){
.wm{font-size:15px}
.wm .wm-360{padding:.14em .38em}
}
/* ── CALLBACK WINDOW CHIPS ─────────────────────────────────────
Krishna, 11 Sep: "ticket size is high so call back is most prefered." */
.cbrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cbrow .chip{cursor:pointer}
/* ── THE ASSURANCE STRIP ───────────────────────────────────────
A school buys supervision before it buys a destination. */
.assure{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin-top:40px}
.assure > div{background:var(--paper);border:1px solid var(--lineSoft);
border-radius:var(--r-card);padding:22px 20px;box-shadow:var(--e1)}
.assure k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--orange600);margin-bottom:8px}
.assure v{display:block;font-size:19px;font-weight:600;line-height:1.32;
letter-spacing:-.008em;color:var(--ink900)}
.assure em{display:block;font-style:normal;font-size:14.5px;line-height:1.5;
color:var(--ink700);margin-top:8px}
@media (max-width:1080px){.assure{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.assure{grid-template-columns:1fr}}
/* ── PROGRAMME CARD FOOT ───────────────────────────────────────
Zubilant's card foot assumes a price. D360 has none by ruling, so the foot
carries the academic fit instead. */
.jfoot .jfit{font-size:14px;line-height:1.4;color:var(--ink700);max-width:22ch}
.jfoot .jfit b{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink500);margin-bottom:3px}
/* ── THE PROTOCOL LIST ─────────────────────────────────────────
Numbered, austere, deliberately unglamorous. */
.proto{counter-reset:pr;margin-top:40px;display:grid;gap:0}
.proto > li{list-style:none;counter-increment:pr;display:grid;
grid-template-columns:64px 1fr;gap:22px;padding:26px 0;
border-top:1px solid var(--lineSoft)}
.proto > li:last-child{border-bottom:1px solid var(--lineSoft)}
.proto > li::before{content:counter(pr,decimal-leading-zero);
font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--orange500);
padding-top:4px}
.proto h3{font-size:21px;margin-bottom:8px}
.proto p{font-size:15.5px;line-height:1.6;color:var(--ink700);max-width:64ch}
@media (max-width:640px){.proto > li{grid-template-columns:44px 1fr;gap:14px}}
/* ── COMPARISON ────────────────────────────────────────────────*/
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.vs > div{border-radius:var(--r-card);padding:26px 24px}
.vs .bad{background:var(--paper);border:1px solid var(--lineSoft)}
.vs .good{background:var(--sun100);border:1.5px solid var(--orange500)}
.vs h3{font-size:19px;margin-bottom:14px}
.vs ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.vs li{font-size:15.5px;line-height:1.5;color:var(--ink700);
padding-left:26px;position:relative}
.vs .bad li::before{content:"";position:absolute;left:0;top:.52em;width:12px;
height:1.5px;background:var(--lineStrong)}
.vs .good li::before{content:"";position:absolute;left:1px;top:.28em;width:13px;
height:7px;border-left:2px solid var(--orange500);border-bottom:2px solid var(--orange500);
transform:rotate(-45deg)}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
/* ── SYLLABUS TAGS ─────────────────────────────────────────────*/
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags span{font-size:13px;font-weight:600;line-height:1;padding:8px 13px;
border-radius:999px;background:var(--teal50);color:var(--teal700);
border:1px solid var(--teal200)}
/* ── THE SISTER-BRAND BAND ─────────────────────────────────────
Krishna, 17 Sep: "We need an interlinking from D360 to Zubilant too."
A trip coordinator is also a parent. This is the one place on the site
where sending the visitor away is worth more than keeping them. */
.sister{background:var(--sand);border-top:1px solid var(--lineSoft)}
.sisgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:48px;align-items:center}
.siscard{position:relative;display:block;text-decoration:none;color:inherit;
background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);
padding:30px 32px;box-shadow:var(--e2);overflow:hidden;
transition:transform var(--t-move),box-shadow var(--t-move),border-color var(--t-move)}
.siscard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
background:linear-gradient(90deg,var(--orange500),var(--sun))}
.siscard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(243,107,33,.2);
border-color:var(--teal200)}
.siscard k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink500)}
.siscard v{display:block;font-size:27px;font-weight:700;letter-spacing:-.02em;
line-height:1.15;color:var(--teal900);margin-top:8px}
.siscard p{font-size:15px;line-height:1.55;color:var(--ink700);margin-top:10px}
.siscard .go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
font-size:14.5px;font-weight:700;color:var(--teal600)}
.siscard .go b{transition:transform var(--t-move)}
.siscard:hover .go{color:var(--orange500)}
.siscard:hover .go b{transform:translateX(4px)}
@media (max-width:1080px){.sisgrid{grid-template-columns:1fr;gap:28px}}
/* Footer group block */
.fgroup{margin-top:18px;padding-top:16px;border-top:1px solid var(--teal200)}
.fgroup k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink500);margin-bottom:8px}
.fgroup a{font-weight:700;color:var(--ink900)}
.fgroup a:hover{color:var(--orange500)}
.fgroup span{color:var(--ink700);font-size:14.5px}
/* The Zubilant mascot does not belong to this brand. */
.zbc-launch,.zpeek{display:none!important}
/* ── ported verbatim from Zubilant corporate.html ────────────── */
/* corporate page r2: scoped layout only, tokens from site-v9 */
.chero .trust{margin-top:34px}
.chero .trust v{font-size:20px}
.cintro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.getcard{background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);padding:32px;box-shadow:var(--e2);position:relative;overflow:hidden}
.getcard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange500),var(--sun))}
.getcard .label{color:var(--ink500)}
.getcard .ticks{margin-top:18px;gap:12px}
.getcard .ticks li{font-size:15.5px;line-height:1.5}
.getcard .ticks li::before{background:var(--orange500)}
.getcard .ticks b{color:var(--ink900)}
.clhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.marq{margin-top:40px;overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marqtrack{display:flex;width:max-content;gap:18px;animation:marq 34s linear infinite}
.marq:hover .marqtrack{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.logos{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.logos li{display:flex;align-items:center;justify-content:center;width:220px;min-height:120px;padding:20px 22px;flex:0 0 auto;
background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);transition:border-color var(--t-move),box-shadow var(--t-move)}
.logos li:hover{border-color:var(--teal200);box-shadow:var(--e2)}
.logos img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter var(--t-move),opacity var(--t-move)}
.logos li:hover img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.marqtrack{animation:none;flex-wrap:wrap;width:auto}.marqtrack .logos+.logos{display:none}.marq{mask-image:none;-webkit-mask-image:none}}
.shape{margin-top:64px;padding-top:48px;border-top:1px solid var(--lineSoft)}
.shapehead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.shapehead h3{font-size:26px;line-height:1.2;max-width:24ch}
#how .routeband{margin-top:28px}
.cclose{background:var(--teal900);color:#fff;border-top:0;position:relative;overflow:hidden}
.cclose::before{content:"";position:absolute;right:-12%;top:-40%;width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(243,107,33,.22),transparent 65%);pointer-events:none}
.cclose .btn-primary::after{background:var(--orange500)}.cclose .btn-primary::before{background:var(--orange600)}.cclose .btn-primary{box-shadow:0 6px 18px rgba(243,107,33,.32)}
.cclose h2{color:#fff}.cclose .acc{color:var(--sun)}.cclose .lead,.cclose p{color:rgba(255,255,255,.86)}
.ctaband{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:center}
.ctaticks{list-style:none;margin:0;padding:28px 30px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);background:rgba(255,255,255,.07);position:relative;display:flex;flex-direction:column;gap:14px}
.ctaticks li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.45;color:#fff}
.ctaticks li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sun)}
.ctaticks li::after{content:"";position:absolute;left:4px;top:10px;width:6px;height:3px;border-left:2px solid var(--teal900);border-bottom:2px solid var(--teal900);transform:rotate(-45deg)}
/* enquiry modal */
.embd{position:fixed;inset:0;z-index:1000;background:rgba(0,20,22,.62);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity 200ms ease}
.embd[hidden]{display:none}
.embd.show{opacity:1}
.em{position:relative;background:var(--paper);border-radius:18px;max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:36px 40px 40px;box-shadow:var(--e3);transform:translateY(14px);transition:transform 220ms cubic-bezier(.2,.7,.3,1)}
.embd.show .em{transform:none}
.emhead{margin-bottom:24px;padding-right:40px}
.emhead h3{font-size:26px;line-height:1.2}
.emx{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:999px;border:0;background:var(--sand);font-size:20px;line-height:1;cursor:pointer}
.emx:hover{background:var(--teal50)}
.em .fgrid{gap:18px}
.em .field input,.em .field select,.em .field textarea{font-size:16px;min-height:48px}
.em .formfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@media (max-width:1080px){
.cintro{grid-template-columns:1fr;gap:28px}
.ctaband{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
.chero .trust{gap:22px}
.logos li{width:160px;min-height:96px;padding:16px}
.logos img{max-height:56px}
.shapehead h3{font-size:22px}
.embd{padding:0;align-items:flex-end}
.em{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding:26px 20px calc(30px + env(safe-area-inset-bottom));transform:translateY(28px)}
.em .fgrid{grid-template-columns:1fr}
}
/* bento: four kinds of trip */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:250px;gap:16px;margin-top:40px}
.btile{position:relative;display:block;overflow:hidden;border-radius:var(--r-card);background:var(--teal900);color:#fff;text-decoration:none;isolation:isolate;
transition:transform var(--t-move),box-shadow var(--t-move)}
.btile:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,39,43,.28)}
.btile:focus-visible{outline:2px solid var(--orange500);outline-offset:3px}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
.btile:hover img{transform:scale(1.05)}
.btile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,39,43,.06) 20%,rgba(0,39,43,.55) 55%,rgba(0,39,43,.88) 100%)}
.btile .bbody{position:absolute;left:0;right:0;bottom:0;padding:22px 24px}
.btile k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun)}
.btile h3{font-size:24px;line-height:1.15;letter-spacing:-.01em;margin-top:6px;color:#fff}
.btile p{margin-top:8px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88);max-width:46ch}
.btile .bfor{display:block;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.72)}
.btile .cgo{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:#fff}
.btile .cgo b{transition:transform var(--t-move)}
.btile:hover .cgo{color:var(--sun)}.btile:hover .cgo b{transform:translateX(4px)}
.b-off{grid-column:1/8;grid-row:1/3}
.b-train{grid-column:8/13;grid-row:1/2}
.b-inc{grid-column:8/13;grid-row:2/3}
.b-work{grid-column:1/13;grid-row:3/4}
.b-work p{max-width:60ch}
.b-off h3{font-size:30px}
.b-train p,.b-inc p{display:none}
@media (max-width:1080px){
.bento{grid-auto-rows:220px}
.b-off{grid-column:1/13;grid-row:1/3}.b-train{grid-column:1/7;grid-row:3/4}.b-inc{grid-column:7/13;grid-row:3/4}.b-work{grid-column:1/13;grid-row:4/5}
.b-off h3{font-size:26px}
.b-train p,.b-inc p{display:none}
}
@media (max-width:640px){
.bento{grid-template-columns:1fr;grid-auto-rows:300px;gap:12px}
.b-off,.b-train,.b-inc,.b-work{grid-column:1/2;grid-row:auto}
.btile p{font-size:14px}
.b-train p,.b-inc p{display:block}
}
/* steps: orange icons */
.step{position:relative}
.step .si{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--orange500);color:#fff;margin-bottom:16px;box-shadow:0 6px 16px rgba(243,107,33,.3)}
.step .si svg{width:26px;height:26px}
/* ── ported verbatim from Zubilant contact.html ────────────── */
/* contact page r1: scoped layout only, tokens from site-v9 */
.kways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.kway{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 28px 26px;background:var(--paper);
border:1px solid var(--lineSoft);border-radius:var(--r-card);color:inherit;text-decoration:none;overflow:hidden;
transition:transform var(--t-move),box-shadow var(--t-move),border-color var(--t-move)}
.kway::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--teal600)}
.kway.wa::before{background:var(--sage600)}.kway.mail::before{background:var(--orange500)}
.kway:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(243,107,33,.16);border-color:#F6C6A8}
.kway:focus-visible{outline:2px solid var(--orange500);outline-offset:2px}
.kway .ico{width:44px;height:44px;border-radius:12px;background:var(--teal50);display:grid;place-items:center;color:var(--teal600)}
.kway.wa .ico{background:var(--sage100);color:var(--sage600)}.kway.mail .ico{background:var(--sun100);color:var(--orange600)}
.kway .ico svg{width:22px;height:22px}
.kway k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink500);margin-top:6px}
.kway v{display:block;font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--teal900);word-break:break-word}
.kway.mail v{font-size:18px;overflow-wrap:anywhere}
.kway p{font-size:14.5px;line-height:1.5;color:var(--ink700);margin:0;flex:1 1 auto}
.kway .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--teal600);margin-top:6px}
.kway .go b{transition:transform var(--t-move)}
.kway:hover .go{color:var(--orange500)}.kway:hover .go b{transform:translateX(4px)}
.kway.form{cursor:pointer;font:inherit;text-align:left;border-width:1px}
.cgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:stretch}
.ocard{background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);padding:32px;box-shadow:var(--e2)}
.ocard .addr{font-size:18px;line-height:1.5;margin-top:14px;font-style:normal}
.ocard .addr b{display:block;font-size:20px;color:var(--teal900)}
.omap{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--lineSoft);background:var(--teal50);min-height:340px;position:relative}
.omap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85)}
.ofacts{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--lineSoft)}
.ofacts k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink500)}
.ofacts v{display:block;font-size:16px;line-height:1.4;margin-top:4px;color:var(--ink900)}
.afterhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
#after .routeband{grid-template-columns:repeat(3,1fr);margin-top:36px}
#after .routeband div:nth-child(3)::before{background:var(--sun)}
.cclose{background:var(--teal900);color:#fff;border-top:0;position:relative;overflow:hidden}
.cclose::before{content:"";position:absolute;right:-12%;top:-40%;width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(243,107,33,.22),transparent 65%);pointer-events:none}
.cclose .btn-primary::after{background:var(--orange500)}.cclose .btn-primary::before{background:var(--orange600)}.cclose .btn-primary{box-shadow:0 6px 18px rgba(243,107,33,.32)}
.cclose h2{color:#fff}.cclose .acc{color:var(--sun)}.cclose .lead,.cclose p{color:rgba(255,255,255,.86)}
.fwrap{max-width:880px;margin:0 auto;position:relative;z-index:1}
.fwrap .label{text-align:center;color:var(--sun);margin-bottom:22px}
.fcard2{position:relative;background:var(--paper);border:1px solid var(--lineSoft);border-radius:20px;
padding:48px 52px 40px;color:var(--ink900);
box-shadow:0 18px 48px rgba(243,107,33,.30),0 4px 14px rgba(0,20,22,.30)}
.fcard2 .zpeek{position:absolute;top:-30px;right:28px;width:58px;pointer-events:none;
filter:drop-shadow(0 4px 10px rgba(22,33,31,.18))}
.fcard2 h2{font-size:30px;text-align:center;letter-spacing:-.015em;color:var(--ink900)}
.fcard2 .fsub{text-align:center;color:var(--ink700);margin-top:10px;font-size:16.5px}
.fcard2 .fgrid{margin-top:34px;gap:22px 20px}
.fcard2 .field label{font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink900)}
.fcard2 .field label .opt{letter-spacing:.06em}
.fcard2 .field input,.fcard2 .field textarea{background:var(--sand);border:1.5px solid transparent;border-radius:12px;
min-height:54px;font-size:16.5px;transition:background var(--t-colour),border-color var(--t-colour),box-shadow var(--t-colour)}
.fcard2 .field input:hover,.fcard2 .field textarea:hover{background:var(--paper);border-color:var(--lineStrong)}
.fcard2 .field input:focus,.fcard2 .field textarea:focus{outline:none;background:var(--paper);border-color:var(--teal600);
box-shadow:0 0 0 4px var(--teal100)}
.fcard2 .field.err input,.fcard2 .field.err textarea{background:var(--paper);border-color:#C43C1B;box-shadow:none}
.whorow{display:flex;flex-wrap:wrap;gap:10px}
.whorow .chip{padding:10px 18px;min-height:42px;font-size:14px}
.fsubmit{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.fsubmit .btn{min-height:56px;padding:16px 46px;font-size:17px}
.fsubmit small{font-size:14px;color:var(--ink500)}
.ffoot{display:flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
border-top:1px solid var(--lineSoft);font-size:14.5px;color:var(--ink700)}
.ffoot span{display:inline-flex;align-items:center;gap:8px}
.ffoot span::before{content:"\2713";font-weight:700;color:var(--sage600)}
.faltc{text-align:center;margin-top:26px;font-size:15px;color:rgba(255,255,255,.86)}
/* r7: visible journey/search context pill under the form heading (PM ruling 24 Aug PM) */
.jctx{display:flex;justify-content:center;margin-top:14px}
.jctx>span{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:9px 12px 9px 16px;
background:var(--sand);border:1px solid var(--lineSoft);border-radius:999px;
font-size:14.5px;line-height:1.35;color:var(--ink700)}
.jctx b{color:var(--teal900);font-weight:700}
.jctx button{flex:0 0 auto;width:22px;height:22px;border:0;border-radius:50%;background:var(--lineSoft);
color:var(--ink700);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.jctx button:hover{background:var(--orange500);color:#fff}
.ctaticks{list-style:none;margin:0;padding:28px 30px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);background:rgba(255,255,255,.07);position:relative;display:flex;flex-direction:column;gap:14px}
.ctaticks li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.45;color:#fff}
.ctaticks li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sun)}
.ctaticks li::after{content:"";position:absolute;left:4px;top:10px;width:6px;height:3px;border-left:2px solid var(--teal900);border-bottom:2px solid var(--teal900);transform:rotate(-45deg)}
@media (max-width:1080px){
.kways{grid-template-columns:1fr 1fr}
.cgrid{grid-template-columns:1fr;gap:24px}
.omap{min-height:300px}
.fcard2{padding:36px 28px 32px}
#after .routeband{grid-template-columns:1fr}
#after .routeband div{border-right:0;border-bottom:1px solid var(--sage200)}
#after .routeband div:last-child{border-bottom:0}
}
@media (max-width:640px){
.kways{grid-template-columns:1fr;margin-top:28px}
.kway{padding:22px 20px 20px}
.kway v{font-size:20px}
.ocard{padding:24px 20px}
.ofacts{grid-template-columns:1fr}
.omap{min-height:260px}
.fcard2{padding:30px 18px 28px}
.fcard2 h2{font-size:24px}
.fcard2 .zpeek{right:18px}
.fsubmit .btn{width:100%}
}
/* ── gallery strip · programme pages ──────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.gal figure{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--sand);box-shadow:var(--e1)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
@media (max-width:1080px){.gal{gap:12px}}
@media (max-width:640px){.gal{grid-template-columns:repeat(2,1fr)}.gal figure:nth-child(3){grid-column:1/3;aspect-ratio:16/9}}
/* ── parents band · homepage ──────────────────────────────────────────────── */
.pband{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-top:0}
.pband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pband::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(0,39,43,.92) 0%,rgba(0,39,43,.82) 46%,rgba(0,39,43,.42) 100%)}
.pband h2,.pband .lead{color:#fff}
.pband .acc{color:var(--sun)}
@media (max-width:640px){.pband::after{background:linear-gradient(180deg,rgba(0,39,43,.72) 0%,rgba(0,39,43,.92) 60%)}}
/* ── parents page ─────────────────────────────────────────────────────────── */
.qa{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--lineSoft)}
.qa>div{padding:26px 0;border-bottom:1px solid var(--lineSoft);display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start}
.qa h3{font-size:21px;line-height:1.25;letter-spacing:-.01em}
.qa p{margin:0;color:var(--ink700)}
.qa p+p{margin-top:10px}
@media (max-width:860px){.qa>div{grid-template-columns:1fr;gap:10px}}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.pgrid>div{background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);padding:24px;box-shadow:var(--e1)}
.pgrid k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange600)}
.pgrid v{display:block;font-size:19px;font-weight:700;line-height:1.28;margin-top:10px;color:var(--ink900)}
.pgrid em{display:block;font-style:normal;font-size:14.5px;line-height:1.55;color:var(--ink700);margin-top:8px}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}
/* ── metrics · a photograph, not a logo symbol. There is no D360 mark yet. ── */
.msym img{width:100%;max-width:380px;height:auto;aspect-ratio:4/3;object-fit:cover;
border-radius:var(--r-card);box-shadow:var(--e2);transform:none!important}
@media (max-width:1080px){.msym img{max-width:420px;aspect-ratio:16/10}}
/* ── the real brand mark, from destinationz360.in. Raster only at 278x151,
so it is used at footer scale and never blown up. Board #25 wants an SVG. */
.flogo img{width:186px;height:auto;display:block}
@media (max-width:860px){.flogo img{width:164px}}
/* ── Google reviews · the brand's own, from its public listing ────────────── */
.revgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.rev{margin:0;background:var(--paper);border:1px solid var(--lineSoft);border-radius:var(--r-card);
padding:26px 24px;box-shadow:var(--e1);display:flex;flex-direction:column;justify-content:space-between;
transition:transform var(--t-move),box-shadow var(--t-move)}
.rev:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(243,107,33,.28)}
.rev blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--ink900)}
.rev figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--lineSoft)}
.rev figcaption b{display:block;font-size:15px;font-weight:700;color:var(--ink900)}
.rev figcaption span{display:block;font-size:12.5px;color:var(--ink500);margin-top:3px}
.rev::before{content:"";display:block;width:26px;height:20px;margin-bottom:12px;background:var(--orange500);
-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask:url('data:image/svg+xml;utf8,') no-repeat center/contain}
@media (max-width:1080px){.revgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.revgrid{grid-template-columns:1fr;gap:14px}}
/* ── awards strip ─────────────────────────────────────────────────────────── */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;
padding-top:26px;border-top:1px solid var(--lineSoft)}
.awards>div{border-left:2px solid var(--orange500);padding-left:14px}
.awards>div:nth-child(2){border-left-color:var(--teal600)}
.awards>div:nth-child(3){border-left-color:var(--sage600)}
.awards>div:nth-child(4){border-left-color:var(--sun)}
.awards k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--ink500)}
.awards v{display:block;font-size:14.5px;font-weight:700;line-height:1.32;margin-top:5px;color:var(--ink900)}
.awards em{display:block;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--ink700);margin-top:5px}
@media (max-width:1080px){.awards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.awards{grid-template-columns:1fr;gap:14px}}
/* ── the real mark in the nav. Wordmark and device only: the strapline is
unreadable below about 90px of height, so it lives in the footer. ─────── */
.brand.d360 .wmk{width:auto;height:30px}
.brand.d360 .lg-rev{display:block}.brand.d360 .lg-col{display:none}
.nav.scrolled .brand.d360 .lg-rev,.nav.solid .brand.d360 .lg-rev{display:none}
.nav.scrolled .brand.d360 .lg-col,.nav.solid .brand.d360 .lg-col{display:block}
.nav.scrolled .brand.d360 .wmk{height:27px}
.navmenu .nmtop .lg-rev{display:none}.navmenu .nmtop .lg-col{display:block}
.navmenu .nmtop .wmk{height:28px}
@media (max-width:1080px){.brand.d360 .wmk{height:28px}}
@media (max-width:640px){.brand.d360 .wmk{height:24px}}
@media (max-width:390px){.brand.d360 .wmk{height:22px}}
/* ═══ CARD FAN · transcribed verbatim from the Zubilant homepage inline
block, 22 Sep. Class names unchanged so the geometry is identical; only
the content differs, because D360 publishes no prices. ═══ */
/* ═══ ZUBI RECOMMENDED v2 · Norris-style fan · scoped .zfan ═══
Geometry is em-based: 1em = 10px at 1440, scaling fluidly down to
1081px viewports. At ≤1080 the fan becomes a snap rail. */
.zfan{position:relative;max-width:1440px;margin:48px auto 0;overflow:hidden;
font-size:clamp(7.2px,0.57vw,8.2px);height:66.4em}
.zfan .zcard{position:absolute;left:50%;top:5.6em;width:30em;height:45em;
display:block;border-radius:2.4em;overflow:hidden;background:var(--teal900);
border:1px solid rgba(243,107,33,.35);
transform-origin:50% 230%;transform:translateX(-50%) rotate(var(--rot));
z-index:var(--z,1);box-shadow:0 10px 24px rgba(243,107,33,.22),0 2px 6px rgba(243,107,33,.16),var(--e2);
transition:transform var(--t-move),box-shadow var(--t-move)}
.zfan .zcard.zc-centre{width:32.4em;height:48.6em;top:2.6em}
.zfan .zcard:hover,.zfan .zcard:focus-visible{
transform:translateX(-50%) translateY(-2em) rotate(var(--rot));
box-shadow:0 16px 34px rgba(243,107,33,.30),0 4px 10px rgba(243,107,33,.20),var(--e3);z-index:9}
.zfan .zcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zfan .zcard::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,20,22,.20) 0%,rgba(0,20,22,0) 32%,rgba(0,20,22,0) 40%,rgba(0,20,22,.74) 100%)}
.zc-tags{position:absolute;top:1.4em;left:1.4em;right:1.4em;display:flex;flex-wrap:wrap;gap:.8em;z-index:2}
.zfan .zcard.zc-left .zc-tags{right:11em}
.zc-flip .zc-tags{left:11em;justify-content:flex-end}
.zc-tag{display:inline-block;padding:.5em 1em;border-radius:999px;background:rgba(255,255,255,.92);
color:var(--ink900);font-size:1.45em;font-weight:700;letter-spacing:.04em}
.zc-tag.zc-trend{background:var(--orange500);color:#fff;letter-spacing:.08em;text-transform:uppercase;font-size:1.4em}
.zc-info{position:absolute;left:1.8em;right:7em;bottom:1.8em;z-index:2;color:#fff;text-shadow:0 1px 4px rgba(0,20,22,.45)}
.zfan .zcard.zc-left .zc-info{left:1.8em;right:17.2em;bottom:9.8em}
.zc-flip .zc-info{left:17.8em;right:1.8em;bottom:8.6em;text-align:right}
.zc-title{display:block;font-size:2.2em;font-weight:700;line-height:1.25}
.zfan .zcard:not(.zc-centre) .zc-title{font-size:1.75em}
.zc-from{display:block;margin-top:.45em;font-size:1.6em;font-weight:700;color:rgba(255,255,255,.95)}
.zfan .zcard:not(.zc-centre) .zc-from{font-size:1.5em}
.zc-go{position:absolute;right:.7em;bottom:.7em;z-index:2;display:flex;align-items:center;justify-content:center;
width:2.2em;height:2.2em;border-radius:50%;background:var(--orange500);color:#fff;font-size:2em;
opacity:0;transform:translateY(.4em) scale(.9);
transition:background var(--t-colour),transform var(--t-move),opacity var(--t-move)}
.zfan .zcard:hover .zc-go,.zfan .zcard:focus-visible .zc-go{
background:var(--orange600);opacity:1;transform:translateX(.2em) translateY(0) scale(1)}
@media (max-width:1080px){
.zc-go{opacity:1;transform:none}
.zfan{font-size:10px;height:auto;display:flex;gap:16px;overflow-x:auto;padding:8px 20px 24px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.zfan::-webkit-scrollbar{display:none}
.zfan .zcard,.zfan .zcard.zc-centre{position:relative;left:auto;transform:none;flex:none;
width:76vw;max-width:320px;height:430px;top:auto;scroll-snap-align:center}
.zfan .zcard:hover,.zfan .zcard:focus-visible{transform:none}
.zfan .zcard .zc-info,.zfan .zcard.zc-left .zc-info,.zfan .zc-flip .zc-info{
left:18px;right:70px;bottom:18px;text-align:left}
.zfan .zcard .zc-tags,.zfan .zcard.zc-left .zc-tags,.zfan .zc-flip .zc-tags{
left:14px;right:14px;justify-content:flex-start}
.zfan .zcard .zc-title,.zfan .zcard:not(.zc-centre) .zc-title{font-size:19px}
.zfan .zcard .zc-from,.zfan .zcard:not(.zc-centre) .zc-from{font-size:14.5px}
}
/* 26 Sep QA: D360 has four steps where Zubilant has three; a 3-col grid
orphaned step 04 on its own row at desktop. Four across, two at tablet. */
@media (min-width:1101px){ .steps{grid-template-columns:repeat(4,1fr)} }
@media (min-width:701px) and (max-width:1100px){ .steps{grid-template-columns:repeat(2,1fr)} }