/* =====================================================================
   حملة الشيراوي للحج والعمرة — «حِبر وبرونز» / Ink & Brass
   One sheet serves both directions through CSS logical properties.
   Every value here is justified in DESIGN.md. Read it before editing.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. The Arabic face — self-hosted, one weight (400).                 */
/* Latin and digits are not in this file, so IBM Plex Sans Arabic sits  */
/* next in every stack and keeps them in the same voice.                */
/* ------------------------------------------------------------------ */
@font-face{
  font-family:'AGoogle';
  src:url('/assets/fonts/agoogle-regular.woff2') format('woff2'),
      url('/assets/fonts/agoogle-regular.woff') format('woff'),
      url('/assets/fonts/agoogle-regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  /* Arabic, Arabic-Indic digits and the presentation forms only. */
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root{
  /* grounds */
  --ink:#17120F;
  --ink-raised:#221A16;
  --paper:#FAF6EF;
  --paper-sunk:#F0E8DA;

  /* brand — from the logo, not negotiable */
  --burgundy:#56161D;
  --burgundy-deep:#3B0E13;
  --burgundy-field:#2A0A0E;

  /* the material */
  --brass:#A97B2E;
  --brass-deep:#6E4C14;
  --brass-glow:#D9B063;

  --line-paper:#E0D5C2;
  --line-ink:rgba(217,176,99,.22);
  --muted-paper:#6B5F4E;
  --muted-ink:#A99883;
  --wa:#1E8E4F;

  /* One Arabic face carries display and body; weight is the only thing it
     cannot vary, so size and space do the work that weight usually does. */
  --font-ar:'AGoogle','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-display:var(--font-ar);
  --font-body:var(--font-ar);
  /* Latin display stays condensed, matching the logo's wordmark; the Arabic
     face follows it so a bilingual label never drops to a system font. */
  --font-cond:'IBM Plex Sans Condensed','AGoogle','IBM Plex Sans Arabic',system-ui,sans-serif;

  --shell:1180px;
  --narrow:760px;
  --radius:2px;
  --header-h:76px;
  --pad:clamp(20px,5vw,44px);
  --gap:clamp(20px,3vw,32px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.lang-en{
  font-size:16.5px;
  line-height:1.7;
  --font-body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
}

img,video,svg{max-width:100%;display:block}
img,video{height:auto}

a{color:var(--burgundy);text-decoration:none}
a:hover{color:var(--burgundy-deep)}

:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}
::selection{background:var(--burgundy);color:var(--paper)}

/* ------------------------------------------------------------------ */
/* 2. Type — one Arabic face at one weight; size carries the hierarchy. */
/* ------------------------------------------------------------------ */
h1,h2,.display{
  font-family:var(--font-display);
  font-weight:700;
  /* The face ships a single 400 weight, so headings lean on size, leading
     and measure. The browser's synthetic bold is allowed here, where the
     glyphs are large enough to carry it, and switched off for body copy. */
  line-height:1.45;
  margin:0 0 .5em;
}
.lang-en h1,.lang-en h2,.lang-en .display{
  font-family:var(--font-cond);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.15;
}

h3,h4,h5{font-family:var(--font-body);font-weight:600;line-height:1.45;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
h4{font-size:1.05rem}

p,li,label,.tier-meta,.cell p,.lede{font-synthesis-weight:none}
p{margin:0 0 1.1em;max-width:70ch}
.lang-en p{max-width:66ch}
ul,ol{margin:0 0 1.1em;padding-inline-start:1.3em}

.eyebrow{
  font-family:var(--font-cond);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin:0 0 .9em;
  display:flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-paper)}
.eyebrow-center{justify-content:center}
.eyebrow-center::after{display:none}
.on-ink .eyebrow{color:var(--brass-glow)}
.on-ink .eyebrow::after{background:var(--line-ink)}

.lede{font-size:1.1rem;color:var(--muted-paper);max-width:62ch}
.on-ink .lede{color:var(--muted-ink)}

/* ------------------------------------------------------------------ */
/* 3. Layout                                                           */
/* ------------------------------------------------------------------ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--narrow);margin-inline:auto}
.section{padding-block:clamp(56px,8vw,104px)}
.section-tight{padding-block:clamp(40px,5vw,64px)}
.sunk{background:var(--paper-sunk)}

.on-ink{background:var(--ink);color:var(--paper);position:relative;isolation:isolate}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--paper)}
.on-ink a{color:var(--brass-glow)}
.on-ink p{color:var(--muted-ink)}

.skip-link{
  position:absolute;
  inset-inline-start:-9999px;
  top:0;
  z-index:300;
  background:var(--burgundy);
  color:var(--paper);
  padding:12px 20px;
}
.skip-link:focus{inset-inline-start:0}

/* ------------------------------------------------------------------ */
/* 4. The girih system                                                 */
/* ------------------------------------------------------------------ */
.rule{
  height:34px;
  border:0;
  margin:0;
  color:var(--brass);
  background:currentColor;
  -webkit-mask:url(/assets/img/girih-rule.svg) center/auto 100% repeat-x;
  mask:url(/assets/img/girih-rule.svg) center/auto 100% repeat-x;
  opacity:.5;
}
.on-ink .rule{color:var(--brass-glow);opacity:.45}
.rule-sm{height:24px;opacity:.38}

.girih-field{
  position:absolute;
  inset:0;
  z-index:-1;
  color:var(--brass-glow);
  background:currentColor;
  -webkit-mask:url(/assets/img/girih-panel.svg) center/clamp(320px,46vw,560px) repeat;
  mask:url(/assets/img/girih-panel.svg) center/clamp(320px,46vw,560px) repeat;
  opacity:.12;
  pointer-events:none;
}
.girih-field-sm{
  -webkit-mask-size:clamp(200px,24vw,300px);
  mask-size:clamp(200px,24vw,300px);
  opacity:.08;
}

.mark{width:1em;height:1em;flex:none;color:var(--brass-deep)}
.on-ink .mark{color:var(--brass-glow)}
.ico{width:1.3em;height:1.3em;flex:none}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}

/* ------------------------------------------------------------------ */
/* 5. Buttons — rectangular. Pills belong to another product.          */
/* ------------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:.98rem;
  font-weight:600;
  line-height:1;
  padding:1.05em 1.9em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  text-align:center;
  transition:background-color .18s,color .18s,border-color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--burgundy);color:var(--paper);border-color:var(--burgundy)}
.btn-primary:hover{background:var(--burgundy-deep);border-color:var(--burgundy-deep);color:var(--paper)}
.btn-brass{background:transparent;color:var(--brass-deep);border-color:var(--brass)}
.btn-brass:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--paper)}
.on-ink .btn-brass{color:var(--brass-glow);border-color:var(--brass)}
.on-ink .btn-brass:hover{background:var(--brass-glow);border-color:var(--brass-glow);color:var(--ink)}
.btn-paper{background:var(--paper);color:var(--burgundy);border-color:var(--paper)}
.btn-paper:hover{background:var(--paper-sunk);border-color:var(--paper-sunk);color:var(--burgundy-deep)}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn-wa:hover{background:#176F3D;border-color:#176F3D;color:#fff}
.btn-lg{padding:1.2em 2.3em;font-size:1.04rem}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:2rem}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:600;
  color:var(--burgundy);
  border-block-end:1px solid var(--brass);
  padding-block-end:3px;
}
.link-more:hover{border-color:var(--burgundy)}
.on-ink .link-more{color:var(--brass-glow)}

/* ------------------------------------------------------------------ */
/* 6. Header                                                           */
/* ------------------------------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--paper);
  border-block-end:1px solid var(--line-paper);
}
/* Brand and navigation sit together; the language and menu controls are
   pushed to the far edge instead. Logical properties, so the order flips
   with the direction without a second rule. */
.header-in{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
}
/* The lockup is bilingual in itself, so the header sets no brand text. */
.brand{display:flex;align-items:center;flex:none}
.brand img{height:clamp(38px,4.4vw,50px);width:auto}

.nav{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;min-width:0}
.nav a{
  font-size:.94rem;
  font-weight:500;
  color:var(--ink);
  padding-block:.5em;
  border-block-end:2px solid transparent;
}
.nav a:hover{color:var(--burgundy)}
.nav a[aria-current="page"]{color:var(--burgundy);border-color:var(--brass)}

.header-actions{display:flex;align-items:center;gap:10px;flex:none;margin-inline-start:auto}
.lang-btn{
  font-family:var(--font-cond);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line-paper);
  padding:.55em .9em;
  border-radius:var(--radius);
}
.lang-btn:hover{border-color:var(--brass);color:var(--burgundy)}
.menu-btn{
  display:none;
  background:none;
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  padding:.5em;
  color:var(--ink);
  cursor:pointer;
}

/* ------------------------------------------------------------------ */
/* 7. Hero — one authored statement. No carousel.                      */
/* ------------------------------------------------------------------ */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(72px,11vw,150px);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(120% 90% at 85% 15%,var(--burgundy-field) 0%,transparent 62%);
}
[dir="ltr"] .hero::before{
  background:radial-gradient(120% 90% at 15% 15%,var(--burgundy-field) 0%,transparent 62%);
}
.hero-in{max-width:40ch;position:relative}
.lang-en .hero-in{max-width:34ch}
.hero h1{color:var(--paper);margin-block-end:.45em;text-wrap:balance}
.hero .lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--muted-ink);max-width:46ch}

