/* Self-hosted fonts: no external requests, faster on slow connections. */
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url("../fonts/Amiri-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url("../fonts/Amiri-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url("../fonts/NotoNastaliqUrdu-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url("../fonts/NotoNastaliqUrdu-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   Karwan Haram — Travels & Tours
   Design system. Palette derived from the company logo.
   ========================================================================== */

:root{
  /* Core palette */
  --crimson:        #9D2A27;   /* logo red */
  --crimson-deep:   #6B1A18;
  --crimson-wash:   #F5E9E8;
  --steel:          #3275A2;   /* logo blue */
  --steel-deep:     #24567A;
  --steel-wash:     #E8EFF5;
  --ink:            #16202E;
  --ink-soft:       #55616F;
  --ink-muted:      #5A6779;
  --marble:         #EDF1F5;   /* cool pale ground: Mataf marble */
  --marble-deep:    #D9E1E9;
  --brass:          #B08A4A;
  --white:          #FFFFFF;
  --ok:             #1F7A4D;

  /* Type */
  --display: "Amiri", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --urdu:    "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

  /* Scale */
  --step--1: clamp(.82rem, .8rem + .1vw, .89rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .35vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.3rem + .65vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.55rem);
  --step-4:  clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 5px;
  --shadow: 0 1px 2px rgba(22,32,46,.06), 0 8px 26px -14px rgba(22,32,46,.28);
  --shadow-lift: 0 2px 4px rgba(22,32,46,.07), 0 20px 44px -20px rgba(22,32,46,.35);
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* The closed off-canvas menu sits just outside the viewport. Clipping here
     stops it making the page scroll sideways on phones. `hidden` is the
     fallback for older browsers; `clip` wins where supported and, unlike
     `hidden`, does not create a scroll container that would break sticky. */
  overflow-x:hidden;
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
body{
  margin:0; background:var(--white); color:var(--ink);
  /* clip, not hidden: keeps the off-canvas menu and skip link from widening
     the page without creating a scroll container that would break sticky */
  overflow-x:clip;
  font-family:var(--body); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--steel-deep); text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.18; margin:0 0 .5em; letter-spacing:-.005em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1em; max-width:68ch; }
ul{ margin:0 0 1em; padding-inline-start:1.15em; }
li{ margin-bottom:.35em; }
:focus-visible{ outline:3px solid var(--steel); outline-offset:2px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.2rem,7vw,5.6rem); }
.section--marble{ background:var(--marble); }
.section--ink{ background:var(--ink); color:#DDE4EC; }
.section--ink h2,.section--ink h3{ color:var(--white); }
.lede{ font-size:var(--step-1); color:var(--ink-soft); line-height:1.55; }

.skip{ position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--crimson); color:#fff; padding:.7rem 1.1rem; }
.skip:focus{ inset-inline-start:0; }

/* ------------------------------------------------------- language swap -- */
/* English is the default in markup, so the page still reads correctly
   if JavaScript never runs. */
html.is-ur .l-en{ display:none; }
html:not(.is-ur) .l-ur{ display:none; }
.l-ur{ font-family:var(--urdu); line-height:2.15; }
html.is-ur body{ font-family:var(--urdu); line-height:2.1; }
html.is-ur h1,html.is-ur h2,html.is-ur h3,html.is-ur h4{ font-family:var(--urdu); line-height:1.9; letter-spacing:0; }
html.is-ur .nums,html.is-ur .price-fig{ font-family:var(--body); }

/* --------------------------------------------------------------- arch --- */
/* The arch is the one recurring structural device across the site. */
.arch{ display:block; width:100%; height:auto; color:var(--brass); }

/* ------------------------------------------------------------- header --- */
.topbar{ background:var(--crimson-deep); color:#F2DEDD; font-size:var(--step--1); }
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center;
  justify-content:space-between; padding-block:.5rem; }
.topbar a{ color:#F7E9E8; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }
.topbar-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; }

.masthead{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--marble-deep); backdrop-filter:saturate(1.4) blur(6px); }
.masthead .wrap{ display:flex; align-items:center; gap:1rem; padding-block:.7rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; flex:0 0 auto; }
.brand img{ height:50px; width:auto; }
.brand b{ font-family:var(--display); font-size:1.22rem; line-height:1.05; display:block; color:var(--crimson); }
.brand span{ font-size:.7rem; letter-spacing:.13em; color:var(--ink-soft); text-transform:uppercase; font-family:var(--body); }
html.is-ur .brand span{ letter-spacing:0; }

.nav{ margin-inline-start:auto; display:flex; align-items:center; gap:.15rem; }
.masthead .lang{ margin-inline-start:.6rem; }
.nav a{ text-decoration:none; color:var(--ink); padding:.55rem .7rem; border-radius:var(--radius);
  font-size:.97rem; white-space:nowrap; }
.nav a:hover{ background:var(--marble); }
.nav a[aria-current="page"]{ color:var(--crimson); box-shadow:inset 0 -2px 0 var(--crimson); }

.lang{ display:inline-flex; align-items:stretch; border:1px solid var(--marble-deep);
  border-radius:var(--radius); overflow:hidden; flex:0 0 auto; }
.lang button{ font:inherit; font-size:.86rem; padding:.35rem .7rem; background:var(--white);
  border:0; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center;
  justify-content:center; min-height:36px; line-height:1; }
.lang button + button{ border-inline-start:1px solid var(--marble-deep); }
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--white); }
/* Nastaliq has deep descenders, so the Urdu label needs its own line box */
.lang button:nth-child(2){ font-family:var(--urdu); font-size:1rem; line-height:2.1;
  padding-block:0; }

