/* ============================================================================
   THERARE-PRIVATE — site stylesheet
   Part 1: the approved homepage system (tokens, masthead, bands, pillars,
   roster, process, compare, sectors, about, FAQ, invite, footer, motion).
   Part 2 (appended): the components every other page needs — inner page heads,
   prose and article layout, post grids, forms, the embedded booking calendar,
   the tool panels and the dense legal pages.

   Mobile first: base rules describe the 390px layout, every wider layout is a
   min-width media query.
   ============================================================================ */


/* ==========================================================================
   THERARE-PRIVATE — homepage concept "THE CORRIDOR"  v2
   Editorial system: Didone display, text serif, hairlines, one live route.
   Mobile-first: every rule below the responsive section is written for a
   390px screen and enhanced upward with min-width queries.
   Concept mockup. Nothing here is live.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --page:#faf7f2;  --page-2:#f4efe6;
  --ink:#0d0d0d;   --ink-2:#2a2724;  --ink-3:#6d655c;
  --gold:#a0784a;        /* display-size accents only: 3.72:1 on cream */
  --gold-text:#8a6438;   /* small gold text on light: 4.96:1 on cream, 4.63:1 on page-2 */  --warm:#c49b6c;
  --rule:rgba(13,13,13,.13);
  --rule-2:rgba(13,13,13,.28);
  --rule-on-ink:rgba(250,247,242,.22);
  --on-ink-1:#faf7f2;
  --on-ink-2:rgba(250,247,242,.72);
  --on-ink-3:rgba(250,247,242,.55);

  --display:"Bodoni Moda","Didot","Bodoni MT",serif;
  --text:"Source Serif 4","Iowan Old Style",Georgia,serif;

  --frame:1300px;
  /* Bodoni Moda's optical size axis runs 6 to 96 and controls stroke contrast. Left high it
     produces hairline-thin curls that break up on screen. These track the rendered size instead. */
  color-scheme:light; font-synthesis:none;
  --opsz-xl:20;   /* hero headline */
  --opsz-lg:16;   /* section headings */
  --opsz-sm:9;    /* card headings, names, numerals */
  --pad:1.25rem;
  --gap:1rem;
  --band:clamp(3.25rem,9vw,6.25rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:620px){  :root{--pad:1.75rem; --gap:1.25rem;} }
@media (max-width:619px){  :root{--opsz-xl:12; --opsz-lg:12; --opsz-sm:9;} }
@media (min-width:1000px){ :root{--pad:2.5rem;} }

/* the about heading is a long two-sentence line: below ~1300px the 9-column copy block
   cannot hold it at full section-heading size, so it breaks mid-sentence. */
@media (min-width:1000px) and (max-width:1299px){
  .about-copy .h2{font-size:clamp(1.95rem,4.35vw,3.2rem)}
}

@media (min-width:1320px){ :root{--pad:3.5rem;} }

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; line-height:1.68;
  overflow-x:hidden;
  font-variant-numeric:oldstyle-nums proportional-nums;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,table,figcaption{margin:0}
ol,ul{padding:0; list-style:none}
em{font-style:italic}
table{border-collapse:collapse}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--page); padding:.75rem 1.1rem; font-size:.9rem
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
[id]{scroll-margin-top:7.6rem}  /* clear the sticky masthead on anchor jumps */
::selection{background:var(--gold); color:var(--page)}

.frame{width:100%; max-width:var(--frame); margin-inline:auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right))}

/* ---------- 3. TYPE ---------- */
.display{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.45rem,8.4vw,5.6rem); line-height:.97; letter-spacing:-.018em;
  margin-left:-.04em; /* optical alignment: hang the W */
  font-variation-settings:"opsz" var(--opsz-xl);
}
.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.05rem,5.6vw,3.95rem); line-height:1.01; letter-spacing:-.012em;
  margin-left:-.026em;
  font-variation-settings:"opsz" var(--opsz-lg);
}
.h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem,3.4vw,1.6rem); line-height:1.15; letter-spacing:-.004em;
  font-variation-settings:"opsz" var(--opsz-sm);
}
.gold{color:var(--gold)}

/* small-caps label: sturdy serif, letterspaced. Used sparingly, never in the H1. */
.kicker{
  display:block;
  font-family:var(--display); font-variation-settings:"opsz" var(--opsz-sm);
  font-style:italic; font-size:1.02rem; font-weight:500;
  text-transform:none; letter-spacing:0; color:var(--gold-text);
  font-variant-numeric:normal
}
.lede{font-size:clamp(1.08rem,2.8vw,1.42rem); line-height:1.56; color:var(--ink-2); max-width:46ch}
.standfirst{font-size:1.06rem; color:var(--ink-3); max-width:54ch; line-height:1.64}
.note{font-size:.94rem; color:var(--ink-3); max-width:40ch; line-height:1.62}

/* hairline text link — no pills, no arrows, no fills */
.tlink{
  display:inline-block; font-size:1rem; color:var(--ink);
  padding-bottom:.16rem; border-bottom:1px solid var(--rule-2);
  transition:color .25s var(--ease), border-color .25s var(--ease)
}
.tlink:hover{color:var(--gold-text); border-bottom-color:var(--gold-text)}
.tlink--lg{font-size:clamp(1.02rem,2.4vw,1.3rem)}
.tlink--quiet{font-size:.95rem; color:var(--ink-3)}

/* ---------- 4. MOCK FLAG ---------- */
.mock-flag{
  background:var(--ink); color:var(--page); text-align:center;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem 1.25rem; font-weight:500
}

/* ---------- 5. MASTHEAD ---------- */
.mast{position:sticky; top:0; z-index:60; background:var(--page); border-bottom:1px solid var(--rule)}
.mast-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.9rem}
.mast-mark img{width:112px; height:auto}
.mast-nav{
  position:fixed; inset:0 0 0 auto; width:min(340px,88vw); background:var(--page);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding:5.5rem var(--pad) 2rem; z-index:70;
  border-left:1px solid var(--rule-2);
  transform:translateX(101%); visibility:hidden;
  transition:transform .42s var(--ease), visibility .42s var(--ease);
  overflow-y:auto; height:100vh; height:100dvh
}
/* without a scrim the sliver of page left beside the drawer shows half-drawn text and reads as a
   rendering fault. The scrim dims it, and tapping it closes the drawer. */
.mast-scrim{
  position:fixed; inset:0; z-index:60; background:rgba(13,13,13,.46);
  opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility .42s var(--ease);
  border:0; padding:0; cursor:pointer
}
.mast-scrim.open{opacity:1; visibility:visible}
.mast-nav.open{transform:none; visibility:visible}
.mast-nav a{
  display:flex; align-items:center; min-height:52px;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.15em; font-weight:500;
  color:var(--ink-2); border-bottom:1px solid var(--rule)
}
.mast-nav a:hover{color:var(--gold-text)}
.mast-lang{font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:1.05rem !important; letter-spacing:0 !important;
  text-transform:none !important; border-bottom:0 !important}
/* the drawer carries the agency's real contact line above the language link, so the panel reads as
   complete rather than as a list that stops in the middle of a tall screen */