.hero-strap{
  position:absolute;
  inset-block-start:0;
  inset-inline-end:0;
  width:min(46vw,520px);
  aspect-ratio:1;
  /* Always opposite the text block, leaning off the canvas edge.
     inline-end is the left edge in RTL and the right edge in LTR, so the
     translate has to flip with the direction. */
  transform:translate(-14%,-12%);
  color:var(--brass-glow);
  opacity:.42;
  z-index:-1;
  pointer-events:none;
}
[dir="ltr"] .hero-strap{transform:translate(14%,-12%)}
/* The strap is fully drawn by default. site.js measures each path and
   animates it in once; without JS, or under reduced motion, the geometry
   simply renders complete. A CSS dash value cannot do this: the browser
   resolves it in pixels, so one value cannot serve both a short radial
   strap and the long rosette. */
.hero-strap path,.hero-strap rect{
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------------ */
/* 8. Proof band — the 5-star rating stands alone.                     */
/* ------------------------------------------------------------------ */
.proof{
  background:var(--burgundy-field);
  color:var(--paper);
  padding-block:clamp(40px,6vw,68px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.proof-in{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,4vw,48px);
  flex-wrap:wrap;
  text-align:center;
}
.proof-stars{display:flex;gap:.3em;color:var(--brass-glow)}
.proof-stars .ico{width:1.9rem;height:1.9rem}
.proof-text{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.4vw,1.75rem);
  font-weight:700;
  line-height:1.5;
  max-width:34ch;
  margin:0;
  color:var(--paper);
  text-wrap:balance;
}
.lang-en .proof-text{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ------------------------------------------------------------------ */
/* 9. Packages — a ladder, not three identical cards.                  */
/* ------------------------------------------------------------------ */
.shared{
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  background:var(--paper);
  padding:clamp(24px,4vw,40px);
}
.shared h3{margin-block-end:1.2em}
.shared-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.85em clamp(18px,3vw,36px);
}
.shared-list li{display:flex;align-items:center;gap:.7em;font-size:.97rem;line-height:1.5}

.tiers{display:grid;gap:18px;margin-block-start:clamp(34px,4vw,52px)}
/* Explicit areas so the stacked order can read
   name -> room -> price -> summary -> actions. */
.tier{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "name  price"
    "meta  price"
    "body  price"
    "acts  price";
  column-gap:clamp(18px,3vw,44px);
  align-items:start;
  background:var(--paper);
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  padding:clamp(22px,3.4vw,38px);
  position:relative;
  transition:border-color .18s;
}
.tier-name{grid-area:name}
.tier-meta{grid-area:meta}
.tier-body{grid-area:body}
.tier-actions{grid-area:acts}
.price-plate{grid-area:price;align-self:center}
.tier:hover{border-color:var(--brass)}
.tier-lead{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
  /* No overflow clipping here: the girih field is inset:0 and never
     overflows, while the badge deliberately straddles the top edge. */
  isolation:isolate;
}
.tier-lead h3,.tier-lead .tier-name{color:var(--paper)}
.tier-lead .tier-meta{color:var(--muted-ink)}
.tier-lead .price{color:var(--brass-glow)}
.tier-lead .price-unit,.tier-lead .price-note{color:var(--muted-ink)}
.tier-lead .tier-body{color:var(--muted-ink)}

.tier-name{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:700;
  margin:0 0 .35em;
  line-height:1.3;
}
.lang-en .tier-name{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.tier-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5em 1.4em;
  color:var(--muted-paper);
  font-size:.95rem;
  margin-block-end:1em;
}
.tier-meta span{display:inline-flex;align-items:center;gap:.45em}
.tier-body{font-size:.96rem;color:var(--muted-paper);margin:0 0 1.3em;max-width:52ch}
.tier-actions{display:flex;flex-wrap:wrap;gap:10px}

.tier-badge{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:clamp(22px,3.4vw,38px);
  transform:translateY(-50%);
  background:var(--brass-deep);
  color:var(--paper);
  font-family:var(--font-cond);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.5em 1em;
  border-radius:var(--radius);
}

.price-plate{
  position:relative;
  padding:clamp(16px,2.4vw,24px) clamp(22px,3vw,34px);
  text-align:center;
  flex:none;
}
.price-plate::before,.price-plate::after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  color:var(--brass);
  background:currentColor;
  -webkit-mask:url(/assets/img/girih-corner.svg) no-repeat center/contain;
  mask:url(/assets/img/girih-corner.svg) no-repeat center/contain;
  opacity:.85;
}
.price-plate::before{inset-block-start:0;inset-inline-start:0}
.price-plate::after{inset-block-end:0;inset-inline-end:0;transform:rotate(180deg)}
.tier-lead .price-plate::before,.tier-lead .price-plate::after{color:var(--brass-glow)}

