/* =====================================================================
   v7 layer (3 Oct 2026). Loaded after v4.css on the home page and the
   Private Office page. Additive only: nothing in home.css, refinements.css,
   enhancements.css or v4.css is edited.

   1. Home hero: the marble plate set behind a two-line headline.
   2. Blended plates: an image laid behind a whole section and faded into
      it, the way the About hero does it, so no image needs a band of its own.
   3. Home components: three ways in, the responsibility split, the method,
      travel checks, guide links, named roles and pledges.
   ===================================================================== */

/* ---- 1. Home hero ------------------------------------------------------- */
.plate-hero--home{min-height:760px;min-height:min(860px,100svh)}
.plate-hero--home .plate-hero__img img{object-position:74% 46%}
.plate-hero--home h1{
  max-width:none;font-size:clamp(2.7rem,4.9vw,4.85rem);line-height:1.02;letter-spacing:-.035em}
.plate-hero--home h1 .h1-line{display:block}
.plate-hero--home h1 .h1-line--set{color:rgba(242,238,230,.66)}
.plate-hero--home .hero-copy{max-width:37rem}
@media(max-width:760px){
  .plate-hero--home{min-height:auto}
  /* The shared mobile hero keeps a full-screen inner box but sets it as a
     block, which strands the copy at the top of an empty plate. Hug the copy
     instead, so the three ways in arrive sooner. */
  .plate-hero--home .hero-inner{min-height:0}
  .plate-hero--home h1{font-size:clamp(2.1rem,8.8vw,3rem);line-height:1.07}
}

/* ---- 2. Blended plates ---------------------------------------------------
   The image sits under the section's content inside its own stacking
   context, then two scrims melt it into the section colour: one from the
   reading side, one at the top and bottom edges so the seams disappear. */
