/* Metric-matched fallback. The webfonts load with font-display:swap, so the page
paints in the fallback first — and Arial's metrics are nothing like DM Sans's or Lora's,
which is what makes a swap visibly jolt the layout. Overriding the fallback's
ascent, descent and average width means the first paint occupies the same
box as the final one, and the swap becomes a change of shape rather than a
change of position. This is the single largest CLS contributor on a page
that loads a webfont. */
@font-face{
font-family:"DM Fallback";
src:local("Arial"),local("Helvetica"),local("Liberation Sans");
size-adjust:100.5%;
ascent-override:98.6%;
descent-override:29.6%;
line-gap-override:0%;
}
/* Lora is wider and larger on the body than Times, so the serif fallback needs
the opposite correction to the sans one — matched separately, not shared. */
@font-face{
font-family:"Lora Fallback";
src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
size-adjust:101.5%;
ascent-override:99%;
descent-override:28.2%;
line-gap-override:0%;
}
:root{
/* ── ground ────────────────────────────────
Warm paper, not white. A pure #FFF ground under a serif reads clinical,
and the whole subject is lamplight and stone. */
--paper:#F3F2EF; /* the page */
--paper-2:#E9E9E4; /* recessed bands */
--surface:#FFFFFF; /* cards lift OFF the ground */
--surface-2:#FAFAF8; /* card hover */
--panel:#E4E5E0; /* the note strip */
/* ── ink ───────────────────────────────────
Warm near-black. A neutral grey against warm paper looks dirty.
Measured, not eyeballed — ratios against --paper:
text 16.5:1 dim 7.6:1 faint 5.2:1
--faint began at #867E92, which was fine reversed out of near-black but
only reaches 3.6:1 here and it carries real text (glosses, briefs, footer
heads, the legal line). Walked darker along the same violet bias until it
clears 4.5:1 on the DARKEST ground it ever sits on — --panel, not --paper. */
--text:#1B2027;
--dim:#4C555E;
--faint:#59636A;
/* ── accent ────────────────────────────────
Inverting the ground breaks gold. #C08A2E on cream is about 2.6:1 — it
fails for body text and is kept for ornament only.
So the warm accent splits in two: a darkened marigold that may carry text,
and the bright one which is ORNAMENT ONLY and must never hold a word. */
--temple:#40596A; /* 6.4:1 on paper — safe for text and buttons */
--temple-lit:#2C3F4C; /* hover goes darker on a light ground */
--marigold:#96521C; /* 5.8:1 — the only gold allowed to carry text */
--marigold-lit:#BE6E31; /* 2.8:1 — rules, rings, glows. NEVER text. */
--stone:#6B6577;
--rule:rgba(27,32,39,.12);
--rule-lit:rgba(27,32,39,.26);
/* Two families. Lora carries every voice that speaks; DM Sans carries
everything that labels, measures or instructs.
DISPLAY Lora — moderate contrast, brushed curves, a real italic.
Unlike Cormorant it holds at 400–500, so on a light ground it
can be set at normal weight without going spindly.
BODY DM Sans — low-contrast geometric, optical-size axis, quiet.
Its job is to be unnoticed at 17px.
Ritual terms reuse Lora in caps rather than importing a third face —
small caps out of the display serif is the older and better solution. */
--f-d:"Lora","Lora Fallback",Georgia,"Times New Roman",serif;
--f-b:"DM Sans","DM Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--f-h:var(--f-b); /* labels ride on the sans */
--f-c:var(--f-d); /* ritual terms on the serif */
--f-m:var(--f-b);
/* type scale — 1.25 major third off a 17px base. Any size off it is a bug.
This page uses eight sizes. The live site uses 47 across 23 stylesheets. */
--t-2xs:10px; /* dense meta, plate briefs */
--t-xs:11px; /* mono labels */
--t-sm:13px; /* captions, meta */
--t-b:15px; /* body */
--t-lg:17px; /* lead paragraph */
--t-xl:18.5px; /* card + guide heads */
--t-2xl:23px;
--t-3xl:28px;
/* Dark type on a light ground is the reverse optical problem to before:
strokes now read THICKER than they measure, not thinner, so tracking
opens slightly rather than closing, and body weight comes down. */
--track-body:.004em;
--track-label:.18em; /* DM Sans caps */
--track-ritual:.2em; /* Lora caps */
--track-display:-.009em; /* Lora at size */
/* ── motion ────────────────────────────────
One easing curve for everything that reveals, one for everything that
responds to a pointer. Expo-out: leaves fast, lands slow, never bounces. */
--ease-reveal:cubic-bezier(.16,1,.3,1);
--ease-ui:cubic-bezier(.4,0,.2,1);
--rise:18px; /* the reveal travel — matches the reference */
--dur-reveal:900ms;
--dur-ui:300ms;
--dur-slow:600ms;
/* ── radius ────────────────────────────────
Four steps, and the rule that keeps them looking right: a radius nested
inside another must be SMALLER than its parent by the padding between
them, or the two curves run non-concentric and the corner looks wrong
even though nobody can say why. --r-in is --r minus the 1px border. */
--r-xs:4px; /* plate briefs, tiny chips */
--r-sm:8px; /* buttons, inputs, pills */
--r:14px; /* cards, plates, panels */
--r-in:13px; /* anything sitting inside --r */
--r-lg:20px; /* the large flagship plate */
--r-pill:999px;
/* every control in the header is exactly this tall, so they share a centre
line and equal optical weight */
--ctl:46px;
/* one focus ring for the whole page - it was drawn at .15 in one place and
.16 in another, which is the kind of drift a token exists to prevent */
--ring:0 0 0 3px rgba(190,110,49,.20);
/* ── headings ──────────────────────────────
One page-title size for both page-head variants, one heading step below
it, and a flow rhythm so a heading never has to be spaced by hand. */
--t-title:clamp(1.55rem,1.05rem + 1.5vw,2.4rem);
--t-h3:clamp(1.05rem,.95rem + .35vw,1.3rem);
--flow-h:clamp(30px,4vh,46px); /* space ABOVE a heading */
--flow-t:clamp(14px,1.8vh,20px); /* space BELOW a heading */
--pad:clamp(20px,5vw,64px);
--max:1240px;
}
*{box-sizing:border-box}
html{
scroll-behavior:smooth;
/* iOS inflates text in landscape unless this is pinned */
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
margin:0;
background:var(--paper);
color:var(--text);
font-family:var(--f-b);
font-size:var(--t-b);
line-height:1.62;
letter-spacing:var(--track-body);
font-optical-sizing:auto;
/* kerning off by default below 20px in some engines — force it on, and
keep standard ligatures while killing the discretionary ones that make
a display serif look novelty at large size */
font-kerning:normal;
font-variant-ligatures:common-ligatures no-discretionary-ligatures;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
/* selection has to be designed too — the browser default is a blue that has
nothing to do with this palette */
::selection{background:var(--temple);color:#fff}
/* the scrollbar is 15px of permanent UI; leaving it default undoes the ground */
@supports (scrollbar-color:auto){
html{scrollbar-color:rgba(27,32,39,.22) var(--paper);scrollbar-width:thin}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:rgba(27,32,39,.22);border:3px solid var(--paper);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(27,32,39,.36)}
/* the page container. Restored after a dead-CSS sweep removed it: without
this every section runs edge to edge with no gutter. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* every figure that sits in a column or a row lines up */
/* grain — keeps the flat grounds from reading as digital fill */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.10;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
/* -- header ----------------------------------
One tall airy row: wordmark hard left, navigation floated into the centre of
whatever space is left, utilities right. Sentence case rather than tracked
caps - caps read as a system label, sentence case reads as a place to go,
and at this size that is the whole difference in tone. */
nav.site-header{
position:fixed;top:0;left:0;right:0;z-index:60;
background:transparent;border-bottom:1px solid transparent;
transition:background var(--dur-ui) var(--ease-ui),
border-color var(--dur-ui) var(--ease-ui),
box-shadow var(--dur-ui) var(--ease-ui);
}
nav.site-header.stuck{
background:rgba(243,242,239,.88);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
backdrop-filter:blur(16px) saturate(1.4);
border-bottom-color:var(--rule);
box-shadow:0 1px 22px rgba(27,32,39,.06);
}
.masthead{
display:flex;align-items:center;gap:clamp(16px,2vw,34px);
height:clamp(62px,7vh,78px);
transition:height var(--dur-slow) var(--ease-ui);
}
nav.site-header.stuck .masthead{height:clamp(66px,7vh,78px)}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none;position:relative;line-height:0}
.brand img{
height:clamp(25px,1.15rem + .8vw,34px);width:auto;display:block;
transition:height var(--dur-slow) var(--ease-ui),opacity var(--dur-ui) var(--ease-ui);
}
nav.site-header.stuck .brand img{height:clamp(22px,1rem + .65vw,28px)}
.brand .logo-on-light{position:absolute;inset:0 auto 0 0;opacity:0}
nav.site-header.stuck .brand .logo-on-dark{opacity:0}
nav.site-header.stuck .brand .logo-on-light{opacity:1}
/* auto margins both sides centre the nav in the space the wordmark and the
utilities leave, rather than in the viewport */
.nav-links{
display:flex;align-items:center;
gap:clamp(16px,1.9vw,34px);
list-style:none;margin:0 auto;padding:0;
}
nav.site-header a:not(.brand):not(.cta):not(.phone){
font-family:var(--f-b);
font-size:clamp(13.5px,.76rem + .14vw,15px);
font-weight:500;letter-spacing:0;text-transform:none;
color:rgba(255,255,255,.92);text-decoration:none;
position:relative;padding:8px 0;white-space:nowrap;
text-shadow:0 1px 10px rgba(0,0,0,.4);
transition:color var(--dur-ui) var(--ease-ui);
}
nav.site-header a:not(.brand):not(.cta):not(.phone)::after{
content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1.5px;
border-radius:2px;background:#E0A05A;
transition:left var(--dur-ui) var(--ease-ui),right var(--dur-ui) var(--ease-ui);
}
nav.site-header a:not(.brand):not(.cta):not(.phone):hover::after,nav.site-header a:not(.brand):not(.cta):not(.phone):focus-visible::after{left:0;right:0}
nav.site-header a:not(.brand):not(.cta):not(.phone):hover,nav.site-header a:not(.brand):not(.cta):not(.phone):focus-visible{color:#fff}
nav.site-header.stuck a:not(.brand):not(.cta):not(.phone){color:var(--dim);text-shadow:none}
nav.site-header.stuck a:not(.brand):not(.cta):not(.phone):hover,nav.site-header.stuck a:not(.brand):not(.cta):not(.phone):focus-visible{color:var(--text)}
nav.site-header.stuck a:not(.brand):not(.cta):not(.phone)::after{background:var(--temple)}
.nav-end{display:flex;align-items:center;gap:clamp(10px,.9vw,16px);flex:none}
nav.site-header.stuck{--ctl:40px}
/* the pill: big, soft, and the only filled thing in the bar */
nav.site-header .cta{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-b);font-weight:600;
font-size:clamp(13.5px,.76rem + .14vw,15px);letter-spacing:0;text-transform:none;
height:var(--ctl);box-sizing:border-box;
padding:0 clamp(20px,1.8vw,28px);
border-radius:var(--r-pill);border:0;white-space:nowrap;
background:var(--temple);color:#fff;
text-shadow:none;
transition:background var(--dur-ui) var(--ease-ui),
color var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui);
}
nav.site-header .cta::after{display:none}
.cta-ico{display:inline-block;font-size:1.05em;line-height:1;transition:transform var(--dur-ui) var(--ease-ui)}
nav.site-header .cta:hover,nav.site-header .cta:focus-visible{background:var(--temple-lit);color:#fff;transform:translateY(-1px)}
nav.site-header .cta:hover .cta-ico{transform:translateX(3px)}
nav.site-header.stuck .cta{background:var(--temple);color:#fff}
nav.site-header.stuck .cta:hover,nav.site-header.stuck .cta:focus-visible{background:var(--temple-lit);color:#fff}
@media (max-width:1080px){
.masthead{flex-wrap:wrap;height:auto;padding:14px var(--pad) 12px;row-gap:10px}
nav.stuck .masthead{height:auto}
.nav-end{margin-left:auto}
.nav-links{
order:3;width:calc(100% + var(--pad) * 2);margin:0 calc(var(--pad) * -1);
padding:0 var(--pad) 2px;
overflow-x:auto;scrollbar-width:none;gap:24px;
}
.nav-links::-webkit-scrollbar{display:none}
}
@media (max-width:520px){
nav .cta{padding:11px 16px;font-size:14px}
}
/* Speak-to-us. Every comparable operator - Black Tomato, Original Travel -
puts the number in the header. It was stacked over two lines with the icon
beside it, which cannot align: the icon centred on the BLOCK at 23px while
the number it labels sat at 29.6px, and the eye pairs an icon with the thing
it names, not with a bounding box. One line, one centre, no argument.
The opening hours move to the contact section, where anyone reading them is
already deciding whether to call. */
.phone{
display:inline-flex;align-items:center;gap:9px;
height:var(--ctl);box-sizing:border-box;
padding:0 4px;border-radius:var(--r-sm);
text-decoration:none;color:inherit;flex:none;white-space:nowrap;
transition:color var(--dur-ui) var(--ease-ui);
}
.phone::after{display:none}
.phone-ico{
display:grid;place-items:center;flex:none;
width:calc(var(--ctl) * .66);height:calc(var(--ctl) * .66);border-radius:var(--r-pill);
background:rgba(190,110,49,.18);color:#E0A05A;
transition:background var(--dur-ui) var(--ease-ui),
color var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui);
}
.phone-ico svg{width:15px;height:15px;display:block}
.phone-lbl{
font-family:var(--f-b);font-size:13px;font-weight:400;
letter-spacing:0;color:rgba(255,255,255,.66);
}
.phone-num{
font-family:var(--f-b);font-size:15px;font-weight:600;
letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;
}
.phone:hover .phone-ico,.phone:focus-visible .phone-ico{
background:rgba(190,110,49,.34);transform:rotate(-10deg);
}
.phone:hover .phone-num{color:#E0A05A}
nav.site-header.stuck .phone-lbl{color:var(--faint)}
nav.site-header.stuck .phone-num{color:var(--text)}
nav.site-header.stuck .phone-ico{background:rgba(64,89,106,.12);color:var(--temple)}
nav.site-header.stuck .phone:hover .phone-ico{background:rgba(64,89,106,.2)}
nav.site-header.stuck .phone:hover .phone-num{color:var(--temple)}
/* the label is the first thing to go, then the number, then the whole block
becomes the icon chip on its own - a number that wraps is worse than none */
@media (max-width:1360px){.phone-lbl{display:none}}
@media (max-width:1140px){
.phone-num{display:none}
.phone{padding:0}
}
/* a thin rule separates the utilities from the navigation */
.nav-end::before{
content:"";width:1px;height:calc(var(--ctl) * .62);flex:none;align-self:center;
background:rgba(255,255,255,.26);margin:0 2px;
transition:background var(--dur-ui) var(--ease-ui),height var(--dur-slow) var(--ease-ui);
}
nav.site-header.stuck .nav-end::before{background:var(--rule-lit)}
@media (max-width:1080px){.nav-end::before{display:none}}
/* -- search ----------------------------------
Collapsed it is a circle, matching the icon button in the reference.
Focused it grows into a pill and the field appears. One element in two
states rather than two elements swapped, so it can animate. */
.vh{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
.search{
display:flex;align-items:center;flex:none;box-sizing:border-box;
width:var(--ctl);height:var(--ctl);
border-radius:var(--r-pill);
border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
overflow:hidden;
transition:width var(--dur-slow) var(--ease-ui),
background var(--dur-ui) var(--ease-ui),
border-color var(--dur-ui) var(--ease-ui);
}
.search.open,.search:focus-within{
width:clamp(210px,22vw,300px);
background:rgba(255,255,255,.96);
border-color:transparent;
}
.search-btn{
flex:none;display:grid;place-items:center;
width:var(--ctl);height:var(--ctl);
border:0;background:none;cursor:pointer;padding:0;
color:#fff;transition:color var(--dur-ui) var(--ease-ui);
}
.search-btn svg{width:18px;height:18px}
.search.open .search-btn,.search:focus-within .search-btn{color:var(--faint)}
.search input{
flex:1;min-width:0;width:0;
background:none;border:0;outline:none;
font-family:var(--f-b);font-size:var(--t-sm);color:var(--text);
padding:0;opacity:0;
transition:opacity var(--dur-ui) var(--ease-ui);
-webkit-appearance:none;appearance:none;
}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search.open input,.search:focus-within input{width:auto;opacity:1;padding-right:6px}
.search input::placeholder{color:var(--faint)}
.search-clear{
flex:none;width:30px;height:30px;margin-right:6px;border:0;
border-radius:var(--r-pill);background:none;color:var(--faint);
font-size:18px;line-height:1;cursor:pointer;
transition:color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui);
}
.search-clear:hover{color:var(--text);background:rgba(27,32,39,.07)}
nav.site-header.stuck .search{border-color:var(--rule-lit);background:rgba(255,255,255,.55)}
nav.site-header.stuck .search-btn{color:var(--dim)}
nav.site-header.stuck .search.open,nav.site-header.stuck .search:focus-within{background:#fff;border-color:var(--rule-lit)}
.search-count{
flex-basis:100%;order:9;margin:0;text-align:right;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:#E0A05A;text-shadow:0 1px 10px rgba(0,0,0,.4);
}
nav.site-header.stuck .search-count{color:var(--temple);text-shadow:none}
.search-count:empty{display:none}
/* a filtered-out card leaves the grid entirely; a ghost would blow a hole in
the columns */
.card[hidden]{display:none}
.intent[hidden]{display:none}
/* BUTTONS - deliberately defined HERE, in the shared component area, and NOT
inside the hero block. They have now been destroyed twice by hero rewrites
because they sat inside a block that was replaced wholesale. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--f-b);
font-size:clamp(13.5px,.76rem + .14vw,15px);font-weight:600;
letter-spacing:0;text-transform:none;
text-decoration:none;padding:0 clamp(20px,1.8vw,28px);
height:var(--ctl);box-sizing:border-box;
border:1px solid transparent;
border-radius:var(--r-pill);cursor:pointer;
transition:background var(--dur-ui) var(--ease-ui),
color var(--dur-ui) var(--ease-ui),
border-color var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui);
}
.btn-primary{background:var(--temple);color:#fff;border-color:var(--temple)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--temple-lit);border-color:var(--temple-lit);transform:translateY(-2px)}
.btn-ghost{border-color:var(--rule-lit);color:var(--text);background:transparent}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--temple);color:var(--temple)}
/* -- the climb -------------------------------
The signature. Every operator lists the four dhams; none of them show the
shape of the journey. The ritual order is fixed and it is NOT the altitude
order - you walk down from Yamunotri to Gangotri, then climb 483m to
Kedarnath, then drop again to Badrinath. That is the single most useful
thing a first-time pilgrim can be told, and it is information no competitor
is putting on a page. Drawn as one line, to scale. */
.climb{
position:relative;
background:var(--surface);
border:1px solid var(--rule);
border-radius:var(--r);
padding:clamp(26px,3vw,44px) clamp(20px,3vw,44px) clamp(20px,2.4vw,32px);
overflow:hidden;
}
.climb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(46px,6vh,76px)}
.climb-head h3{
font-family:var(--f-d);font-weight:400;
font-size:clamp(1.15rem,.9rem + .7vw,1.5rem);
margin:0;letter-spacing:-.011em;color:var(--text);
}
.climb-head p{
margin:0;font-size:var(--t-sm);color:var(--faint);max-width:46ch;
}
.climb svg{display:block;width:100%;height:auto;overflow:visible}
/* the four stops */
.climb .stop-line{stroke:var(--rule-lit);stroke-width:1;stroke-dasharray:2 4}
.climb .profile{
fill:none;stroke:var(--temple);stroke-width:2.5;
stroke-linejoin:round;stroke-linecap:round;
stroke-dasharray:1200;stroke-dashoffset:1200;
}
.climb.in .profile{animation:draw 1.9s var(--ease-reveal) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.climb .area{fill:var(--temple);opacity:0;}
.climb.in .area{animation:fade 1.2s var(--ease-reveal) 1.1s forwards}
@keyframes fade{to{opacity:.07}}
.climb .node{fill:var(--surface);stroke:var(--temple);stroke-width:2.5}
.climb .node-peak{fill:var(--marigold-lit);stroke:var(--marigold-lit)}
.climb .lbl{
font-family:var(--f-b);font-size:13px;font-weight:600;fill:var(--text);
}
.climb .alt{
font-family:var(--f-b);font-size:12px;font-weight:500;fill:var(--faint);
font-variant-numeric:tabular-nums;
}
.climb .ord{
font-family:var(--f-b);font-size:10px;font-weight:600;fill:var(--marigold);
letter-spacing:.14em;
}
.climb-note{
margin:clamp(16px,2vh,22px) 0 0;font-size:var(--t-sm);color:var(--dim);
max-width:64ch;
}
.climb-note b{color:var(--text);font-weight:600}
@media (max-width:620px){
.climb .lbl{font-size:11px}
.climb .alt{font-size:10px}
.climb .ord{display:none}
}
/* -- the ridge in three dimensions -----------
The flat SVG stays in the markup and is what everyone sees first. WebGL is
layered over it only once the section is actually scrolled to, and only if
the device can run it - three.js is 589KB, and no visitor should pay that to
read a page they may never scroll this far down. */
.ridge-wrap{position:relative}
.ridge-canvas{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;transition:opacity 1.1s var(--ease-reveal);
border-radius:var(--r-in);
}
.ridge-wrap.gl-on .ridge-canvas{opacity:1}
.ridge-wrap.gl-on > svg{opacity:0;transition:opacity .7s var(--ease-reveal)}
.ridge-canvas canvas{display:block;width:100%!important;height:100%!important;border-radius:var(--r-in)}
/* the labels are HTML positioned over the canvas, not 3D text - text drawn in
WebGL cannot be selected, read by a screen reader, or kept crisp on retina */
.ridge-pin{
position:absolute;transform:translate(-50%,-100%);
pointer-events:none;text-align:center;white-space:nowrap;
opacity:0;transition:opacity .5s var(--ease-ui);
}
.ridge-wrap.gl-on .ridge-pin{opacity:1}
.ridge-pin b{
display:block;font-family:var(--f-b);font-size:12.5px;font-weight:600;
color:var(--text);
}
.ridge-pin span{
display:block;font-family:var(--f-b);font-size:11px;font-weight:500;
color:var(--faint);font-variant-numeric:tabular-nums;
}
.ridge-pin i{
display:block;width:1px;height:14px;margin:3px auto 0;
background:var(--rule-lit);
}
.ridge-pin.peak b{color:var(--marigold)}
.ridge-hint{
position:absolute;right:14px;bottom:12px;z-index:3;
font-family:var(--f-b);font-size:10.5px;font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);opacity:0;transition:opacity .6s var(--ease-ui);
pointer-events:none;
}
.ridge-wrap.gl-on .ridge-hint{opacity:.75}
@media (max-width:620px){.ridge-hint{display:none}}
/* -- hero ------------------------------------
Measured, not guessed. White text over this photograph scores:
LEFT CENTRE RIGHT
TOP 6.0:1 2.5:1 1.7:1
MID 4.8:1 2.4:1 2.7:1
So the type goes LEFT, where it clears 4.5:1 on the bare photograph, and
the scrim only has to deepen what is already dark instead of flattening the
whole picture to rescue centred text. The temple stays visible as the
subject rather than becoming wallpaper behind a headline. */
.hero{
position:relative;min-height:clamp(280px,26vw,440px);
display:flex;align-items:center;
padding:clamp(100px,10.5vh,122px) 0 clamp(52px,6vh,76px);
overflow:hidden;text-align:left;
background:var(--paper);
color:#fff;
}
/* a 2.5:1 panorama in a portrait viewport loses 75% of its width, so phones
get a 3:4 crop composed around the temple instead of a sliver of one */
@media (orientation:portrait) and (max-width:760px){
.hero{min-height:clamp(400px,58svh,540px)}
.hero-slide{object-position:center 38%}
}
/* directional scrim: heavy on the left where the words are, clearing to
nothing by two-thirds across so the peaks and the temple keep their light */
.hero::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(96deg,
rgba(12,9,7,.56) 0%,
rgba(12,9,7,.46) 26%,
rgba(12,9,7,.30) 48%,
rgba(12,9,7,.16) 68%,
rgba(12,9,7,.08) 100%),
linear-gradient(180deg, rgba(12,9,7,.16) 0%, transparent 24%);
}
/* the ramp into the page. It starts BELOW the content box, so it can never
wash across the last line the way the old hard-edged band did. */
.hero::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
z-index:2;pointer-events:none;
background:linear-gradient(180deg, transparent 0%, rgba(250,247,241,.16) 54%, rgba(250,247,241,.72) 84%, var(--paper) 100%);
}
.yantra{display:none}
.hero-inner{position:relative;z-index:3;width:100%}
.hero-copy{max-width:min(62%,780px)}
@media (max-width:900px){.hero-copy{max-width:none}}
.hero-eyebrow{
font-family:var(--f-b);font-size:var(--t-xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:#E8C79A;margin:0 0 clamp(16px,2.6vh,26px);
display:flex;align-items:center;gap:14px;
text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hero-eyebrow::before{
content:"";height:1px;width:clamp(20px,3vw,44px);flex:none;
background:#E8C79A;opacity:.7;
}
h1{
font-family:var(--f-d);font-weight:400;margin:0;
font-size:clamp(1.4rem,10px + 1.9vw,2.35rem);
line-height:1.1;letter-spacing:var(--track-display);
text-wrap:balance;color:#fff;
text-shadow:0 2px 30px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
}
h1 em{font-style:italic;font-weight:400;color:#E0A05A}
/* the research is explicit about three levels: headline, then a supporting
line at 18-22px in LOWER contrast, then the action */
.hero-sub{
margin:clamp(12px,1.8vh,18px) 0 0;max-width:44ch;
font-size:clamp(15px,.86rem + .28vw,17px);
line-height:1.6;color:rgba(255,255,255,.82);font-weight:300;
text-wrap:pretty;text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero-sub b{color:#fff;font-weight:500}
.hero-foot{
display:flex;flex-wrap:wrap;align-items:center;
gap:12px 14px;margin-top:clamp(20px,3vh,30px);
}
.hero .btn-ghost{
border-color:rgba(255,255,255,.6);color:#fff;
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero .btn-ghost:hover{border-color:#fff;background:#fff;color:var(--text)}
.hero-note{
flex-basis:100%;margin:6px 0 0;letter-spacing:.01em;text-transform:none;
font-weight:400;font-size:12.5px;color:rgba(255,255,255,.68);
text-shadow:0 1px 12px rgba(0,0,0,.6);
}
/* a quiet cue that there is more below — sits clear of the copy on the right */
.scroll-cue{
display:none;
position:absolute;left:50%;bottom:clamp(26px,4vh,40px);z-index:3;
transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:8px;
font-family:var(--f-b);font-size:10px;font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:rgba(255,255,255,.6);text-decoration:none;
text-shadow:0 1px 10px rgba(0,0,0,.6);
transition:color var(--dur-ui) var(--ease-ui);
}
.scroll-cue:hover{color:#fff}
.scroll-cue i{
display:block;width:1px;height:34px;
background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.55);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (max-width:900px){.scroll-cue{display:none}}
/* ── section furniture ───────────────────── */
section{position:relative;scroll-margin-top:clamp(24px,5vh,56px)}
/* running text never breaks to a single-word last line */
p,li,figcaption{text-wrap:pretty}
/* quotes and hyphens hang into the margin where the engine supports it */
@supports (hanging-punctuation:first){
.sintro,.hero-sub,}
.band{padding:clamp(44px,5.4vw,86px) 0}
.band-deep{background:var(--surface)}
.shead{margin:0 0 clamp(24px,2.6vw,40px)}
/* a heading with a long lead beneath it wastes the right half of a wide page.
Split them into two columns so the measure stays readable and the space is
used - collapses to one column before the columns get too narrow. */
@media (min-width:900px){
.shead-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.shead-split .slabel{grid-column:1/-1}
.shead-split h2{max-width:18ch;margin:0}
.shead-split .sintro{margin:0;max-width:52ch;padding-top:.4em}
}
.slabel{
font-family:var(--f-m);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
color:var(--temple-lit);margin:0 0 18px;
}
h2{
font-family:var(--f-d);font-weight:400;margin:0;
/* down from 41px: at half-column width a 41px Lora wrapped the About
heading to four lines. Tracking was -.03em, inherited from the Poppins
build - a geometric sans needs that pull, a moderate-contrast serif does
not, and at this size it was closing the counters. */
font-size:clamp(1.3rem,1.02rem + 1.05vw,1.9rem);
line-height:1.14;letter-spacing:-.018em;
text-wrap:balance;max-width:22ch;
}
/* lead paragraph — one step up the scale, and the measure held to 56ch */
.sintro{
margin:clamp(16px,2.2vh,26px) 0 0;max-width:52ch;color:var(--dim);
font-size:clamp(15px,.9rem + .22vw,16.5px);line-height:1.55;font-weight:300;
}
/* ── reveal ──────────────────────────────────
opacity 0→1 with a 25px rise on expo-out. Only opacity and transform are
animated — both are compositor properties, so the whole page reveals without
a single layout or paint pass. */
.rise{
opacity:0;
transform:translate3d(0,var(--rise),0);
transition:opacity var(--dur-reveal) var(--ease-reveal),
transform var(--dur-reveal) var(--ease-reveal);
will-change:opacity,transform;
}
.rise.in{opacity:1;transform:translate3d(0,0,0)}
/* release the compositor layer once the element has arrived — leaving
will-change on permanently is how a page ends up holding 40 GPU layers */
.rise.done{will-change:auto}
/* ── hero entrance ───────────────────────────
The hero cannot wait for a scroll event, so it plays on load, staggered:
eyebrow, then each headline line out from behind its own mask, then the
sub, then the buttons. The mask is what makes it read as typography
arriving rather than as a div fading in. */
.hero-copy > *{opacity:0;transform:translate3d(0,18px,0);animation:enter var(--dur-reveal) var(--ease-reveal) forwards}
.hero-eyebrow{animation-delay:.15s}
.hero-inner h1{animation-delay:.3s}
.hero-sub{animation-delay:.6s}
.hero-foot{animation-delay:.78s}
@keyframes enter{to{opacity:1;transform:translate3d(0,0,0)}}
/* the headline only fades — the rise is the masked lines' job, and stacking
both makes the two movements fight */
.hero-copy h1{transform:none;animation-name:fadein}
@keyframes fadein{to{opacity:1}}
h1 .line{
display:block;
/* the mask. Padding gives the descenders and the italic's overhang room to
travel through, and the equal negative margin takes the space back out so
the line spacing is unaffected. Without it, 'j' and 'y' get guillotined. */
overflow:hidden;
padding:.12em .06em .16em;
margin:-.12em -.06em -.16em;
}
h1 .line > span{
display:block;
transform:translate3d(0,110%,0);
animation:unmask 1.25s var(--ease-reveal) forwards;
}
h1 .line:nth-child(1) > span{animation-delay:.34s}
h1 .line:nth-child(2) > span{animation-delay:.46s}
h1 .line:nth-child(3) > span{animation-delay:.58s}
@keyframes unmask{to{transform:translate3d(0,0,0)}}
/* ── plates: photography that does not exist yet ── */
/* Each empty frame carries the brief for the frame that belongs in it. */
.plate{
position:relative;overflow:hidden;background:var(--paper-2);
border-radius:var(--r);
display:flex;align-items:flex-end;isolation:isolate;
}
/* The empty frames were dark fields; on paper they become warm sand fields.
The per-card --p1/--p2 tints still apply on top, so every frame keeps its
own hue and the grid does not read as nine identical grey boxes. */
/* a plate now carries a real photograph; the gradient stays underneath as the
colour that shows while the image decodes, so a slow connection never sees
a grey hole */
.plate img{
position:absolute;inset:0;z-index:2;
width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
}
.plate::before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(130% 100% at 22% 6%, var(--p2,rgba(192,138,46,.30)), transparent 58%),
radial-gradient(120% 110% at 88% 96%, var(--p1,rgba(184,51,31,.34)), transparent 60%),
linear-gradient(158deg,#E9E0D0,#DCD2C2 72%);
}
/* ── journeys, grouped by intention ──────── */
.intent{border-top:1px solid var(--rule);padding:clamp(20px,2.4vw,34px) 0}
.intent:last-of-type{border-bottom:1px solid var(--rule)}
/* size and colour only — family, case and tracking are set once in the RITUAL
TERMS rule above and must not be restated here, or Lora silently loses to
the cascade. Caps run large optically, so this sits a step below the heads. */
/* Explicit columns, not auto-fit. auto-fit stretches a short final row to fill
the width, so 11 cards on a 4-up grid ends with three oversized tiles and the
images stop lining up. Fixed counts keep every plate identical. */
.cards{display:grid;gap:clamp(18px,1.8vw,26px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
/* titles run to different line counts; without this the text blocks push the
feet out of line even though the images above them match */
/* the image scales, the card does not — scaling the whole card drags the text
with it and the type goes soft. Slow (600ms) so it reads as a drift. */
.card .plate img{transition:transform var(--dur-slow) var(--ease-ui)}
/* ── flagship ────────────────────────────── */
/* ── enquiry ─────────────────────────────── */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:start}
/* the panel has a border and padding; the prose beside it does not. Nudge the
text down by the panel's own inset so the two first lines sit on one line
rather than the heading floating above the box edge. */
@media (min-width:861px){
.enq > .rise:first-child{padding-top:clamp(22px,2.4vw,32px)}
}
@media (max-width:860px){.enq{grid-template-columns:1fr}}
/* THE ENQUIRY FORM
Three faults, all from this block never being updated when the design system
changed underneath it:
1 COLOUR - focus used --ghee (#7E5A15, the dark text gold) while the header
search uses --ghee-lit with a soft ring. Two different focus colours for
the same interaction. And .wa:hover used --ghee while .btn-ghost:hover
used --sindoor, so two identical outlined controls hovered differently.
2 LANGUAGE - underline-only fields are left over from the dark editorial
draft. Everything else on the page is now a rounded, bordered object:
cards at 14px, buttons and the search pill at 8px. The form was the only
thing still drawn in the old idiom.
3 ALIGNMENT - a bare stack of underlines has no edge, so it could not line
up with the column beside it. Given a panel it has one. */
.enq-form{
background:var(--paper);
border:1px solid var(--rule);
border-radius:var(--r);
padding:clamp(22px,2.4vw,32px);
}
.field{margin-bottom:16px}
.field:last-of-type{margin-bottom:22px}
.field label{
display:block;font-family:var(--f-h);font-size:var(--t-2xs);
font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin-bottom:7px;
}
.field input,.field select,.field textarea{
width:100%;
background:var(--surface);
border:1px solid var(--rule-lit);
border-radius:var(--r-sm);
color:var(--text);
font-family:var(--f-b);font-size:var(--t-b);
padding:12px 14px;
transition:border-color var(--dur-ui) var(--ease-ui),
box-shadow var(--dur-ui) var(--ease-ui);
}
/* the same focus treatment as the header search - one ring, one colour */
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;
border-color:var(--marigold-lit);
box-shadow:var(--ring);
}
.field select{
appearance:none;-webkit-appearance:none;
/* the caret has to be drawn once appearance is stripped, or the select
becomes indistinguishable from a text input */
background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
linear-gradient(135deg,var(--faint) 50%,transparent 50%);
background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field select option{background:var(--surface);color:var(--text)}
.enq-form .btn{width:100%;height:52px}
.field textarea{resize:vertical;min-height:86px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.hours{
margin:10px 0 0;font-size:var(--t-sm);color:var(--faint);
}
.enq-alt{
margin-top:28px;padding-top:26px;border-top:1px solid var(--rule);
}
.enq-alt p{margin:0 0 14px;color:var(--dim);font-size:var(--t-sm)}
.wa{
display:inline-flex;align-items:center;gap:11px;text-decoration:none;
border-radius:var(--r-sm);
border:1px solid var(--rule-lit);padding:14px 22px;color:var(--text);
font-family:var(--f-m);font-size:var(--t-xs);letter-spacing:.1em;
transition:border-color .3s,color .3s;
}
.wa:hover,.wa:focus-visible{border-color:var(--temple);color:var(--temple)}
.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
/* ── footer ────────────────────────────────
The header is now a ranged-left bar, so the footer takes the symmetry the
header gave up: wordmark centred over a fading hairline. Everything below
that returns to the column grid, because a centred link list is unreadable
— you lose the left edge the eye scans down. */
footer{
border-top:1px solid var(--rule);
padding:clamp(38px,4.6vw,62px) 0 30px;
background:var(--paper-2);
}
.fmark{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(26px,3vw,42px)}
.fmark .brand{margin-right:0}
.fmark .mast-rule{
width:min(100%,420px);height:1px;margin:clamp(16px,2.4vh,22px) 0 0;
background:linear-gradient(90deg,transparent,var(--rule-lit) 22%,var(--rule-lit) 78%,transparent);
opacity:1;
}
.fmark .brand img{height:clamp(38px,1.8rem + 1.2vw,52px)}
/* Four columns, because there are four: the newsletter, Tours, CareMyTrip and
Legal. It was set to three, so Legal dropped onto a row of its own and sat
there alone at 439px wide. The ladder below never leaves an orphan: four
across, then a 2x2, then a single stack. */
.fgrid{
display:grid;gap:clamp(22px,2.6vw,34px);
grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:start;
}
@media (max-width:1040px){.fgrid{grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,48px)}}
@media (max-width:760px){.fgrid{grid-template-columns:1fr;gap:34px}}
.ftag{
margin:0;color:var(--dim);font-size:var(--t-sm);max-width:32ch;
font-weight:300;line-height:1.6;text-wrap:pretty;
}
footer h5{
font-family:var(--f-m);font-size:var(--t-2xs);text-transform:uppercase;
color:var(--faint);margin:0 0 18px;
/* the column heads sit on the same baseline as the first line of .ftag —
the tag is 14/1.6 and the head is 10/1, so it needs 3px of lead to match */
padding-top:3px;
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer li a{
color:var(--dim);text-decoration:none;font-size:var(--t-sm);font-weight:300;
transition:color .25s;
/* underline on hover only, offset clear of the descenders */
text-underline-offset:4px;text-decoration-thickness:1px;
}
footer li a:hover,footer li a:focus-visible{color:var(--temple);text-decoration:underline}
.legal{
margin-top:clamp(24px,2.8vw,38px);padding-top:18px;border-top:1px solid var(--rule);
display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
font-family:var(--f-m);font-size:var(--t-2xs);text-transform:uppercase;
color:var(--faint);
}
/* a tracked line ranged right ends short of the margin by the trailing space
the tracking adds; pull it back so both ends of the row align optically */
.legal span:last-child{margin-right:calc(var(--track-label) * -1)}
/* ── note strip (for you, not for visitors) ─ */
/* ── ambient glow ────────────────────────────
Two large, heavily blurred fields drifting behind the dark bands. They are
what stop a flat dark ground reading as a black rectangle. Blur is expensive,
so these are pseudo-elements on sections that already exist rather than extra
nodes, and they never animate blur — only transform, which is free. */
.band-deep{overflow:hidden}
.band-deep::before,
.band-deep::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
filter:blur(90px);mix-blend-mode:multiply;
}
.band-deep::before{
width:44vw;height:44vw;max-width:560px;max-height:560px;
top:-14%;left:-8%;
background:radial-gradient(circle,rgba(184,51,31,.30),transparent 68%);
animation:drift 26s ease-in-out infinite alternate;
}
.band-deep::after{
width:38vw;height:38vw;max-width:480px;max-height:480px;
bottom:-16%;right:-6%;
background:radial-gradient(circle,rgba(192,138,46,.26),transparent 68%);
animation:drift 34s ease-in-out infinite alternate-reverse;
}
.band-deep > .wrap{position:relative;z-index:1}
@keyframes drift{
from{transform:translate3d(0,0,0) scale(1)}
to {transform:translate3d(4%,6%,0) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
}
html{scroll-behavior:auto}
/* every element that starts hidden must be forced visible, or reduced-motion
users get a blank page — the commonest accessibility bug in this pattern */
.rise,.hero-copy > *{opacity:1!important;transform:none!important}
h1 .line > span{transform:none!important}
}
/* ── blocks the existing homepage has that the earlier draft did not ── */
/* the three promises */
.promises{
display:grid;gap:clamp(20px,2.2vw,34px);grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:820px){.promises{grid-template-columns:1fr}}
.promise{background:none;padding:0}
.promise .n{
display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;margin-bottom:18px;
border:1px solid var(--marigold-lit);color:var(--marigold);
font-family:var(--f-h);font-size:var(--t-2xs);font-weight:600;letter-spacing:.06em;
}
.promise h3{
font-family:var(--f-d);font-weight:500;font-size:var(--t-xl);
line-height:1.22;margin:0 0 10px;letter-spacing:-.011em;text-wrap:balance;
}
.promise p{margin:0;font-size:var(--t-sm);color:var(--dim);line-height:1.6}
/* destination tiles — smaller than a journey card, name over the field */
/* nine destinations divide exactly 3 x 3 */
.dests{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.dests{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dests{grid-template-columns:1fr}}
.dest{
position:relative;display:block;text-decoration:none;overflow:hidden;
border:1px solid var(--rule);border-radius:var(--r);
aspect-ratio:3/2;
transition:transform var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui);
}
.dest:hover,.dest:focus-visible{transform:translateY(-3px);border-color:var(--rule-lit)}
.dest .plate{position:absolute;inset:0;border-radius:0}
.dest .plate img{transition:transform var(--dur-slow) var(--ease-ui)}
.dest:hover .plate img{transform:scale(1.03)}
/* the name sits on a scrim, not on the raw field — a warm gradient behind
type is the difference between legible and nearly legible */
.dest-name{
display:block;
font-family:var(--f-b);font-weight:600;font-size:var(--t-lg);
color:#fff;letter-spacing:-.021em;line-height:1.2;
}
/* price row on a tour card */
/* newsletter, in the footer */
.news{
display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;max-width:380px;
}
.news input{
flex:1;min-width:170px;
background:var(--surface);border:1px solid var(--rule-lit);
border-radius:var(--r-sm);padding:11px 14px;
font-family:var(--f-b);font-size:var(--t-sm);color:var(--text);
}
.news input:focus{outline:none;border-color:var(--marigold-lit);box-shadow:var(--ring)}
.news button{
border:0;cursor:pointer;background:var(--temple);color:#fff;
border-radius:var(--r-sm);padding:11px 18px;
font-family:var(--f-h);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
transition:background var(--dur-ui) var(--ease-ui);
}
.news button:hover{background:var(--temple-lit)}
/* ══ INNER PAGES ═══════════════════════════════════════════════════════════
Everything below is shared by the seven pages that are not the home page.
One definition each - the live site currently carries five copies of its
sidebar filter and five of its review block, which is how a theme ends up
with 3,000 lines of duplicated Blade. */
/* -- page header -----------------------------
Not a hero. Inner pages open with a statement of where you are, on paper,
under a solid bar - no photograph competing with the first line of content. */
.phead{
padding:calc(clamp(62px,7vh,74px) + clamp(28px,3vw,46px)) 0 clamp(20px,2.2vw,32px);
background:var(--paper);
border-bottom:1px solid var(--rule);
}
.phead h1{
font-family:var(--f-d);font-weight:400;
font-size:var(--t-title);
line-height:1.16;letter-spacing:-.012em;margin:0;color:var(--text);
max-width:20ch;text-wrap:balance;text-shadow:none;
}
.phead .lede{
margin:clamp(16px,2.2vh,26px) 0 0;max-width:52ch;color:var(--dim);
font-size:clamp(15px,.9rem + .22vw,16.5px);line-height:1.55;font-weight:300;
}
.crumb{
display:flex;flex-wrap:wrap;align-items:center;gap:7px;
margin:0 0 16px;padding:0;list-style:none;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
.crumb a{color:var(--faint);text-decoration:none;transition:color var(--dur-ui) var(--ease-ui)}
.crumb a:hover{color:var(--temple)}
.crumb li::after{content:"/";margin-left:7px;opacity:.5}
.crumb li:last-child::after{content:none}
.crumb li[aria-current]{color:var(--text)}
/* -- two column: content + rail --------------- */
.layout{
display:grid;gap:clamp(20px,2.2vw,34px);
grid-template-columns:minmax(0,1fr) 340px;
align-items:start;
}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.rail{position:sticky;top:calc(clamp(66px,7vh,78px) + 20px)}
@media (max-width:980px){.rail{position:static}}
/* -- filters ---------------------------------- */
.layout .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.layout .cards{grid-template-columns:1fr}}
.filters{background:none;border:0;padding:0}
.filters + .filters{border-top:1px solid var(--rule);padding-top:22px}
.filters h3{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin:0 0 14px;
}
.filters + .filters{margin-top:22px}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:var(--t-sm);color:var(--dim)}
.fopt input{
appearance:none;-webkit-appearance:none;flex:none;
width:17px;height:17px;border:1px solid var(--rule-lit);border-radius:4px;
background:var(--surface);cursor:pointer;
transition:background var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui);
}
.fopt input:checked{background:var(--temple);border-color:var(--temple)}
/* a tick, drawn as two sides of a rotated box. The previous version crossed
two gradients, which draws an X - it read as "excluded", the exact opposite
of what a checked filter means. */
.fopt input{position:relative}
.fopt input:checked::after{
content:"";position:absolute;left:5px;top:1px;
width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;
transform:rotate(43deg);
}
.fopt input:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
.fopt:hover{color:var(--text)}
.fopt .n{margin-left:auto;font-size:var(--t-2xs);color:var(--faint);font-variant-numeric:tabular-nums}
.toolbar{
display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
margin-bottom:clamp(20px,2.6vh,30px);
}
.toolbar .count{font-size:var(--t-sm);color:var(--dim)}
.toolbar .count b{color:var(--text);font-weight:600}
.toolbar select{
margin-left:auto;background:var(--surface);border:1px solid var(--rule-lit);
border-radius:var(--r-sm);padding:9px 34px 9px 12px;
font-family:var(--f-b);font-size:var(--t-sm);color:var(--text);
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
linear-gradient(135deg,var(--faint) 50%,transparent 50%);
background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.toolbar select:focus{outline:none;border-color:var(--marigold-lit);box-shadow:var(--ring)}
/* -- tour detail ------------------------------ */
.gallery{
display:grid;gap:8px;grid-template-columns:2fr 1fr 1fr;
grid-template-rows:repeat(2,1fr);
border-radius:var(--r);overflow:hidden;aspect-ratio:2.3/1;
}
.gallery .plate{border-radius:0}
.gallery .plate:first-child{grid-row:span 2}
@media (max-width:760px){
.gallery{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:3/2}
.gallery .plate:not(:first-child){display:none}
.gallery .plate:first-child{grid-row:auto}
}
.facts{
display:grid;gap:0 clamp(20px,3vw,40px);
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
border-top:1px solid var(--rule);margin:clamp(24px,3vh,36px) 0;
}
.facts div{background:none;padding:18px 0;border-bottom:1px solid var(--rule)}
.facts dt{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
margin-bottom:5px;
}
.facts dd{margin:0;font-size:var(--t-b);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* the enquiry rail. There is no basket on this site and there never has been,
so the rail asks a person a question instead of taking a payment. */
.book{
background:var(--surface);border:1px solid var(--rule);
border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
}
.book .price{
font-family:var(--f-d);font-weight:400;font-size:1.7rem;
color:var(--text);margin:0;letter-spacing:-.011em;
}
.book .price span{
display:block;font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--marigold);
margin-bottom:6px;
}
.book .rule{height:1px;background:var(--rule);margin:18px 0}
.book .btn{width:100%;margin-bottom:10px}
.book .wa{width:100%;justify-content:center}
.book .assure{
margin:16px 0 0;font-size:var(--t-2xs);color:var(--faint);line-height:1.6;text-align:center;
}
/* -- itinerary --------------------------------
Restored for the tour page. The live version is a
with width="170"
attributes and a valign typo; it is the most important content on the site
and it does not survive a phone. */
.itin{list-style:none;margin:0;padding:0 0 0 30px;position:relative;max-width:38em}
.itin::before{
content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;
background:linear-gradient(180deg,var(--temple),var(--rule) 18%,var(--rule) 82%,transparent);
}
.itin > li{position:relative;padding:0 0 26px}
.itin > li:last-child{padding-bottom:0}
.itin > li::before{
content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;
background:var(--paper);border:2px solid var(--temple);box-shadow:0 0 0 4px var(--paper);
}
.itin .d{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--marigold);margin:0 0 5px;font-variant-numeric:tabular-nums;
}
.itin h3{
font-family:var(--f-d);font-weight:500;font-size:var(--t-lg);
line-height:1.24;margin:0 0 6px;color:var(--text);letter-spacing:-.011em;
}
.itin p{margin:0;font-size:var(--t-sm);color:var(--dim);line-height:1.6;max-width:34em}
/* include / exclude */
.inex{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr 1fr}
@media (max-width:640px){.inex{grid-template-columns:1fr}}
.inex ul{list-style:none;margin:0;padding:0}
.inex li{
position:relative;padding:0 0 10px 26px;font-size:var(--t-sm);
color:var(--dim);line-height:1.55;
}
.inex li::before{
position:absolute;left:0;top:0;font-weight:700;
}
.inex .yes li::before{content:"+";color:var(--temple)}
.inex .no li::before{content:"\2212";color:var(--faint)}
/* -- prose, for policies and posts ------------ */
.prose{max-width:36em} /* ~72 characters; see the ch note below */
.prose h2{
font-size:var(--t-h3);
margin:var(--flow-h) 0 var(--flow-t);max-width:26ch;
}
.prose h3{
font-family:var(--f-d);font-weight:500;font-size:var(--t-xl);
margin:26px 0 10px;letter-spacing:-.011em;color:var(--text);
}
.prose p{margin:0 0 16px;color:var(--dim);line-height:1.72}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--dim);line-height:1.72}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--faint)}
.prose a{color:var(--temple);text-underline-offset:3px}
.prose strong{color:var(--text)}
.prose blockquote{
margin:26px 0;padding:18px 22px;border-left:2px solid var(--marigold-lit);
background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p{margin:0;color:var(--text);font-family:var(--f-d);font-size:var(--t-lg);line-height:1.5}
/* Images inside admin-authored content.
The CMS stores width/height attributes from whatever was uploaded - the
about-us page carries an 831px-wide picture - so without this the page
scrolls sideways on every phone. Measured: 471px of horizontal overflow at
390px, 111px even at 768px. */
.prose img,
.prose iframe,
.prose video,
.prose table{max-width:100%}
.prose img{height:auto;border-radius:var(--r-sm)}
.prose iframe,.prose video{display:block}
/* A wide table cannot be reflowed, so it scrolls inside its own box rather
than dragging the page with it. */
.prose table{display:block;overflow-x:auto;border-collapse:collapse}
/* table of contents for the long policy pages */
.toc{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
padding:20px 22px;
}
.toc h3{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);margin:0 0 12px;
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{margin-bottom:9px}
.toc a{
display:block;font-size:var(--t-sm);color:var(--dim);text-decoration:none;
transition:color var(--dur-ui) var(--ease-ui);
}
.toc a:hover{color:var(--temple)}
/* -- blog ------------------------------------- */
.posts{display:grid;gap:clamp(20px,2.4vw,28px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post .plate{aspect-ratio:3/2;border-radius:var(--r-in) var(--r-in) 0 0}
.post-meta{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--marigold);
display:flex;gap:10px;align-items:center;
}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--faint);flex:none}
.lead-post{
display:grid;grid-template-columns:1.15fr 1fr;gap:0;
background:var(--surface);border:1px solid var(--rule);
border-radius:var(--r);overflow:hidden;margin-bottom:clamp(24px,3vh,40px);
text-decoration:none;color:inherit;
transition:border-color var(--dur-ui) var(--ease-ui),transform var(--dur-ui) var(--ease-ui);
}
.lead-post:hover{border-color:var(--rule-lit);transform:translateY(-3px)}
.lead-post .plate{border-radius:0;min-height:280px}
.lead-post .body{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.lead-post h2{margin:0;max-width:20ch}
.lead-post p{margin:0;color:var(--dim);font-size:var(--t-sm);line-height:1.6;max-width:48ch}
@media (max-width:820px){
.lead-post{grid-template-columns:1fr}
.lead-post .plate{min-height:0;aspect-ratio:2/1}
}
/* -- destination index ------------------------ */
.dest-row{
display:grid;grid-template-columns:200px minmax(0,1fr) auto;
gap:clamp(18px,2.4vw,32px);align-items:center;
padding:clamp(16px,2vh,22px) 0;border-bottom:1px solid var(--rule);
text-decoration:none;color:inherit;
transition:background var(--dur-ui) var(--ease-ui);
}
.dest-row:first-of-type{border-top:1px solid var(--rule)}
.dest-row .plate{aspect-ratio:16/10;border-radius:var(--r-sm)}
.dest-row h3{
font-family:var(--f-d);font-weight:500;font-size:var(--t-xl);
margin:0 0 5px;letter-spacing:-.011em;color:var(--text);
}
.dest-row p{margin:0;font-size:var(--t-sm);color:var(--dim);max-width:52ch}
.dest-row .go{
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;color:var(--temple);
white-space:nowrap;display:flex;align-items:center;gap:8px;
}
.dest-row .go i{font-style:normal;transition:transform var(--dur-ui) var(--ease-ui);display:inline-block}
.dest-row:hover .go i{transform:translateX(4px)}
@media (max-width:760px){
.dest-row{grid-template-columns:110px minmax(0,1fr);}
.dest-row .go{display:none}
}
/* ── CARD ────────────────────────────────────
Rebuilt against real data. The old version assumed a 35-character title and
put the duration in a tracked-caps row that shouted as loudly as the heading.
Real CMS titles run to 68 characters and already contain the duration:
"Chardham Yatra from Haridwar 2026 - 9 Nights / 10 Days Pilgrimage Tour".
So: duration becomes a badge on the image, location drops to a quiet
sentence-case line, and the title is clamped rather than left to run. */
.card{
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
background:none;
border:0;
border-radius:0;
transition:border-color var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui),
box-shadow var(--dur-ui) var(--ease-ui);
}
/* a card on a white band needs a shadow, not just a border, or its edge
disappears into the section behind it */
.card:hover,.card:focus-visible{transform:translateY(-5px)}
.card .plate{
aspect-ratio:3/2;border-radius:var(--r);flex:none;
}
/* the badge sits on the photograph, so the photograph has to be made safe for
it - a corner scrim rather than dimming the whole image */
.card .plate::after{
content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:3;
background:linear-gradient(180deg,transparent,rgba(14,17,21,.55));
opacity:0;transition:opacity var(--dur-ui) var(--ease-ui);
}
.card .plate img{transition:transform var(--dur-slow) var(--ease-ui)}
.card:hover .plate img{transform:scale(1.04)}
.card-dur{
position:absolute;left:12px;bottom:12px;z-index:4;
display:inline-flex;align-items:center;
padding:6px 11px;border-radius:var(--r-pill);
background:rgba(14,17,21,.62);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
font-family:var(--f-b);font-size:12px;font-weight:600;
color:#fff;letter-spacing:.01em;white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.card-body{
padding:12px 2px 0;
display:flex;flex-direction:column;gap:6px;flex:1;
}
/* sentence case, not tracked caps. It is a place name, not a system label,
and it should sit under the title in the reading order. */
.card-loc{
margin:0;font-family:var(--f-b);font-size:var(--t-sm);
font-weight:500;color:var(--marigold);letter-spacing:0;
}
.card h3{
font-family:var(--f-d);font-weight:500;
font-size:var(--t-lg);
line-height:1.28;margin:0;color:var(--text);
letter-spacing:-.011em;text-wrap:balance;
/* three lines maximum. A 68-character CMS title would otherwise set the
height of every card in its row. */
display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden;
}
.card p{
margin:0;font-size:var(--t-sm);color:var(--dim);line-height:1.55;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
}
.card-foot{
margin-top:auto;padding-top:10px;
display:flex;justify-content:space-between;align-items:center;gap:12px;
}
/* "On request" is on every card, so it carries no information and must not
compete. It is a caption. The arrow is the affordance. */
.card-price{
font-family:var(--f-b);font-size:var(--t-sm);font-weight:400;
letter-spacing:0;text-transform:none;color:var(--faint);
}
.card-go{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:var(--r-pill);flex:none;
background:rgba(64,89,106,.09);color:var(--temple);
font-size:15px;line-height:1;
transition:background var(--dur-ui) var(--ease-ui),
color var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui);
}
.card:hover .card-go{background:var(--temple);color:#fff;transform:translateX(3px)}
/* with the container gone the title has to react, or nothing on an unboxed
card looks clickable until the pointer reaches the arrow */
.card h3{transition:color var(--dur-ui) var(--ease-ui)}
.card:hover h3{color:var(--temple)}
.card:hover .plate::after{opacity:1}
/* the blog cards reuse all of the above and only change the meta line */
.post .card-loc{color:var(--temple)}
/* ── PAGINATION ──────────────────────────────
117 published tours behind a page that shows twelve and then stops is a dead
end. Prev/next alone is not enough either - a pilgrim who lands on page 4
from search needs to know where they are and how much is left. */
.pager{
display:flex;align-items:center;justify-content:center;gap:6px;
margin-top:clamp(34px,4.5vh,56px);
padding-top:clamp(24px,3vh,34px);
border-top:1px solid var(--rule);
flex-wrap:wrap;
}
.pager a,.pager span{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 12px;
border-radius:var(--r-sm);
font-family:var(--f-b);font-size:var(--t-sm);font-weight:500;
color:var(--dim);text-decoration:none;
border:1px solid transparent;
font-variant-numeric:tabular-nums;
transition:background var(--dur-ui) var(--ease-ui),
color var(--dur-ui) var(--ease-ui),
border-color var(--dur-ui) var(--ease-ui);
}
.pager a:hover{background:var(--surface);border-color:var(--rule-lit);color:var(--text)}
.pager [aria-current]{
background:var(--temple);border-color:var(--temple);color:#fff;font-weight:600;
}
/* the gap marker is not a control - it must not look clickable or take focus */
.pager .gap{min-width:24px;padding:0;color:var(--faint);cursor:default}
.pager .step{gap:8px;padding:0 16px}
.pager .step[aria-disabled="true"]{opacity:.4;pointer-events:none}
.pager .step i{font-style:normal;transition:transform var(--dur-ui) var(--ease-ui)}
.pager .prev:hover i{transform:translateX(-3px)}
.pager .next:hover i{transform:translateX(3px)}
@media (max-width:620px){
.pager .num{display:none}
.pager .step{flex:1;justify-content:center}
}
/* a plain-language position line, because "3" on its own tells you nothing */
.pager-where{
width:100%;text-align:center;margin:10px 0 0;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
/* the pagination target. Without the margin the anchor lands flush with the
viewport top and the first row of cards sits behind the fixed bar. */
#results{scroll-margin-top:calc(clamp(66px,7vh,78px) + 24px)}
/* ══ TOUR DETAIL ═══════════════════════════════════════════════════════════ */
/* -- hero -------------------------------------
Title over the photograph rather than under it. The scrim is anchored to the
bottom, where the words are, so the top of the frame keeps its light. */
.thero{
position:relative;
min-height:clamp(260px,30vw,380px);
display:flex;align-items:flex-end;
padding:calc(clamp(66px,7vh,78px) + 40px) 0 clamp(26px,3.5vh,40px);
overflow:hidden;background:var(--paper-2);
}
.thero > img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 42%;z-index:0;
}
.thero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(12,15,19,.52) 0%,rgba(12,15,19,.18) 34%,rgba(12,15,19,.78) 100%);
}
.thero .wrap{position:relative;z-index:2;width:100%}
.thero .crumb,.thero .crumb a{color:rgba(255,255,255,.75)}
.thero .crumb a:hover{color:#fff}
.thero .crumb li[aria-current]{color:#fff}
.thero h1{
font-family:var(--f-d);font-weight:400;color:#fff;
font-size:var(--t-title);
line-height:1.16;letter-spacing:-.012em;margin:0;max-width:22ch;
text-shadow:0 2px 22px rgba(0,0,0,.45);
}
/* -- the specification strip ------------------
Six facts, above the fold, before any prose. This is what a pilgrim checks
first and it is what the live site buries in a table halfway down. */
.specs{
display:grid;gap:0;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
background:none;border-bottom:1px solid var(--rule);
max-width:var(--max);margin:0 auto;padding:0 var(--pad);
}
.specs div{background:none;padding:22px clamp(10px,1.4vw,20px) 22px 0}
.specs dt{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin-bottom:5px;
}
.specs dd{
margin:0;font-size:var(--t-b);font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;line-height:1.35;
}
.specs dd small{display:block;font-size:var(--t-2xs);font-weight:400;color:var(--faint);margin-top:2px}
/* -- tabs -------------------------------------
Panels are visible by default and JS hides the inactive ones, so the page is
complete without scripting rather than empty. */
.tabs{
display:flex;gap:4px;flex-wrap:wrap;
border-bottom:1px solid var(--rule);
margin-bottom:clamp(24px,3vh,34px);
}
.tabs button{
appearance:none;border:0;background:none;cursor:pointer;
padding:12px 16px;margin-bottom:-1px;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;
color:var(--faint);border-bottom:2px solid transparent;
transition:color var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui);
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--temple);border-bottom-color:var(--temple)}
.tabs button:focus-visible{outline:2px solid var(--temple);outline-offset:-2px;border-radius:var(--r-sm) var(--r-sm) 0 0}
.tabpanel[hidden]{display:none}
.tabpanel h2:first-child{margin-top:0}
/* -- inclusions -------------------------------- */
.inx{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr 1fr}
@media (max-width:680px){.inx{grid-template-columns:1fr}}
.inx h3{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin:0 0 14px;
}
.inx ul{list-style:none;margin:0;padding:0}
.inx li{
position:relative;padding:0 0 11px 28px;
font-size:var(--t-sm);color:var(--dim);line-height:1.6;
}
.inx li::before{
position:absolute;left:0;top:1px;
width:18px;height:18px;border-radius:50%;
display:grid;place-items:center;font-size:11px;font-weight:700;
}
.inx .yes li::before{content:"\2713";background:rgba(64,89,106,.12);color:var(--temple)}
.inx .no li::before{content:"\2212";background:rgba(27,32,39,.07);color:var(--faint)}
/* -- FAQ, native disclosure, no script --------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
font-family:var(--f-d);font-weight:500;font-size:var(--t-lg);
color:var(--text);letter-spacing:-.011em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:6px;top:26px;
width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
transform:rotate(45deg);transition:transform var(--dur-ui) var(--ease-ui);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--temple)}
.faq summary:focus-visible{outline:2px solid var(--temple);outline-offset:2px;border-radius:var(--r-sm)}
.faq .a{padding:0 34px 20px 0;margin:0;font-size:var(--t-sm);color:var(--dim);line-height:1.7;max-width:36em}
/* -- the booking rail -------------------------- */
.book .from{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
display:block;margin-bottom:4px;
}
.book .amount{
font-family:var(--f-d);font-weight:500;
font-size:clamp(1.45rem,1.1rem + .75vw,1.8rem);
color:var(--text);letter-spacing:-.012em;line-height:1.1;
font-variant-numeric:tabular-nums;
}
.book .amount small{font-family:var(--f-b);font-size:var(--t-sm);font-weight:400;color:var(--faint);letter-spacing:0}
.book .was{
font-family:var(--f-b);font-size:var(--t-sm);color:var(--faint);
text-decoration:line-through;margin-left:8px;font-variant-numeric:tabular-nums;
}
.bform .field{margin-bottom:12px}
.bform .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bform .btn{width:100%;height:48px;margin-top:4px}
/* -- related ----------------------------------- */
.related{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.related{grid-template-columns:1fr}}
/* ── HEADING FLOW ────────────────────────────
A heading that follows content needs air above it and less below - the
classic asymmetry that ties a heading to its own paragraph rather than
floating between two. Previously every h2 was margin:0 and each section
patched the gap with an inline style, so no two panels matched. */
/* DIRECT children only. A descendant selector here would also hit the
itinerary day titles and the "Included" column labels, giving both a 46px
top margin - the flow rhythm belongs to the panel's own headings, not to
every heading nested inside its components. */
.tabpanel > h2,
.tabpanel > h3{margin:var(--flow-h) 0 var(--flow-t)}
.tabpanel > *:first-child{margin-top:0}
.tabpanel > p{margin:0 0 var(--flow-t);color:var(--dim);line-height:1.7;max-width:36em}
.tabpanel > .itin,
.tabpanel > .inx,
.tabpanel > .cards,
.tabpanel > .faq{margin-top:var(--flow-t)}
.tabpanel > .facts{margin:var(--flow-t) 0 var(--flow-h)}
/* ── STAGGER ─────────────────────────────────
A grid that reveals as one block reads as a page load. Revealing its
children in sequence reads as composition. Six steps is enough for a row;
beyond that the last card arrives late enough to feel broken. */
.rise .cards > *,
.rise .posts > *,
.rise .dests > *,
.rise .related > *{
opacity:0;transform:translate3d(0,var(--rise),0);
transition:opacity var(--dur-reveal) var(--ease-reveal),
transform var(--dur-reveal) var(--ease-reveal);
}
.rise.in .cards > *,
.rise.in .posts > *,
.rise.in .dests > *,
.rise.in .related > *{opacity:1;transform:none}
.rise.in .cards > *:nth-child(1),.rise.in .posts > *:nth-child(1),
.rise.in .dests > *:nth-child(1),.rise.in .related > *:nth-child(1){transition-delay:0ms}
.rise.in .cards > *:nth-child(2),.rise.in .posts > *:nth-child(2),
.rise.in .dests > *:nth-child(2),.rise.in .related > *:nth-child(2){transition-delay:70ms}
.rise.in .cards > *:nth-child(3),.rise.in .posts > *:nth-child(3),
.rise.in .dests > *:nth-child(3),.rise.in .related > *:nth-child(3){transition-delay:140ms}
.rise.in .cards > *:nth-child(4),.rise.in .posts > *:nth-child(4),
.rise.in .dests > *:nth-child(4){transition-delay:210ms}
.rise.in .cards > *:nth-child(5),.rise.in .posts > *:nth-child(5),
.rise.in .dests > *:nth-child(5){transition-delay:280ms}
.rise.in .cards > *:nth-child(n+6),.rise.in .posts > *:nth-child(n+6),
.rise.in .dests > *:nth-child(n+6){transition-delay:350ms}
@media (prefers-reduced-motion:reduce){
.rise .cards > *,.rise .posts > *,.rise .dests > *,.rise .related > *{
opacity:1!important;transform:none!important;transition:none!important;
}
}
/* ==== REFERENCE PASS APPLIED ==== */
/* ── LINE MARKS ──────────────────────────────
Drawn rather than photographed, because the photograph is the one thing this
library cannot supply. Ornament only: --marigold-lit fails contrast as text
and is never used as text, which is exactly what a stroke-only mark is for. */
.mark{
width:38px;height:38px;display:block;flex:none;
color:var(--marigold-lit);
stroke-width:1.35;vector-effect:non-scaling-stroke;
}
.mark-sm{width:19px;height:19px;stroke-width:1.6}
/* the promise marks replace the old 01/02/03 numerals, so the circle goes */
.promise .n{
display:block;width:auto;height:auto;border:0;border-radius:0;
margin-bottom:clamp(16px,2vh,22px);
}
/* ── ASSURANCE ───────────────────────────────
Four claims, each of which the site or the tour data can already evidence. */
.assures{
display:grid;gap:clamp(20px,2.2vw,34px);
grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1000px){.assures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.assures{grid-template-columns:1fr}}
.assure-item h3{
font-family:var(--f-d);font-weight:500;
font-size:clamp(1.12rem,.98rem + .42vw,1.4rem);
line-height:1.28;letter-spacing:-.011em;
color:var(--text);margin:0 0 9px;text-wrap:balance;
}
.assure-item p{margin:0;color:var(--dim);font-size:var(--t-sm);line-height:1.62;max-width:34ch}
/* the same idea inside the booking rail, at list scale */
.assures-list{list-style:none;margin:18px 0 0;padding:0}
.assures-list li{
display:flex;align-items:flex-start;gap:10px;
padding:9px 0;color:var(--dim);
font-size:var(--t-xs);line-height:1.45;
}
.assures-list li + li{border-top:1px solid var(--rule)}
.assures-list .mark-sm{margin-top:1px;color:var(--temple)}
/* ==== HERO + HEADER FIX ==== */
/* ── HEADER OVER PHOTOGRAPHY ─────────────────
The bar is transparent over the hero, and the hero is a snowfield. Without
this the nav, the phone number and the CTA sit at about 1.7:1. */
/* The scrim must not thin out inside the header box. It used to reach .36 by
76% and 0 by 100%, and with a 40px overhang that put the bottom of the bar at
roughly .62 - enough for hero text scrolling underneath to ghost through.
It now holds >=.72 across the whole bar and only fades in the overhang, so a
transparent header can never leak whatever is moving beneath it. That no
longer depends on the .stuck class engaging. */
nav.site-header::before{
content:"";position:absolute;inset:0 0 -40px 0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(10,13,17,.78) 0%,
rgba(10,13,17,.75) 40%,
rgba(10,13,17,.72) 68%,
rgba(10,13,17,.34) 86%,
rgba(10,13,17,0) 100%);
transition:opacity var(--dur-ui) var(--ease-ui);
}
/* once the bar is solid it supplies its own ground and the scrim would only
muddy it */
nav.site-header.stuck::before{opacity:0}
/* the scrim is a sibling of the content, so the content needs to sit above it */
nav.site-header .wrap{position:relative;z-index:1}
/* ── CTA ─────────────────────────────────────
The nav's text-decoration reset names .cta as an exclusion, so the CTA fell
back to the browser default and has been rendering underlined. */
nav.site-header .cta,
nav.site-header .cta:hover,
nav.site-header .cta:focus-visible{text-decoration:none}
nav.site-header .phone{text-decoration:none}
/* ── HERO HEADLINE ───────────────────────────
The line masks clip on overflow, so a line that does not fit its column is
not merely ugly, it loses its descenders. Belt and braces after the resize. */
.hero-copy h1{max-width:100%;overflow-wrap:break-word;hyphens:none}
/* ==== HERO + HEADER FIX 2 ==== */
/* ── SCROLL CUE ──────────────────────────────
Centred, it lands inside the copy column and is drawn over .hero-note. The
hero is left-aligned, so the cue belongs on the side the text does not use. */
.scroll-cue{left:auto;right:var(--pad);transform:none}
/* the note carried the fade's old opacity budget; it needs its own contrast
back now that it sits over a photograph rather than a wash */
.hero-note{color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.5),0 1px 16px rgba(0,0,0,.7)}
/* Below 1080 the masthead wraps to three rows and the cue would sit under the
nav strip on short viewports. It is decoration; it goes first. */
@media (max-width:1080px){.scroll-cue{display:none}}
/* ==== LISTING REFINEMENT ==== */
/* ── LISTING: RAIL ───────────────────────────
Filters on the left, which is where the competitor and every comparable
operator put them. The results column is declared second in source order and
placed first on narrow screens, so a phone gets the tours before the filters. */
.layout-rail{grid-template-columns:240px minmax(0,1fr)}
.layout-rail .rail{position:sticky;top:calc(clamp(66px,7vh,78px) + 22px)}
@media (max-width:1000px){
.layout-rail{grid-template-columns:1fr}
.layout-rail .rail{position:static;order:2}
.layout-rail .results-col{order:1}
}
.filterset{display:block}
/* ── LISTING: SPACING ────────────────────────
.phead's floor plus .band's 13vh ceiling left ~266px of empty paper between
the headline and the first card. */
.phead-tight{padding-bottom:clamp(16px,1.8vw,26px)}
.band-tight{padding-top:clamp(20px,2.2vw,30px)}
/* ── LISTING: TOOLBAR ────────────────────────*/
.toolbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;padding-bottom:12px;margin-bottom:clamp(16px,1.8vw,24px);
border-bottom:1px solid var(--rule);
}
.toolbar .count{margin:0;font-size:var(--t-sm);color:var(--faint);font-weight:300}
.toolbar .count b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.sortwrap{position:relative}
.sortwrap::after{
content:"";position:absolute;right:14px;top:50%;
width:7px;height:7px;margin-top:-5px;pointer-events:none;
border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
transform:rotate(45deg);
}
.sortwrap select{
appearance:none;-webkit-appearance:none;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:500;color:var(--text);
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
padding:0 38px 0 14px;height:42px;cursor:pointer;
transition:border-color var(--dur-ui) var(--ease-ui);
}
.sortwrap select:hover{border-color:var(--rule-lit)}
.sortwrap select:focus-visible{outline:none;border-color:var(--marigold-lit);box-shadow:var(--ring)}
/* ── LISTING: CARD ───────────────────────────
Titles clamp to two lines so the grid keeps a common baseline; before this a
three-line title made its whole row ragged. */
.layout-rail .cards{gap:clamp(16px,1.6vw,24px)}
.card h3{
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
}
.card-tags{
list-style:none;margin:2px 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:6px;
}
.card-tags li{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--temple);background:rgba(64,89,106,.10);
border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap;
}
.card-inc{
font-size:var(--t-xs);color:var(--faint);font-weight:300;line-height:1.5;
}
/* listing: .intent rule */
/* .intent is a bordered band on the homepage. On the listing the results grid
reuses the class (the search filter keys off it), so it was drawing a second
rule immediately under the toolbar's, plus 30-54px of padding nobody asked
for. Neutralised inside the results column only. */
.results-col .intent{border-top:0;padding:0}
.results-col .intent:last-of-type{border-bottom:0}
/* ==== COMPACT PASS ==== */
/* ── DENSER RESULTS ──────────────────────────
Two columns was the sparse part people actually noticed. Three above 1180,
two from 720, one below - the breakpoints are set by the card, not by the
device: 300px is where a two-line Lora title stops fitting. */
@media (min-width:1180px){.layout-rail .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1179px) and (min-width:721px){.layout-rail .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.layout-rail .cards{grid-template-columns:1fr}}
/* the plate loses a little height with the extra column, so the grid shows
more rows without the cards looking cropped */
.layout-rail .card .plate{aspect-ratio:16/11}
.layout-rail .card h3{font-size:var(--t-lg)}
.layout-rail .card-tags li{padding:4px 8px}
/* the homepage grids follow the same density */
.dests{gap:clamp(18px,1.8vw,26px)}
.posts{gap:clamp(18px,1.8vw,26px)}
.related{gap:clamp(18px,1.8vw,26px)}
/* day meta */
/* ── ITINERARY DAY FIELDS ────────────────────
Stay / Places to Visit / Meals, recovered from the run-together body text.
They are facts, not prose, so they get a list and a label weight rather than
another paragraph. */
.dmeta{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:3px}
.dmeta li{
font-size:var(--t-sm);color:var(--dim);line-height:1.5;
padding-left:0;
}
.dmeta b{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin-right:7px;
}
/* the day-field list is nested inside a timeline item, so it must not inherit
the timeline's node marker or its bottom rhythm */
.itin .dmeta li{position:static;padding:0}
.itin .dmeta li::before{content:none}
/* ==== HEADING TYPOGRAPHY ==== */
/* ── SANS FOR THE WORKING HEADINGS ───────────
Lora stays on the hero, the page titles and the price. Everything that
repeats down a page moves to DM Sans: fifteen serif heading selectors was a
wall, and a wall of serif on cream is the look we are trying not to have. */
h2,
.card h3,
.promise h3,
.assure-item h3,
.itin h3,
.prose h3,
.dest-name,
.dest-row h3,
.climb-head h3,
.faq summary,
.book .price{
font-family:var(--f-b);
font-weight:600;
letter-spacing:-.021em;
}
/* a sans at display size carries tighter leading than a serif does */
h2{line-height:1.1;letter-spacing:-.025em}
/* balance is right for a two- or three-word heading and wrong for a sentence:
on a sentence it produces the even, tapered block that reads as generated */
h2{text-wrap:pretty}
.card h3{text-wrap:pretty}
/* the day heading and the FAQ question sit at body scale, where the tight
display tracking would close them up */
.itin h3,.faq summary,.prose h3{letter-spacing:-.012em;font-weight:600}
.faq summary{font-size:var(--t-b)}
/* the destination names were the one place the serif was doing real work at a
large size, so they keep a little more weight rather than more size */
.dest-name{letter-spacing:-.024em}
/* ==== COMPACT PASS 2 ==== */
/* ── SMALL-SCALE CORRECTIONS ─────────────────
Shrinking a scale is not uniform: leading that suited 16px body is loose at
15px, and tracking that suited a 2.9rem headline is too tight at 2.35rem. */
body{line-height:1.6}
h2{line-height:1.16;letter-spacing:-.021em}
.card h3{line-height:1.3}
.itin p,.faq .a{line-height:1.65}
/* the uppercase micro-label is at its floor; give it a little more tracking so
it stays legible now that everything around it is smaller */
.slabel,.filters h3,.specs dt,.card-tags li,.dmeta b{letter-spacing:.19em}
/* ==== DESTINATION TILES ==== */
/* ── DESTINATION TILES ───────────────────────
A photograph with a name dropped on it says nothing except "photograph".
The tile now carries the count, which is the thing a reader is actually
deciding on, and an arrow, so it reads as a link before it is hovered. */
.dest{
border:0;
aspect-ratio:4/3;
transition:transform var(--dur-ui) var(--ease-ui),
box-shadow var(--dur-ui) var(--ease-ui);
}
.dest::after{
content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:2;
pointer-events:none;
background:linear-gradient(180deg,
rgba(14,17,21,0) 0%,
rgba(14,17,21,.30) 42%,
rgba(14,17,21,.74) 100%);
transition:opacity var(--dur-ui) var(--ease-ui);
}
.dest:hover,.dest:focus-visible{
transform:translateY(-3px);
box-shadow:0 16px 34px -20px rgba(14,17,21,.5);
}
.dest:hover .plate img{transform:scale(1.05)}
.dest-meta{
position:absolute;left:0;right:0;bottom:0;z-index:3;
display:flex;flex-direction:column;gap:3px;
padding:0 clamp(13px,1.3vw,17px) clamp(12px,1.3vw,16px);
}
.dest-count{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
/* the affordance: present but quiet, and it moves on hover so the whole tile
reads as one target rather than a picture with a caption */
.dest-go{
position:absolute;top:11px;right:11px;z-index:3;
width:29px;height:29px;border-radius:var(--r-pill);
display:grid;place-items:center;
background:rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
color:#fff;font-size:13px;line-height:1;
opacity:0;transform:translate(-4px,4px);
transition:opacity var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui),
background var(--dur-ui) var(--ease-ui);
}
.dest:hover .dest-go,.dest:focus-visible .dest-go{
opacity:1;transform:none;background:rgba(255,255,255,.26);
}
@media (hover:none){.dest-go{opacity:1;transform:none}}
/* the back link on a destination page toolbar */
.backlink{
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;
color:var(--temple);text-decoration:none;white-space:nowrap;
}
.backlink:hover{text-decoration:underline;text-underline-offset:3px}
/* a destination grid is browsed, not compared, so it runs wider than the
listing grid */
.dest-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.dest-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dest-cards{grid-template-columns:1fr}}
/* dest plate fill */
/* A tile carries class="dest card", so `.card .plate{aspect-ratio:3/2}` was
winning over `.dest .plate{inset:0}` on equal specificity by source order,
and the photograph stopped 29px short of the bottom - which is why the count
was sitting on a grey strip outside the image. */
.dest .plate{aspect-ratio:auto;height:100%;width:100%}
.dest .plate img{height:100%;width:100%;object-fit:cover}
/* ==== HERO SLIDESHOW ==== */
/* ── HERO SLIDES ─────────────────────────────
Real elements rather than a CSS background: they can carry alt text,
the ones below the fold can be lazy, and they can crossfade. */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:62% center;
opacity:0;transition:opacity 1.1s var(--ease-reveal);
}
.hero-slide.is-on{opacity:1}
/* dots sit opposite the copy, which is left-aligned, and clear of the scroll
cue on the right edge */
.hero-dots{
position:absolute;z-index:4;
left:var(--pad);bottom:clamp(14px,2.2vh,24px);
display:flex;gap:8px;
}
.hero-dots button{
appearance:none;border:0;padding:0;cursor:pointer;
width:26px;height:3px;border-radius:2px;
background:rgba(255,255,255,.34);
transition:background var(--dur-ui) var(--ease-ui),width var(--dur-ui) var(--ease-ui);
}
.hero-dots button:hover{background:rgba(255,255,255,.6)}
.hero-dots button[aria-selected="true"]{background:#fff;width:40px}
.hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.hero-dots button{width:18px}
.hero-dots button[aria-selected="true"]{width:28px}}
/* ── HEADS: USE THE WIDTH ────────────────────
The heading and its intro were both set at a ~52ch measure and stacked, so
the right half of the container was empty. :has() keeps the single-column
arrangement wherever there is no intro to pair with. */
@media (min-width:900px){
.shead:has(.sintro){
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
column-gap:clamp(30px,5vw,84px);
align-items:start;
}
.shead:has(.sintro) .slabel{grid-column:1;grid-row:1}
.shead:has(.sintro) h2{grid-column:1;grid-row:2;max-width:17ch}
.shead:has(.sintro) .sintro{grid-column:2;grid-row:2;margin-top:5px;max-width:44ch}
.phead:has(.lede) .wrap{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
column-gap:clamp(30px,5vw,84px);
align-items:start;
}
.phead:has(.lede) .crumb{grid-column:1;grid-row:1}
.phead:has(.lede) h1{grid-column:1;grid-row:2;max-width:15ch}
.phead:has(.lede) .lede{grid-column:2;grid-row:2;margin-top:5px;max-width:44ch}
}
/* the dots now sit in the copy flow rather than absolutely at the hero's foot,
where they were landing inside the fade into the paper and losing contrast */
.hero-dots{position:static;margin-top:clamp(14px,2.2vh,22px)}
/* the article's lead photograph, above the prose */
.post-hero{
aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;
margin:0 0 clamp(22px,3vh,36px);
}
.post-hero img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.post-hero{aspect-ratio:3/2}}
/* ==== BANNER + SEARCH ==== */
/* ── HERO SEARCH ─────────────────────────────
The live banner carries a destination + dates + search control. This is the
same idea in the site's own palette, and it works - the destination options
are the real destination pages. */
.hsearch{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;
gap:1px;background:var(--rule);
border-radius:var(--r);overflow:hidden;
margin-top:clamp(16px,2.4vh,24px);
max-width:660px;
box-shadow:0 12px 34px -20px rgba(14,17,21,.55);
}
.hsearch-field{background:var(--surface);padding:9px clamp(12px,1.4vw,16px) 8px;min-width:0}
.hsearch-field label{
display:block;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--faint);margin-bottom:1px;
}
.hsearch-field select,
.hsearch-field input{
appearance:none;-webkit-appearance:none;
width:100%;border:0;background:none;padding:0;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:500;
color:var(--text);line-height:1.5;
}
.hsearch-field select:focus-visible,
.hsearch-field input:focus-visible{outline:2px solid var(--temple);outline-offset:3px;border-radius:2px}
.hsearch-go{
border:0;cursor:pointer;
background:var(--temple);color:#fff;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
padding:0 clamp(20px,2.2vw,30px);
transition:background var(--dur-ui) var(--ease-ui);
}
.hsearch-go:hover{background:var(--temple-lit)}
.hsearch-go:focus-visible{outline:2px solid #fff;outline-offset:-3px}
@media (max-width:620px){
.hsearch{grid-template-columns:1fr 1fr;max-width:none}
.hsearch-go{grid-column:1 / -1;height:44px}
}
/* the rail's price line, now that it never carries a figure */
.amount-note{
display:block;margin-top:3px;
font-family:var(--f-b);font-size:var(--t-xs);font-weight:400;
color:var(--faint);letter-spacing:0;
}
/* ==== ENQUIRY PANEL ==== */
/* ── ENQUIRY TAB ─────────────────────────────
Fixed to the right edge, below the header, above everything else. */
.enq-tab{
position:fixed;right:0;top:50%;transform:translateY(-50%);
z-index:70;border:0;cursor:pointer;
background:var(--temple);color:#fff;
border-radius:var(--r-sm) 0 0 var(--r-sm);
padding:16px 9px;
box-shadow:0 6px 22px -10px rgba(14,17,21,.55);
transition:background var(--dur-ui) var(--ease-ui),padding var(--dur-ui) var(--ease-ui);
}
.enq-tab-txt{
display:block;writing-mode:vertical-rl;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
}
.enq-tab:hover{background:var(--temple-lit);padding-right:13px}
.enq-tab:focus-visible{outline:2px solid var(--marigold-lit);outline-offset:3px}
@media (max-width:620px){
.enq-tab{top:auto;bottom:14px;right:14px;transform:none;
border-radius:var(--r-pill);padding:11px 18px}
.enq-tab-txt{writing-mode:horizontal-tb}
}
/* ── SCRIM + PANEL ───────────────────────────*/
.enq-scrim{
position:fixed;inset:0;z-index:80;
background:rgba(14,17,21,.42);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
opacity:0;transition:opacity var(--dur-ui) var(--ease-ui);
}
.enq-scrim.is-on{opacity:1}
.enq-panel{
position:fixed;top:0;right:0;bottom:0;z-index:90;
width:min(392px,100vw);
background:var(--paper);
border-left:1px solid var(--rule);
box-shadow:-24px 0 60px -30px rgba(14,17,21,.5);
padding:clamp(20px,2.4vw,28px);
overflow-y:auto;overscroll-behavior:contain;
transform:translateX(100%);
transition:transform var(--dur-slow) var(--ease-reveal);
}
.enq-panel.is-on{transform:none}
.enq-head{position:relative;padding-right:34px;margin-bottom:clamp(16px,2vh,22px)}
.enq-head h2{
font-size:clamp(1.2rem,1rem + .6vw,1.55rem);
line-height:1.18;margin:4px 0 0;
}
.enq-close{
position:absolute;top:-4px;right:-4px;
width:32px;height:32px;border:0;border-radius:var(--r-pill);
background:none;color:var(--faint);cursor:pointer;
font-size:24px;line-height:1;
transition:background var(--dur-ui) var(--ease-ui),color var(--dur-ui) var(--ease-ui);
}
.enq-close:hover{background:var(--panel);color:var(--text)}
.enq-close:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
.enq-panel-form .field{margin-bottom:11px}
.enq-panel-form .enq-send{width:100%;height:46px;margin-top:2px}
/* the objection sits directly above the button, where the hesitation is */
.enq-assure{
display:grid;gap:5px;margin:13px 0 12px;padding:0;
}
.enq-assure span{
position:relative;padding-left:19px;
font-size:var(--t-xs);color:var(--dim);line-height:1.45;
}
.enq-assure span::before{
content:"";position:absolute;left:0;top:5px;
width:9px;height:5px;
border-left:1.6px solid var(--temple);border-bottom:1.6px solid var(--temple);
transform:rotate(-45deg);
}
.enq-sent{
display:none;margin:12px 0 0;padding:11px 13px;
border-radius:var(--r-sm);background:rgba(64,89,106,.10);
font-size:var(--t-sm);color:var(--temple);line-height:1.5;
}
.enq-panel-form.is-sent .enq-sent{display:block}
.enq-panel-form.is-sent .field,
.enq-panel-form.is-sent .enq-assure,
.enq-panel-form.is-sent .enq-send{display:none}
/* what happens next: uncertainty is what stops people starting */
.enq-steps{
list-style:none;counter-reset:s;margin:clamp(18px,2.4vh,26px) 0 0;padding:0;
border-top:1px solid var(--rule);
}
.enq-steps li{
counter-increment:s;position:relative;
padding:11px 0 11px 27px;
border-bottom:1px solid var(--rule);
font-size:var(--t-xs);color:var(--dim);line-height:1.5;
}
.enq-steps li::before{
content:counter(s);position:absolute;left:0;top:11px;
width:17px;height:17px;border-radius:var(--r-pill);
display:grid;place-items:center;
background:var(--panel);color:var(--faint);
font-family:var(--f-b);font-size:9px;font-weight:700;
}
.enq-steps b{color:var(--text);font-weight:600}
/* some people will never fill in a form */
.enq-or{margin-top:clamp(16px,2vh,22px)}
.enq-or > p{
margin:0 0 8px;font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
.enq-chan{
display:block;padding:9px 13px;margin-bottom:7px;
border:1px solid var(--rule);border-radius:var(--r-sm);
background:var(--surface);text-decoration:none;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;color:var(--temple);
transition:border-color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui);
}
.enq-chan:hover{border-color:var(--temple);background:var(--panel)}
.enq-chan:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
.enq-hours{margin:6px 0 0;font-size:var(--t-xs);color:var(--faint)}
@media (prefers-reduced-motion:reduce){
.enq-panel{transition:none}
.enq-scrim{transition:none}
}
/* Auto-opened, the panel has no scrim behind it, so it has to hold its own
edge against the page. */
.enq-panel[aria-modal="false"]{
box-shadow:-30px 0 70px -34px rgba(14,17,21,.62);
border-left-color:var(--rule-lit);
}
/* ==== TILE POLISH ==== */
/* ── DESTINATION TILES, FINISHED ─────────────*/
.dest{
--tile-r:clamp(16px,1.5vw,22px);
border-radius:var(--tile-r);
aspect-ratio:4/3;
isolation:isolate;
transition:transform .5s var(--ease-reveal),
box-shadow .5s var(--ease-reveal);
}
.dest .plate{border-radius:inherit}
/* A photograph on a light ground has no edge of its own. A one-pixel inset
highlight gives the tile a lip without adding a border that would read as a
frame. */
.dest::before{
content:"";position:absolute;inset:0;z-index:4;
border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
inset 0 -1px 0 0 rgba(255,255,255,.06);
}
/* Two stops band across an area this size. Five eased stops do not. */
.dest::after{
height:74%;
border-radius:0 0 var(--tile-r) var(--tile-r);
background:linear-gradient(180deg,
rgba(12,15,19,0) 0%,
rgba(12,15,19,.10) 34%,
rgba(12,15,19,.30) 56%,
rgba(12,15,19,.56) 76%,
rgba(12,15,19,.80) 100%);
}
.dest:hover,.dest:focus-visible{
transform:translateY(-5px);
box-shadow:0 22px 44px -24px rgba(14,17,21,.55);
}
.dest:hover .plate img{transform:scale(1.06)}
.dest .plate img{transition:transform .7s var(--ease-reveal)}
/* -- caption ---------------------------------- */
.dest-meta{
gap:5px;
padding:0 clamp(15px,1.5vw,20px) clamp(14px,1.5vw,19px);
transition:transform .5s var(--ease-reveal);
}
.dest:hover .dest-meta{transform:translateY(-3px)}
.dest-name{
font-size:clamp(1.02rem,.94rem + .42vw,1.28rem);
letter-spacing:-.022em;line-height:1.16;
text-shadow:0 1px 14px rgba(0,0,0,.42);
}
.dest-count{
font-size:9.5px;letter-spacing:.2em;
/* Measured against the lightest tile (Kerala, ground L .131 after the
scrim): .66 gives 3.6:1 on 9.5px text, which fails. .84 gives 4.7:1.
The shadow helps it read but does not count toward the ratio. */
color:rgba(255,255,255,.84);
text-shadow:0 1px 10px rgba(0,0,0,.45);
}
/* -- the affordance --------------------------- */
.dest-go{
top:auto;bottom:clamp(14px,1.5vw,19px);
right:clamp(15px,1.5vw,20px);
width:32px;height:32px;
border-radius:calc(var(--tile-r) * .55);
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
font-size:14px;
transform:translateY(6px) scale(.9);
transition:opacity .45s var(--ease-reveal),
transform .45s var(--ease-reveal),
background .45s var(--ease-reveal);
}
.dest:hover .dest-go,.dest:focus-visible .dest-go{
opacity:1;transform:none;background:rgba(255,255,255,.3);
}
@media (hover:none){.dest-go{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.dest,.dest .plate img,.dest-meta,.dest-go{transition:none!important}
.dest:hover{transform:none}
.dest:hover .plate img{transform:none}
.dest:hover .dest-meta{transform:none}
}
/* ==== TIMED POPUP ==== */
/* ── TIMED POPUP ─────────────────────────────
Centred, photograph first, two fields. It interrupts, so it has to be worth
the interruption in about two seconds - which means an image and a promise,
not a form header. */
.pop-scrim{
position:fixed;inset:0;z-index:100;
background:rgba(14,17,21,.52);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity var(--dur-ui) var(--ease-ui);
}
.pop-scrim.is-on{opacity:1}
.pop{
position:fixed;z-index:110;
left:50%;top:50%;
width:min(414px,calc(100vw - 32px));
max-height:calc(100vh - 40px);overflow-y:auto;
background:var(--surface);
border-radius:clamp(16px,1.5vw,22px);
box-shadow:0 40px 90px -40px rgba(14,17,21,.6);
transform:translate(-50%,-46%) scale(.97);
opacity:0;
transition:opacity .34s var(--ease-reveal),transform .34s var(--ease-reveal);
}
.pop.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pop-close{
position:absolute;top:10px;right:10px;z-index:3;
width:32px;height:32px;border:0;border-radius:var(--r-pill);
background:rgba(14,17,21,.42);color:#fff;cursor:pointer;
font-size:21px;line-height:1;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background var(--dur-ui) var(--ease-ui);
}
.pop-close:hover{background:rgba(14,17,21,.62)}
.pop-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pop-art{
aspect-ratio:16/7;overflow:hidden;
border-radius:clamp(16px,1.5vw,22px) clamp(16px,1.5vw,22px) 0 0;
background:var(--paper-2);
}
.pop-art img{width:100%;height:100%;object-fit:cover;display:block}
.pop-body{padding:clamp(18px,2vw,24px)}
.pop-body h2{
font-size:clamp(1.24rem,1.05rem + .6vw,1.6rem);
line-height:1.16;margin:4px 0 7px;
}
.pop-sub{
margin:0 0 15px;font-size:var(--t-sm);color:var(--dim);
line-height:1.55;text-wrap:pretty;
}
.pop-form .field{margin-bottom:9px}
.pop-form .field input{width:100%}
.pop-send{width:100%;height:46px;margin-top:3px}
.pop-fine{
margin:9px 0 0;font-size:var(--t-xs);color:var(--faint);
line-height:1.45;text-align:center;
}
.pop-sent{
display:none;margin:11px 0 0;padding:11px 13px;
border-radius:var(--r-sm);background:rgba(64,89,106,.10);
font-size:var(--t-sm);color:var(--temple);line-height:1.5;
}
.pop-form.is-sent .pop-sent{display:block}
.pop-form.is-sent .field,
.pop-form.is-sent .pop-send,
.pop-form.is-sent .pop-fine{display:none}
/* -- enquiry submission: the failure state -----------------------------------
The forms post to /contact/store. A rejected submission (validation, network,
server) has to say so in place, or the visitor retypes into a form that looks
like it is working. Shown by script setting .has-error on the form. */
.enq-err,.pop-err{
display:none;margin:10px 0 0;font-size:var(--t-sm);line-height:1.5;
color:#8C2F1E;background:#FBEDE8;border:1px solid #E9C7BB;
border-radius:var(--r-sm);padding:9px 11px;
}
.enq-panel-form.has-error .enq-err,
.pop-form.has-error .pop-err{display:block}
.enq-send[aria-busy="true"],.pop-send[aria-busy="true"]{opacity:.6;pointer-events:none}
.pop-wa{
display:block;margin-top:12px;padding-top:12px;
border-top:1px solid var(--rule);
text-align:center;text-decoration:none;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;color:var(--temple);
}
.pop-wa:hover{text-decoration:underline;text-underline-offset:3px}
.pop-wa:focus-visible{outline:2px solid var(--temple);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
.pop,.pop-scrim{transition:none}
.pop{transform:translate(-50%,-50%)}
}
/* ==== MOBILE ==== */
/* ── PHONE HYGIENE ───────────────────────────*/
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(64,89,106,.16)}
/* iOS zooms the whole page when a focused control is under 16px. Every input
on this site was 13px, so tapping any field jumped the layout. */
@media (pointer:coarse),(max-width:900px){
input,select,textarea{font-size:16px!important}
.hsearch-field select,.hsearch-field input{font-size:16px!important}
}
/* ── TAP TARGETS ─────────────────────────────
Keyed on the pointer, not the viewport: a 768px tablet is still a finger. */
@media (pointer:coarse),(max-width:900px){
nav.site-header .nav-links a{
min-height:44px;display:inline-flex;align-items:center;
padding-top:0;padding-bottom:0;
}
nav.site-header .nav-links{gap:20px}
.brand{min-height:44px;align-items:center}
nav.site-header .phone{
min-width:44px;min-height:44px;
display:inline-flex;align-items:center;justify-content:center;
}
.search-btn{width:44px;height:44px}
nav.site-header .cta{min-height:44px}
/* pagination, filter rows, footer links and the card arrow all get a real
finger-sized box without changing how they look */
.pager a,.pager span{min-width:44px;min-height:44px;
display:inline-flex;align-items:center;justify-content:center}
.fopt{min-height:40px;display:flex;align-items:center}
footer li a{display:inline-block;padding:6px 0}
.crumb a{display:inline-block;padding:4px 0}
.tabs button{min-height:44px}
.backlink{display:inline-block;padding:8px 0}
.dest-go{width:36px;height:36px}
}
/* ── SMALL TEXT ──────────────────────────────
12px floor for anything that is read. Uppercase micro-labels are exempt:
they are labels, and enlarging them breaks the rows they sit in. */
@media (max-width:900px){
.card-inc{font-size:12px}
.specs dd small{font-size:11.5px}
.amount-note{font-size:12px}
.enq-steps li,.enq-assure span,.enq-hours,.pop-fine{font-size:12px}
.card p,.dx-days{font-size:13px}
}
/* ── LAYOUT ON A PHONE ───────────────────────*/
@media (max-width:620px){
/* the booking rail must not stick: on a short screen it would sit over the
itinerary the reader is trying to get through */
.rail{position:static!important}
.book{padding:18px}
/* the hero search stacks; a two-up date and destination is unusable at this
width */
.hsearch{grid-template-columns:1fr;max-width:none}
.hsearch-field{padding:10px 14px}
.hsearch-go{height:48px}
/* the spec strip becomes two columns rather than a squeezed six */
.specs{grid-template-columns:1fr 1fr}
.specs div{padding:14px 12px 14px 0}
/* panels take the full width and scroll under their own momentum */
.enq-panel{width:100vw;-webkit-overflow-scrolling:touch}
.pop{width:calc(100vw - 24px)}
.pop-art{aspect-ratio:16/9}
/* the inclusions list and the day fields read better stacked */
.inx{grid-template-columns:1fr}
.bform .row{grid-template-columns:1fr}
}
/* the enquiry tab must clear the WhatsApp/scroll affordances at the bottom */
@media (max-width:620px){
.enq-tab{bottom:16px;right:16px;box-shadow:0 8px 24px -8px rgba(14,17,21,.6)}
}
/* ==== MOBILE PASS 2 ==== */
/* Remaining targets from the second audit: heights were fixed, widths and a
handful of specific controls were not. */
@media (pointer:coarse),(max-width:900px){
/* "Home" is 37px of text. The link needs to be 44 regardless. */
nav.site-header .nav-links a{min-width:44px;justify-content:center}
/* the hero search: the control was 24px tall inside a taller field */
.hsearch-field{padding:6px clamp(12px,1.4vw,16px) 8px}
.hsearch-field select,.hsearch-field input{min-height:36px}
/* Carousel dots are 3px tall by design. Padding gives them a finger-sized
hit area while background-clip keeps them looking like 3px rules. */
.hero-dots button{
height:26px;min-width:44px;padding:11px 0;
background-clip:content-box;
}
.hero-dots button[aria-selected="true"]{min-width:52px}
/* breadcrumbs, the WhatsApp button and filter rows */
.crumb a,.crumb li{min-height:44px;display:inline-flex;align-items:center;padding:0}
.wa{min-height:44px;font-size:13px}
.fopt{min-height:44px}
.fopt input[type="checkbox"]{width:20px;height:20px}
.card-go{width:34px;height:34px}
}
/* the spec sub-labels were left at 11.5px; the floor is 12 */
@media (max-width:900px){
.specs dd small{font-size:12px}
.book .assure,.enq-or p,.pop-wa{font-size:12px}
}
/* ==== MOBILE PASS 3 ==== */
@media (pointer:coarse),(max-width:900px){
/* height on a border-box element swallowed the padding, so the dots stayed
26px tall; min-height lets the padding do its job */
.hero-dots button{height:auto;min-height:44px}
.hsearch-field select,.hsearch-field input{min-height:44px}
.crumb a,.crumb li{min-width:44px;justify-content:center}
footer li a{min-height:44px;display:inline-flex;align-items:center;padding:0}
/* .wa and the rail links sit in a column, so they take the full width and a
full-height box */
.wa,.enq-chan,.backlink{min-height:44px;display:flex;align-items:center;justify-content:center}
}
/* ==== MOBILE PASS 4 ==== */
@media (pointer:coarse),(max-width:900px){
/* a short footer label ("FAQs") is still a 44px target */
footer li a{min-width:44px}
/* every tel: link on the site, wherever it sits */
a[href^="tel:"]{min-height:44px;display:inline-flex;align-items:center}
}
/* ==== MOBILE HEADER ==== */
/* The compact pass set `.masthead{height:clamp(62px,7vh,78px)}` globally, which
came after the wrapped-header rule and re-imposed a fixed height on it. The
mobile masthead wraps to three rows and needs ~180px, so its content spilled
out of a 67px box and landed on top of the page: the nav strip was sitting
over the hero headline and over the breadcrumb on every inner page.
Measured at 390px before the fix - nav box 67px tall, nav links at 122-168,
page h1 at 150. */
@media (max-width:1080px){
.masthead{height:auto!important}
}
/* Three rows is too much of a phone screen to spend on chrome. The header
search goes - there is a search on the tours page and one in the hero - so
the logo and the controls share one row and the nav strip takes the second.
That is ~104px instead of ~183px. */
@media (max-width:620px){
nav.site-header .search{display:none}
.brand img{height:26px}
.masthead{padding-top:10px;padding-bottom:8px;row-gap:6px}
nav.site-header .cta{padding:0 16px;font-size:13px}
.nav-links{gap:16px}
.nav-links a{font-size:14px}
}
/* Content has to start below a header whose height now varies with wrapping. */
@media (max-width:620px){
/* header measures 119-121px at 390px; these leave a comfortable gap rather
than the 5px the first pass left on inner pages */
.hero{padding-top:146px}
.phead{padding-top:140px}
.thero{padding-top:142px}
.rail{top:auto}
}
@media (min-width:621px) and (max-width:1080px){
.hero{padding-top:150px}
.phead{padding-top:140px}
.thero{padding-top:142px}
}
/* ── CAROUSEL DOTS ───────────────────────────
min-height on the button made the bar itself 22px tall. The button is now
the invisible 44px target and a pseudo-element draws the 3px rule. */
.hero-dots button{
background:none!important;
display:grid;place-items:center;
padding:0;height:auto;
}
.hero-dots button::before{
content:"";display:block;
width:26px;height:3px;border-radius:2px;
background:rgba(255,255,255,.34);
transition:background var(--dur-ui) var(--ease-ui),width var(--dur-ui) var(--ease-ui);
}
.hero-dots button:hover::before{background:rgba(255,255,255,.6)}
.hero-dots button[aria-selected="true"]::before{background:#fff;width:40px}
@media (pointer:coarse),(max-width:900px){
.hero-dots button{min-height:44px;min-width:44px}
.hero-dots button::before{width:20px}
.hero-dots button[aria-selected="true"]::before{width:30px}
}
/* ==== MOBILE HEADER 2 ==== */
/* Hiding the search was not enough: the logo plus the phone plus the CTA still
exceeded 350px of usable width at 390px, so row one wrapped and the header
stayed three rows / 165px. The phone number lives in the enquiry panel, the
footer and the contact page, so it comes out of the bar on a phone. Two rows,
~114px. */
@media (max-width:620px){
nav.site-header .phone{display:none}
.brand img{height:24px}
nav.site-header .cta{padding:0 14px;gap:6px}
.masthead{gap:10px}
}
/* ==== MOBILE DEEP FIXES ==== */
/* From the all-pages audit. */
/* 1. The in-page contents lists on the eight static pages ("Who we are",
"How we work") are navigation, not prose, so they are targets. 21px tall
before this. */
@media (pointer:coarse),(max-width:900px){
.prose ul li > a:only-child,
.prose ol li > a:only-child{
min-height:44px;display:flex;align-items:center;
}
}
/* 2. The itinerary tabs sat 4px apart, which is inside the accidental-tap
range. Measured at 390px: 20-106, 110-205, 209-285. */
@media (pointer:coarse),(max-width:900px){
.tabs{gap:10px}
.tabs button{padding-left:12px;padding-right:12px}
}
/* 3. In the header the search button and the phone link were 5px apart at
tablet width, where both are still shown. */
@media (min-width:621px) and (max-width:1080px){
.nav-end{gap:12px}
}
/* 4. At tablet width the prose has no column constraint, so paragraphs were
running 91-105 characters. Anything past about 75 costs the reader the
start of the next line. */
@media (min-width:621px) and (max-width:1080px){
/* Measured: max-width:60ch on .phead .lede resolved to 657px and rendered 82
characters. CSS `ch` is the width of "0", which in DM Sans is about 0.68em
while an average lowercase character is about 0.5em - so a ch value
overstates the line length by roughly a third. Set in em instead, where
34em is about 68 characters and means what it says. */
.prose p,.prose li,.pop-sub,.enq-steps li{max-width:34em}
.lede,.sintro,.phead .lede{max-width:32em}
}
/* ==== MOBILE DEEP FIXES 2 ==== */
/* The contents list is in aside.rail > .toc, not in .prose, so the earlier
selector never matched it. These are navigation links, 21px tall. */
@media (pointer:coarse),(max-width:900px){
.toc li a{min-height:44px;display:flex;align-items:center}
/* the sort control came out 42px - two short of the target minimum */
.sortwrap select{height:44px}
}
/* ==== MEASURE ==== */
/* The promise blocks have no measure of their own. On a desktop the three-up
grid supplies one; the moment it collapses to a single column at 820px they
run the full width - 681px, about 105 characters. */
@media (max-width:1080px){
.promise p{max-width:34em}
}
/* ==== NO WHATSAPP / SOLID WRAPPED HEADER ==== */
/* ── WRAPPED HEADER NEEDS A GROUND ───────────
Transparent over the hero, the bar relies on nav.site-header::before, a
gradient that is strong at the top and thin at the bottom. That is right
behind a single row. Below 1080px the masthead wraps to two or three rows,
the bottom row sits where the gradient has faded out, and hero text passing
under the fixed header shows straight through the nav links. */
@media (max-width:1080px){
nav.site-header::before{
background:linear-gradient(180deg,
rgba(10,13,17,.88) 0%,
rgba(10,13,17,.86) 62%,
rgba(10,13,17,.82) 100%);
inset:0;
}
}
/* the phone link that replaces WhatsApp in the contact block */
.enq-tel{
display:inline-flex;align-items:center;gap:9px;
min-height:44px;padding:0 16px;
border:1px solid var(--rule);border-radius:var(--r-sm);
background:var(--surface);text-decoration:none;
font-family:var(--f-b);font-size:var(--t-sm);font-weight:600;color:var(--temple);
transition:border-color var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui);
}
.enq-tel:hover{border-color:var(--temple);background:var(--panel)}
.enq-tel:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
/* ==== FOOTER CREDENTIALS ==== */
/* ── SOCIAL ──────────────────────────────────*/
.fsocial{display:flex;gap:10px;margin-top:clamp(14px,2vh,20px)}
.fsoc{
width:38px;height:38px;border-radius:var(--r-pill);
display:grid;place-items:center;
border:1px solid var(--rule);background:var(--surface);
color:var(--dim);
transition:color var(--dur-ui) var(--ease-ui),
border-color var(--dur-ui) var(--ease-ui),
background var(--dur-ui) var(--ease-ui);
}
.fsoc svg{width:17px;height:17px;fill:currentColor}
.fsoc:hover{color:var(--temple);border-color:var(--temple);background:var(--panel)}
.fsoc:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
@media (pointer:coarse),(max-width:900px){.fsoc{width:44px;height:44px}}
/* ── APPROVALS & REGISTRATIONS ───────────────
A registration number is only worth printing if it can be checked, so each
one carries the register it is checked against. */
.creds{
margin-top:clamp(26px,3.4vw,40px);
padding-top:clamp(22px,2.8vw,32px);
border-top:1px solid var(--rule);
}
.cred-marks{
display:grid;gap:clamp(12px,1.6vw,20px);
grid-template-columns:repeat(2,minmax(0,1fr));
margin-bottom:clamp(14px,1.8vw,20px);
}
@media (max-width:620px){.cred-marks{grid-template-columns:1fr}}
.cred-mark{
border:1px solid var(--rule);border-radius:var(--r);
background:var(--surface);
min-height:104px;padding:18px clamp(16px,2vw,26px);
display:grid;place-items:center;text-align:center;
}
/* stand-ins until the artwork lands */
.cred-word{
font-family:var(--f-d);font-size:clamp(21px,1.1rem + 1.1vw,32px);
font-weight:400;letter-spacing:-.02em;color:var(--text);
}
.cred-word b{color:#C8102E;font-weight:400}
.cred-utdb{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;
color:var(--dim);line-height:1.5;max-width:24ch;
}
.cred-mark img{
/* the two marks are different proportions - a wide wordmark and a compact
lockup - so the slot caps both dimensions and lets each keep its ratio */
max-width:min(100%,240px);max-height:52px;
width:auto;height:auto;display:block;
}
.cred-note{
margin:0 0 7px;font-size:var(--t-xs);color:var(--dim);
line-height:1.65;max-width:none;
}
.cred-note b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cred-note a{color:var(--marigold);text-decoration:none}
.cred-note a:hover{text-decoration:underline;text-underline-offset:3px}
.cred-badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;margin-right:6px;border-radius:var(--r-pill);
border:1px solid rgba(46,125,80,.35);background:rgba(46,125,80,.10);
color:#2E7D50;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:700;
letter-spacing:var(--track-label);text-transform:uppercase;
white-space:nowrap;
}
.cred-badge::before{
content:"";width:9px;height:5px;flex:none;
border-left:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
transform:rotate(-45deg) translateY(-1px);
}
@media (pointer:coarse),(max-width:900px){
.cred-note{font-size:12px}
.cred-note a{min-height:44px;display:inline-flex;align-items:center}
}
/* ==== MOBILE HEADER (<=1080) ==== */
/* One row, ~58px, at every width below the desktop breakpoint. Everything the
old wrapped bar could not fit now lives in the drawer, full size. */
.burger{display:none}
@media (max-width:1080px){
.masthead{
height:auto!important;
flex-wrap:nowrap!important;
padding:9px var(--pad)!important;
gap:10px!important;
row-gap:0!important;
align-items:center;
}
/* these move into the drawer */
nav.site-header .nav-links,
nav.site-header .search,
nav.site-header .phone,
nav.site-header .search-count{display:none!important}
.nav-end{margin-left:auto;gap:8px}
.brand img{height:24px}
nav.site-header .cta{
height:40px;min-height:40px;
padding:0 15px;font-size:13px;gap:5px;
}
nav.site-header .cta .cta-ico{display:none}
.burger{
display:grid;place-items:center;
width:44px;height:44px;flex:none;
border:0;border-radius:var(--r-sm);
background:rgba(255,255,255,.12);cursor:pointer;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background var(--dur-ui) var(--ease-ui);
}
.burger span,
.burger span::before,
.burger span::after{
display:block;width:19px;height:2px;border-radius:2px;
background:#fff;transition:transform var(--dur-ui) var(--ease-ui);
}
.burger span{position:relative}
.burger span::before{content:"";position:absolute;top:-6px}
.burger span::after{content:"";position:absolute;top:6px}
.burger:hover{background:rgba(255,255,255,.2)}
.burger:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* once the bar is solid the burger has to read on a light ground */
nav.site-header.stuck .burger{background:rgba(27,32,39,.08)}
nav.site-header.stuck .burger span,
nav.site-header.stuck .burger span::before,
nav.site-header.stuck .burger span::after{background:var(--text)}
nav.site-header.stuck .burger:hover{background:rgba(27,32,39,.14)}
/* the bar is ~58px now, so the old 140-150px content offsets are wrong */
.hero{padding-top:96px}
.phead{padding-top:92px}
.thero{padding-top:94px}
}
/* ── DRAWER ──────────────────────────────────*/
.drawer-scrim{
position:fixed;inset:0;z-index:80;
background:rgba(14,17,21,.46);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
opacity:0;transition:opacity var(--dur-ui) var(--ease-ui);
}
.drawer-scrim.is-on{opacity:1}
.drawer{
position:fixed;top:0;right:0;bottom:0;z-index:90;
width:min(330px,86vw);
background:var(--paper);border-left:1px solid var(--rule);
box-shadow:-24px 0 60px -30px rgba(14,17,21,.5);
padding:14px 18px 22px;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
transform:translateX(100%);
transition:transform var(--dur-slow) var(--ease-reveal);
}
.drawer.is-on{transform:none}
@media (min-width:1081px){.drawer,.drawer-scrim{display:none!important}}
.drawer-top{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule);
}
.drawer-title{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
.drawer-close{
width:40px;height:40px;border:0;border-radius:var(--r-pill);
background:none;color:var(--faint);cursor:pointer;font-size:26px;line-height:1;
transition:background var(--dur-ui) var(--ease-ui),color var(--dur-ui) var(--ease-ui);
}
.drawer-close:hover{background:var(--panel);color:var(--text)}
.drawer-close:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
.drawer-search{
display:flex;align-items:center;gap:6px;margin-bottom:16px;
border:1px solid var(--rule);border-radius:var(--r-sm);
background:var(--surface);padding:0 4px 0 12px;
}
.drawer-search input{
flex:1;min-width:0;border:0;background:none;
height:46px;font-family:var(--f-b);font-size:16px;color:var(--text);
}
.drawer-search input:focus{outline:none}
.drawer-search:focus-within{border-color:var(--marigold-lit);box-shadow:var(--ring)}
.drawer-search button{
width:38px;height:38px;flex:none;border:0;border-radius:var(--r-sm);
background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;
}
.drawer-search button svg{width:19px;height:19px}
.drawer-search button:hover{color:var(--temple)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{
display:flex;align-items:center;min-height:52px;
font-family:var(--f-b);font-size:var(--t-lg);font-weight:600;
letter-spacing:-.021em;color:var(--text);text-decoration:none;
border-bottom:1px solid var(--rule);
transition:color var(--dur-ui) var(--ease-ui),padding-left var(--dur-ui) var(--ease-ui);
}
.drawer-nav a:hover{color:var(--temple);padding-left:5px}
.drawer-nav a[aria-current="page"]{color:var(--temple)}
.drawer-nav a:focus-visible{outline:2px solid var(--temple);outline-offset:-2px}
.drawer-foot{margin-top:18px}
.drawer-tel{
display:flex;flex-direction:column;gap:2px;
min-height:56px;justify-content:center;
padding:0 14px;border-radius:var(--r-sm);
border:1px solid var(--rule);background:var(--surface);
text-decoration:none;
}
.drawer-tel span{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
.drawer-tel b{font-family:var(--f-b);font-size:var(--t-lg);color:var(--temple);letter-spacing:-.02em}
.drawer-tel:hover{border-color:var(--temple);background:var(--panel)}
.drawer-tel:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
.drawer-hours{margin:8px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
@media (prefers-reduced-motion:reduce){
.drawer,.drawer-scrim{transition:none}
}
/* ==== MOBILE HEADER FIT ==== */
/* Measured at 360px: usable width 320, and logo(192) + gap(10) + nav-end(159)
came to 361 - so a nowrap row overflowed instead of wrapping. The CTA was
also 40px tall, under the target minimum. Budget at 360px is now
logo 176 + gap 10 + CTA 78 + gap 8 + burger 44 = 316. */
@media (max-width:1080px){
nav.site-header .cta{height:44px;min-height:44px}
.brand{flex:0 1 auto;min-width:0}
.brand img{max-width:100%}
}
@media (max-width:420px){
.cta-now{display:none}
.brand img{height:22px}
.masthead{padding-left:16px!important;padding-right:16px!important;gap:8px!important}
.nav-end{gap:7px}
nav.site-header .cta{padding:0 13px}
}
/* ==== MOBILE HEADER REFINEMENT ==== */
/* The burger was a filled grey block sitting next to a solid pill - two chips
of different weight and shape reading as unrelated UI. It becomes a hairline
ring, so the pair reads as one control group: one solid, one outlined. */
@media (max-width:1080px){
.masthead{padding-top:8px!important;padding-bottom:8px!important}
.burger{
background:none;
border:1px solid rgba(255,255,255,.30);
border-radius:var(--r-sm);
transition:border-color var(--dur-ui) var(--ease-ui),
background var(--dur-ui) var(--ease-ui);
}
.burger span,
.burger span::before,
.burger span::after{
width:17px;height:1.5px;
background:#fff;
transition:background var(--dur-ui) var(--ease-ui);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5)}
nav.site-header.stuck .burger{
background:none;
border-color:var(--rule-lit);
}
nav.site-header.stuck .burger span,
nav.site-header.stuck .burger span::before,
nav.site-header.stuck .burger span::after{background:var(--text)}
nav.site-header.stuck .burger:hover{background:var(--panel);border-color:var(--temple)}
/* the pill loses a little weight so it sits with the outlined button rather
than shouting over it - the 44px target is unchanged, only the type */
nav.site-header .cta{
font-size:12.5px;
letter-spacing:.005em;
padding:0 16px;
}
/* the two logo layers crossfade; pinning them to the same grid cell stops
the brief double-image while the transition runs */
.brand{display:grid}
.brand img{grid-area:1/1}
}
/* the drawer marks where you already are */
.drawer-nav a[aria-current="page"]{
color:var(--temple);
position:relative;padding-left:13px;
}
.drawer-nav a[aria-current="page"]::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:3px;height:17px;border-radius:2px;background:var(--marigold-lit);
}
/* ==== HERO SEARCH, COMPACT ==== */
/* Measured at 390px: three stacked rows, 200px tall - 75px per field, of which
16px was a label restating what the control already says and 15px was
padding around it. The labels stay for screen readers; the select's own
first option ("Where are you going?") and the date input's native dd-mm-yyyy
carry the meaning on screen.
Destination takes a full row; the date and the button share the next.
200px -> ~93px, and every control is still 46px tall. */
@media (max-width:620px){
.hsearch{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"dest dest"
"when go";
gap:1px;
max-width:none;
}
.hsearch-field:nth-of-type(1){grid-area:dest}
.hsearch-field:nth-of-type(2){grid-area:when}
.hsearch-go{grid-area:go}
.hsearch-field{
padding:0 14px;
display:flex;align-items:center;
}
/* kept in the accessibility tree, taken out of the layout */
.hsearch-field label{
position:absolute;width:1px;height:1px;
margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
.hsearch-field select,
.hsearch-field input{
height:46px;min-height:46px;
line-height:46px;
}
.hsearch-go{height:46px;padding:0 20px}
}
/* ==== TEAM + NUMBERS ==== */
/* ── THE TEAM ────────────────────────────────*/
.members{display:grid;gap:clamp(26px,3.4vw,48px)}
.member{
display:grid;gap:clamp(16px,2.4vw,32px);
grid-template-columns:132px minmax(0,1fr);
align-items:start;
padding-bottom:clamp(22px,2.8vw,34px);
border-bottom:1px solid var(--rule);
}
.member:last-child{border-bottom:0;padding-bottom:0}
.member-shot{
aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
}
.member-shot img{width:100%;height:100%;object-fit:cover;display:block}
.member-text h3{
font-family:var(--f-b);font-weight:600;
font-size:clamp(1.08rem,.98rem + .5vw,1.35rem);
letter-spacing:-.022em;margin:0;color:var(--text);
}
.member-role{
margin:3px 0 10px;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--marigold);
}
.member-text p{margin:0 0 9px;font-size:var(--t-sm);color:var(--dim);line-height:1.65;max-width:34em}
.member-text p:last-child{margin-bottom:0}
@media (max-width:620px){
.member{grid-template-columns:1fr;gap:14px}
.member-shot{width:104px}
}
/* the portrait crop on the About page cards */
.team-plate{aspect-ratio:1/1}
.team-card .card-loc{color:var(--faint);margin-top:2px}
/* ── NUMBER LISTS ────────────────────────────*/
.tel-list{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:4px}
.tel-list a{
display:flex;align-items:center;min-height:44px;
font-family:var(--f-b);font-size:var(--t-lg);font-weight:600;
color:var(--temple);text-decoration:none;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
.tel-list a:hover{text-decoration:underline;text-underline-offset:3px}
.tel-list a:focus-visible{outline:2px solid var(--temple);outline-offset:2px;border-radius:var(--r-sm)}
.drawer-tel-lbl{
display:block;margin-bottom:6px;
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);
}
.drawer-tel{
display:flex;align-items:center;min-height:48px;margin-bottom:6px;
padding:0 14px;border-radius:var(--r-sm);
border:1px solid var(--rule);background:var(--surface);text-decoration:none;
}
.drawer-tel b{
font-family:var(--f-b);font-size:var(--t-b);font-weight:600;
color:var(--temple);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.drawer-tel:hover{border-color:var(--temple);background:var(--panel)}
.drawer-tel:focus-visible{outline:2px solid var(--temple);outline-offset:2px}
/* ==== MOBILE FOOTER + WHATSAPP ==== */
/* ── FOOTER ON A PHONE ───────────────────────
1907px tall at 390px: one column, 44px rows with a 12px gap on top of them.
Two columns and flush rows instead. */
@media (max-width:760px){
.fgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:26px 20px;
}
/* the newsletter needs the full width; the three link groups pair up */
.fgrid > div:first-child{grid-column:1 / -1}
footer h5{margin-bottom:6px}
.fgrid ul{gap:0}
.fgrid li + li{border-top:1px solid var(--rule)}
footer li a{
min-height:44px;width:100%;
font-size:13.5px;
align-items:center;
}
.fmark{margin-bottom:22px}
footer{padding-bottom:22px}
.creds{margin-top:22px;padding-top:18px}
.cred-mark{min-height:78px;padding:14px}
.legal{flex-direction:column;gap:4px;text-align:left}
}
/* Below 400px two equal columns would be 154px each, and "Char Dham Yatra from
Haridwar" wraps to three lines in that. So only the two groups with short
labels pair up; the tours list keeps the full width. */
@media (max-width:400px){
.fgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-areas:
"news news"
"tours tours"
"about legal";
}
.fgrid > div:nth-child(1){grid-area:news}
.fgrid > div:nth-child(2){grid-area:tours}
.fgrid > div:nth-child(3){grid-area:about}
.fgrid > div:nth-child(4){grid-area:legal}
}
/* ── WHATSAPP ────────────────────────────────
Alongside the enquiry tab, not instead of it. */
.wa-fab{
position:fixed;z-index:70;
right:14px;bottom:18px;
width:52px;height:52px;border-radius:var(--r-pill);
display:grid;place-items:center;
background:#25D366;color:#fff;
box-shadow:0 8px 22px -8px rgba(14,17,21,.55);
transition:transform var(--dur-ui) var(--ease-ui),
box-shadow var(--dur-ui) var(--ease-ui);
}
.wa-fab svg{width:27px;height:27px;fill:currentColor}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(14,17,21,.6)}
.wa-fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* on a phone the enquiry pill already owns the bottom corner, so WhatsApp
stacks directly above it */
@media (max-width:620px){
.wa-fab{bottom:74px;right:16px;width:50px;height:50px}
.wa-fab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}
/* ==== ENQUIRY TAB ICON ==== */
/* On a phone the enquiry control sat under the WhatsApp circle as a wide word
pill - two buttons of different shape and weight doing the same job. It
becomes a matching circle with an envelope, so the pair reads as one stack.
The word stays on wider screens, where the vertical tab has room for it, and
the accessible name is on the button either way. */
.enq-tab-ico{display:none}
@media (max-width:620px){
.enq-tab{
width:50px;height:50px;padding:0;
border-radius:var(--r-pill);
display:grid;place-items:center;
bottom:16px;right:16px;
}
.enq-tab-txt{display:none}
.enq-tab-ico{
display:block;width:24px;height:24px;
color:#fff;
}
/* the two now stack as equals */
.wa-fab{bottom:76px;right:16px}
}
/* ==== NAV DROPDOWN ==== */
/* Destinations is a dropdown in the live menu, so the ported header keeps it
as one. Without these rules the submenu renders as a flat expanded list on
top of the header, which is what it did on the first deploy. */
.nav-links .has-sub{position:relative}
.nav-links .subnav{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
min-width:236px;margin:0;padding:7px;list-style:none;z-index:70;
background:var(--surface);
border:1px solid var(--rule);border-radius:var(--r);
box-shadow:0 18px 44px -22px rgba(14,17,21,.45);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-ui) var(--ease-ui),
transform var(--dur-ui) var(--ease-ui),
visibility var(--dur-ui);
}
.nav-links .has-sub:hover > .subnav,
.nav-links .has-sub:focus-within > .subnav{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.nav-links .has-sub::after{
content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}
.nav-links .subnav li{margin:0}
.nav-links .subnav a{
display:flex;align-items:center;min-height:38px;
padding:0 12px;border-radius:var(--r-sm);
font-family:var(--f-b);font-size:var(--t-sm);font-weight:500;
color:var(--dim)!important;text-shadow:none!important;white-space:nowrap;
}
.nav-links .subnav a::after{display:none}
.nav-links .subnav a:hover{background:var(--panel);color:var(--temple)!important}
/* the drawer shows the same destinations as indented rows rather than a menu */
.drawer-nav .drawer-sub{
min-height:44px;padding-left:14px;
font-size:var(--t-b);font-weight:500;color:var(--dim);
position:relative;
}
.drawer-nav .drawer-sub::before{
content:"";position:absolute;left:0;top:50%;width:6px;height:1px;
background:var(--rule-lit);
}
.drawer-nav .drawer-sub:hover{color:var(--temple);padding-left:18px}
/* below the desktop breakpoint the dropdown never opens - the drawer has it */
@media (max-width:1080px){.nav-links .subnav{display:none}}
/* -- contact page -------------------------------------------------------------
Two columns: the form, and the things a visitor checks before they trust a
form - who the company actually is, and the numbers that reach a person. */
.cgrid{
display:grid;gap:clamp(26px,3.4vw,54px);
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;
}
.cform .field{margin-bottom:13px}
.cform textarea{
width:100%;min-height:132px;resize:vertical;font:inherit;font-size:var(--t-b);
color:var(--text);background:var(--surface);border:1px solid var(--rule-lit);
border-radius:var(--r-sm);padding:11px 13px;
transition:border-color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui);
}
.cform textarea:focus{outline:none;border-color:var(--marigold-lit);box-shadow:var(--ring)}
.cform .btn{margin-top:4px}
.cform .enq-sent{margin-top:14px}
.cform.is-sent .field,
.cform.is-sent .btn,
.cform.is-sent .cfine{display:none}
.cform.is-sent .enq-sent{display:block}
.cfine{margin:12px 0 0;font-size:var(--t-sm);color:var(--faint);line-height:1.6;max-width:34em}
.cdetail{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
padding:clamp(20px,2.4vw,30px);
}
.cdetail + .cdetail{margin-top:16px}
.cdetail h3{
font-family:var(--f-b);font-size:var(--t-2xs);font-weight:600;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);margin:0 0 12px;
}
.cdetail address{font-style:normal;color:var(--dim);font-size:var(--t-sm);line-height:1.7}
.cdetail .cname{display:block;color:var(--text);font-weight:600;margin-bottom:4px}
/* --t-2xs is 10px, below the 12px floor these lines have to clear: they carry
the registration numbers and the WhatsApp link, which people read and tap. */
.creg{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--rule);
font-size:var(--t-sm);color:var(--faint);line-height:1.85;font-variant-numeric:tabular-nums}
.creg b{color:var(--dim);font-weight:600}
/* an inline link in a one-line paragraph is only as tall as its text, so give
it a tappable box of its own without disturbing the line */
.creg a{
display:inline-block;padding:11px 6px;margin:-11px -6px;color:var(--temple);
text-underline-offset:3px;
}
/* measured: 13px text on a 1.85 line-box is ~24px, so 11px each side clears
the 44px minimum with the negative margin keeping the line where it was */
@media (max-width:860px){
.cgrid{grid-template-columns:1fr}
}
/* -- account forms ------------------------------------------------------------
The login and registration forms are the module's own markup and are left as
they are. Their two smallest controls - the "remember me" label and the
password-reset link - measure 24px tall, below the 44px a finger needs, so
they get a taller box without moving anything around them. */
.bravo-form-login label[for="remember-me"],
.bravo-form-login .form-group > .d-flex > a{
display:inline-flex;align-items:center;min-height:44px;
}
/* -- reveal failsafe ----------------------------------------------------------
Everything with .rise starts at opacity:0 and is revealed by script. If the
script never runs - disabled, blocked, or site.js failed to load - that is a
blank page, not a degraded one.
The layout stamps .cmt-js on from an inline script in the head, and
clears it again from the script tag's onerror. So the hidden state applies
only once the script that undoes it is known to be there. */
html:not(.cmt-js) .rise,
html:not(.cmt-js) .rise .cards > *,
html:not(.cmt-js) .rise .posts > *,
html:not(.cmt-js) .rise .dests > *,
html:not(.cmt-js) .rise .related > *{
opacity:1;transform:none;transition:none;will-change:auto;
}