/* ——— SIRBAI inner pages: same tokens, type and parts as the homepage (css/style.css), on the Dusk ground ——— */
body.inner{--page:var(--umber); background:var(--umber); color:var(--bone)}
body.inner .frame{--frame:rgba(194,190,183,.22); color:var(--field)}
body.inner .coord{color:rgba(194,190,183,.55)}
body.inner::before{background:var(--umber)}

/* the hairline figures take the page's colours */
.hl{--hairline-plate:#2A231F; --hairline-hi:#F2F1EF; --hairline-edge:#92C6ED; --hairline-mid:rgba(194,190,183,.62); --hairline-lo:rgba(194,190,183,.2); --hairline-stroke:1}
.hl-band .hl,.pg-card .hl{--hairline-plate:#2F2823}

/* ground: the 100px measure grid and a soft sky glow, like the hero */
.pg{position:relative; overflow:hidden; isolation:isolate}
.pg-grid{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(242,241,239,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(242,241,239,.055) 1px, transparent 1px);
  background-size:100px 100px; background-position:calc(var(--fi) - 1px) calc(var(--fi) - 1px);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%, #000, rgba(0,0,0,.25)); mask-image:radial-gradient(ellipse 70% 65% at 50% 45%, #000, rgba(0,0,0,.25))}
.pg-glow{position:absolute; z-index:-1; pointer-events:none; width:min(1300px, 110vw); aspect-ratio:1; border-radius:50%; left:50%; top:62%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(146,198,237,.16), rgba(146,198,237,.05) 55%, rgba(146,198,237,0))}

/* 1. page head: the title on the left, the statement on the right (the reference layout) */
.ph{min-height:100vh; min-height:100svh; padding-top:calc(104px + clamp(64px, 10vh, 116px)); padding-bottom:clamp(96px, 12vh, 140px)}
.ph-in{display:grid; grid-template-columns:minmax(0, 43fr) minmax(0, 57fr); align-items:start}
.ph .eyebrow{margin-bottom:clamp(18px, 2.4vh, 26px)}
.ph-title{margin:0; font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(46px, 5vw, 96px); line-height:.92; letter-spacing:-.04em; color:var(--bone)}
.ph-fig{margin-top:clamp(40px, 6vh, 72px); width:min(100%, 500px)}
.ph-copy{padding-top:clamp(120px, 15vh, 168px); max-width:1040px}
.lead{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(26px, 2.5vw, 48px); line-height:1.32; letter-spacing:-.018em; color:var(--bone); text-indent:22%}
.lead em{font-style:normal; color:var(--sky)}
.body-l{margin:clamp(36px, 5vh, 56px) 0 0; max-width:62ch; font-size:clamp(16px, 1.05vw, 20px); line-height:1.6; color:var(--field); text-indent:22%}
.ph-copy .btn{margin-top:clamp(36px, 5vh, 52px)}
.ph-hud{position:absolute; left:calc(var(--gut) + var(--pad)); bottom:calc(var(--fi) + 26px); display:flex; align-items:center; gap:14px; color:rgba(194,190,183,.7)}
.ph-hud svg{width:48px; height:48px; transform:rotate(-90deg)}
.ph-hud circle{fill:none; stroke:rgba(194,190,183,.28); stroke-width:1}
.ph-hud circle.arc{stroke:var(--bone); stroke-width:1.4; stroke-dasharray:1 1; stroke-dashoffset:calc(1 - var(--pp,0))}
.ph-hud b{color:var(--bone); font-weight:500}

/* figure card: the hairline figure in a cut card, with its caption and live readout */
.fig{position:relative; border:1px solid rgba(194,190,183,.18); background:rgba(47,40,35,.55); --k:18px; clip-path:polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, 0 100%)}
.fig-head{display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px dashed rgba(194,190,183,.22); color:var(--field)}
.fig-head .n{color:rgba(194,190,183,.6); letter-spacing:.24em}
.fig .hl{display:block; width:100%; padding:6px 18px 0}
.fig-read{display:flex; justify-content:space-between; padding:10px 18px 14px; color:rgba(194,190,183,.6); font-variant-numeric:tabular-nums}
.fig-read b{color:var(--sky); font-weight:500}

/* 2. three parts, each with a figure (pillars / roles) */
.pg-band{padding:clamp(96px, 13vh, 150px) 0}
.band-head{display:grid; grid-template-columns:minmax(0, 43fr) minmax(0, 57fr); align-items:end; margin-bottom:clamp(40px, 6vh, 64px)}
.band-head .stitle{font-size:clamp(36px, 3.6vw, 68px); color:var(--bone)}
.band-head p{margin:0; max-width:56ch; color:var(--field); font-size:clamp(16px, 1.05vw, 19px); line-height:1.6}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid rgba(194,190,183,.18); background:rgba(47,40,35,.5)}
.pg-card{position:relative; display:flex; flex-direction:column; border-left:1px solid rgba(194,190,183,.18)}
.pg-card:first-child{border-left:0}
.pg-card .cc-head{display:flex; justify-content:space-between; padding:16px 22px; border-bottom:1px dashed rgba(194,190,183,.22); color:var(--field)}
.pg-card .cc-head .n{color:rgba(194,190,183,.6); letter-spacing:.24em}
.pg-card .hl{display:block; width:100%; padding:0 15% 0}
.pg-card .rd{display:flex; justify-content:flex-end; padding:0 22px 10px; color:rgba(194,190,183,.55); font-variant-numeric:tabular-nums; border-bottom:1px dashed rgba(194,190,183,.22)}
.pg-card .cb{padding:28px 22px 32px; display:flex; flex-direction:column; gap:14px; flex:1}
.pg-card .cb-t{display:flex; align-items:center; gap:14px}
.pg-card h3{margin:0; font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(24px, 2vw, 36px); line-height:.95; letter-spacing:-.03em; color:var(--bone)}
.pg-card p{margin:0; color:var(--field); font-size:16px; line-height:1.6; max-width:40ch}
.ring-ic{width:40px; height:40px; flex:none; border-radius:50%; border:1px solid rgba(194,190,183,.45); display:grid; place-items:center}
.ring-ic svg{width:22px; height:22px; overflow:visible}
.ring-ic svg *{fill:rgba(146,198,237,.16); stroke:var(--bone); stroke-width:1; vector-effect:non-scaling-stroke}
.ring-ic svg .ln{fill:none}

