/* Home additions (v0.9): service ribbons, about, why, languages, FAQ and the closing CTA.
   One editorial voice: small brass eyebrow, moderate titles, quiet body copy. */
.home-surface{--sec-brass:color-mix(in srgb,var(--brass) 82%,var(--forest));--sec-line:color-mix(in srgb,var(--forest) 12%,transparent);--sec-muted:color-mix(in srgb,var(--forest) 68%,var(--ivory));--sec-card:color-mix(in srgb,var(--ivory) 45%,white)}
.sec-eyebrow{display:flex;align-items:center;gap:.875rem;margin:0 0 var(--s2);color:var(--sec-brass);font-size:.8125rem;font-weight:600;letter-spacing:.06em}
.sec-eyebrow-index{font-family:var(--font-body-en);font-weight:500;letter-spacing:.12em}
.sec-eyebrow-rule{display:block;inline-size:2.5rem;block-size:1px;background:currentColor;opacity:.7}
.sec-title{margin:0;font:500 clamp(1.75rem,2.6vw,2.625rem)/1.35 var(--font-heading);color:var(--forest);text-wrap:balance}
.sec-line{display:inline-block;overflow:clip;padding-block:.08em;vertical-align:top}.sec-line>span{display:inline-block}
.sec-lead{margin:0;color:var(--sec-muted);font-size:var(--body);line-height:1.85;max-inline-size:44ch;text-wrap:pretty}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;gap:var(--s3) clamp(2rem,6vw,6rem);margin-block-end:clamp(2rem,4vw,3.5rem)}
.star8{inline-size:1em;block-size:1em;fill:currentColor;flex-shrink:0}