.burger{ display:none; margin-inline-start:auto; background:var(--white); border:1px solid var(--marble-deep);
  border-radius:var(--radius); width:42px; height:38px; cursor:pointer; padding:0; }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3.5px auto; }

@media (max-width:960px){
  .burger{ display:block; order:3; }
  .masthead .lang{ margin-inline-start:auto; margin-inline-end:.5rem; order:2; }
  .nav{ position:fixed; inset-block-start:0; inset-inline-end:0; block-size:100dvh; inline-size:min(82vw,320px);
    background:var(--white); flex-direction:column; align-items:stretch; gap:0; padding:5rem 1.1rem 2rem;
    box-shadow:var(--shadow-lift); transform:translateX(100%); overflow-y:auto; order:4;
    visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s; }
  html[dir="rtl"] .nav{ transform:translateX(-100%); }
  .nav.open{ transform:translateX(0); visibility:visible; transition:transform .25s ease, visibility 0s; }
  .nav a{ padding:.85rem .6rem; border-bottom:1px solid var(--marble); font-size:1.05rem; }
  .nav-close{ position:absolute; inset-block-start:1rem; inset-inline-end:1rem; border:1px solid var(--marble-deep);
    background:var(--white); border-radius:var(--radius); width:38px; height:38px; font-size:1.3rem;
    line-height:1; cursor:pointer; color:var(--ink); }
}
@media (min-width:961px){ .nav-close{ display:none; } }
.scrim{ position:fixed; inset:0; background:rgba(22,32,46,.45); opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:50; }
.scrim.on{ opacity:1; pointer-events:auto; }

/* --------------------------------------------------------------- hero --- */
.hero{ background:linear-gradient(180deg,var(--marble) 0%, #FFF 100%); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center; padding-block:clamp(2.4rem,5vw,4.2rem); }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:.35em; }
.hero-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--step--1);
  letter-spacing:.06em; color:var(--crimson); background:var(--crimson-wash);
  padding:.35rem .8rem; border-radius:100px; margin-bottom:1.1rem; }
html.is-ur .hero-kicker{ letter-spacing:0; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(22,32,46,.22)); }