.price{
  font-family:var(--font-cond);
  font-size:clamp(2rem,4.6vw,3rem);
  font-weight:600;
  line-height:1;
  color:var(--brass-deep);
  letter-spacing:-.01em;
  display:block;
  font-variant-numeric:tabular-nums;
}
.price-unit{
  display:block;
  font-size:.82rem;
  font-weight:500;
  color:var(--muted-paper);
  margin-block-start:.5em;
  letter-spacing:.06em;
}
.price-note{font-size:.8rem;color:var(--muted-paper);margin-block-start:.3em}

@media (max-width:760px){
  .tier{
    grid-template-columns:1fr;
    grid-template-areas:"name" "meta" "price" "body" "acts";
    text-align:start;
  }
  /* The corner ornaments have no plate edge to sit on once the price
     joins the single column, so they come off rather than float. */
  .price-plate{
    text-align:start;
    padding:0;
    margin-block-end:1.1em;
    align-self:start;
  }
  .price-plate::before,.price-plate::after{display:none}
  .price{font-size:2.3rem}
}

/* ------------------------------------------------------------------ */
/* 10. Service / why grid                                              */
/* ------------------------------------------------------------------ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:1px;
  background:var(--line-paper);
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  overflow:hidden;
}
.on-ink .grid{background:var(--line-ink);border-color:var(--line-ink)}
.cell{
  background:var(--paper);
  padding:clamp(22px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:.5em;
}
.on-ink .cell{background:var(--ink)}
.sunk .grid{background:var(--line-paper)}
.sunk .cell{background:var(--paper-sunk)}
.cell-icon{color:var(--burgundy);margin-block-end:.3em}
.cell-icon .ico{width:1.9rem;height:1.9rem}
.on-ink .cell-icon{color:var(--brass-glow)}
.cell h3{margin:0;font-size:1.04rem}
.cell p{margin:0;font-size:.93rem;color:var(--muted-paper);line-height:1.65}
.on-ink .cell p{color:var(--muted-ink)}
.cell-num{
  font-family:var(--font-cond);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--brass-deep);
}
.on-ink .cell-num{color:var(--brass-glow)}

/* ------------------------------------------------------------------ */
/* 11. Gallery                                                         */
/* ------------------------------------------------------------------ */
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:clamp(22px,3vw,34px)}
.gal-filters button{
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:500;
  background:none;
  border:1px solid var(--line-ink);
  color:var(--muted-ink);
  padding:.6em 1.2em;
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .18s,color .18s,background-color .18s;
}
.gal-filters button:hover{color:var(--paper);border-color:var(--brass)}
.gal-filters button[aria-pressed="true"]{
  color:var(--ink);
  background:var(--brass-glow);
  border-color:var(--brass-glow);
}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gal-item{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--line-ink);
  border-radius:var(--radius);
  background:var(--ink-raised);
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal-item:hover img{transform:scale(1.04)}
.gal-cap{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  padding:1.6em 1em .9em;
  font-size:.88rem;
  color:var(--paper);
  background:linear-gradient(to top,rgba(23,18,15,.92),transparent);
}
.gal-empty{
  display:grid;
  place-items:center;
  gap:.8em;
  min-height:220px;
  border:1px dashed var(--line-ink);
  border-radius:var(--radius);
  color:var(--muted-ink);
  text-align:center;
  padding:2em;
}