.mast-drawer-foot{display:none}
.mast-drawer-foot .tlink{font-family:var(--text); text-transform:none; letter-spacing:0;
  white-space:nowrap; font-size:.94rem}
@media (max-width:999px){
  .mast-drawer-foot{display:block; margin-top:auto; padding-top:1.5rem}
  .mast-lang{margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--rule) !important}
}
.mast-burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-.5rem; background:none; border:0; padding:0;
  cursor:pointer; position:relative; z-index:80
}
.mast-burger span{display:block; width:24px; height:1px; background:var(--ink); margin:6px 0;
  transition:transform .3s var(--ease), opacity .3s var(--ease)}
.mast-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mast-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mast-meta{
  display:none; padding-block:.5rem .65rem; border-top:1px solid var(--rule);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)
}
body.nav-open{overflow:hidden}

/* ---------- 6. HERO ---------- */
.hero{padding-top:clamp(1.3rem,3.6vw,2.4rem); padding-bottom:clamp(1.5rem,4vw,2.75rem)}
.hero-copy .kicker{display:block; margin-bottom:1.15rem}
.hero .display{margin-bottom:1.35rem; max-width:15ch}
.hero .display em{display:inline-block}
.hero .lede{margin-bottom:1.9rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:1.1rem 1.9rem}
.hero-shot{margin:2.1rem auto 0; max-width:min(100%,560px)}
.hero-shot img, .hero-shot video{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  background:var(--page-2)
}
/* the video carries the movement; the still stands in when movement is unwelcome.
   Scoped to .hero-shot so it out-specifies the shared image rule above, otherwise both would show. */
.hero-shot .hero-still{display:none}
@media (prefers-reduced-motion:reduce){
  .hero-shot .hero-video{display:none}
  .hero-shot .hero-still{display:block}
}
.hero-shot figcaption{
  margin-top:.7rem; font-size:.765rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.5
}
.hero-shot figcaption b{color:var(--gold-text); font-weight:500}

/* links keep a comfortable hit area on touch without changing the look */
.tlink{position:relative}
.tlink::after{content:""; position:absolute; inset:-11px 0}

/* ---------- 7. ROUTE — local times across the corridor ---------- */
.route{border-block:1px solid var(--rule-2); background:var(--page-2)}
.route-head{
  padding-block:1rem .6rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)
}
.route-list{border-top:1px solid var(--rule-2)}
.stop{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.72rem 0; border-bottom:1px solid var(--rule)
}
.route-group:last-child .stop:last-child{border-bottom:0}
.stop-city{font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:1.03rem; line-height:1.2}
.stop-time{
  font-size:.8rem; letter-spacing:.08em; color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums
}
.route-group--hub .stop{background:var(--ink); padding-inline:1rem; border-bottom:0}
.route-group--hub .stop-city{color:var(--page)}
.route-group--hub .stop-time{color:var(--warm)}

/* ---------- 8. BANDS ---------- */
.band{padding-block:var(--band); border-bottom:1px solid var(--rule)}
.band--tint{background:var(--page-2)}
.band--ink{background:var(--ink); color:var(--on-ink-1)}
.band--ink .h2,.band--ink .h3{color:var(--on-ink-1)}
.band--ink .standfirst,.band--ink .note{color:var(--on-ink-2)}
.band--ink .kicker{color:var(--warm)}
.band--ink .tlink{color:var(--on-ink-1); border-bottom-color:var(--rule-on-ink)}
.band--ink .tlink:hover{color:var(--warm); border-bottom-color:var(--warm)}
.band--last{border-bottom:0}

.band-head{margin-bottom:clamp(1.75rem,5vw,3.25rem)}
.band-head .kicker{display:block; margin-bottom:1.05rem}
.band-head .h2{margin-bottom:1rem}
.band-head .standfirst{max-width:56ch}
/* a standfirst that sits directly under a heading in the SAME column needs its own space;
   in the split band heads it lives in its own grid column and must not be nudged. */
.about-copy .h2 + .standfirst,
.invite-copy .h2 + .standfirst{margin-top:clamp(.95rem,2.2vw,1.5rem)}
.band-more{margin-top:clamp(1.5rem,4vw,2.25rem)}

/* ---------- 9. SERVICE PILLARS ---------- */
.pillars{border-top:1px solid var(--rule-2)}
.pillar{padding-block:1.5rem; border-bottom:1px solid var(--rule)}
.pillar-num{
  font-variation-settings:"opsz" var(--opsz-sm);
  font-family:var(--display); font-size:1.15rem; color:var(--gold-text);
  font-variant-numeric:lining-nums; display:block; margin-bottom:.5rem
}
.pillar .h3{margin-bottom:.5rem; font-size:clamp(1.38rem,4vw,1.9rem)}
.pillar p{color:var(--ink-2); max-width:48ch}

/* ---------- 10. CAMPAIGN FRAMES + ROSTER ---------- */
.frames{margin-top:.5rem}
.frame-shot img{width:100%; object-fit:cover; background:rgba(250,247,242,.05)}
.frame-shot--tall img{aspect-ratio:4/5; object-position:50% 22%}
.frame-shot--square{margin-top:1.75rem}
.frame-shot--square img{aspect-ratio:1/1; object-position:50% 40%}
.frame-shot figcaption{
  margin-top:.75rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-3); line-height:1.5
}
.frame-shot figcaption b{color:var(--warm); font-weight:500}
.frames-note{
  margin-top:1.9rem; padding-top:1.15rem; border-top:1px solid var(--rule-on-ink)
}
.frames-note .kicker{display:block; margin-bottom:.7rem; color:var(--warm)}

/* roster list */
.roster{margin-top:clamp(2rem,6vw,3.25rem); border-top:1px solid var(--rule-on-ink)}
.roster li{
  display:grid; grid-template-columns:3.25rem minmax(0,1fr); grid-template-areas:"img name" "img meta" "fig geo";
  gap:.35rem 1rem; align-items:center; padding-block:1.05rem;
  border-bottom:1px solid rgba(250,247,242,.14)
}
.roster img{grid-area:img; width:3.25rem; height:3.25rem; object-fit:cover;
  transition:filter .45s var(--ease)}
/* A touch screen never fires hover, so keeping the portraits grey by default would hide the work on
   the device most people use. Colour is the default; the grey reveal is a pointer-only flourish,
   and focus-within gives keyboard users the same reveal. */
@media (hover:hover){
  .roster img{filter:grayscale(1) contrast(1.04)}
  .roster li:hover img, .roster li:focus-within img{filter:grayscale(0)}
}
.roster-name{grid-area:name; font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:1.2rem; line-height:1.15;
  color:var(--on-ink-1)}
.roster-meta{grid-area:meta; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-ink-3)}
.roster-fig{grid-area:fig; font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:1rem;
  font-variant-numeric:lining-nums; color:var(--on-ink-1)}
.roster-geo{grid-area:geo; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--warm); text-align:right}

/* ---------- 11. SERVICE LINES ---------- */
.lines{border-top:1px solid var(--rule-2)}
.lines li{display:grid; grid-template-columns:2.75rem minmax(0,1fr); gap:0 1rem;
  padding-block:clamp(1.25rem,3.5vw,2rem); border-bottom:1px solid var(--rule)}