/* ---------- Service ribbons: two calm paper bands crossing ---------- */
.ribbons{position:relative;block-size:clamp(13rem,20vw,17rem);margin-block-start:clamp(2rem,4vw,3rem);overflow:clip}
.ribbon{position:absolute;inset-inline:-10%;inset-block-start:50%;padding-block:clamp(.625rem,1.1vw,.875rem);overflow:hidden;direction:ltr;border-block:1px solid color-mix(in srgb,var(--forest) 9%,transparent)}
.ribbon--paper{--ribbon-ground:color-mix(in srgb,var(--ivory) 70%,white);background:var(--ribbon-ground);transform:translateY(-50%) rotate(-3deg);box-shadow:0 1rem 2rem -1.75rem color-mix(in srgb,var(--forest) 25%,transparent)}
.ribbon--sand{--ribbon-ground:#ebe5d9;background:var(--ribbon-ground);transform:translateY(-50%) rotate(2.5deg)}
.ribbon-track{display:flex;align-items:center;gap:clamp(1.25rem,2.2vw,2rem);inline-size:max-content;will-change:transform}
.ribbon-item{display:inline-flex;align-items:baseline;gap:.625rem;white-space:nowrap;cursor:default;color:var(--forest)}
.ribbon-ar{font:500 clamp(1.25rem,2.2vw,2rem)/1.35 var(--font-heading-ar);direction:rtl}
@supports (-webkit-text-stroke:1px #000){.ribbon-item.is-outline .ribbon-ar{color:var(--ribbon-ground);-webkit-text-stroke:2.4px var(--olive);paint-order:stroke fill}}
.ribbon-en{font:500 .625rem/1 var(--font-body-en);letter-spacing:.18em;text-transform:uppercase;color:var(--sec-brass,#8a6d35)}
/* In English the English name leads and the Arabic word becomes the small echo. */
:root:lang(en) .ribbon-item{flex-direction:row-reverse}
:root:lang(en) .ribbon-en{font:500 clamp(1.125rem,2vw,1.75rem)/1.35 var(--font-body-en);letter-spacing:0;text-transform:none;color:var(--forest)}
:root:lang(en) .ribbon-ar{font-size:.8125rem;color:var(--sec-brass,#8a6d35)}
@supports (-webkit-text-stroke:1px #000){:root:lang(en) .ribbon-item.is-outline .ribbon-ar{color:var(--sec-brass,#8a6d35);-webkit-text-stroke:0}:root:lang(en) .ribbon-item.is-outline .ribbon-en{color:var(--ribbon-ground);-webkit-text-stroke:2.4px var(--olive);paint-order:stroke fill}}
.ribbon .star8{font-size:.75rem;color:color-mix(in srgb,#4a5a52 35%,transparent)}
.ribbon-cursor{position:fixed;top:0;left:0;z-index:30;inline-size:8.5rem;aspect-ratio:4/5;border-radius:4.25rem 4.25rem .75rem .75rem;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.6);border:1px solid color-mix(in srgb,var(--forest) 12%,transparent);box-shadow:0 1.25rem 2.5rem -1rem rgba(20,29,25,.28)}
.ribbon-cursor img{inline-size:100%;block-size:100%;object-fit:cover}

/* ---------- About: arched image, drawn copper icons, quiet counters ---------- */
.about-intro{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(4rem,8vw,7rem) clamp(1rem,3vw,2rem)}
.about-arch{position:relative;margin:0;justify-self:center;inline-size:min(100%,22rem);aspect-ratio:4/5;container-type:inline-size}
.about-arch-line{position:absolute;inset:-.75rem;inline-size:calc(100% + 1.5rem);block-size:calc(100% + 1.5rem);overflow:visible}
.about-arch-line path{fill:none;stroke:color-mix(in srgb,var(--brass) 70%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.about-arch-mask{position:absolute;inset:0;overflow:hidden;border-radius:50cqi 50cqi 1rem 1rem;background:var(--pale)}
.about-arch-mask picture,.about-arch-mask img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.about-arch-mask img{object-position:62% 50%}
.about-arch-badge{position:absolute;inset-block-end:1.25rem;inset-inline-start:50%;translate:50% 0;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--pill);background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--forest);font-size:.8125rem;font-weight:500;white-space:nowrap}
:root[dir=ltr] .about-arch-badge{translate:-50% 0}
.about-arch-badge .star8{color:var(--brass)}
.about-lead{margin:var(--s3) 0 clamp(2rem,4vw,2.75rem);color:var(--sec-muted);font-size:var(--body);line-height:1.95;max-inline-size:56ch}
.about-values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.about-value{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:1rem;border:1px solid var(--sec-line);background:var(--sec-card);transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.about-value:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brass) 45%,transparent);box-shadow:0 1rem 2rem -1.5rem color-mix(in srgb,var(--forest) 35%,transparent)}
.about-icon{flex-shrink:0;inline-size:2.25rem;block-size:2.25rem;margin-block-start:.125rem}
.about-icon *{stroke:var(--brass);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;fill:transparent;transition:fill .5s var(--ease)}
.about-value:hover .about-icon *{fill:color-mix(in srgb,var(--brass) 14%,transparent)}
.about-value-text{display:flex;flex-direction:column;gap:.125rem;min-inline-size:0}
.about-value-text strong{font:500 1rem/1.5 var(--font-heading);color:var(--forest)}
.about-value-text>span{font-size:.8125rem;line-height:1.7;color:var(--sec-muted)}
.about-num{font-family:var(--font-body-en);font-weight:600;color:var(--forest);letter-spacing:.02em}

/* ---------- Why ---------- */
.why{padding-block:clamp(4rem,8vw,7rem) 0}
.why-licence bdi{font-family:var(--font-body-en);letter-spacing:.1em;color:var(--forest)}
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.why-item{position:relative;padding:var(--s4) var(--s3) var(--s3);border-radius:1rem;background:var(--sec-card);border:1px solid var(--sec-line);transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.why-item:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brass) 45%,transparent);box-shadow:0 1.5rem 3rem -1.75rem color-mix(in srgb,var(--forest) 35%,transparent)}
.why-rule{position:absolute;inset-block-start:-1px;inset-inline:var(--s3);block-size:2px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease)}
:root[dir=ltr] .why-rule{transform-origin:left}
.why-item.is-in .why-rule,.why-item:hover .why-rule{transform:scaleX(1)}
.why-index{position:absolute;inset-block-start:var(--s3);inset-inline-end:var(--s3);font:500 .75rem/1 var(--font-body-en);letter-spacing:.12em;color:var(--sec-brass)}
.why-icon{inline-size:1.75rem;block-size:1.75rem;stroke:var(--brand);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-block-end:var(--s3)}
.why-item h3{margin:0 0 .5rem;font:500 1.125rem/1.5 var(--font-heading);color:var(--forest)}
.why-item p{margin:0;font-size:.9375rem;line-height:1.85;color:var(--sec-muted)}

/* ---------- Languages: the translation dial ---------- */
.langs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(4rem,8vw,7rem) 0}
.langs-copy .sec-lead{margin-block-start:var(--s3)}
.langs-hint{display:inline-flex;align-items:center;gap:.5rem;margin:var(--s4) 0 0;padding:.375rem .875rem;border-radius:var(--pill);border:1px solid var(--sec-line);font-size:.8125rem;color:var(--sec-muted)}
.langs-hint .star8{color:var(--brass);font-size:.75rem}
.dial{--r:calc(var(--dial) * .5 - 1.6rem);--dial:min(30rem,40vw);--spin:0deg;position:relative;justify-self:center;inline-size:var(--dial);aspect-ratio:1}
.dial-face{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.dial-ring{fill:none;stroke:color-mix(in srgb,var(--forest) 14%,transparent);stroke-width:1}
.dial-ring--thin{stroke:color-mix(in srgb,var(--brass) 35%,transparent);stroke-dasharray:2 6}
.dial-ticks line{stroke:color-mix(in srgb,var(--forest) 22%,transparent);stroke-width:1}
.dial-labels{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.dial-label{position:absolute;inset-block-start:50%;left:50%;transform:rotate(calc(var(--a) + var(--spin))) translateY(calc(var(--r) * -1)) rotate(calc((var(--a) + var(--spin)) * -1)) translate(-50%,-50%);transform-origin:0 0;padding:.25rem .625rem;border-radius:var(--pill);font:400 clamp(.6875rem,.8vw,.8125rem)/1.4 var(--font-body-en);color:var(--sec-muted);white-space:nowrap;cursor:pointer;transition:color .35s var(--ease),background .35s var(--ease)}
.dial-label.is-active{background:var(--forest);color:var(--ivory)}
.dial-label:hover{color:var(--forest)}.dial-label.is-active:hover{color:var(--ivory)}
.dial-core{position:absolute;inset:23%;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--ivory) 60%,white),var(--ivory));box-shadow:inset 0 0 0 1px var(--sec-line),0 1.5rem 3rem -2rem color-mix(in srgb,var(--forest) 40%,transparent);text-align:center;padding:1rem}
.dial-core-word{display:block;overflow:clip;max-inline-size:100%;padding-block:.1em}
.dial-core-word>span{display:inline-block;font:300 min(1.5rem,10cqi)/1.3 var(--font-heading);letter-spacing:.03em;color:var(--forest);white-space:nowrap}
.dial-core-pair{font-size:.6875rem;font-weight:400;color:color-mix(in srgb,var(--sec-muted) 80%,transparent)}
.dial-core-word>span:lang(zh),.dial-core-word>span:lang(ja),.dial-core-word>span:lang(ko),.dial-core-word>span:lang(hi){font-family:system-ui,sans-serif;letter-spacing:.08em}
.dial-core-word>span:lang(ur){font-family:var(--font-heading-ar);letter-spacing:0}
.dial-arrows{color:var(--brass)}

/* ---------- FAQ: an editorial list with hairlines, copper numbers and a quiet open state ---------- */
.faq-sec{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,6rem);align-items:start;padding-block:clamp(4rem,8vw,7rem) 0}
.faq-aside{position:sticky;inset-block-start:calc(var(--header-height) + 2.5rem);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.faq-aside .sec-eyebrow{margin:0}
.faq-items{border-block-start:1px solid color-mix(in srgb,var(--brass) 30%,transparent)}
.faq-item{position:relative;border-block-end:1px solid color-mix(in srgb,var(--brass) 30%,transparent);transition:background .5s var(--ease)}
.faq-item::before{content:'';position:absolute;inset-block:1.25rem;inset-inline-start:0;inline-size:2px;border-radius:2px;background:var(--brass);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.faq-item[open]{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--olive) 3.5%,transparent))}
:root[dir=rtl] .faq-item[open]{background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--olive) 3.5%,transparent))}
.faq-item[open]::before{transform:scaleY(1)}
.faq-item summary{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.375rem 1rem 1.375rem 1.25rem;cursor:pointer;list-style:none;min-block-size:var(--touch-target)}
:root[dir=rtl] .faq-item summary{padding:1.375rem 1.25rem 1.375rem 1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:var(--focus-width) solid var(--olive);outline-offset:-2px}
.faq-num{font:500 .8125rem/1 var(--font-body-en);letter-spacing:.12em;color:var(--sec-brass);font-variant-numeric:tabular-nums}
.faq-q{font:500 clamp(1rem,1.25vw,1.1875rem)/1.6 var(--font-heading);color:var(--forest);transition:color .3s var(--ease)}
.faq-item summary:hover .faq-q{color:var(--olive)}
.faq-icon{position:relative;flex-shrink:0;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--olive) 18%,transparent);transition:background .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease)}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;inset-block-start:50%;left:50%;inline-size:.75rem;block-size:1.25px;border-radius:1px;background:var(--olive);translate:-50% -50%;transition:transform .45s var(--ease),background .45s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item summary:hover .faq-icon{border-color:var(--olive)}
.faq-item[open] .faq-icon{background:var(--olive);border-color:var(--olive);transform:rotate(180deg)}
.faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after{background:var(--ivory)}
.faq-item[open] .faq-icon::after{transform:rotate(0deg)}
.faq-a{overflow:hidden}
.faq-a p{margin:0;padding-block:0 1.5rem;padding-inline:calc(1.25rem + 2.5rem + 1rem) 3.5rem;max-inline-size:62ch;color:var(--sec-muted);font-size:.9375rem;line-height:1.95}