.blend{position:relative;isolation:isolate;overflow:hidden}
.blend__img{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blend__img picture,.blend__img img{display:block;width:100%;height:100%}
.blend__img img{object-fit:cover;object-position:72% 40%;opacity:.9}
.blend__img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#11130E 0%,rgba(17,19,14,.9) 30%,rgba(17,19,14,.42) 66%,rgba(17,19,14,.22) 100%),
    linear-gradient(180deg,#11130E 0%,rgba(17,19,14,0) 24%,rgba(17,19,14,0) 68%,#11130E 100%)}
/* Ripple plate: the rings sit high in the frame, the sand runs bright below. */
.blend--ripple .blend__img img{object-position:78% 30%;opacity:.85}
/* Marble plate: veins run diagonally, so let them through on the right. */
.blend--marble .blend__img img{object-position:66% 50%;opacity:.9}
/* Sections that have their own gradient keep it; the plate sits on top. */
.blend.evidence .blend__img::after{
  background:
    linear-gradient(90deg,#0F110C 0%,rgba(15,17,12,.9) 40%,rgba(15,17,12,.7) 72%,rgba(15,17,12,.4) 100%),
    linear-gradient(180deg,#11130E 0%,rgba(17,19,14,0) 26%,rgba(17,19,14,0) 66%,#0E100B 100%)}
/* Where a vein or ring runs under a line of copy, a soft halo keeps the
   words crisp without darkening the whole plate. */
.blend p,.blend li,.blend .lead,.blend h2,.blend h3,.blend strong{text-shadow:0 1px 16px rgba(13,15,11,.9),0 0 3px rgba(13,15,11,.55)}
@media(max-width:760px){
  .blend__img::after{
    background:linear-gradient(180deg,#11130E 0%,rgba(17,19,14,.82) 30%,rgba(17,19,14,.9) 70%,#11130E 100%)}
  .blend__img img{object-position:70% 20%}
}
@media print{.blend__img{display:none}}

/* ---- 3. Three ways in (light) ------------------------------------------- */
.routes__grid{list-style:none;margin:clamp(2.4rem,5vw,3.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark)}
.route{position:relative;background:#F8F5EE;padding:clamp(1.5rem,2.8vw,2.4rem);
  display:flex;flex-direction:column;transition:background .3s var(--ease)}
.route__label{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .7rem;margin:0;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.route__tag{font-size:.7rem;letter-spacing:.04em;text-transform:none;font-weight:500;color:var(--forest);
  border:1px solid rgba(42,70,54,.38);border-radius:999px;padding:.18rem .6rem}
.route h3{margin:1.25rem 0 0;font-size:clamp(1.6rem,2.3vw,2.15rem);line-height:1.1;max-width:15ch}
.route p:not(.route__label){margin-top:1rem;color:var(--muted);font-size:.96rem;line-height:1.7;flex-grow:1}
.route__link{margin-top:1.6rem;align-self:flex-start;font-size:.88rem;font-weight:600;color:var(--forest);
  text-underline-offset:.35em}
.route__link span{margin-left:.45rem}
.route__link::after{content:"";position:absolute;inset:0}
@media (hover:hover){.route:hover{background:#FCFAF5}}
.route:focus-within{background:#FCFAF5}
.routes__note{margin-top:1.4rem;font-size:.92rem;line-height:1.6;color:var(--muted)}
.routes__note a{color:var(--forest);text-underline-offset:3px}
@media(max-width:900px){.routes__grid{grid-template-columns:1fr}.route h3{max-width:none}}

/* ---- Responsibility split (dark) ---------------------------------------- */
.duty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.2rem)}
.duty>div{background:rgba(17,19,14,.92);padding:clamp(1.4rem,2.6vw,2.2rem)}
.duty .role{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.duty h3{margin:.9rem 0 0;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12}
.duty p:not(.role){margin-top:.9rem;color:var(--muted-dark);font-size:.95rem;line-height:1.68}
@media(max-width:900px){.duty{grid-template-columns:1fr}}

/* ---- The method: Measure, Manage, Optimise (dark) ------------------------ */
.method-label{margin:clamp(2.8rem,5.5vw,4rem) 0 0;font-size:.82rem;font-weight:600;color:var(--gold)}
.method{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,3.4rem)}
.method li{border-top:1px solid var(--line);padding-top:1.3rem}
.method .num{display:block}
.method h3{margin-top:.9rem;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.12}
.method p{margin-top:.7rem;color:var(--muted-dark);font-size:.95rem;line-height:1.68}
@media(max-width:900px){.method{grid-template-columns:1fr;gap:1.4rem}}

/* ---- Travel: checks and guide links (dark) ------------------------------- */
.travel__checks{list-style:none;margin:clamp(2.4rem,5vw,3.2rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.travel__checks li{border-top:1px solid var(--line);padding-top:1.2rem}
.travel__checks .num{display:block}
.travel__checks strong{display:block;margin-top:.85rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.015em}
.travel__checks p{margin-top:.6rem;color:var(--muted-dark);font-size:.94rem;line-height:1.66}
.guide-pair{list-style:none;margin:clamp(2.4rem,4.5vw,3.2rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);max-width:54rem}
.guide-pair li{display:flex}
.guide-pair a{flex:1;display:flex;flex-direction:column;gap:.45rem;padding:1.35rem 1.5rem;
  background:rgba(17,19,14,.78);text-decoration:none;transition:background .3s var(--ease)}
@media (hover:hover){.guide-pair a:hover{background:rgba(17,19,14,.55)}}
.guide-pair__tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.guide-pair strong{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
.guide-pair__sub{color:var(--muted-dark);font-size:.9rem;line-height:1.55}
.travel .evidence-note{max-width:54rem}
.travel .section-head{max-width:min(100%,62rem)}
@media(max-width:900px){.travel__checks{grid-template-columns:1fr;gap:1.2rem}}
@media(max-width:640px){.guide-pair{grid-template-columns:1fr}}

/* ---- Named roles and pledges (light) ------------------------------------- */
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);margin-top:clamp(2.4rem,5vw,3.2rem)}
.roles>div{background:#F8F5EE;padding:clamp(1.3rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.5rem}
.roles .role{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.roles h3{margin:.35rem 0 0;font-size:clamp(1.4rem,1.9vw,1.75rem);line-height:1.15}
.roles p:not(.role){color:var(--muted);font-size:.93rem;line-height:1.65}
.roles a{margin-top:auto;padding-top:.6rem;font-size:.88rem;font-weight:600;color:var(--forest);text-underline-offset:.3em}
.pledges{list-style:none;margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem clamp(1.6rem,3vw,2.6rem)}
.pledges li{position:relative;padding-left:1.9rem;color:var(--ink);font-size:.96rem;line-height:1.62}
.pledges li::before{content:"";position:absolute;left:.15rem;top:.48rem;width:.7rem;height:.38rem;
  border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(-45deg)}
@media(max-width:1100px){.roles{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.pledges{grid-template-columns:1fr}}
@media(max-width:600px){.roles{grid-template-columns:1fr}}

/* ---- Enquiry: a quiet route for pilots and hotels ------------------------- */
.enquiry .route-hint{margin-top:1.4rem;font-size:.9rem;line-height:1.6;color:var(--muted);max-width:31rem}
.enquiry .route-hint a{color:var(--forest);text-underline-offset:3px}

@media print{.route__link::after{display:none}}