.lines-num{font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:.95rem; color:var(--gold-text);
  font-variant-numeric:lining-nums; padding-top:.3rem}
.lines .h3{margin-bottom:.6rem; font-size:clamp(1.32rem,3.6vw,1.9rem)}
.lines p{color:var(--ink-2); max-width:60ch}

/* ---------- 12. PROCESS ---------- */
.stages{margin-top:.25rem; border-top:1px solid var(--rule-2)}
.stages li{
  padding-block:1.15rem; border-bottom:1px solid var(--rule); position:relative
}
.stages li::before{
  content:""; position:absolute; left:0; top:-1px; width:26px; height:2px; background:var(--gold)
}
.stage-num{font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:.95rem; color:var(--gold-text); display:block;
  margin-bottom:.35rem; font-variant-numeric:lining-nums}
.stages .h3{margin-bottom:.7rem}
.stages p{font-size:.94rem; color:var(--ink-3)}

/* ---------- 13. COMPARISON TABLE ---------- */
.compare-block{margin-top:.25rem}
.compare{width:100%; table-layout:fixed}
.compare td,.compare th{text-align:left; vertical-align:top; font-weight:400}
.compare thead{display:none}
.compare tbody tr{display:grid; gap:.3rem; padding-block:1.15rem;
  border-bottom:1px solid var(--rule)}
.compare tbody th{font-variation-settings:"opsz" var(--opsz-sm); font-family:var(--display); font-size:1.12rem; font-variant-numeric:lining-nums}
.compare tbody td:first-of-type{color:var(--ink-3); font-size:.97rem}
.compare tbody td.win{
  color:var(--ink); font-size:.97rem; border-left:2px solid var(--gold); padding-left:.85rem
}

/* ---------- 14. SECTORS ---------- */
.sectors{border-top:1px solid var(--rule-2)}
.sectors li{padding-block:1.15rem; border-bottom:1px solid var(--rule)}
.sectors .h3{margin-bottom:.6rem; font-size:clamp(1.32rem,3.6vw,1.85rem)}
.sectors p{color:var(--ink-3); font-size:.94rem; max-width:44ch}

/* ---------- 15. ABOUT ---------- */
.about-figure{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--rule)}
.about-figure img{width:104px; height:104px; border-radius:50%; object-fit:cover; margin-bottom:1.1rem}
.about-figure figcaption{font-size:.92rem; color:var(--ink-3); line-height:1.6}
.about-figure .kicker{display:block; margin-bottom:.5rem}
.about-figure .langs{display:block; margin-top:1rem; padding-top:.9rem;
  border-top:1px solid var(--rule); color:var(--ink-2)}

/* ---------- 16. FAQ ---------- */
.qa{border-top:1px solid var(--rule-2)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  list-style:none; cursor:pointer; position:relative; display:block;
  font-family:var(--display); font-size:clamp(1.08rem,3.4vw,1.4rem); line-height:1.28;
  padding:1.25rem 2.6rem 1.25rem 0; transition:color .25s var(--ease)
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-text)}
.qa summary::after{
  content:"+"; position:absolute; right:.15rem; top:1rem;
  width:1.2rem; height:1.2rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.42rem; color:var(--gold-text); line-height:1
}
.qa details[open] summary::after{content:"\2212"}
.qa details p{color:var(--ink-2); max-width:68ch; font-size:.99rem;
  padding-bottom:1.5rem; margin-top:-.25rem}

/* ---------- 17. INVITE + FOOTER ---------- */
.band--invite{background:var(--ink); color:var(--on-ink-1); border-bottom:0}
.band--invite .kicker{color:var(--warm)}
.band--invite .h2{color:var(--on-ink-1)}
.band--invite .standfirst{color:var(--on-ink-2)}
.invite-actions{display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:1.9rem}
.invite-actions .tlink{color:var(--on-ink-1); border-bottom-color:var(--rule-on-ink)}
.invite-actions .tlink:hover{color:var(--warm); border-bottom-color:var(--warm)}

.site-foot{background:var(--ink); color:var(--on-ink-2);
  padding-block:clamp(2.25rem,6vw,3.5rem) 1.75rem; font-size:.92rem}
.site-foot .foot-grid{display:grid; gap:2rem}
.foot-mark img{width:140px; margin-bottom:1rem}
.foot-mark p{color:var(--on-ink-3); font-size:.9rem; max-width:38ch}
.foot-mark .addr{margin-top:.7rem; font-size:.86rem}
.foot-links .kicker{display:block; margin-bottom:.9rem; color:var(--warm)}
.foot-links a{display:block; padding-block:.42rem; color:var(--on-ink-2)}
.foot-links a:hover{color:var(--warm)}
.foot-string{
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--rule-on-ink);
  display:flex; flex-direction:column; gap:.5rem; font-size:.82rem
}
.foot-string a{color:var(--on-ink-2)}
.foot-string a:hover{color:var(--warm)}
.foot-string .quiet{color:var(--on-ink-3)}

/* ==========================================================================
   18. ENHANCEMENTS — mobile-first, so everything above is the small screen
   ========================================================================== */