/* 3. next: the closing band, statement + actions, with the contact line on its sides */
.pg-next{min-height:78vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(110px, 14vh, 160px) 0 clamp(96px, 12vh, 130px); border-top:1px solid rgba(194,190,183,.14)}
.pg-next .eyebrow{margin-bottom:clamp(20px, 3vh, 30px)}
.pg-next .stitle{font-size:clamp(40px, 5vw, 96px); color:var(--bone)}
.pg-next .stitle .c{color:var(--dust)}
.pg-next .rule{display:block; width:min(320px, 50vw); height:1px; margin:clamp(26px, 4vh, 40px) auto; background:rgba(194,190,183,.3); position:relative}
.pg-next .rule i{position:absolute; left:50%; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--yellow); transform:translateX(-50%)}
.pg-next p{margin:0 auto; max-width:46ch; color:var(--field); line-height:1.6}
.acts{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:clamp(30px, 4.4vh, 44px)}
.btn.ghost{background:transparent !important; color:var(--bone); box-shadow:inset 0 0 0 1px rgba(194,190,183,.4) !important}
.btn.ghost .ic{background:var(--bone) !important; color:var(--umber)}
.btn.ghost:hover{background:rgba(242,241,239,.06) !important}
.pg-side{position:absolute; top:50%; transform:translateY(-50%); color:var(--field); text-transform:none !important; letter-spacing:.08em !important}
.pg-side.l{left:calc(var(--gut) + var(--pad))}.pg-side.r{right:calc(var(--gut-r) + var(--pad))}

/* reveal: hairline's easing, one rise */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform 1.1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} }

@media (max-width: 1100px){
  .ph-in,.band-head{grid-template-columns:1fr}
  .ph-copy{padding-top:clamp(40px, 6vh, 64px)}
  .ph-fig{max-width:460px}
  .band-head p{margin-top:18px}
  .cards{grid-template-columns:1fr}
  .pg-card{border-left:0; border-top:1px solid rgba(194,190,183,.18)}
  .pg-card:first-child{border-top:0}
  .pg-card .hl{max-width:420px; margin:0 auto}
  .pg-side{display:none}
}
@media (max-width: 700px){
  .ph{padding-top:calc(104px + 32px)}
  .lead,.body-l{text-indent:0}
  .ph-hud{display:none}
}

/* ——— Vision & Mission: the homepage About system in two steps (css/style.css carries .ab-* and .ai) ——— */
body.vm{background:var(--card)}
.vm-sec{position:relative; height:calc(2 * 85vh + 100vh); background:var(--card)}
.vm-t{position:absolute; left:0; right:0; bottom:0; opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform 1s var(--ease)}
.vm-t.on{position:relative; opacity:1; transform:none}
.ab-dial .h3 .clz{fill:rgba(217,149,127,.12); stroke:var(--clay-b); stroke-width:1.1; stroke-dasharray:3 5}
.ab-dial .h3 .wpt{fill:var(--night); stroke:var(--sky); stroke-width:1.2}
.ab-left .ab-grid-l{inset:-12px}
.ab-cnt span{color:rgba(242,241,239,.6)}
body.vm .pg-next{background:var(--umber); color:var(--bone); border-top:0}
@media (max-width: 900px){ .vm-sec{height:auto} }
.ab-dial .h3 .hd{fill:rgba(21,29,31,.45); stroke:var(--bone); stroke-width:1.3}

/* ——— the Contact section on the inner pages (css/style.css carries .contact / .ct-*) ——— */
.ct-intro .ct-b{position:absolute; left:0; right:0; top:0; opacity:0}
.ct-intro .ct-a h1.ct-big{margin:0 0 22px}
/* Work With Us: the same section in the page's own colours — card and sand instead of sky */
.ct-warm{background:var(--card)}
.ct-warm .ct-pin{background:linear-gradient(180deg, #E9E5DF 0%, #DFDBD5 55%, #CFC6BA 100%)}
.ct-warm .ct-pin > .measure{--grid:rgba(42,35,31,.09)}
.ct-warm .ct-side{color:var(--haze)}
.ct-warm .eyebrow{color:var(--clay)}
.ct-warm .ct-intro h2:not(.ct-big){color:var(--loam) !important}
.ct-warm .ct-media::before{background:linear-gradient(180deg, rgba(233,229,223,.88) 0%, rgba(233,229,223,.55) 20%, rgba(233,229,223,0) 42%)}
.ct-warm .ct-veil{background:linear-gradient(180deg, rgba(233,229,223,.85) 0%, rgba(233,229,223,.35) 30%, rgba(233,229,223,0) 45%, rgba(223,219,213,0) 55%, rgba(223,219,213,.6) 80%, rgba(223,219,213,.8))}
/* V&M and Our Approach: the sky picture sits a little lower so the title stays clear */
.ct-sky .ct-media .ct-img{object-position:50% 30%}
@media (max-width: 900px){ .ct-intro .ct-b{display:none} .ct-intro .ct-a{opacity:1 !important} }

.ct-warm .ct-media .ct-img{object-position:50% 50%}