/* =====================================================================
SKY COMPANION — design system
---------------------------------------------------------------------
Identity sampled from the company's own logo: the teal of the orbit
(#228bb3) and the near-black of the aeroplane (#060606). Teal is the ONE
accent and it is reserved for the primary action, so a page never has two
things shouting at once.
Everything below sits on an 8px rhythm. Every gap, pad and margin is a
step on that scale — that is what makes a grid read as "even" rather than
approximately even, and it is the single biggest difference between a
page that looks designed and one that looks assembled.
Every width query is `screen and (...)`. A bare one also matches PRINT,
and A4 is ~794 CSS px, so a bare max-width rule fires inside saved PDFs.
The print block stays LAST so nothing can win a cascade tie against it.
===================================================================== */
/* Self-hosted, and not optional. Both families were named in the stack with no
@font-face and no behind them, so every visitor without them already
installed — which is every visitor — was reading the page in Georgia and
Segoe UI. Two variable fonts subset to Latin, 178 KB for the pair. */
@font-face{font-family:'Inter';src:url('assets/fonts/Inter.woff2') format('woff2-variations'),
url('assets/fonts/Inter.woff2') format('woff2');
font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/Playfair.woff2') format('woff2-variations'),
url('assets/fonts/Playfair.woff2') format('woff2');
font-weight:400 900;font-style:normal;font-display:swap}
:root{
/* — palette — */
--ink:#0f1719; --ink-2:#16262c; --ink-3:#1c3a45;
--brand:#228bb3; --brand-2:#3fa8ce; --brand-deep:#17708f; --brand-wash:#eaf4f8;
--paper:#f6f8fa; --card:#fff; --line:#e3e9ed; --line-2:#c9d4db;
--body:#41505c; --body-2:#71808d; --on-ink:#eef4f7; --on-ink-2:#adc2ce;
--ok:#1e7a5a; --danger:#b0402c;
/* — 8px spacing scale: the whole page is built from these — */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
/* — fluid type scale — */
--t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-base:16px; --t-lg:17.5px;
--t-xl:clamp(20px,2.2vw,23px);
--t-2xl:clamp(25px,3.2vw,33px);
--t-3xl:clamp(31px,4.4vw,44px);
--t-4xl:clamp(36px,5.6vw,58px);
/* — elevation: three steps, never more — */
--e1:0 1px 2px rgba(15,23,25,.06);
--e2:0 8px 20px -12px rgba(15,23,25,.28);
--e3:0 24px 48px -28px rgba(15,23,25,.45);
--r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
--gutter:clamp(18px,4vw,32px);
--maxw:1220px;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--display:'Playfair Display',Georgia,'Times New Roman',serif;
--ease:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--body);
font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.14;letter-spacing:-.012em}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:780px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:99;background:var(--ink);color:#fff;padding:var(--s3) var(--s5);border-radius:var(--r-sm)}
/* ---------- shared atoms ---------- */
.eyebrow{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--brand-deep);margin-bottom:var(--s3)}
.lead{font-size:var(--t-lg);line-height:1.6;max-width:64ch}
.fine{font-size:var(--t-sm);color:var(--body-2)}
.prose p+p{margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:48px;padding:var(--s3) var(--s5);border:1.5px solid transparent;border-radius:var(--r-sm);
font-size:var(--t-md);font-weight:650;cursor:pointer;letter-spacing:.01em;white-space:nowrap;
background:var(--ink);color:#fff;box-shadow:var(--e1);
transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--e2)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-sm{min-height:44px;padding:var(--s2) var(--s4);font-size:var(--t-sm)}
.btn.full{width:100%}
/* ---------- header ----------
White, because the logo is teal AND black: on a dark bar the aeroplane
vanishes. The bar is 92px so the supplied lockup can run at 180px wide and
keep its strapline legible; on the dark footer the same file sits on a white
plate rather than being swapped for a flattened white silhouette. */
/* Solid, not translucent. A blurred bar looks clever until a white card scrolls
under it and the whole header goes milky and uneven. */
.site-head{background:#fff;position:sticky;top:0;z-index:40;
border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,25,.04);
transition:box-shadow .25s var(--ease)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:92px;
transition:min-height .25s var(--ease)}
/* Once the page has moved, the bar gives its height back to the content. The
logo shrinks with it so the lockup keeps its proportions rather than being
squeezed by a shorter box. */
.site-head.scrolled .head-in{min-height:66px}
.site-head.scrolled .brand-full{width:140px}
.site-head.scrolled{box-shadow:0 6px 22px -14px rgba(15,23,25,.45)}
/* The lockup carries the name and the strapline itself, so there is no text
beside it — the negative margin pulls the file's own white border back to the
page's left edge so the mark lines up with the content below it. */
.brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0}
.brand-full{width:180px;height:auto;flex:none;margin-left:-11px;
transition:width .25s var(--ease)}
.nav{display:flex;align-items:center;gap:var(--s6)}
.nav a{font-size:var(--t-md);font-weight:600;color:var(--body);position:relative;padding:var(--s2) 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav .btn::after{display:none}
/* Padding is restated here on purpose: `.nav a` is more specific than `.btn-sm`,
so it was zeroing the button's side padding and "Call us" came out in a 47px
box with the words touching both edges. */
.nav .btn{color:#fff;flex:none;padding:var(--s2) var(--s4)}
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;
flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .24s var(--ease-out),opacity .18s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Height, not display, so the drawer can move. visibility comes off with it so
the links are not reachable by keyboard while the drawer is shut. */
.mobile-nav{display:flex;flex-direction:column;background:#fff;overflow:hidden;
max-height:0;visibility:hidden;
transition:max-height .3s var(--ease-out),visibility 0s linear .3s}
.mobile-nav a{padding:var(--s4) var(--gutter);color:var(--ink);font-weight:600;
border-bottom:1px solid var(--line);min-height:52px;display:flex;align-items:center}
.mobile-nav a:hover{background:var(--brand-wash);color:var(--brand-deep)}
.mobile-nav.open{max-height:320px;visibility:visible;transition-delay:0s}
/* ---------- imagery ----------
One aspect ratio everywhere. A fixed 16:10 frame plus width/height on the
![]()
reserves the space before the photograph arrives, so a grid never
shifts under a reader's thumb as images load.
display:block matters: these wrappers are s inside a card's , and
an inline box ignores aspect-ratio, collapsing the frame to nothing. */
.ph{display:block;position:relative;overflow:hidden;background:#dde6eb;aspect-ratio:16/10}
.ph picture,.ph img{width:100%;height:100%;object-fit:cover}
.ph img{transition:transform .6s var(--ease-out)}
.ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(15,23,25,.68) 0%,rgba(15,23,25,.12) 55%,transparent 100%)}
.ph-label{display:block;position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s3);z-index:2;color:#fff}
.ph-label strong{display:block;font-family:var(--display);font-size:22px;line-height:1.1;letter-spacing:-.01em}
.ph-label span{display:block;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
color:var(--brand-2);font-weight:700;margin-top:var(--s1)}
.ph-badge{position:absolute;top:var(--s3);right:var(--s3);z-index:2;background:rgba(255,255,255,.95);
color:var(--ink);font-size:var(--t-sm);font-weight:700;padding:var(--s1) var(--s3);border-radius:var(--r-pill);
box-shadow:var(--e1)}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--on-ink);background:var(--ink);
padding-block:clamp(var(--s8),12vw,var(--s10))}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture,.hero-bg img{width:100%;height:100%;object-fit:cover}
/* Two layers, not one. The photograph is a floodlit night scene full of white
marble and ihram, so a single diagonal wash left it hazy and the body copy
sat at borderline contrast. A flat darkening pass underneath fixes the
overall level; the diagonal on top keeps the right-hand side open so the
picture still reads as a picture. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
background:
linear-gradient(100deg,rgba(8,14,16,.95) 0%,rgba(8,14,16,.88) 34%,rgba(8,14,16,.55) 62%,rgba(8,14,16,.2) 100%),
linear-gradient(rgba(8,14,16,.28),rgba(8,14,16,.28))}
.hero-bg img{filter:saturate(1.12) contrast(1.06)}
/* .wrap centres a 1220px column. Capping .hero-in itself re-centred that smaller
box, so the headline floated in the middle of the screen lining up with
nothing — not the logo above it, not the section headings below. The column
stays full width and the MEASURE is capped on the type instead. */
.hero-in{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:var(--s4);max-width:15ch}
.hero .lead{color:var(--on-ink-2);max-width:52ch}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-block:var(--s6) var(--s7)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
/* Held to the dark side of the frame. Run full width and the last two figures
land on floodlit white marble, where a grey uppercase label is unreadable. */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);
border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s5);max-width:820px}
.hero-stats strong{display:block;font-family:var(--display);font-size:28px;color:#fff;line-height:1.1}
.hero-stats span{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--on-ink-2);margin-top:var(--s1)}
.page-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);
padding-block:var(--s7)}
.page-hero.has-bg{padding-block:clamp(var(--s7),9vw,var(--s9))}
.page-hero.has-bg::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(102deg,rgba(15,23,25,.94) 0%,rgba(15,23,25,.82) 46%,rgba(15,23,25,.48) 100%)}
.page-hero .hero-in{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:18ch}
.page-hero .lead{color:var(--on-ink-2);margin-top:var(--s3);max-width:56ch}
/* breadcrumbs: small, quiet, and they double as the visible half of the schema */
.crumbs{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--s2);
font-size:var(--t-sm);color:var(--on-ink-2);margin-bottom:var(--s3)}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
/* ---------- trust bar ---------- */
.trust{background:var(--ink-2);color:var(--on-ink-2);padding-block:var(--s5)}
.trust-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);text-align:center}
.trust b{display:block;color:#fff;font-family:var(--display);font-size:21px;line-height:1.2}
.trust span{display:block;font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;margin-top:var(--s1)}
/* ---------- sections ----------
A page of identical white cards on identical pale grey reads as a component
library, not a design. The rhythm comes from the CONTAINER changing weight —
light, white, then a dark band — while the cards inside stay consistent.
Padding is tighter than it was: 96px between sections left a screen of dead
air on a laptop, which reads as unfinished rather than generous. */
.section{padding-block:clamp(var(--s7),6vw,var(--s8))}
.section.alt{background:#fff}
.section.wash{background:var(--brand-wash)}
/* the dark band: one per page, used where the message is about trust */
.section.dark{background:var(--ink);color:var(--on-ink-2)}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .eyebrow{color:var(--brand-2)}
.section.dark .tile{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:none}
.section.dark .tile:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-3px)}
.section.dark .tile p{color:var(--on-ink-2)}
.section.dark .tile-ico{background:rgba(34,139,179,.22);color:var(--brand-2)}
.section.dark .step::before{color:var(--brand-2);opacity:.45}
.section.dark .step p{color:var(--on-ink-2)}
.sec-head{max-width:66ch;margin-bottom:var(--s6)}
.sec-head.centre{margin-inline:auto;text-align:center}
/* Heading left, body right, both starting on the page's own left edge. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s7) var(--s8);
align-items:start}
.split .sec-head{margin-bottom:0}
.sec-head p{margin-top:var(--s3)}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);
flex-wrap:wrap;margin-bottom:var(--s7)}
.sec-head-row .sec-head{margin-bottom:0}
/* ---------- grids: equal columns, equal gaps, equal heights ---------- */
.grid{display:grid;gap:var(--s5);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0} /* the fix for a long word forcing a column wider than its share */
/* The icon sits BESIDE the heading rather than floating above it. Stacked, the
tile grew tall and hollow — a small mark, a gap, then text stranded at the
bottom of a box. Beside it, the tile is the height of its content. */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:var(--s5);display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);
align-content:start;box-shadow:var(--e1);
transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease),background .22s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--line-2)}
.tile-ico{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--brand-wash);color:var(--brand-deep);flex:none;grid-row:span 2}
.tile-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.tile h3{align-self:center;font-size:var(--t-lg)}
.tile p{font-size:var(--t-md);grid-column:2}
/* numbered steps */
.steps{counter-reset:step}
.step{position:relative;padding-left:var(--s8)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
position:absolute;left:0;top:-4px;font-family:var(--display);font-size:34px;
color:var(--brand);opacity:.32;line-height:1}
.step h3{margin-bottom:var(--s2)}
.step p{font-size:var(--t-md)}
/* ---------- month picker ----------
The month name does NOT sit on the photograph. Twelve near-identical shots of
the Haram in a small frame are busy and unevenly lit, so type laid over them
was legible on some cards and not others — which is worse than never doing it.
The image is a band at the top, the words live on white beneath it, and every
card reads the same whatever its photograph happens to look like. */
.month-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.month{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--e1);
transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .2s var(--ease)}
.month:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--brand)}
.month:hover .ph img{transform:scale(1.06)}
.month .ph{aspect-ratio:3/2}
.month .ph::after{background:linear-gradient(to top,rgba(15,23,25,.28),transparent 45%)}
.month-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s4) var(--s5)}
.month-name{display:block;font-family:var(--display);font-size:23px;color:var(--ink);
font-weight:600;line-height:1.1;letter-spacing:-.015em}
.month-name em{font-style:normal;font-size:14px;font-weight:600;color:var(--body-2);
font-family:var(--sans);letter-spacing:.02em}
.month-meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
border-top:1px solid var(--line);padding-top:var(--s3)}
.month-from{font-size:var(--t-lg);font-weight:700;color:var(--brand-deep)}
.month-n{font-size:var(--t-sm);color:var(--body-2)}
/* Name left, price right, on one line. Stacked, each of these boxes was two
short lines flush left in a 380px card — six-tenths empty, and the row read
as leftovers under the month grid rather than part of it. */
.season-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.season{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:var(--r);
padding:var(--s4) var(--s5);font-size:var(--t-lg);font-weight:650;min-height:68px;
display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
box-shadow:var(--e1);font-family:var(--display);letter-spacing:-.01em;
border-left:3px solid var(--brand);
transition:border-color .2s var(--ease),transform .18s var(--ease-out),box-shadow .2s var(--ease)}
.season:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--brand)}
.season small{flex:none;text-align:right;font-weight:700;font-size:var(--t-sm);color:var(--brand-deep);
font-family:var(--sans);letter-spacing:0;line-height:1.35}
.season small b{display:block;font-weight:500;color:var(--body-2);font-size:var(--t-xs)}
/* ---------- package cards ---------- */
.pkg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--e1);
transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .2s var(--ease)}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--line-2)}
.pkg:hover .ph img{transform:scale(1.05)}
.pkg-in{padding:var(--s5);display:flex;flex-direction:column;flex:1;gap:var(--s3)}
.pkg-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.tier{font-size:var(--t-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--brand-deep);background:var(--brand-wash);padding:var(--s1) var(--s3);border-radius:var(--r-pill)}
.stars{color:var(--brand);font-size:var(--t-sm);letter-spacing:.06em}
.pkg h3{font-size:var(--t-lg);line-height:1.25}
.pkg h3 a:hover{color:var(--brand-deep)}
.pkg-sum{font-size:var(--t-sm);color:var(--body-2)}
.pkg-facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--t-sm)}
.pkg-facts li{display:flex;align-items:center;gap:var(--s1)}
.pkg-facts li::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;
background:var(--brand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317708f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
.pkg-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
border-top:1px solid var(--line);padding-top:var(--s4)}
.price{display:block;font-family:var(--display);font-size:30px;color:var(--ink);font-weight:600;line-height:1.05}
.price small{display:block;font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.14em;
text-transform:uppercase;color:var(--body-2);font-weight:700}
.price small:first-child{margin-bottom:var(--s1)}
.price small:last-child{margin-top:var(--s1);letter-spacing:.08em;font-weight:500;text-transform:none}
.price.big{font-size:44px}
/* ---------- package detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);align-items:start}
.detail-main h2{margin-bottom:var(--s4)}
.detail-main h2+h2,.detail-main .spec+h2,.detail-main p+h2{margin-top:var(--s7)}
.spec{width:100%;border-collapse:collapse;margin-top:var(--s6);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-md)}
.spec tr:last-child td{border-bottom:0}
.spec td:first-child{color:var(--body-2);width:38%;background:#f8fafb;font-weight:600}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:var(--s6) var(--s5);position:sticky;top:104px;box-shadow:var(--e2)}
.side-card .fine{margin-block:var(--s3) var(--s5)}
/* ---------- testimonials ---------- */
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);box-shadow:var(--e1)}
.quote p{font-size:var(--t-md);font-style:italic;color:var(--ink);line-height:1.65}
.quote footer{display:flex;align-items:center;gap:var(--s3);margin-top:auto}
.quote .who{font-weight:700;color:var(--ink);font-size:var(--t-sm)}
.quote .who span{display:block;font-weight:400;color:var(--body-2);font-size:var(--t-xs)}
.quote .rate{color:var(--brand);font-size:var(--t-sm);letter-spacing:.08em}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s6) var(--s5) 0;position:relative;
font-weight:650;color:var(--ink);font-size:var(--t-lg);font-family:var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--s2);top:50%;width:11px;height:11px;
border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding-bottom:var(--s5);font-size:var(--t-md);max-width:72ch}
/* ---------- forms ---------- */
.enq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:var(--s6);box-shadow:var(--e2)}
.enq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
label{display:block;font-size:var(--t-sm);font-weight:650;color:var(--ink);margin-bottom:var(--s4)}
label.full{grid-column:1/-1}
input,select,textarea{display:block;width:100%;margin-top:var(--s2);padding:var(--s3) var(--s4);
font-family:inherit;font-size:var(--t-base);color:var(--ink);background:#fff;
border:1.5px solid var(--line-2);border-radius:var(--r-sm);min-height:48px;
transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--body-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
box-shadow:0 0 0 4px rgba(34,139,179,.16)}
textarea{resize:vertical;min-height:108px;line-height:1.6}
.hp{position:absolute;left:-9999px}
.empty{background:var(--card);border:1.5px dashed var(--line-2);border-radius:var(--r);
padding:var(--s8) var(--s5);text-align:center}
.empty h3{margin-bottom:var(--s2)}
.empty p{margin-bottom:var(--s5);max-width:52ch;margin-inline:auto}
.invite{background:var(--brand-wash)}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--s8);align-items:start}
.contact-list{list-style:none;display:grid;gap:var(--s5)}
.contact-list li{display:grid;gap:var(--s1);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0;padding-bottom:0}
.contact-list span{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--body-2);font-weight:700}
/* Sans, not the display serif: Playfair sets these numbers with uneven figure
heights and a phone number is a thing to read digit by digit, not admire. */
.contact-list a,.contact-list strong{font-family:var(--sans);font-size:20px;
color:var(--ink);font-weight:600;letter-spacing:-.005em;line-height:1.3}
.contact-list a:hover{color:var(--brand-deep)}
.contact-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
/* ---------- flash / footer / float ---------- */
.flash{padding:var(--s3) 0;font-size:var(--t-md);font-weight:650}
.flash-success{background:rgba(30,122,90,.12);color:#14563e}
.flash-error{background:rgba(176,64,44,.1);color:#8a3524}
/* White, and that is the reason the logo can sit here bare. Their mark's
aeroplane and lower swoosh are true black (rgb 8,8,8): on the near-black
footer this used to have, keying the background out made half the mark vanish
and left a grey halo round the letterforms. A white plate fixed the halo but
read as a sticker. Making the ground light solves both at once, and the page
still has its dark band up in "Why Sky Companion". */
.site-foot{background:#fff;color:var(--body);padding-top:var(--s7);
border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:var(--s7);padding-bottom:var(--s7)}
.foot-logo{width:184px;height:auto;display:block;margin-bottom:var(--s5);margin-left:-8px}
.foot-grid h4{color:var(--ink);font-size:var(--t-md);margin-bottom:var(--s4);font-family:var(--sans);
font-weight:700;letter-spacing:.04em;min-height:26px}
.foot-grid a,.foot-grid span{display:block;font-size:var(--t-md);margin-bottom:var(--s3);min-height:24px}
.foot-grid a:hover{color:var(--brand-deep)}
.foot-grid p{font-size:var(--t-md);margin-top:var(--s4);max-width:40ch}
/* The rule is drawn inside the gutter, not on the .wrap's padding box, so it
starts and stops exactly where the footer columns do. */
.foot-bottom{position:relative;display:flex;justify-content:space-between;gap:var(--s4);
flex-wrap:wrap;padding-block:var(--s5) var(--s6);font-size:var(--t-sm);color:var(--body-2)}
.foot-bottom::before{content:"";position:absolute;top:0;inset-inline:var(--gutter);
height:1px;background:var(--line)}
/* A phone-first business should not hide its phone number behind a hamburger.
Below the nav breakpoint the floating bubble is replaced by a fixed bar with
both actions at full thumb size, which also stops it covering card content. */
.mobile-bar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:60;
grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);
padding-bottom:env(safe-area-inset-bottom,0)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:56px;font-weight:700;font-size:var(--t-md);letter-spacing:.01em}
.mobile-bar svg{width:19px;height:19px;flex:none}
.mb-call{background:var(--brand);color:#fff}
.mb-call svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-wa{background:#25d366;color:#062e19}
.mb-wa svg{fill:currentColor}
/* A circle, not a labelled pill. WhatsApp green is the loudest colour on the
page and a 160px slab of it sat on top of the hero shouting over the CTA. */
.wa{position:fixed;right:var(--s5);bottom:var(--s5);z-index:50;background:#25d366;color:#062e19;
width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
box-shadow:0 6px 20px rgba(6,46,25,.32);transition:transform .2s var(--ease-out)}
.wa svg{width:30px;height:30px;fill:currentColor}
.wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wa:hover{transform:translateY(-2px) scale(1.04)}
/* ---------- admin ---------- */
body.admin{background:#eef2f5}
.adm-head{background:#fff;border-bottom:1px solid var(--line)}
.adm-head .brand-lockup strong{font-size:19px}
.adm-main{padding-block:var(--s6) var(--s9)}
.adm-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
flex-wrap:wrap;margin-bottom:var(--s5)}
.adm-bar h1{font-size:var(--t-2xl)}
.count{font-family:var(--sans);font-size:var(--t-sm);font-weight:650;color:var(--body-2);background:#fff;
border:1px solid var(--line);border-radius:var(--r-pill);padding:2px var(--s3);margin-left:var(--s2);
vertical-align:middle}
.adm-actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.adm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:var(--s6);max-width:1040px;box-shadow:var(--e1)}
.adm-card.narrow{max-width:540px;margin:var(--s8) auto}
.adm-card h1{font-size:var(--t-2xl);margin-bottom:var(--s4)}
.adm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.adm-checks{display:flex;flex-wrap:wrap;gap:var(--s5);margin-block:var(--s2) var(--s5)}
.chk{display:inline-flex;align-items:center;gap:var(--s2);margin:0;min-height:48px;font-weight:500}
.chk input{width:22px;height:22px;min-height:22px;margin:0}
.adm-filter{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.adm-filter select{max-width:230px}
.adm-table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--e1)}
.adm-table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.adm-table th{text-align:left;background:#f6f8fa;padding:var(--s3) var(--s4);font-size:var(--t-xs);
letter-spacing:.08em;text-transform:uppercase;color:var(--body-2);border-bottom:1px solid var(--line)}
.adm-table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tbody tr:hover{background:#fafcfd}
.adm-table small{display:block;color:var(--body-2);font-size:var(--t-sm);margin-top:2px}
.adm-table .num{text-align:right;white-space:nowrap}
.pill{display:inline-block;font-size:var(--t-xs);font-weight:700;padding:3px var(--s3);border-radius:var(--r-pill)}
.pill.on{background:rgba(30,122,90,.14);color:#14563e}
.pill.off{background:rgba(15,23,25,.07);color:var(--body-2)}
.danger{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
/* =====================================================================
MOTION AND INTERACTION
---------------------------------------------------------------------
Every hidden-until-seen state below is scoped to .js-rise, a class the
inline head script adds ONLY when scripting is alive and the visitor has
not asked for reduced motion. A page whose JavaScript fails therefore
shows all of its content, which is the opposite of what a bare
`opacity:0` in the stylesheet would do.
===================================================================== */
.js-rise [data-rise]{opacity:0;transform:translateY(20px);will-change:opacity,transform}
.js-rise [data-rise].in{opacity:1;transform:none;will-change:auto;
transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
/* An in-page jump must clear the sticky bar, and the bar changes height. */
:target,[id]{scroll-margin-top:110px}
/* ---------- feature band: photograph and copy, one object ---------- */
.band{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;box-shadow:var(--e2)}
/* width:100% and a floor, never an aspect-ratio, while this is a stretched
grid item: a ratio on a box whose height is already set by the row solves
for WIDTH, and the media box blew out to 2703px inside a 354px card. */
.band-media{position:relative;overflow:hidden;width:100%;min-height:340px}
.band-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .8s var(--ease-out)}
.band:hover .band-media img{transform:scale(1.04)}
.band-body{padding:clamp(var(--s6),3.4vw,var(--s8))}
.band-body h2{margin-bottom:var(--s4)}
.band-list{list-style:none;display:grid;margin-top:var(--s6)}
.band-list li{position:relative;padding:0 0 var(--s4) var(--s5);
border-bottom:1px solid var(--line);margin-bottom:var(--s4);font-size:var(--t-md)}
.band-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.band-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
border-radius:50%;background:var(--brand)}
.band-list strong{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
/* ---------- the soonest bookable month, flagged in the grid ---------- */
.month{position:relative}
.tag-next{position:absolute;top:var(--s3);left:var(--s3);z-index:2;
background:var(--brand);color:#fff;font-size:12px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);
box-shadow:0 4px 12px -4px rgba(15,23,25,.5)}
/* ---------- card imagery reacts to the pointer ---------- */
.pkg .ph{overflow:hidden}
.pkg .ph img{transition:transform .6s var(--ease-out)}
.pkg:hover .ph img{transform:scale(1.045)}
/* ---------- accordion ---------- */
.faq summary{transition:color .18s var(--ease)}
.faq summary:hover{color:var(--brand-deep)}
.faq details[open]>div{animation:faqIn .3s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* =====================================================================
RESPONSIVE — the grid steps down 4 → 3 → 2 → 1, and every step keeps the
same gutter rhythm. Each query is `screen and`, deliberately.
===================================================================== */
@media screen and (max-width:1060px){
.detail{grid-template-columns:minmax(0,1fr)}
.side-card{position:static}
.month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.season-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.adm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-grid,.split{gap:var(--s6) var(--s7)}
}
@media screen and (max-width:900px){
/* Two columns need width. At 700px the copy column was 305px wide with
48px of padding on it — 209px of text, about four words a line. */
.split,.band{grid-template-columns:minmax(0,1fr)}
.band-media{min-height:0;aspect-ratio:16/10}
}
@media screen and (max-width:860px){
.nav{display:none}
.menu-btn{display:flex}
/* Their artwork on every screen, not a reconstruction on the small ones. At
152px the strapline is about seven pixels tall — small, but the source is
960px so it stays crisp on a real phone, and it is the same logo a visitor
saw on the desktop. */
.brand-full{width:152px;margin-left:-9px}
.head-in,.site-head.scrolled .head-in{min-height:72px}
.site-head.scrolled .brand-full{width:134px}
.wa{display:none}
.mobile-bar{display:grid}
.foot-bottom{padding-bottom:var(--s8)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-stats,.trust-in{grid-template-columns:repeat(2,minmax(0,1fr))}
/* A diagonal scrim needs width to travel across. On a phone it just covers
the whole frame and the photograph turns into a dark rectangle, so the
wash runs top-to-bottom instead and the lower half stays a picture.
A plain top-to-bottom fade also leaves the stat row sitting on floodlit
marble, so the wash darkens again at the foot: open in the middle where the
photograph is worth seeing, closed top and bottom where type sits. */
.hero::after{
background:linear-gradient(rgba(8,14,16,.94) 0%,rgba(8,14,16,.82) 38%,
rgba(8,14,16,.44) 60%,rgba(8,14,16,.88) 100%)}
/* A collection hero is a third of the height and its type fills nearly all of
it, so there is no clear band to open up — it stays dark end to end. */
.page-hero.has-bg::after{
background:linear-gradient(rgba(8,14,16,.92),rgba(8,14,16,.82))}
.hero h1,.hero .lead,.page-hero h1,.page-hero .lead{max-width:none}
/* room for the floating WhatsApp button to sit over margin, not over a CTA */
.site-foot{padding-bottom:72px}
}
@media screen and (max-width:640px){
.grid,.grid.c2,.grid.c4{grid-template-columns:minmax(0,1fr)}
/* Rows a visitor BROWSES swipe sideways; rows they COMPARE stay stacked.
Three featured packages and three quotes are a look-along, and stacking
them cost about 2,600px of thumb. The three tiers on a collection page
are a decision, and a carousel there can hide the option they want. */
.grid.swipe{display:grid;grid-auto-flow:column;grid-template-columns:none;
grid-auto-columns:82%;overflow-x:auto;overscroll-behavior-inline:contain;
scroll-snap-type:x mandatory;scrollbar-width:none;
margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) var(--s4)}
.grid.swipe::-webkit-scrollbar{display:none}
.grid.swipe > *{scroll-snap-align:start}
.month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.season-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.enq-grid,.adm-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
/* One column: the generous desktop leading turns into a very long scroll,
so links tighten to a 40px tap target instead of a 56px one. */
.foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.foot-grid h4{margin-bottom:var(--s2)}
.foot-grid a,.foot-grid span{margin-bottom:var(--s1);min-height:40px;
display:flex;align-items:center}
.foot-grid p{margin-top:var(--s2)}
.enq{padding:var(--s5)}
.hero-cta .btn{flex:1 1 100%}
.pkg-foot{flex-direction:column;align-items:stretch;gap:var(--s3)}
.pkg-foot .btn{width:100%}
.step{padding-left:var(--s7)}
.sec-head{margin-bottom:var(--s6)}
/* the admin table becomes one card per row rather than scrolling sideways */
.adm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.adm-table tr{display:block;border-bottom:1px solid var(--line);padding-block:var(--s2)}
.adm-table td{display:flex;justify-content:space-between;gap:var(--s4);border:0;
padding:var(--s2) var(--s4);text-align:right}
.adm-table td::before{content:attr(data-label);font-size:var(--t-xs);font-weight:700;
text-transform:uppercase;color:var(--body-2);text-align:left;flex:0 0 auto}
.adm-table td:empty{display:none}
}
/* Two columns as far down as 360px. One column made the month picker twelve
full-width cards deep — a wall of near-identical photographs that took a
dozen thumb-swipes to get past. At two-up it is one scannable block. */
@media screen and (max-width:420px){
.season-row{grid-template-columns:minmax(0,1fr)}
.month .ph{aspect-ratio:4/3}
.month-body{padding:var(--s3)}
.month-name{font-size:19px}
.month-meta{flex-direction:column;align-items:flex-start;gap:2px}
.month-from{font-size:var(--t-md)}
}
@media screen and (max-width:359px){
/* Two-up all the way down. One column turned the picker into twelve
full-width cards — the homepage measured 15,638px on a 320px screen,
about forty-nine screenfuls, most of it this one block. */
.hero-stats,.trust-in{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}
/* iOS Safari zooms the whole page in whenever it focuses a control under 16px
and leaves it zoomed. The honest question is about the POINTER, not the
width: an iPad in portrait is 768px, and a narrow desktop window has never
had the problem. Mouse-driven screens keep the designed size at every size. */
@media screen and (hover:none) and (pointer:coarse){
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,textarea{font-size:16px}
/* Same reasoning for tap targets. A tablet in portrait is 768px wide, so a
width query misses it entirely — and its user is still using a thumb.
Breadcrumbs were 22px tall, the contact numbers 26px, footer links 25px. */
.crumbs a,.foot-grid a,.foot-grid span,.contact-list a{min-height:44px;
display:flex;align-items:center}
.crumbs{gap:var(--s1) var(--s3)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
/* Belt and braces: .js-rise is not applied when reduced motion is set, but if
it ever were, the hidden state must not survive. */
.js-rise [data-rise]{opacity:1!important;transform:none!important}
}
/* =====================================================================
PRINT — stays LAST so nothing above wins a cascade tie.
===================================================================== */
@media print{
@page{size:A4 portrait;margin:14mm 13mm}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{background:#fff;color:#000;font-size:10.5pt}
.site-head,.mobile-nav,.menu-btn,.site-foot,.wa,.mobile-bar,.flash,.enq,.invite,
.hero-cta,.adm-filter,.adm-actions,.trust,.faq summary::after{display:none!important}
.hero,.page-hero{background:#fff!important;color:#000!important;padding:0 0 10pt!important;
border-bottom:2px solid #000}
.hero::after,.page-hero::after,.hero-bg{display:none!important}
.hero h1,.page-hero h1,.hero .lead,.page-hero .lead,.crumbs{color:#000!important}
.section{padding-block:10pt!important;background:#fff!important}
.grid,.grid.c4,.month-grid{grid-template-columns:repeat(2,1fr)!important;gap:8pt!important}
.pkg,.tile,.side-card,.spec,.quote{border:1px solid #999!important;box-shadow:none!important;break-inside:avoid}
.faq details{break-inside:avoid}
.faq details>div{display:block!important}
/* the phone card-stack must never reach paper */
.adm-table thead{position:static!important;width:auto!important;height:auto!important;clip:auto!important}
.adm-table tr{display:table-row!important}
.adm-table td{display:table-cell!important;text-align:left!important}
.adm-table td::before{content:none!important}
a{color:#000;text-decoration:none}
}