/* --- 620px: two-column micro layouts --- */
@media (min-width:620px){
  .route-group{grid-template-columns:repeat(3,1fr)}
  .route-group--hub{grid-template-columns:1fr}
  .sectors li{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
    gap:0 1.25rem; align-items:baseline}
  .sectors .h3{margin-bottom:0}
  .frames{display:grid; grid-template-columns:1.15fr .85fr; column-gap:1.5rem; row-gap:1.5rem}
  .frame-shot--tall{grid-column:1; grid-row:1 / 3}
  .frame-shot--square{margin-top:0; grid-column:2; grid-row:1; align-self:start}
  .frames-note{grid-column:2; grid-row:2; align-self:end; margin-top:0}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- 760px: roster becomes a table row --- */
@media (min-width:760px){
  .roster li{
    grid-template-columns:4rem minmax(0,1fr) 6rem 4rem;
    grid-template-areas:"img name fig geo" "img meta fig geo";
    gap:.3rem 1.25rem; padding-block:1.1rem
  }
  .roster img{width:4rem; height:4rem}
  .roster-fig{text-align:right}
  .compare tbody tr{grid-template-columns:minmax(0,10rem) minmax(0,1fr) minmax(0,1fr);
    gap:0 1.5rem}
  .compare tbody td.win{padding-left:1.25rem}
}

/* --- 1000px: the editorial grid --- */
@media (min-width:1000px){
  .mast-burger{display:none}
  .mast-nav{
    position:static; inset:auto; width:auto; height:auto; max-height:none; transform:none; visibility:visible; padding:0;
    flex-direction:row; align-items:center; gap:clamp(1rem,1.8vw,2rem);
    border-left:0; background:none; overflow:visible; box-shadow:none
  }
  .mast-nav a{border-bottom:1px solid transparent; min-height:0; padding-block:.15rem}
  .mast-nav a:hover{border-bottom-color:var(--gold)}
  .mast-lang{border-bottom:0 !important}
  .mast-meta{display:flex; justify-content:space-between; gap:1.5rem}
  .mast-mark img{width:132px}
  .mast-lang{margin-left:.85rem; padding-left:1.15rem; border-left:1px solid var(--rule-2) !important}

  /* the corridor reads as one strip: Europe, Dubai as the hub, then the Gulf */
  .route-list{display:grid; grid-template-columns:repeat(7,1fr)}
  .route-group{display:contents}
  .stop{display:block; padding:1.05rem 1rem 1.15rem; border-bottom:0;
        border-left:1px solid var(--rule)}
  .route-list > .route-group:first-child .stop:first-child{border-left:0; padding-left:0}
  .stop-time{display:block; margin-top:.22rem}
  .route-group--hub .stop{background:var(--ink); padding-inline:1.1rem}
  .route-head{padding-block:1.15rem .7rem}

  .hero{padding-top:clamp(1.6rem,2.4vw,2.35rem); padding-bottom:clamp(2.1rem,3.2vw,3rem)}
  .hero-grid{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap);
    align-items:stretch}
  .hero-copy{grid-column:1 / 9; display:flex; flex-direction:column; justify-content:flex-start;
    padding-right:clamp(1rem,1.6vw,1.5rem)}
  .hero-actions{margin-top:auto}
  .hero .display{font-size:clamp(3.05rem,5.97vw,5.375rem); font-weight:800}
  .hero-shot{
    grid-column:9 / -1; margin:0; max-width:none; display:flex; flex-direction:column;
    border-left:1px solid var(--rule); padding-left:clamp(1rem,1.6vw,1.5rem)
  }
  .hero-shot img, .hero-shot video{aspect-ratio:auto; flex:1 1 auto; object-fit:cover; object-position:50% 20%;
    min-height:clamp(360px,32vw,410px); max-height:clamp(400px,38vw,480px)}

  .band-head--split{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap)}
  .band-head--split .h2{grid-column:1 / 8; margin-bottom:0}
  .band-head--split .standfirst{grid-column:9 / -1; align-self:end; padding-bottom:.35rem}

  .pillars li{display:grid; grid-template-columns:3.25rem minmax(0,24rem) minmax(0,1fr);
    gap:0 1.5rem; align-items:baseline}
  .pillar{padding-block:clamp(1.35rem,2.4vw,2.1rem)}
  .pillar-num{margin-bottom:0; padding-top:.3rem}
  .pillar .h3{margin-bottom:0}

  .lines li{grid-template-columns:3.5rem minmax(0,1fr); gap:0 1.5rem}

  .stages{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--rule-2)}
  .stages li{padding:1.5rem 1.25rem 0; border-bottom:0; border-left:1px solid var(--rule)}
  .stages li:first-child{border-left:0; padding-left:0}
  .stages li::before{width:24px}
  .stages li:not(:first-child)::before{left:1.25rem}

  .compare{width:100%; table-layout:fixed}
  .compare thead{display:table-header-group}
  .compare thead th{
    font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
    border-bottom:1px solid var(--ink); padding-bottom:.75rem
  }
  .compare thead th.win,.compare tbody td.win{border-left:1px solid var(--gold); padding-left:1.25rem}
  .compare thead th.win{color:var(--gold-text)}
  .compare thead th:first-child,.compare tbody th{width:20%}
  .compare thead th:not(:first-child){width:40%}
  .compare tbody tr{display:table-row; padding-block:0}
  .compare tbody th,.compare tbody td{display:table-cell; padding-block:1.05rem}

  .sectors{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4.5rem)}
  .sectors li{min-height:5.5rem; display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr)}

  .about-grid{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap)}
  .about-copy{grid-column:1 / 10}
  .about-figure{grid-column:10 / -1; margin-top:0; padding-top:0; padding-left:1.5rem;
    border-top:0; border-left:1px solid var(--rule)}

  .qa-block{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap)}
  .qa-block .band-head{grid-column:1 / 6; margin-bottom:0}
  .qa-block .qa{grid-column:6 / -1}

  .invite{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap)}
  .invite-copy{grid-column:1 / -1}

  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:1.5rem 2rem}
  .foot-string{display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:.5rem 1.5rem}
  .foot-string > :nth-child(2){justify-self:center}
  .foot-string > :last-child{justify-self:end}
}



/* ---------- 19. MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media print{
  .mast,.route,.mock-flag{display:none}
  body{background:#fff}
}


/* mock flag: review scaffolding, kept out of the way on small screens */
@media (max-width:619px){
  .mock-flag{font-size:.58rem; letter-spacing:.1em; padding-block:.45rem; text-align:center}
}


/* ---------- 22. REFINEMENTS ---------- */

/* balance heading lines, and avoid a lone word on the last line of body copy */
.h2, .h3{text-wrap:balance}
p{text-wrap:pretty}

/* anchor jumps glide where the visitor allows motion */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* touch screens: every control needs a 44px target, including the desktop-width nav on tablets */
@media (pointer:coarse){
  .mast-nav a{min-height:44px; padding-block:.4rem}
  .foot-links a, .foot-string a{min-height:44px; display:inline-flex; align-items:center}
  /* those links are stacked closer than the 11px pseudo-element extension, so the enlarged hit
     areas would overlap and a tap between two links could land on the wrong one */
  .foot-links a::after, .foot-string a::after, .mast-drawer-foot .tlink::after{display:none}
}


/* ---------- 23. MOVEMENT ---------- */

/* Still photographs drift very slowly so the page is not frozen. Alternating direction keeps the
   two frames from marching in parallel. */
.frame-shot{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .frame-shot img{animation:drift 26s ease-in-out infinite alternate; will-change:transform}
  .frame-shot--square img{animation-duration:31s; animation-direction:alternate-reverse}
}
@keyframes drift{
  from{transform:scale(1.008)}
  to{transform:scale(1.062) translate3d(0,-1.1%,0)}
}

/* the hub clock is live: a breathing dot marks the local time as running, not printed */
.route-group--hub .stop-city{display:inline-flex; align-items:center}
.route-group--hub .stop-city::before{
  content:""; width:.34rem; height:.34rem; border-radius:50%; background:var(--warm); flex:none;
  margin-right:.5rem; animation:breathe 2.6s ease-in-out infinite
}
@keyframes breathe{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.78)}}
@media (prefers-reduced-motion:reduce){
  .route-group--hub .stop-city::before{animation:none; opacity:.75}
}



/* ==========================================================================
   23b. MAST overrides for the full site
   The homepage concept was built for six links and still carried tracked
   uppercase on the nav and the meta line. Neither can ship: the client has
   ruled out spaced capitals as an AI tell, and the real navigation has nine
   items that must fit the bar at 1000px.
   ========================================================================== */
.mast-nav a{text-transform:none; letter-spacing:0; font-family:var(--text);
  font-size:1.03rem; font-weight:400; color:var(--ink-2)}