/* ------------------------------------------------------------ buttons --- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  padding:.78rem 1.35rem; border-radius:var(--radius); border:1.5px solid transparent;
  transition:background .18s, color .18s, border-color .18s, transform .12s; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:19px; height:19px; flex:0 0 auto; }
.btn--wa{ background:#1EA855; color:#fff; }
.btn--wa:hover{ background:#178F47; }
.btn--primary{ background:var(--crimson); color:#fff; }
.btn--primary:hover{ background:var(--crimson-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--marble-deep); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--light{ background:var(--white); color:var(--ink); }
.btn--light:hover{ background:var(--marble); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }

/* --------------------------------------------------------- trust bar --- */
.trustbar{ background:var(--crimson); color:#fff; }
.trustbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:1.5rem; text-align:center; }
@media (max-width:760px){ .trustbar .wrap{ grid-template-columns:repeat(2,1fr); gap:1.3rem; } }
.trustbar b{ display:block; font-family:var(--display); font-size:var(--step-2); line-height:1.1; }
html.is-ur .trustbar b{ font-family:var(--body); }
.trustbar small{ display:block; font-size:var(--step--1); color:#F3D6D5; margin-top:.15rem; }
.trustbar > .wrap > div + div{ border-inline-start:1px solid rgba(255,255,255,.22); }
@media (max-width:760px){ .trustbar > .wrap > div:nth-child(odd){ border-inline-start:0; } }

/* ------------------------------------------------------------- cards --- */
.grid{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns:1fr; } .grid--2{ grid-template-columns:1fr; } }

.card{ background:var(--white); border:1px solid var(--marble-deep); border-radius:var(--radius);
  padding:1.5rem 1.4rem; }
.card h3{ margin-bottom:.35em; }
.card p:last-child{ margin-bottom:0; }
.card-ico{ width:40px; height:40px; color:var(--crimson); margin-bottom:.85rem; }

/* --------------------------------------------------------- packages ---- */
.pkg{ background:var(--white); border:1px solid var(--marble-deep); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; }
.pkg-head{ position:relative; background:var(--marble); padding:1.6rem 1.4rem 1.3rem; text-align:center;
  border-bottom:1px solid var(--marble-deep); }