/* ------------------------------------------------------------------ */
/* 12. Forms                                                           */
/* ------------------------------------------------------------------ */
.field{margin-block-end:1.15rem}
.field label{display:block;font-size:.9rem;font-weight:600;margin-block-end:.5em}
.field .opt{font-weight:400;color:var(--muted-paper);font-size:.85em}

.input,.select,.textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  padding:.85em 1em;
  transition:border-color .18s,box-shadow .18s;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brass);
  outline:none;
  box-shadow:0 0 0 3px rgba(169,123,46,.14);
}
.textarea{min-height:140px;resize:vertical;line-height:1.7}
.select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 48%,var(--brass-deep) 50%,transparent 52%),
                   linear-gradient(-45deg,transparent 48%,var(--brass-deep) 50%,transparent 52%);
  background-size:9px 9px,9px 9px;
  background-repeat:no-repeat;
  background-position:left 1.1em top 55%,left 1.55em top 55%;
  padding-inline-start:2.6em;
  padding-inline-end:1em;
}
[dir="rtl"] .select{
  background-position:right 1.55em top 55%,right 1.1em top 55%;
  padding-inline-start:1em;
  padding-inline-end:2.6em;
}
.check{display:flex;gap:.7em;align-items:flex-start;font-size:.93rem;line-height:1.6}
.check input{margin-block-start:.35em;accent-color:var(--burgundy);width:1.05em;height:1.05em}