.mast-nav a[aria-current="page"]{color:var(--ink)}
.mast-nav a[aria-current="page"]:hover{border-bottom-color:var(--gold)}
.mast-meta{text-transform:none; letter-spacing:0; font-size:.79rem; color:var(--ink-3)}
@media (min-width:1000px){
  .mast-nav{gap:clamp(.75rem,1.3vw,1.5rem)}
  .mast-nav a{font-size:clamp(.92rem,1.05vw,1.02rem)}
}
@media (min-width:1000px) and (max-width:1149px){
  /* nine links plus the mark and the language switch: give the bar room rather than
     letting it wrap or crowd the logo */
  .mast-mark img{width:98px}
}

/* ==========================================================================
   25b. PANELS — a heading with its copy, repeated
   The workhorse for the service pages, the industries and the corridor.
   ========================================================================== */
.panels{display:grid; gap:clamp(1.6rem,4.5vw,2.4rem)}
.panel{border-top:1px solid var(--rule-2); padding-top:1.15rem}
.panel .tag{display:block; margin-bottom:.5rem; font-family:var(--display);
  font-style:italic; font-size:.98rem; color:var(--gold-text);
  font-variation-settings:"opsz" var(--opsz-sm)}
.panel .h3{margin-bottom:.55rem}
.panel p{color:var(--ink-2); font-size:1rem; line-height:1.66; max-width:62ch}
.panel p + p{margin-top:.6rem}
.panel .best{font-size:.97rem; color:var(--ink-3)}
.panel .best b{font-weight:600; color:var(--ink-2)}
.band--ink .panel{border-top-color:var(--rule-on-ink)}
.band--ink .panel p{color:var(--on-ink-2)}
.band--ink .panel .tag{color:var(--warm)}
@media (min-width:620px){
  .panels--2{grid-template-columns:1fr 1fr}
  .panels--3{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .panels--3{grid-template-columns:repeat(3,1fr)}
  .panels--4{grid-template-columns:repeat(2,1fr)}
}

/* a numbered list of stages: the numeral is display italic, the rest is copy */
.steps{display:grid; gap:clamp(1.4rem,4vw,2rem)}
.step{display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:.4rem 1rem}
.step .n{font-family:var(--display); font-style:italic; font-size:1.15rem;
  color:var(--gold-text); line-height:1.3; font-variation-settings:"opsz" var(--opsz-sm)}
.step h3{margin-bottom:.4rem}
.step p{color:var(--ink-2); font-size:1rem; max-width:62ch}
@media (min-width:620px){ .steps--2{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .steps--3{grid-template-columns:repeat(3,1fr)} }

/* ==========================================================================
   23c. NO SPACED CAPITALS ANYWHERE
   The client named tracked uppercase as a sign of a generated page, alongside the
   short rule before a label. The homepage concept still used it for micro-labels
   (image captions, the roster's meta lines, the corridor head, the comparison
   table head). Same size, same colour, same hierarchy, sentence case, no tracking.
   ========================================================================== */
.mock-flag,.hero-shot figcaption,.route-head,.frame-shot figcaption,
.roster-meta,.roster-geo,.compare thead th,.stage-num,.pillar-num,.lines-num{
  text-transform:none; letter-spacing:0
}
.roster-meta{font-size:.78rem}
.roster-geo{font-size:.78rem}
.hero-shot figcaption,.frame-shot figcaption,.route-head{font-size:.82rem}
.compare thead th{font-size:.8rem}

/* ==========================================================================
   23d. THE SKIP LINK MUST NOT PUSH THE DOCUMENT SIDEWAYS
   The concept parked it at left:-9999px. In a left to right document that overflows
   into space nobody can scroll to, so it looked harmless. In a right to left
   document that same offset is scrollable overflow: the Arabic pages grew a real
   horizontal scroll and a 10,389px document box. It is now hidden with a clip path,
   which takes up no space in either direction, and reappears on focus.
   ========================================================================== */
.skip{position:absolute; left:auto; top:auto; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:fixed; left:0; top:0; width:auto; height:auto; padding:.75rem 1.1rem; margin:0;
  clip-path:none; overflow:visible; background:var(--ink); color:var(--page); z-index:200}

/* the roster name and its meta line sat 7px apart on a phone: tight enough to read as one block */
@media (max-width:619px){
  .roster li{gap:.5rem 1rem}
}

/* ==========================================================================
   23e. THE CORRIDOR CLOCK READS AS LIVE
   Seven clocks, but three European cities share a timezone and three Gulf cities share
   another, so only the hub looked like it was running and the strip read as broken. Every
   stop now shows seconds, carries its UTC offset, and the one nearest the visitor is marked.
   ========================================================================== */
/* The time line holds three things: the time, its seconds, and the zone. Setting a display mode
   here broke the wide layout, where the time is meant to sit on its own line under the city.
   Spacing is done with margins instead, which is safe at every width. */
.stop-time{white-space:nowrap}
.stop-sec{font-variant-numeric:tabular-nums; color:var(--ink-3)}
.stop-off{margin-left:.5rem; font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.stop-you{margin-left:.5rem; white-space:nowrap; font-family:var(--display); font-style:italic;
  font-size:.8rem; color:var(--gold-text);
  font-variation-settings:"opsz" var(--opsz-sm)}
.stop--you .stop-city{color:var(--gold-text)}
.route-group--hub .stop-sec,.route-group--hub .stop-off{color:var(--on-ink-3)}
.route-group--hub .stop--you .stop-city,.route-group--hub .stop-you{color:var(--warm)}
[dir="rtl"] .stop-you{font-family:"Amiri",serif}


/* cookie consent bar: ink panel, gold accept, above the WhatsApp bubble */
.consent-bar{position:fixed; z-index:70; inset-inline:1rem; bottom:1rem; max-width:34rem;
  background:var(--ink); color:var(--page); padding:1rem 1.15rem; border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.34); font-size:.86rem; line-height:1.45;
  transition:opacity .3s ease, transform .3s ease}
.consent-bar--out{opacity:0; transform:translateY(10px)}
.consent-title{font-family:var(--display); font-size:1.02rem; line-height:1.2; margin:0 0 .3rem}
.consent-text{margin:0 0 .75rem; color:var(--on-ink-3)}
.consent-actions{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.consent-yes,.consent-no{font:inherit; cursor:pointer; padding:.45rem .95rem; border-radius:2px;
  border:1px solid transparent}
.consent-yes{background:var(--warm); color:var(--ink); font-weight:600}
.consent-no{background:transparent; color:var(--page); border-color:var(--on-ink-3)}
.consent-more{color:var(--warm); text-underline-offset:3px}
@media (min-width:1000px){.consent-bar{inset-inline:auto 1.5rem; bottom:1.5rem}}


/* where am I: the current page in the mast, in the accent, with its rule lit */
.mast-nav a[aria-current="page"]{color:var(--gold-text); border-bottom-color:var(--warm); font-weight:600}

/* the breadcrumb was too quiet to read as a location */
.crumbs{font-size:.88rem; color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--gold-text)}
.crumbs span[aria-hidden="true"]{color:var(--warm)}
.crumbs span:last-child{color:var(--ink); font-weight:500}

/* the note sits beside the captions: align its baseline with theirs */
.frames-note{align-self:end}
.frames-note .note{font-size:.82rem; line-height:1.5}


/* the founder's portrait: fills its circle, larger, and the artwork's own ring is cropped out */
.about-figure img{width:clamp(124px,26vw,156px); height:auto; aspect-ratio:1;
  border-radius:50%; object-fit:cover; margin-bottom:1.15rem}


/* the language link sits beyond the hairline in both directions: logical, not physical, sides.
   A physical border-left put the rule on the far side of "English" on the Arabic pages. */
.mast-lang{margin-inline-start:.85rem !important; padding-inline-start:1.15rem !important;
  border-inline-start:1px solid var(--rule-2) !important}



/* ==========================================================================
   24. INNER PAGE HEAD — every page that is not the homepage
   ========================================================================== */
.page-head{padding-block:clamp(2.5rem,7vw,4.25rem) clamp(1.9rem,5vw,3rem);
  border-bottom:1px solid var(--rule)}
.page-head .kicker{margin-bottom:.95rem}
.page-head h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.05rem,6.4vw,3.7rem); line-height:.99; letter-spacing:-.015em;
  margin-left:-.035em;
  font-variation-settings:"opsz" var(--opsz-lg)
}
.page-head .lede{margin-top:1.15rem}
.page-head .standfirst{margin-top:1.15rem; font-size:clamp(1.02rem,2.4vw,1.18rem)}
.page-head--ink{background:var(--ink); color:var(--on-ink-1); border-bottom:0}
.page-head--ink h1{color:var(--on-ink-1)}
.page-head--ink .kicker{color:var(--warm)}
.page-head--ink .standfirst,.page-head--ink .lede{color:var(--on-ink-2)}

