/* ============================================================
   Layout for the written pages (service + guide pages).
   Loaded after site.css, reuses its tokens.
   ============================================================ */
.page{position:relative;z-index:5;background:var(--bg);
  padding:clamp(104px,15vh,170px) var(--pad) clamp(60px,9vh,110px)}
.wrap{max-width:1180px;margin-inline:auto}

.crumb{font-family:var(--f-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:color .4s}
.crumb a:hover{color:var(--brand)}
.crumb span{opacity:.45}

.page-h1{font-size:clamp(32px,6.4vw,86px);font-weight:900;line-height:.98;
  letter-spacing:-.035em;max-width:17ch;margin-bottom:clamp(20px,3vh,34px)}
.lede{font-size:clamp(16px,1.85vw,22px);line-height:1.72;color:var(--ink-dim);
  max-width:56ch;font-weight:300}
.lede strong{color:var(--ink);font-weight:500}

.page-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4vh,42px)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;border-radius:100px;padding:15px 26px;
  border:1px solid var(--line);transition:.45s var(--ease)}
.btn svg{width:13px;height:13px}
html[dir=rtl] .btn svg{transform:scaleX(-1)}
.btn:hover{border-color:var(--brand)}
.btn.solid{background:var(--brand);border-color:var(--brand);color:#08080a}
.btn.solid:hover{background:var(--brand-2);border-color:var(--brand-2)}

/* generic prose block ------------------------------------------------ */
.block{margin-top:clamp(56px,9vh,120px)}
.block h2{font-size:clamp(24px,3.6vw,46px);font-weight:900;line-height:1.08;
  letter-spacing:-.025em;margin-bottom:clamp(18px,2.6vh,30px);max-width:22ch}
.block h3{font-size:clamp(17px,1.9vw,23px);font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.block p{font-size:16px;line-height:1.85;color:var(--ink-dim);max-width:66ch;margin-bottom:16px}
.block p strong{color:var(--ink);font-weight:500}
.block a:not(.btn){color:var(--brand);border-bottom:1px solid rgba(24,191,197,.35);
  padding-bottom:1px;transition:border-color .4s}
.block a:not(.btn):hover{border-color:var(--brand)}

/* numbered process ---------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.5vw,36px);margin-top:clamp(24px,4vh,44px)}
.step{border-top:1px solid var(--line);padding-top:18px}
.step b{display:block;font-family:var(--f-ui);font-size:11px;letter-spacing:.28em;
  color:var(--brand);margin-bottom:12px}
.step p{font-size:15px;margin-bottom:0}

/* what's included ----------------------------------------------------- */
.ticks{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px 32px;margin-top:26px}
.ticks li{position:relative;padding-inline-start:26px;font-size:16px;line-height:1.7;
  color:var(--ink-dim)}
.ticks li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:9px;height:9px;border-inline-start:1.5px solid var(--brand);
  border-bottom:1.5px solid var(--brand);transform:rotate(-45deg)}
html[dir=rtl] .ticks li::before{transform:rotate(45deg) scaleX(-1)}

/* pricing ------------------------------------------------------------- */
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(12px,1.6vw,22px);margin-top:28px}
.rate{border:1px solid var(--line);padding:clamp(22px,2.6vw,32px);
  transition:border-color .5s var(--ease)}
.rate:hover{border-color:rgba(24,191,197,.45)}
.rate b{display:block;font-size:17px;font-weight:700;margin-bottom:8px}
.rate .num{font-family:var(--f-disp);font-size:clamp(26px,3.2vw,38px);color:var(--brand);
  line-height:1;margin:14px 0 12px;direction:ltr}
html[dir=rtl] .rate .num{text-align:right}
.rate p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}

/* FAQ ----------------------------------------------------------------- */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-size:clamp(16px,1.7vw,20px);
  font-weight:700;letter-spacing:-.01em;display:flex;justify-content:space-between;
  align-items:center;gap:18px;transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:11px;height:11px;
  border-inline-end:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);
  transform:rotate(45deg);transition:transform .4s var(--ease);margin-block-end:5px}
.faq details[open] summary{color:var(--brand)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-block:0 0}
.faq .ans{padding:0 4px 22px;font-size:16px;line-height:1.85;color:var(--ink-dim);max-width:70ch}
.faq .ans p{margin-bottom:14px}
.faq .ans p:last-child{margin-bottom:0}

/* gallery strip ------------------------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,19vw,230px),1fr));
  gap:clamp(8px,1vw,14px);margin-top:clamp(24px,4vh,44px)}
.strip figure{overflow:hidden;background:var(--bg-2);aspect-ratio:3/4}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transform:scale(1.03);transition:transform 1s var(--ease)}
.strip figure:hover img{transform:scale(1)}

/* closing band -------------------------------------------------------- */
.band{margin-top:clamp(60px,10vh,130px);border:1px solid var(--line);
  padding:clamp(30px,5vw,60px);text-align:center;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 50% 130%,var(--glow),transparent 70%)}
.band h2{font-size:clamp(24px,4.2vw,54px);font-weight:900;letter-spacing:-.03em;
  margin-bottom:16px;position:relative;max-width:none}
.band p{color:var(--ink-dim);max-width:52ch;margin-inline:auto;position:relative}
.band .page-cta{justify-content:center;position:relative}

@media(max-width:760px){
  .page-h1{max-width:none}
  .strip{grid-template-columns:repeat(2,1fr)}
}