.err{color:#9B2226;font-size:.86rem;margin-block-start:.4em}
[aria-invalid="true"]{border-color:#9B2226!important}

.note{
  border-inline-start:2px solid var(--brass);
  padding-inline-start:1.1em;
  color:var(--muted-paper);
  font-size:.93rem;
  line-height:1.7;
}
.on-ink .note{color:var(--muted-ink)}

.flash{
  border-radius:var(--radius);
  padding:1em 1.2em;
  margin-block-end:1.4rem;
  font-size:.95rem;
  border:1px solid;
}
.flash-ok{background:#EFF5EE;border-color:#B8D3B4;color:#235C2A}
.flash-err{background:#FBEFEF;border-color:#E3BDBD;color:#8A1F24}

/* ------------------------------------------------------------------ */
/* 13. Contact band + footer                                           */
/* ------------------------------------------------------------------ */
.cta{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(52px,7vw,88px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.cta h2{color:var(--paper)}
.cta p{color:var(--muted-ink);margin-inline:auto}
.cta .btn-row{justify-content:center}

.site-footer{
  background:var(--ink);
  color:var(--muted-ink);
  padding-block:clamp(44px,6vw,72px) 0;
  border-block-start:1px solid var(--line-ink);
  font-size:.93rem;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,56px)}
.site-footer h4{
  color:var(--paper);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-family:var(--font-cond);
  margin-block-end:1.2em;
}
.site-footer a{color:var(--muted-ink)}
.site-footer a:hover{color:var(--brass-glow)}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.foot-list li{display:flex;align-items:flex-start;gap:.6em}
.foot-brand img{width:min(240px,70%);height:auto;margin-block-end:1.2em}
.foot-bottom{
  margin-block-start:clamp(30px,4vw,48px);
  border-block-start:1px solid var(--line-ink);
  padding-block:1.4em;
  display:flex;
  flex-wrap:wrap;
  gap:1em;
  justify-content:space-between;
  font-size:.86rem;
}
/* Named, not iconised: one generic glyph cannot stand for six different
   networks, and DESIGN.md bans generic line icons standing in for things. */
.social{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:1.4em}
.social a{
  font-family:var(--font-cond);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-ink);
  border:1px solid var(--line-ink);
  border-radius:var(--radius);
  padding:.5em .85em;
  line-height:1;
}
.social a:hover{border-color:var(--brass-glow);color:var(--brass-glow)}

/* ------------------------------------------------------------------ */
/* 14. Persistent contact rail                                         */
/* The conversion is a message or a call, never a checkout.            */
/* ------------------------------------------------------------------ */
.rail{
  position:fixed;
  inset-block-end:0;
  inset-inline:0;
  z-index:140;
  display:none;
  background:var(--ink);
  border-block-start:1px solid var(--line-ink);
  padding:10px 14px;
  gap:10px;
}
.rail .btn{flex:1;padding-block:.95em;font-size:.95rem}

.rail-desk{
  position:fixed;
  inset-inline-end:0;
  inset-block-start:50%;
  transform:translateY(-50%);
  z-index:130;
  display:flex;
  flex-direction:column;
  gap:1px;
}
[dir="ltr"] .rail-desk{inset-inline-end:auto;inset-inline-start:0}
.rail-desk a{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--line-ink);
  transition:background-color .18s,color .18s;
}
.rail-desk a:hover{background:var(--brass-glow);color:var(--ink)}
.rail-desk a.wa:hover{background:var(--wa);color:#fff}

/* ------------------------------------------------------------------ */
/* 15. Prose (CMS page bodies)                                         */
/* ------------------------------------------------------------------ */
.prose{font-size:1.03rem;line-height:1.9}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-block-start:1.6em}
.prose h3{margin-block-start:1.5em}
.prose ul{list-style:none;padding:0;display:grid;gap:.6em}
.prose ul li{display:flex;gap:.7em;align-items:flex-start}
.prose ul li::before{
  content:"";
  flex:none;
  width:.72em;
  height:.72em;
  margin-block-start:.56em;
  background:var(--brass);
  -webkit-mask:url(/assets/img/girih-star-solid.svg) no-repeat center/contain;
  mask:url(/assets/img/girih-star-solid.svg) no-repeat center/contain;
}
.prose em{color:var(--muted-paper)}
.prose a{border-block-end:1px solid var(--brass)}

.masthead{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(48px,7vw,86px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.masthead h1{color:var(--paper);margin-block-end:.3em}
.masthead .lede{color:var(--muted-ink)}

/* ------------------------------------------------------------------ */
/* 16. Utilities & responsive                                          */
/* ------------------------------------------------------------------ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.center{text-align:center}
.center p,.center .lede{margin-inline:auto}
.stack-lg{display:grid;gap:clamp(26px,4vw,44px)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}

@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .two-col{grid-template-columns:1fr}
}

@media (max-width:860px){
  .nav{
    display:none;
    position:fixed;
    inset-block-start:var(--header-h);
    inset-inline:0;
    inset-block-end:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    padding:var(--pad);
    overflow-y:auto;
    border-block-start:1px solid var(--line-paper);
  }
  .nav.open{display:flex}
  .nav a{padding-block:1em;border-block-end:1px solid var(--line-paper);font-size:1.05rem}
  .nav a[aria-current="page"]{border-color:var(--brass)}
  .menu-btn{display:grid;place-items:center}
  .rail{display:flex}
  .rail-desk{display:none}
  body{padding-block-end:70px}
}

@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .proof-in{flex-direction:column;gap:1rem}
  .btn-row .btn{flex:1 1 100%}
}

/* ------------------------------------------------------------------ */
/* 17. Motion & print                                                  */
/* ------------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero-strap path,.hero-strap rect{stroke-dashoffset:0!important;transition:none}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.rail,.rail-desk,.cta,.gal-filters,.btn-row,.tier-actions{display:none!important}
  body{background:#fff;color:#000;font-size:12pt;padding:0}
  .on-ink,.hero,.proof,.masthead,.site-footer,.tier-lead{
    background:#fff!important;color:#000!important;
  }
  .on-ink h1,.on-ink h2,.on-ink h3,.hero h1,.tier-lead .tier-name{color:#000!important}
  .girih-field,.hero-strap,.rule{display:none}
  a{text-decoration:underline}
}

/* the empty-gallery mark reads as a quiet brand sign, not an icon */
.gal-empty svg{width:2.6rem;height:2.6rem;opacity:.45;color:var(--brass-glow)}

/* ------------------------------------------------------------------ */
/* 18. Hero slider                                                     */
/* Slides are stacked in one grid cell so the hero keeps the height of  */
/* the tallest statement and nothing jumps between transitions.         */
/* ------------------------------------------------------------------ */
.hero-track{display:grid}
.hero-slide{
  grid-area:1/1;
  min-width:0;
  opacity:1;
  transition:opacity .6s ease;
}
.hero-rotating .hero-slide{
  opacity:0;
  visibility:hidden;              /* also removes it from the a11y tree */
  transform:translateY(10px);
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
  pointer-events:none;
}
.hero-rotating .hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .55s ease,transform .55s ease,visibility 0s;
  pointer-events:auto;
}

/* Each part of the statement arrives in sequence, never all at once. */
.hero-rotating .hero-slide.is-active .eyebrow,
.hero-rotating .hero-slide.is-active h1,
.hero-rotating .hero-slide.is-active .lede,
.hero-rotating .hero-slide.is-active .btn-row{
  animation:hero-rise .62s cubic-bezier(.22,.7,.3,1) backwards;
}
.hero-rotating .hero-slide.is-active .eyebrow{animation-delay:.04s}
.hero-rotating .hero-slide.is-active h1{animation-delay:.12s}
.hero-rotating .hero-slide.is-active .lede{animation-delay:.22s}
.hero-rotating .hero-slide.is-active .btn-row{animation-delay:.32s}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ------------------------------- controls --------------------------- */
.hero-nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  margin-block-start:clamp(32px,5vw,52px);
}

.hero-pause,.hero-arrow{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:none;
  background:none;
  border:1px solid var(--line-ink);
  border-radius:var(--radius);
  color:var(--muted-ink);
  cursor:pointer;
  transition:border-color .18s,color .18s,background-color .18s;
}
.hero-pause:hover,.hero-arrow:hover{
  border-color:var(--brass-glow);
  color:var(--brass-glow);
}
.hero-arrows{display:flex;gap:6px;margin-inline-start:auto}

/* Paused: the control swaps to a play glyph drawn with a CSS triangle, so
   no second icon has to load just to change state. */
.hero-pause.is-paused .ico{display:none}
.hero-pause.is-paused::after{
  content:"";
  width:0;height:0;
  border-block:7px solid transparent;
  border-inline-start:11px solid currentColor;
  border-inline-end:0;
}
[dir="rtl"] .hero-pause.is-paused::after{
  border-inline-start:0;
  border-inline-end:11px solid currentColor;
}

/* The chevron points towards the reading direction; prev is its mirror. */
.hero-arrow .ico{transform:none}
[dir="rtl"] .hero-arrow .ico{transform:scaleX(-1)}
.hero-arrow-prev .ico{transform:scaleX(-1)}
[dir="rtl"] .hero-arrow-prev .ico{transform:none}

/* Dots are brass hairline bars, not circles: the world has no round corners.
   The active one fills left to right over the dwell time, so the rotation is
   never a surprise. */
.hero-dots{display:flex;gap:6px}
.hero-dot{
  position:relative;
  width:38px;
  height:3px;
  padding:0;
  border:0;
  border-radius:var(--radius);
  background:var(--line-ink);
  cursor:pointer;
  overflow:hidden;
  transition:background-color .18s;
}
.hero-dot::after{            /* a comfortable tap target around a thin bar */
  content:"";
  position:absolute;
  inset:-14px -4px;
}
.hero-dot:hover{background:rgba(217,176,99,.45)}
.hero-dot-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--brass-glow);
}
.hero-dot.is-active .hero-dot-fill{width:100%}
.hero-dot.is-running .hero-dot-fill{
  animation:hero-dwell var(--dwell,7s) linear forwards;
}
@keyframes hero-dwell{from{width:0}to{width:100%}}

.hero-count{
  margin:0;
  font-family:var(--font-cond);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--muted-ink);
  font-variant-numeric:tabular-nums;
}
.hero-count-sep{margin-inline:.45em;opacity:.5}

@media (max-width:560px){
  .hero-nav{flex-wrap:wrap;gap:12px}
  .hero-arrows{margin-inline-start:auto}
  .hero-dot{width:28px}
}

/* Reduced motion: no autoplay (handled in JS), no movement here either. */
@media (prefers-reduced-motion:reduce){
  .hero-rotating .hero-slide{transform:none}
  .hero-rotating .hero-slide.is-active .eyebrow,
  .hero-rotating .hero-slide.is-active h1,
  .hero-rotating .hero-slide.is-active .lede,
  .hero-rotating .hero-slide.is-active .btn-row{animation:none}
  .hero-dot.is-running .hero-dot-fill{animation:none;width:100%}
}

@media print{
  .hero-nav{display:none!important}
  .hero-rotating .hero-slide{
    opacity:1!important;visibility:visible!important;transform:none!important;
  }
}