/* breadcrumbs: plain words, separated by a middot, no chevrons and no dashes */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .6rem;
  font-size:.82rem; color:var(--ink-3); margin-bottom:1.4rem}
.crumbs a{color:var(--ink-3); border-bottom:1px solid transparent; padding-block:.35rem}
.crumbs a:hover{color:var(--gold-text); border-bottom-color:var(--gold-text)}
.crumbs span[aria-hidden]{color:var(--rule-2)}
.page-head--ink .crumbs,.page-head--ink .crumbs a{color:var(--on-ink-3)}
.page-head--ink .crumbs a:hover{color:var(--warm); border-bottom-color:var(--warm)}

/* ==========================================================================
   25. PROSE — article bodies, long-form copy, legal text
   ========================================================================== */
.prose{max-width:68ch}
.prose > * + *{margin-top:1.18rem}
.prose p{color:var(--ink-2); font-size:1.06rem; line-height:1.74}
.prose > p:first-of-type{font-size:1.12rem; color:var(--ink)}
.prose h2{
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(1.7rem,4.6vw,2.4rem); line-height:1.06; letter-spacing:-.01em;
  margin-top:clamp(2.4rem,6vw,3.4rem);
  font-variation-settings:"opsz" var(--opsz-lg)
}
.prose h3{
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(1.28rem,3.5vw,1.62rem); line-height:1.18;
  margin-top:clamp(1.9rem,4.5vw,2.5rem);
  font-variation-settings:"opsz" var(--opsz-sm)
}
.prose h2 + p,.prose h3 + p{margin-top:.85rem}
.prose a{color:var(--ink); border-bottom:1px solid var(--rule-2);
  transition:color .25s var(--ease), border-color .25s var(--ease)}
.prose a:hover{color:var(--gold-text); border-bottom-color:var(--gold-text)}
.prose strong{font-weight:600; color:var(--ink)}
.prose em{font-style:italic}
.prose ul,.prose ol{padding-inline-start:1.35rem; max-width:64ch}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:.55rem; color:var(--ink-2); font-size:1.04rem; line-height:1.68}
.prose li::marker{color:var(--gold-text)}
.prose blockquote{
  border-left:2px solid var(--gold); padding-left:1.2rem;
  font-style:italic; color:var(--ink-2); max-width:60ch
}
.prose hr{border:0; border-top:1px solid var(--rule); margin-block:2.6rem}
.prose figure{margin-top:2.2rem}
.prose figure img{width:100%}
.prose figcaption{margin-top:.7rem; font-size:.86rem; color:var(--ink-3); line-height:1.6}
.prose .lede{max-width:52ch}
.prose table{width:100%; font-size:.96rem; margin-top:1.6rem}
.prose th,.prose td{text-align:start; padding:.7rem .8rem; border-bottom:1px solid var(--rule)}
.prose th{font-family:var(--display); font-weight:700; font-size:.98rem;
  border-bottom:1px solid var(--rule-2); font-variation-settings:"opsz" var(--opsz-sm)}
.prose td{color:var(--ink-2)}
.prose caption{margin-bottom:.7rem; font-size:.86rem; color:var(--ink-3); text-align:start}

/* ==========================================================================
   26. ARTICLE — a blog post
   ========================================================================== */
.article-head{padding-block:clamp(2.4rem,6.5vw,3.9rem) clamp(1.5rem,4vw,2.4rem)}
.article-head h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.95rem,6vw,3.35rem); line-height:1.02; letter-spacing:-.014em;
  margin-left:-.032em; max-width:24ch;
  font-variation-settings:"opsz" var(--opsz-lg)
}
.article-head .standfirst{margin-top:1.1rem; font-size:clamp(1.02rem,2.4vw,1.18rem)}
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem;
  margin-top:1.35rem; font-size:.86rem; color:var(--ink-3)}
.byline .who{color:var(--ink-2)}
.article-figure{margin-top:clamp(1.8rem,5vw,2.6rem)}
.article-figure img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article-body{padding-block:clamp(2rem,5.5vw,3rem)}
.article-foot{margin-top:clamp(2.4rem,6vw,3.2rem); padding-top:1.5rem;
  border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:baseline}
.article-tags{display:flex; flex-wrap:wrap; gap:.5rem}
.article-tags a{font-size:.84rem; color:var(--ink-3); border:1px solid var(--rule);
  padding:.4rem .7rem; min-height:36px; display:inline-flex; align-items:center}
.article-tags a:hover{color:var(--gold-text); border-color:var(--gold-text)}

/* ==========================================================================
   27. POST GRID — blog index and related reading
   ========================================================================== */
.posts{display:grid; gap:clamp(1.9rem,5vw,2.6rem)}
.post-card{display:flex; flex-direction:column}
.post-card figure{overflow:hidden; background:var(--page-2)}
.post-card img{width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease), filter .45s var(--ease)}
@media (hover:hover){ .post-card:hover img{transform:scale(1.025)} }
.post-card .kicker{margin-top:1.1rem}
.post-card h3{margin-top:.5rem}
.post-card h3 a{border-bottom:1px solid transparent}
.post-card h3 a:hover{color:var(--gold-text); border-bottom-color:var(--gold-text)}
.post-card p{margin-top:.6rem; font-size:.99rem; color:var(--ink-2); line-height:1.62}
.post-meta{margin-top:.85rem; font-size:.83rem; color:var(--ink-3)}
.post-card--feature{grid-column:1/-1}
@media (min-width:760px){
  .post-card--feature{display:grid; grid-template-columns:1.05fr .95fr;
    gap:clamp(1.5rem,4vw,2.75rem); align-items:center}
  .post-card--feature .kicker{margin-top:0}
  .post-card--feature img{aspect-ratio:4/3}
}