/* ---------- CTA: Riyadh at dusk, the invitation written on the evening sky ---------- */
.cta-band{padding-block:clamp(4rem,8vw,7rem) clamp(4rem,7vw,6rem)}
.cta-card{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;min-block-size:clamp(22rem,34vw,32rem);max-block-size:70vh;border-radius:calc(var(--surface-radius) * .8);overflow:hidden;background:#1d2a40;color:var(--ivory)}
.cta-scene{position:absolute;inset:0;z-index:-2;margin:0}
.cta-scene picture,.cta-scene img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:30% 50%}
/* A light veil of the site green (#1B2D23) over the whole photo, a little deeper behind the words. */
.cta-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(27,45,35,.36) 0%,rgba(27,45,35,.2) 45%,rgba(27,45,35,.2) 100%)}
/* The Kingdom Centre stands on the left of the photo, so the copy keeps to the right in both languages. */
:root[dir=ltr] .cta-card{justify-content:flex-end}
.cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);inline-size:min(100%,28rem);padding:clamp(2rem,4.5vw,4rem)}
.cta-card .sec-title{color:var(--ivory)}
.cta-copy .sec-lead{color:color-mix(in srgb,var(--ivory) 82%,transparent)}
.cta-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.375rem .875rem;border-radius:var(--pill);background:color-mix(in srgb,var(--ivory) 14%,transparent);border:1px solid color-mix(in srgb,var(--ivory) 22%,transparent);color:var(--ivory);font-size:.8125rem;font-weight:600}
.cta-kicker .star8{color:var(--olive-gold)}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-block-start:var(--s1)}
.cta-phone{display:inline-flex;gap:.5rem;align-items:center;min-block-size:var(--touch-target);font-size:.875rem;color:color-mix(in srgb,var(--ivory) 78%,transparent)}
.cta-phone bdi{color:var(--ivory);font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-block-end:2px;unicode-bidi:isolate}