.pkg-head .arch{ width:64px; margin:0 auto .7rem; color:var(--brass); }
.pkg--feature{ border-color:var(--crimson); box-shadow:var(--shadow-lift); }
.pkg--feature .pkg-head{ background:var(--crimson); color:#fff; border-bottom-color:var(--crimson); }
.pkg--feature .pkg-head .arch{ color:#E9B9B7; }
.pkg--feature .pkg-head h3{ color:#fff; }
.pkg--feature .pkg-sub{ color:#F3D6D5; }
.pkg-flag{ position:absolute; inset-block-start:0; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:.7rem; letter-spacing:.09em; padding:.22rem .8rem;
  border-radius:0 0 var(--radius) var(--radius); white-space:nowrap; }
html[dir="rtl"] .pkg-flag{ transform:translateX(50%); }
html.is-ur .pkg-flag{ letter-spacing:0; font-size:.78rem; }
.pkg-head h3{ margin:0 0 .2em; }
.pkg-sub{ font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.pkg-price{ padding:1.15rem 1.4rem; border-bottom:1px solid var(--marble); text-align:center; }
.price-fig{ font-family:var(--display); font-size:var(--step-2); color:var(--crimson); font-weight:700; display:block; line-height:1.1; }
.price-note{ font-size:var(--step--1); color:var(--ink-soft); }
.pkg-body{ padding:1.3rem 1.4rem; flex:1; }
.pkg-body h4{ font-family:var(--body); font-size:.78rem; letter-spacing:.1em; color:var(--ink-soft);
  margin:0 0 .6rem; font-weight:700; }
html.is-ur .pkg-body h4{ letter-spacing:0; font-size:.95rem; font-family:var(--urdu); }
.hotel{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.8rem; font-size:.96rem; }
.hotel svg{ width:17px; height:17px; color:var(--steel); flex:0 0 auto; margin-top:.28rem; }
.hotel b{ display:block; }
.hotel small{ color:var(--ink-soft); }
.ticks{ list-style:none; padding:0; margin:.9rem 0 0; font-size:.95rem; }
.ticks li{ position:relative; padding-inline-start:1.5rem; margin-bottom:.42rem; }
.ticks li::before{ content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:9px; height:5px; border-inline-start:2px solid var(--ok); border-block-end:2px solid var(--ok);
  transform:rotate(-45deg); }
/* A tick is not directional, so it keeps its shape in right-to-left mode. */
html[dir="rtl"] .ticks li::before{ transform:rotate(-45deg); }
.pkg-foot{ padding:0 1.4rem 1.4rem; display:grid; gap:.55rem; }
.pkg-foot .btn{ width:100%; }

.pricetable{ width:100%; border-collapse:collapse; margin:.4rem 0 0; font-size:.94rem; }
.pricetable th,.pricetable td{ padding:.5rem .4rem; text-align:start; border-bottom:1px solid var(--marble); }
.pricetable th{ font-weight:600; color:var(--ink-soft); font-size:.82rem; }
html.is-ur .pricetable th{ font-size:.95rem; }
.pricetable td:last-child,.pricetable th:last-child{ text-align:end; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- sections --- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.2rem); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.eyebrow{ color:var(--crimson); font-weight:700; font-size:var(--step--1); letter-spacing:.08em; margin-bottom:.5rem; }
html.is-ur .eyebrow{ letter-spacing:0; }

.steps{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.steps li{ counter-increment:s; position:relative; padding-inline-start:3.2rem; }
.steps li::before{ content:counter(s); position:absolute; inset-inline-start:0; top:0;
  width:2.3rem; height:2.3rem; border-radius:50%; background:var(--steel-wash); color:var(--steel-deep);
  display:grid; place-items:center; font-weight:700; font-family:var(--body); }
.steps b{ display:block; margin-bottom:.1rem; }

.quote{ background:var(--white); border:1px solid var(--marble-deep); border-radius:var(--radius);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; }
.quote p{ font-size:1.02rem; }
.quote-by{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--marble); font-size:.9rem; }
.quote-by b{ display:block; }
.quote-by small{ color:var(--ink-soft); }
.stars{ color:var(--brass); letter-spacing:.1em; margin-bottom:.5rem; }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media (max-width:760px){ .gal{ grid-template-columns:repeat(2,1fr); } }
.gal-item{ position:relative; aspect-ratio:4/3; background:var(--marble); border:1px solid var(--marble-deep);
  border-radius:var(--radius); display:grid; place-items:center; text-align:center; padding:1rem;
  color:var(--ink-soft); font-size:.88rem; overflow:hidden; }
.gal-item svg{ width:44px; height:44px; color:var(--marble-deep); margin:0 auto .5rem; }

/* --------------------------------------------------------------- faq --- */
.faq{ border-top:1px solid var(--marble-deep); }
.faq details{ border-bottom:1px solid var(--marble-deep); }
.faq summary{ cursor:pointer; padding:1.05rem .4rem; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; font-size:1.03rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; line-height:1; color:var(--crimson); flex:0 0 auto; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .faq-a{ padding:0 .4rem 1.2rem; color:var(--ink-soft); }
.faq .faq-a p:last-child{ margin-bottom:0; }

/* -------------------------------------------------------------- form --- */
.formcard{ background:var(--white); border:1px solid var(--marble-deep); border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem; }
.field .req{ color:var(--crimson); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; padding:.7rem .85rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--marble-deep); border-radius:var(--radius);
  transition:border-color .15s; }
html.is-ur .field input,html.is-ur .field select,html.is-ur .field textarea{ font-family:var(--urdu); line-height:2; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--steel); outline:none;
  box-shadow:0 0 0 3px rgba(50,117,162,.18); }
.field textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }
.field .err{ color:var(--crimson); font-size:.85rem; margin-top:.3rem; display:none; }
.field.invalid input,.field.invalid select{ border-color:var(--crimson); }
.field.invalid .err{ display:block; }
.hint{ font-size:.85rem; color:var(--ink-soft); margin-top:.3rem; }
.formnote{ font-size:.88rem; color:var(--ink-soft); margin-top:1rem; }
.formok{ background:#E8F5EE; border:1px solid #A9D9C0; color:#155F3B; padding:1rem 1.1rem;
  border-radius:var(--radius); margin-bottom:1rem; }

/* -------------------------------------------------------- guide gate --- */
.gate{ background:var(--ink); color:#DDE4EC; border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); }
.gate h3{ color:var(--white); }
.gate .field label{ color:#C6D0DB; }
.gate .field input{ background:#1F2B3C; border-color:#314054; color:#fff; }
.gate .field input::placeholder{ color:#7D8B9C; }
.dl-links{ display:grid; gap:.6rem; margin-top:1rem; }

/* ------------------------------------------------------------ footer --- */
.footer{ background:var(--ink); color:#B9C4D1; padding-block:clamp(2.6rem,5vw,3.6rem) 0; font-size:.95rem; }
.footer h4{ color:var(--white); font-family:var(--body); font-size:.8rem; letter-spacing:.12em;
  margin:0 0 .9rem; font-weight:700; }
html.is-ur .footer h4{ letter-spacing:0; font-size:1rem; font-family:var(--urdu); }
.footer a{ color:#B9C4D1; text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:.5rem; }
.footer-brand img{ height:56px; margin-bottom:.9rem; }
.footer-bottom{ border-top:1px solid #2A3749; margin-top:2.2rem; padding-block:1.2rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size:.87rem; color:#8C99A8; }
.soc{ display:flex; gap:.6rem; }
.soc a{ width:36px; height:36px; border:1px solid #2F3D51; border-radius:var(--radius);
  display:grid; place-items:center; }
.soc svg{ width:17px; height:17px; }

/* --------------------------------------------------------- wa float --- */
.wa-float{ position:fixed; inset-block-end:1.1rem; inset-inline-end:1.1rem; z-index:70;
  display:inline-flex; align-items:center; gap:.5rem; background:#1EA855; color:#fff;
  text-decoration:none; font-weight:600; padding:.8rem 1.05rem; border-radius:100px;
  box-shadow:0 10px 26px -8px rgba(30,168,85,.7); font-size:.95rem; }
.wa-float svg{ width:22px; height:22px; }
.wa-float:hover{ background:#178F47; }
@media (max-width:560px){ .wa-float span{ display:none; } .wa-float{ padding:.85rem; } }

/* -------------------------------------------------------- page head ---- */
.pagehead{ background:var(--ink); color:#fff; padding-block:clamp(2.4rem,5vw,3.6rem); position:relative; overflow:hidden; }
.pagehead h1{ color:#fff; margin-bottom:.25em; }
.pagehead p{ color:#AFBCCB; max-width:60ch; margin:0; }
.pagehead .arch{ position:absolute; inset-block-start:-18%; inset-inline-end:-4%; width:280px;
  color:rgba(176,138,74,.22); }
@media (max-width:760px){ .pagehead .arch{ display:none; } }

.crumbs{ font-size:.85rem; color:#8FA0B2; margin-bottom:.8rem; }
.crumbs a{ color:#B9C4D1; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.note{ background:var(--steel-wash); border-inline-start:3px solid var(--steel);
  padding:1rem 1.1rem; border-radius:0 var(--radius) var(--radius) 0; font-size:.95rem; }
.note p:last-child{ margin-bottom:0; }
html[dir="rtl"] .note{ border-radius:var(--radius) 0 0 var(--radius); }

.divider-arch{ display:flex; justify-content:center; padding-block:.5rem; }
.divider-arch svg{ width:180px; color:var(--marble-deep); }

.center{ text-align:center; }
.center p{ margin-inline:auto; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.stack > * + *{ margin-top:1rem; }