/* ==========================================================================
   28. FORMS — contact, quote requests, tool inputs
   ========================================================================== */
.form{display:grid; gap:1.05rem}
.form--2col{display:grid; gap:1.05rem}
.field{display:grid; gap:.45rem}
.field label{font-size:.92rem; color:var(--ink-2); line-height:1.4}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--rule-2); border-radius:2px; padding:.78rem .9rem;
  min-height:48px; width:100%; appearance:none
}
.field select{background-image:none; padding-inline-end:2rem}
.field textarea{min-height:8.5rem; resize:vertical; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#9a9186}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold); outline:2px solid var(--gold); outline-offset:1px
}
.form-note{font-size:.83rem; color:var(--ink-3); line-height:1.55}
.form-status{font-size:.94rem; padding:.85rem 1rem; border:1px solid var(--rule-2); background:var(--page-2)}
.form-status[hidden]{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--display); font-size:1.04rem; font-weight:600; letter-spacing:-.005em;
  padding:.95rem 1.6rem; min-height:50px; cursor:pointer;
  background:var(--ink); color:var(--page); border:1px solid var(--ink); border-radius:2px;
  transition:background .25s var(--ease), color .25s var(--ease)
}
.btn:hover{background:transparent; color:var(--ink)}
.btn--gold{background:var(--gold-text); border-color:var(--gold-text); color:var(--page)}
.btn--gold:hover{background:transparent; color:var(--gold-text)}
.btn[disabled]{opacity:.55; cursor:default}
.btn--wide{width:100%}

/* ==========================================================================
   29. CONTACT — form, details, and the embedded booking calendar
   ========================================================================== */