@media (max-width:64rem){
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .about-intro{grid-template-columns:minmax(0,1fr)}
  .about-arch{inline-size:min(80%,18rem)}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .langs{grid-template-columns:minmax(0,1fr)}
  .dial{--dial:min(26rem,86vw)}
  .faq-sec{grid-template-columns:minmax(0,1fr)}
  .faq-aside{position:static}
  .cta-card{flex-direction:column;align-items:stretch;max-block-size:none;min-block-size:0;background:var(--olive)}
  .cta-scene{position:relative;inset:auto;aspect-ratio:2/1}
  .cta-card::before{background:rgba(27,45,35,.2)}
  .cta-copy{inline-size:100%}
}
@media (max-width:48rem){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .about-values{grid-template-columns:minmax(0,1fr)}
  .ribbons{block-size:12rem}
  .ribbon--paper{transform:translateY(-50%) rotate(-7deg)}
  .ribbon--sand{transform:translateY(-50%) rotate(6deg)}
  .ribbon{inset-inline:-25%}
  .dial{--dial:min(22rem,88vw)}
  .dial-label{font-size:.6875rem;padding:.1875rem .5rem}
  .faq-a p{padding-inline:1.25rem 1rem}
  .faq-item summary{grid-template-columns:2rem minmax(0,1fr) auto;gap:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .why-item,.why-rule,.faq-icon,.faq-icon::before,.faq-icon::after,.faq-item,.faq-item::before,.dial-label,.ribbon-item{transition:none}
}