/* ============ service detail — Cinematic layout ============ */

/* ---------- shared scaffold ---------- */
.crumbs{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist-dim);
  display:flex;gap:14px;align-items:center;justify-content:center;}
.crumbs a{color:var(--mist-dim);transition:.3s;}
.crumbs a:hover{color:var(--aqua);}
.crumbs .sep{color:var(--blue-soft);}

.sec{padding:clamp(64px,9vw,130px) 0;}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(40px,6vw,64px);}
.sec-head .eyebrow{margin-bottom:22px;}
.sec-head h2{font-family:var(--f-display);text-transform:uppercase;color:#fff;
  font-size:clamp(28px,3.8vw,48px);letter-spacing:.04em;}

/* intro statement — set in body face: long copy in display caps is unreadable */
.v-intro{text-align:center;}
.v-intro .container{max-width:800px;}
.v-intro .eyebrow{margin-bottom:26px;}
.v-intro p.big{color:#fff;font-size:clamp(19px,2.2vw,29px);line-height:1.6;
  letter-spacing:.01em;text-wrap:pretty;}

/* includes */
.inc-wrap{max-width:880px;margin:0 auto;}
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(34px,4vw,64px);}
.inc{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line-soft);}
.inc i{flex:0 0 auto;width:11px;height:12px;margin-top:7px;background:var(--aqua);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);}
.inc p{color:var(--mist);font-size:16px;line-height:1.6;}

/* steps as pillars */
.steps-band{background:linear-gradient(180deg,var(--navy-900),var(--ink));text-align:center;}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px;margin:0 auto;}
.pillar .num{font-family:var(--f-display);color:var(--blue-soft);font-size:13px;letter-spacing:.35em;}
.pillar h3{font-family:var(--f-display);text-transform:uppercase;color:#fff;font-size:19px;
  letter-spacing:.05em;margin:16px 0 12px;}
.pillar p{font-size:14.5px;color:var(--mist-dim);line-height:1.65;}

/* gallery */
.gal{display:grid;grid-template-columns:1.4fr 1fr;grid-auto-rows:minmax(0,1fr);gap:14px;
  height:clamp(360px,46cqw,560px);}
.gal .ph{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line-soft);}
.gal .ph:first-child{grid-row:span 2;}
.gal .ph .media{position:absolute;inset:0;}
.gal .ph .media>img{transition:transform 1.1s var(--ease);}
.gal .ph:hover .media>img{transform:scale(1.05);}

/* related — serenity cards */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.rel{position:relative;display:block;aspect-ratio:3/3.2;border-radius:3px;overflow:hidden;
  border:1px solid var(--line-soft);}
.rel .media{position:absolute;inset:0;}
.rel .media>img{filter:saturate(.92) brightness(.8);transition:transform 1.1s var(--ease),filter .6s;}
.rel:hover .media>img{transform:scale(1.07);filter:saturate(1) brightness(.9);}
.rel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(3,32,47,.92) 8%,rgba(3,32,47,.15) 60%,rgba(3,32,47,.3));}
.rel .nm{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;
  font-family:var(--f-display);text-transform:uppercase;color:#fff;font-size:19px;letter-spacing:.06em;}
.rel .nm span{display:block;font-family:var(--f-body);font-size:11px;
  letter-spacing:.3em;color:var(--aqua);margin-top:10px;}

/* sections respond to their own column, not the window.
   NB: must come after the .gal / .rel base rules to win the cascade. */
main,.v-body{container-type:inline-size;}
@container (max-width:760px){
  .inc-grid{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;gap:34px;}
  .gal{grid-template-columns:1fr;height:auto;}
  .gal .ph{aspect-ratio:16/10;}
  .gal .ph:first-child{grid-row:auto;}
  .rel-grid{grid-template-columns:1fr;}
  .rel{aspect-ratio:16/9;}
}

/* embedded enquiry */
.det-enq{background:linear-gradient(180deg,var(--navy-900),var(--ink));}
.det-enq .wrap{max-width:720px;margin:0 auto;}
.det-enq .sec-head{margin-bottom:34px;}
.det-enq .sec-head p{margin-top:18px;color:var(--mist-dim);font-size:15.5px;line-height:1.7;}
.det-enq .who{text-align:center;margin-top:26px;font-size:14px;color:var(--mist);
  display:flex;gap:8px;flex-direction:column;}
.det-enq .who a{color:var(--aqua);}
.det-enq .enq-form{margin-top:0;}
.det-enq .enq-actions{justify-content:center;}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft);}
.pn a{padding:clamp(34px,4vw,54px) clamp(20px,5vw,64px);display:flex;flex-direction:column;gap:12px;transition:.4s;}
.pn a:hover{background:rgba(255,255,255,.03);}
.pn a.next{text-align:right;border-left:1px solid var(--line-soft);}
.pn .dir{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist-dim);}
.pn .nm{font-family:var(--f-display);text-transform:uppercase;color:#fff;
  font-size:clamp(18px,2.2vw,26px);letter-spacing:.04em;}

/* ---------- variant A : cinematic ---------- */
.v-hero{position:relative;min-height:86vh;display:grid;place-items:center;
  text-align:center;padding:150px 20px 90px;overflow:hidden;}
.v-hero .media{position:absolute;inset:0;}
.v-hero .media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 35%,rgba(3,32,47,.38),rgba(3,32,47,.8) 70%,var(--ink) 100%);}
.v-hero .inner{position:relative;max-width:840px;}
.v-hero .crumbs{margin-bottom:28px;}
.v-hero .eyebrow{margin-bottom:22px;}
.v-hero h1{font-family:var(--f-display);text-transform:uppercase;color:#fff;
  font-size:clamp(40px,6.6vw,92px);letter-spacing:.05em;line-height:1.02;}
.v-hero .tag{margin:26px auto 0;max-width:520px;color:var(--mist);
  font-size:17px;line-height:1.7;}