.contact-grid{display:grid; gap:clamp(1.5rem,4vw,2.25rem); align-items:start}
.card{background:#fff; border:1px solid var(--rule); padding:clamp(1.35rem,4vw,2.25rem)}
.card--ink{background:var(--ink); color:var(--on-ink-1); border-color:var(--ink)}
.card--ink .kicker{color:var(--warm)}
.card--ink .h3{color:var(--on-ink-1)}
.card--ink a{color:var(--on-ink-1)}
.card--ink a:hover{color:var(--warm)}
.card h2,.card h3{margin-bottom:1.15rem}
.detail-list{display:grid; gap:1.05rem; margin-top:.5rem}
.detail-list dt{font-family:var(--display); font-style:italic; font-size:.95rem;
  color:var(--gold-text); margin-bottom:.18rem; font-variation-settings:"opsz" var(--opsz-sm)}
.card--ink .detail-list dt{color:var(--warm)}
.detail-list dd{margin:0; font-size:1rem; line-height:1.55}
.detail-list dd a{word-break:break-word}
.socials{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.socials a{width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-on-ink); color:var(--warm); border-radius:50%}
.socials a:hover{background:var(--warm); color:var(--ink); border-color:var(--warm)}

/* the calendar is embedded, not a link to somewhere else */
.cal-wrap{margin-top:clamp(1.75rem,5vw,2.5rem)}
.cal-embed{border:1px solid var(--rule); background:#fff; overflow:hidden}
.cal-embed iframe{display:block; width:100%; min-height:38rem; border:0}
.cal-actions{display:flex; flex-wrap:wrap; gap:.85rem 1.5rem; align-items:center; margin-top:1.1rem}
.cal-note{margin-top:1rem; font-size:.86rem; color:var(--ink-3); line-height:1.6; max-width:62ch}

/* ==========================================================================
   30. TOOLS — estimator panels
   ========================================================================== */
.tool{background:#fff; border:1px solid var(--rule); padding:clamp(1.35rem,4vw,2.1rem)}
.tool > * + *{margin-top:1.15rem}
.tool .h3{margin-bottom:.35rem}
.tool fieldset{border:0; padding:0; margin:0}
.tool legend{font-size:.92rem; color:var(--ink-2); padding:0; margin-bottom:.5rem}
.tool-row{display:grid; gap:1.05rem}
.tool-out{padding-top:1.15rem; border-top:1px solid var(--rule-2)}
.tool-figure{font-family:var(--display); font-weight:700; color:var(--gold-text);
  font-size:clamp(2.1rem,7.5vw,3.1rem); line-height:1; font-variation-settings:"opsz" var(--opsz-lg)}
.tool-out p{margin-top:.6rem; font-size:.94rem; color:var(--ink-3); max-width:52ch}
.tool input[type=range]{width:100%; height:44px; accent-color:var(--gold-text); margin:0}
.tool .range-val{font-size:.94rem; color:var(--ink-2)}
.choices{display:flex; flex-wrap:wrap; gap:.55rem}
.choices label{display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  border:1px solid var(--rule); padding:.5rem .8rem; cursor:pointer; font-size:.94rem}
.choices input{accent-color:var(--gold-text)}
/* the mandated estimate disclaimer, verbatim, small italic, below the block */
.estimate-note{margin-top:1.15rem; font-size:.86rem; font-style:italic; color:var(--ink-3); line-height:1.6}

/* ==========================================================================
   31. LEGAL — dense text, numbered sections
   ========================================================================== */
.legal{padding-block:clamp(2rem,5.5vw,3rem)}
.legal .prose{max-width:76ch}
.legal .prose h2{font-size:clamp(1.32rem,3.4vw,1.72rem); margin-top:2.4rem}
.legal .prose p,.legal .prose li{font-size:1rem; line-height:1.7}
.legal-meta{font-size:.88rem; color:var(--ink-3); margin-top:.9rem}
.legal-entity{font-size:.95rem; color:var(--ink-2); margin-bottom:1.6rem}

/* ==========================================================================
   32. FLOATING UTILITIES
   ========================================================================== */
.wa{position:fixed; inset-inline-end:1rem; inset-block-end:1rem; z-index:70;
  width:54px; height:54px; border-radius:50%; background:var(--ink); color:var(--page);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(13,13,13,.24)}
.wa:hover{background:var(--gold-text)}
.wa svg{width:26px; height:26px; fill:currentColor}
.totop{position:fixed; inset-inline-end:1rem; inset-block-end:5.1rem; z-index:70;
  width:44px; height:44px; border:1px solid var(--rule-2); background:var(--page);
  color:var(--ink); display:none; align-items:center; justify-content:center; cursor:pointer}
.totop.show{display:flex}
@media (min-width:1000px){ .wa{width:58px; height:58px; inset-inline-end:1.75rem; inset-block-end:1.75rem}
  .totop{inset-inline-end:1.75rem; inset-block-end:6rem} }

/* ==========================================================================
   33. NON-HOMEPAGE LAYOUT — widen out
   ========================================================================== */
@media (min-width:620px){
  .posts{grid-template-columns:1fr 1fr}
  .form--2col{grid-template-columns:1fr 1fr}
  .form--2col .field--wide{grid-column:1/-1}
  .tool-row{grid-template-columns:1fr 1fr}
}
@media (min-width:760px){
  .contact-grid{grid-template-columns:1.06fr .94fr}
  .contact-grid .card--span{grid-column:1/-1}
}
@media (min-width:1000px){
  .posts{grid-template-columns:repeat(3,1fr)}
  .page-head{padding-block:clamp(3.4rem,6.5vw,5rem) clamp(2.2rem,4.5vw,3.1rem)}
}

/* ==========================================================================
   34. RIGHT TO LEFT — the Arabic mirror
   ========================================================================== */
[dir="rtl"]{font-family:"Amiri","Noto Naskh Arabic","Geeza Pro",serif}
[dir="rtl"] .display,[dir="rtl"] .h2,[dir="rtl"] .h3,
[dir="rtl"] .page-head h1,[dir="rtl"] .article-head h1,
[dir="rtl"] .prose h2,[dir="rtl"] .prose h3,[dir="rtl"] .tool-figure,
[dir="rtl"] .qa summary,[dir="rtl"] .btn{
  font-family:"Amiri","Noto Naskh Arabic","Geeza Pro",serif;
  font-variation-settings:normal; letter-spacing:0
}
/* the optical hang belongs on the other side, and Arabic must never be letter-spaced */
[dir="rtl"] .display,[dir="rtl"] .h2,[dir="rtl"] .h3,
[dir="rtl"] .page-head h1,[dir="rtl"] .article-head h1{margin-left:0; margin-right:-.02em}
[dir="rtl"] .kicker{font-family:"Amiri","Noto Naskh Arabic",serif; font-style:normal}
[dir="rtl"] .qa summary{padding:1.25rem 0 1.25rem 2.6rem}
[dir="rtl"] .qa summary::after{right:auto; left:.15rem}
[dir="rtl"] .prose ul,[dir="rtl"] .prose ol{padding-inline-start:0; padding-inline-end:1.35rem}
[dir="rtl"] .prose blockquote{border-left:0; border-right:2px solid var(--gold); padding-left:0; padding-right:1.2rem}
[dir="rtl"] .field select{padding-inline-end:.9rem; padding-inline-start:2rem}
[dir="rtl"] .field input,[dir="rtl"] .field select,[dir="rtl"] .field textarea{text-align:right}
[dir="rtl"] .byline,[dir="rtl"] .crumbs{direction:rtl}
[dir="rtl"] .latin{direction:ltr; unicode-bidi:embed; display:inline-block}

/* ==========================================================================
   35. TOUCH TARGETS — the components added for the full site
   ========================================================================== */
@media (pointer:coarse){
  .crumbs a{min-height:44px; display:inline-flex; align-items:center}
  .prose a{min-height:32px}
  .detail-list dd a{min-height:44px; display:inline-flex; align-items:center}
  .cal-actions .tlink{min-height:44px; display:inline-flex; align-items:center}
  .card--ink a{min-height:44px}
  .article-tags a{min-height:44px}
  /* a card's headline link was a 27px target on a tablet. On touch it becomes a full height
     row, so the whole line is reachable with a thumb. */
  .post-card h3 a{display:flex; align-items:center; min-height:44px}
  .article-tags a,.prose a[href*="contact"]{min-height:44px; display:inline-flex; align-items:center}
  /* a radio was a 13px box. The label around it was already a full target, but the control
     itself should still be comfortable to hit. */
  .choices input{width:1.25rem; height:1.25rem}
  .choices label{padding-block:.6rem}
  .form-status{min-height:44px; display:flex; align-items:center}
}

/* ==========================================================================
   36. RIGHT TO LEFT DRAWER
   The drawer was anchored to the right in both languages, which put it on the
   opposite side from the menu button in Arabic and inflated the scroll box.
   In Arabic it now slides in from the left, where the button sits.
   ========================================================================== */
@media (max-width:999px){
  /* In Arabic the drawer belongs on the left, where the menu button is. It is hidden with
     visibility and a short offset rather than parked a full screen off-canvas: in a right to
     left document, content sitting off the inline-start edge still counts as scrollable
     overflow, which inflated the page box to 10,389px and showed up as a horizontal scroll. */
  [dir="rtl"] .mast-nav{
    inset:0 auto 0 0; transform:translateX(-101%);
    border-left:0; border-right:1px solid var(--rule-2)
  }
  [dir="rtl"] .mast-nav.open{transform:none}
}
@media (min-width:1000px){
  [dir="rtl"] .mast-nav{inset:auto; transform:none; border:0}
}

/* ==========================================================================
   37. THE INNER PAGE HEAD, SPLIT
   A title over a full width paragraph reads as a template. On a wide screen the
   title takes the first column and the standfirst sits beside it, aligned on the
   baseline, which is what makes an inner page look art directed rather than stacked.
   ========================================================================== */
.page-head-grid .page-head-title{margin-bottom:1.15rem}
@media (min-width:1000px){
  .page-head-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(2rem,4vw,4rem); align-items:end}
  .page-head-grid .page-head-title{margin-bottom:0}
  .page-head-grid .standfirst{margin-top:0; padding-bottom:.45rem; max-width:42ch}
  .page-head-grid .lede{margin-top:0; padding-bottom:.45rem}
}

/* ==========================================================================
   38. ARTICLE EXTRAS — contents list and the author card
   ========================================================================== */
.toc{margin-bottom:clamp(2rem,5vw,2.75rem); padding-bottom:1.5rem; border-bottom:1px solid var(--rule)}
.toc .kicker{margin-bottom:.9rem}
.toc-list{counter-reset:none; display:grid; gap:.55rem; max-width:56ch}
.toc-list li{display:grid; grid-template-columns:1.8rem minmax(0,1fr); gap:.5rem;
  font-size:1rem; color:var(--ink-2); line-height:1.5}
.toc-n{font-family:var(--display); font-style:italic; color:var(--gold-text); font-size:.92rem;
  font-variation-settings:"opsz" var(--opsz-sm)}
.author-card{display:grid; grid-template-columns:64px minmax(0,1fr); gap:1rem; align-items:center;
  max-width:44ch}
.author-card img{width:64px; height:64px; border-radius:50%; object-fit:cover}
.author-name{font-family:var(--display); font-weight:700; font-size:1.12rem;
  font-variation-settings:"opsz" var(--opsz-sm)}
.author-note{font-size:.92rem; color:var(--ink-3); line-height:1.55; margin-top:.2rem}
.article-foot{flex-direction:column; gap:1.75rem; align-items:flex-start}
@media (min-width:1000px){
  .article-body .frame{display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,4.5rem); align-items:start}
  .article-body .toc{position:sticky; top:8rem; margin-bottom:0; padding-bottom:0; border-bottom:0;
    border-top:1px solid var(--rule-2); padding-top:1.25rem}
  .article-body .prose{max-width:66ch}
}

/* a five point checklist inside a tool panel */
.checklist{display:grid; gap:.7rem; margin-top:1.1rem}
@media (min-width:620px){ .checklist{grid-template-columns:1fr 1fr} }
.checklist li{display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.55rem;
  font-size:1rem; color:var(--ink-2); line-height:1.55}
.checklist li::before{content:""; width:.42rem; height:.42rem; margin-top:.55rem; border-radius:50%;
  background:var(--gold-text)}