:root{--iad-ink:#1B2221;--iad-ivory:#E6E1D5;--iad-bronze:#BE9670;--iad-shadow:#232C2B;--iad-sand:#CBC6B8;--iad-line:rgba(27,34,33,.16);--iad-line-strong:rgba(27,34,33,.30);--iad-ink-faint:rgba(27,34,33,.06);--iad-text-muted:rgba(27,34,33,.72);--iad-text-strong:rgba(27,34,33,.76);--iad-sand-wash:rgba(203,198,184,.24);--iad-selection:rgba(203,198,184,.64);--iad-dark-line:rgba(230,225,213,.18);--iad-dark-border:rgba(230,225,213,.26);--iad-caption-line:rgba(230,225,213,.48);--iad-header-surface:rgba(230,225,213,.94);--iad-elevation:rgba(27,34,33,.16);--ar-display:"Noto Kufi Arabic",sans-serif;--ar-body:"IBM Plex Sans Arabic",sans-serif;--en-display:"Cormorant Garamond",serif;--en-body:"EB Garamond",serif;--label:"Archivo",sans-serif}

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

html{
  overflow-x:clip;
  background:var(--iad-ivory);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  overflow-x:clip;
  background:var(--iad-ivory);
  color:var(--iad-ink);
  font-family:var(--ar-body);
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html[lang="en"] body{font-family:var(--en-body);font-weight:400}

html[lang="ar"],
html[lang="ar"] *,
[lang="ar"],
[lang="ar"] *{
  letter-spacing:normal!important;
  text-transform:none!important;
}

html[lang="ar"] [lang="en"]{
  font-family:var(--label);
  font-weight:400;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

.skip-link{
  position:absolute;
  z-index:1000;
  inset-block-start:16px;
  inset-inline-start:-9999px;
  padding:10px 16px;
  background:var(--iad-ink);
  color:var(--iad-ivory);
  font-weight:500;
  text-decoration:none;
}

.skip-link:focus{
  inset-block-start:16px;
  inset-inline-start:16px;
}

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

a{
  color:inherit;
  overflow-wrap:anywhere;
}

button,
input,
select,
textarea{
  color:inherit;
  font:inherit;
}

button,
summary{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

:focus-visible{
  outline:2px solid var(--iad-ink);
  outline-offset:4px;
}

::selection{
  background:var(--iad-selection);
  color:var(--iad-ink);
}

h1,
h2,
h3,
h4,
h5,
h6{
  min-width:0;
  margin:0;
  font-family:var(--ar-display);
  font-weight:400;
  line-height:1.55;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6{
  font-family:var(--en-display);
  line-height:1.42;
}

p,
figure,
blockquote{
  margin:0;
}

ul,
ol{
  margin:0;
}

[class$="-grid"]>*{min-width:0}

.site-header{
  position:sticky;
  z-index:100;
  top:0;
  height:72px;
  border-bottom:1px solid var(--iad-line);
  background:var(--iad-header-surface);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:1440px;
  height:72px;
  margin-inline:auto;
  padding-inline:5vw;
  gap:32px;
}

.brand{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  min-width:0;
  gap:11px;
  color:var(--iad-ink);
  text-decoration:none;
}

.brand-logo,
.brand img{
  display:block;
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:contain;
  filter:none;
}

.brand-name{
  display:flex;
  flex-direction:column;
  max-width:190px;
  font-family:var(--ar-display);
  font-size:12px;
  font-weight:500;
  line-height:1.55;
  white-space:nowrap;
}

html[lang="en"] .brand-name{
  font-family:var(--label);
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.35;
  text-transform:uppercase;
}

.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  min-width:0;
}

.desktop-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
}

.desktop-nav a::after{
  position:absolute;
  inset-inline:0;
  bottom:7px;
  height:1px;
  background:var(--iad-bronze);
  content:"";
  opacity:0;
}

.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after{
  opacity:1;
}

.mobile-menu{display:none}

.wrap{
  width:min(1280px,88vw);
  margin-inline:auto;
}

.section{
  padding:96px 0;
  border-top:1px solid var(--iad-line);
}

#about{padding-block:80px 88px}
#areas{padding-block:88px 96px}
#approach{padding-block:96px 88px}
#houses{padding-block:104px 96px}
#insights{padding-block:80px 88px}
#faq{padding-block:72px 88px}
.contact-section{padding-block:96px 104px}

.section:first-child{
  border-top:0;
}

.section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.62fr);
  gap:48px;
  align-items:end;
  margin-bottom:52px;
}

.section-title{
  max-width:20ch;
  font-size:clamp(30px,4vw,52px);
}

.section-intro{
  max-width:52ch;
  color:var(--iad-text-muted);
  font-size:17px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  color:var(--iad-text-strong);
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.4;
  text-transform:uppercase;
}

.kicker::before{
  width:28px;
  height:1px;
  flex:0 0 28px;
  background:var(--iad-bronze);
  content:"";
}

.rule{
  width:100%;
  height:1px;
  margin-block:28px;
  border:0;
  background:var(--iad-line-strong);
}

.button-primary,
.button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:12px 24px;
  border:1px solid var(--iad-ink);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
}

.button-primary{
  background:var(--iad-ink);
  color:var(--iad-ivory);
}

.button-primary:focus-visible{
  background:var(--iad-shadow);
  border-color:var(--iad-shadow);
}

.button-secondary{
  background:transparent;
  color:var(--iad-ink);
}

.button-secondary:focus-visible{
  background:var(--iad-ink-faint);
}

.button-primary:active{
  background:var(--iad-shadow);
  border-color:var(--iad-shadow);
}

.button-secondary:active,
.area-row:active,
.related-card:active,
.faq-item summary:active{
  background:var(--iad-ink-faint);
}

/* ============ the doorway hero ============ */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
  gap:clamp(28px,5vw,80px);
  /* capped: on a tall window a full-viewport hero opens a void above the type */
  min-height:min(calc(100svh - 73px),820px);
  padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,88px);
  width:min(1280px,88vw);
  margin-inline:auto;
}

.hero::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:clamp(48px,6vw,88px);
  height:1px;
  background:var(--iad-line);
}

.hero-copy{max-width:min(660px,100%)}

.hero-rule{
  display:block;
  width:76px;
  height:1px;
  margin-bottom:clamp(22px,2.6vw,30px);
  background:var(--iad-bronze);
}


.hero h1{
  max-width:15ch;
  font-size:clamp(38px,5.2vw,68px);
  font-weight:300;
  line-height:1.34;
  text-wrap:balance;
}

html[lang="en"] .hero h1{
  max-width:13ch;
  font-size:clamp(44px,6vw,80px);
  line-height:1.06;
}

.hero-sub{
  max-width:44ch;
  margin:clamp(18px,2.2vw,26px) 0 clamp(26px,3vw,36px);
  color:var(--iad-text-strong);
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.9;
}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* the credential lives in the footer: the registrar's own mark, number beside it */
.footer-credential{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.4vw,18px);
}

.sbc-mark{
  height:clamp(26px,2.6vw,34px);
  width:auto;
  flex:0 0 auto;
  opacity:.78;
}

.cr{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding-inline-start:clamp(12px,1.4vw,18px);
  border-inline-start:1px solid var(--iad-dark-line);
}

.cr-label{
  color:rgba(230,225,213,.62);
  font-family:var(--label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.4;
}

html[lang="ar"] .cr-label{
  font-family:var(--ar-body);
  font-size:12px;
  letter-spacing:normal!important;
  text-transform:none!important;
}

.cr-number{
  color:var(--iad-ivory);
  font-family:var(--label);
  font-size:clamp(13px,1.05vw,15px);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  line-height:1.3;
}

/* the arch: one window of light, clipped to a Najdi head */
.arch{
  position:relative;
  align-self:end;
  justify-self:start;
  width:100%;
  max-width:440px;
  margin:0;
  aspect-ratio:3/4.35;
}

.arch-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--iad-sand);
  clip-path:polygon(0 100%,0 42%,0 42%,100% 42%,100% 100%);
  clip-path:url(#najdi-arch);
}

.arch-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 44%;
  transform:scale(1.04);
}

.arch-line{
  position:absolute;
  inset:-14px;
  width:auto;
  height:auto;
  overflow:visible;
  pointer-events:none;
}

.arch-line path{
  fill:none;
  stroke:var(--iad-bronze);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:.85;
}

.arch-frame img,
.house img,
.about-plate img,
.area-plate img,
.insight-card img,
.page-hero-media img,
.article-cover img{
  filter:saturate(.78) contrast(.96);
}

.stat-grid,
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--iad-line-strong);
}

.stat{
  min-width:0;
  padding:32px 24px;
  border-inline-start:1px solid var(--iad-line);
}

.stat:first-child{
  border-inline-start:0;
}

.stat-value{
  display:block;
  margin-bottom:6px;
  font-family:var(--ar-display);
  font-size:clamp(28px,3vw,42px);
  font-weight:400;
  line-height:1.2;
}

html[lang="en"] .stat-value{
  font-family:var(--en-display);
}

.stat-label{
  color:var(--iad-text-muted);
  font-size:14px;
}

/* ============ the index of five areas ============ */
.areas-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.34fr);
  align-items:start;
  gap:clamp(32px,5vw,72px);
}

.area-list{border-top:1px solid var(--iad-line-strong)}

.area-row{
  position:relative;
  display:grid;
  grid-template-columns:clamp(120px,11vw,150px) minmax(0,1fr) 28px;
  align-items:center;
  gap:clamp(16px,2.4vw,32px);
  padding:clamp(18px,2vw,24px) 4px;
  border-bottom:1px solid var(--iad-line);
  text-decoration:none;
  transition:padding-inline-start .4s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.area-row::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline:-24px;
  z-index:-1;
  background:var(--iad-sand-wash);
  opacity:0;
  transition:opacity .35s ease;
}

.area-row:hover::before,
.area-row:focus-visible::before,
.area-row.is-on::before{opacity:1}

.area-row:hover,
.area-row:focus-visible,
.area-row.is-on{padding-inline-start:14px}

.area-brand-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.area-number{
  color:var(--iad-bronze);
  font-family:var(--label);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
}

html[lang="ar"] .area-number{font-family:var(--ar-body);font-size:14px}

.area-text{min-width:0}

.area-row h3{
  margin-bottom:6px;
  font-size:clamp(20px,2vw,27px);
  font-weight:300;
  line-height:1.35;
}

.area-row p{
  max-width:70ch;
  color:var(--iad-text-muted);
  font-size:14px;
  line-height:1.75;
}

.area-mark{
  position:relative;
  align-self:center;
  width:26px;
  height:1px;
  background:var(--iad-line-strong);
  transition:width .35s var(--ease-out,cubic-bezier(.16,1,.3,1)),background .35s ease;
}

.area-mark::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  color:var(--iad-line-strong);
  transform:translateY(-50%) rotate(45deg);
  transition:color .35s ease;
}

html[dir="rtl"] .area-mark::after{
  right:auto;
  left:0;
  border-right:0;
  border-left:1px solid currentColor;
  transform:translateY(-50%) rotate(-45deg);
}

.area-row:hover .area-mark,
.area-row:focus-visible .area-mark,
.area-row.is-on .area-mark{width:40px;background:var(--iad-bronze)}

.area-row:hover .area-mark::after,
.area-row:focus-visible .area-mark::after,
.area-row.is-on .area-mark::after{color:var(--iad-bronze)}

/* the plate: the room behind the line you are reading */
.area-plate{
  position:sticky;
  top:clamp(96px,12vh,140px);
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--iad-shadow);
}

.area-plate img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .7s var(--ease,cubic-bezier(.2,0,0,1)),transform 1.6s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.area-plate img.is-on{opacity:1;transform:scale(1)}

.steps,
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--iad-line-strong);
}

/* the path: one line, four nodes, an arrow toward the conversation */
.approach-heading{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}

.approach-cta{align-self:end}

.approach-path{
  position:relative;
  gap:28px;
  border-block:0;
}

.approach-path::before{
  content:"";
  position:absolute;
  top:34px;
  inset-inline:0;
  height:1px;
  background:var(--iad-line-strong);
}

.approach-step{
  position:relative;
  min-height:0;
  padding:64px 0 0;
  border-inline-start:0;
}

.approach-step::before{
  content:"";
  position:absolute;
  top:29px;
  inset-inline-start:0;
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid var(--iad-bronze);
  background:var(--iad-ivory);
}

.approach-step:first-child::before{background:var(--iad-bronze)}

.approach-step:last-child::after{
  content:"";
  position:absolute;
  top:30px;
  inset-inline-end:-14px;
  width:7px;
  height:7px;
  border-top:1px solid var(--iad-bronze);
  border-inline-start:1px solid var(--iad-bronze);
  transform:rotate(45deg);
}

html[dir="rtl"] .approach-step:last-child::after{transform:rotate(-45deg)}

.step-number{
  position:absolute;
  top:0;
  inset-inline-start:22px;
  display:block;
  margin:0;
  color:var(--iad-text-strong);
  font-family:var(--ar-display);
  font-size:20px;
  font-weight:300;
  line-height:1;
  transform:translateY(-4px);
}

html[lang="en"] .step-number{font-family:var(--en-display);font-size:24px;font-weight:400}

.approach-step h3{
  margin-bottom:10px;
  font-size:21px;
}

.approach-step p{
  max-width:30ch;
  color:var(--iad-text-muted);
  font-size:14px;
}

.house-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}

.house{
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  background:var(--iad-shadow);
}

.house img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.4s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.house:hover img{transform:scale(1.07)}

.house figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(44px,6vw,72px) clamp(18px,2vw,26px) clamp(18px,2vw,26px);
  /* the plate has to carry ivory type over a bright photograph: the run behind
     the words stays at .88 or more, and only the top edge fades into the image */
  background:linear-gradient(to top,
    rgba(15,20,19,.94) 0%,
    rgba(15,20,19,.88) 58%,
    rgba(15,20,19,.5) 82%,
    rgba(15,20,19,0) 100%);
  color:var(--iad-ivory);
}

.house figcaption span{
  display:inline-block;
  padding-top:10px;
  border-top:1px solid var(--iad-caption-line);
  font-family:var(--ar-display);
  font-size:clamp(17px,1.5vw,21px);
  font-weight:300;
}

html[lang="en"] .house figcaption span{font-family:var(--en-display)}

.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 28px;
}

.insight-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  border-top:1px solid var(--iad-line-strong);
  text-decoration:none;
}

.insight-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:var(--iad-sand);
}

.insight-card-body{
  padding-top:22px;
}

.insight-card time,
.article-meta,
.breadcrumbs{
  font-family:var(--label);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.insight-card time,
.article-meta{
  color:var(--iad-text-strong);
}

.insight-card h3{
  margin:10px 0;
  font-size:23px;
}

.insight-card p{
  color:var(--iad-text-muted);
  font-size:14px;
}

.faq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;
  border-top:1px solid var(--iad-line-strong);
}

.faq-item{
  padding:28px 0 32px;
  border-bottom:1px solid var(--iad-line);
}

.faq-item summary{
  min-height:44px;
  cursor:pointer;
  list-style:none;
  touch-action:manipulation;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary h3{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:center;
  gap:20px;
  font-size:20px;
}

.faq-icon{
  position:relative;
  display:block;
  width:20px;
  height:20px;
}

.faq-icon::before,
.faq-icon::after{
  position:absolute;
  top:50%;
  inset-inline-start:2px;
  width:16px;
  height:1px;
  background:var(--iad-ink);
  content:"";
}

.faq-icon::after{
  rotate:90deg;
}

.faq-item[open] .faq-icon::after{
  opacity:0;
  filter:blur(4px);
  scale:.25;
}

.faq-answer{
  padding-top:14px;
  padding-inline-end:44px;
}

.faq-answer p{
  color:var(--iad-text-muted);
}

.city-grid,
.cities-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-block:1px solid var(--iad-line);
}

.city{
  min-height:112px;
  padding:24px 18px;
  border-inline-start:1px solid var(--iad-line);
}

.city:first-child{
  border-inline-start:0;
}

.city strong{
  display:block;
  font-family:var(--ar-display);
  font-size:18px;
  font-weight:400;
}

html[lang="en"] .city strong{
  font-family:var(--en-display);
}

.city span{
  color:var(--iad-text-muted);
  font-size:13px;
}

.presence,
.contact-section{
  border-top:0;
  background:var(--iad-shadow);
  color:var(--iad-ivory);
}

.presence-grid,
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:72px;
  align-items:end;
}

.presence .kicker,
.contact-section .kicker{
  color:var(--iad-sand);
}

.presence h2,
.contact-section h2{
  max-width:17ch;
  font-size:clamp(34px,5vw,64px);
}

.contact-section .city-grid,
.contact-section .city{
  border-color:var(--iad-dark-border);
}

.contact-section .city span{
  color:var(--iad-sand);
}

.contact-details{
  display:grid;
  gap:18px;
  color:var(--iad-sand);
}

.contact-section .button-primary{
  border-color:var(--iad-ivory);
  color:var(--iad-ivory);
}

.contact-intro{
  max-width:42ch;
  margin-top:18px;
  color:var(--iad-sand);
  font-size:16px;
}

.contact-details a{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:44px;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:44px;
  padding-bottom:5px;
  border-bottom:1px solid var(--iad-bronze);
  color:var(--iad-ivory);
  font-family:var(--label);
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.02em;
  text-decoration:none;
}

.site-footer{
  padding:48px 0 32px;
  border-top:1px solid var(--iad-dark-line);
  background:var(--iad-ink);
  color:var(--iad-sand);
}

.presence :focus-visible,
.contact-section :focus-visible,
.site-footer :focus-visible,
.cta-panel :focus-visible{
  outline:2px solid var(--iad-ivory);
  outline-offset:4px;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr);
  gap:64px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-brand img{
  width:40px;
  height:40px;
  object-fit:contain;
  filter:none;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px 28px;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  color:var(--iad-sand);
  font-size:14px;
  text-decoration:none;
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 24px;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--iad-dark-line);
  font-family:var(--label);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.page-hero{
  padding:112px 0 72px;
  border-bottom:1px solid var(--iad-line-strong);
}

.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:clamp(48px,7vw,96px);
  align-items:end;
}

.page-hero h1{
  max-width:18ch;
  font-size:clamp(38px,5.4vw,68px);
}

.page-hero .hero-cta{margin-top:28px}
.page-hero-lede{
  max-width:62ch;
  margin-top:24px;
  color:var(--iad-text-muted);
  font-size:18px;
}

.page-hero-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--iad-shadow);
}

.page-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  color:var(--iad-text-muted);
}

.breadcrumbs a{
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,.65fr);
  gap:80px;
  align-items:start;
}

.content-main{
  min-width:0;
}

.content-aside{
  position:sticky;
  top:104px;
  min-width:0;
}

.content-block{
  padding-block:38px;
  border-top:1px solid var(--iad-line);
}

.content-block:first-child{
  padding-top:0;
  border-top:0;
}

.content-block h2{
  margin-bottom:18px;
  font-size:clamp(26px,3vw,38px);
}

.content-block h3{
  margin:28px 0 10px;
  font-size:21px;
}

.content-block p{
  max-width:72ch;
  margin-bottom:16px;
  color:var(--iad-text-strong);
}

.fact-list{
  padding:0;
  border-top:1px solid var(--iad-line-strong);
  list-style:none;
}

.fact-list li{
  display:grid;
  grid-template-columns:minmax(110px,.55fr) minmax(0,1fr);
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--iad-line);
}

.fact-list strong{
  font-weight:500;
}

.fact-list span{
  color:var(--iad-text-muted);
}

/* Service page: one number from real mandates + the pricing frame, side by side */
.proof-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.proof-grid .content-block{padding-top:0;border-top:0}
.proof-grid .content-block h2{font-size:clamp(20px,2vw,26px)}
.proof-text{font-size:clamp(17px,1.35vw,20px);line-height:1.8;max-width:60ch}
.service-proof{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(40px,5vw,56px)}
.service-proof+.section{padding-top:clamp(40px,5vw,64px)}

/* Service page: the two articles and the case study chosen for this practice */
.reading-card span{display:flex;align-items:center;gap:10px;color:var(--iad-text-muted)}
.reading-card time{font-variant-numeric:tabular-nums}
.reading-card h3{font-size:clamp(19px,1.6vw,23px);line-height:1.5}

/* Insights index: three named shelves instead of one flat list */
.insight-shelf+.insight-shelf{padding-top:0}

@media(max-width:760px){
  .proof-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .proof-grid .content-block+.content-block{padding-top:28px;border-top:1px solid var(--iad-line)}
}

/* One line under the footer legal row: not the French iad network */
.footer-disambig{margin-top:18px;font-size:12px;color:var(--iad-text-muted);max-width:70ch}

/* Editorial methodology page and the institutional byline on articles */
.editorial-shell{max-width:76ch}
.editorial-shell .content-block h2{font-size:clamp(22px,2.2vw,30px)}
.article-byline{margin-top:12px;font-size:14px;color:var(--iad-sand)}
.article-byline a{color:inherit}

.related-grid,.reading-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.related-card{
  display:flex;
  min-height:210px;
  flex-direction:column;
  justify-content:space-between;
  padding:26px;
  border-block:1px solid var(--iad-line-strong);
  text-decoration:none;
}

.related-card:focus-visible{
  background:var(--iad-sand-wash);
}

.related-card h3{
  font-size:22px;
}

.related-card span{
  color:var(--iad-text-strong);
  font-family:var(--label);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.article-shell{
  width:min(860px,88vw);
  margin-inline:auto;
  padding:104px 0 96px;
}

.article-shell h1{
  max-width:19ch;
  margin-bottom:24px;
  font-size:clamp(38px,5.2vw,66px);
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-bottom:40px;
}

.article-cover{
  margin:40px 0 52px;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--iad-sand);
}

.article-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.article-body{
  max-width:72ch;
  font-size:18px;
  line-height:2;
}

.article-body>*{
  max-width:100%;
}

.article-body h2{
  margin:52px 0 18px;
  font-size:clamp(27px,3.3vw,38px);
}

.article-body h3{
  margin:38px 0 14px;
  font-size:23px;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote{
  margin-bottom:22px;
}

.article-body li{
  margin-bottom:10px;
}

.article-body blockquote{
  padding-inline-start:24px;
  border-inline-start:2px solid var(--iad-bronze);
  color:var(--iad-text-strong);
  font-family:var(--ar-display);
  font-size:1.1em;
}

html[lang="en"] .article-body blockquote{
  font-family:var(--en-display);
}

.article-body pre{
  display:block;
  max-width:100%;
  overflow-x:auto;
}

.article-body ol{
  padding-inline-start:1.4em;
}

.article-body ol li::marker{
  color:var(--iad-bronze);
  font-weight:600;
}

.article-body .table-wrap{
  max-width:100%;
  overflow-x:auto;
  margin-bottom:26px;
  border-block:1px solid var(--iad-sand);
}

.article-body table{
  width:100%;
  border-collapse:collapse;
  font-size:.92em;
  line-height:1.7;
}

.article-body caption{
  padding:12px 0 8px;
  text-align:start;
  color:var(--iad-text-strong);
  font-weight:500;
}

.article-body th,
.article-body td{
  padding:11px 12px;
  text-align:start;
  vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--iad-sand) 60%,transparent);
}

.article-body th{
  font-weight:600;
  color:var(--iad-text-strong);
  border-bottom:1px solid var(--iad-bronze);
}

.article-body a{
  color:var(--iad-text-strong);
  text-decoration:underline;
  text-decoration-color:var(--iad-bronze);
  text-underline-offset:.18em;
}

.related-insights{
  max-width:72ch;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--iad-bronze);
}

.related-insights h2{
  margin:0 0 18px;
  font-size:clamp(22px,2.6vw,28px);
}

.related-insights ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.related-insights a{
  display:block;
  padding:16px 18px;
  border:1px solid var(--iad-line);
  text-decoration:none;
  color:inherit;
}

.related-insights a:hover,
.related-insights a:focus-visible{
  border-color:var(--iad-bronze);
}

.related-title{
  display:block;
  font-family:var(--ar-display);
  font-weight:500;
  line-height:1.55;
  color:var(--iad-ink);
}

html[lang="en"] .related-title{
  font-family:var(--en-display);
  font-size:1.15em;
}

.related-desc{
  display:block;
  margin-top:6px;
  font-size:.92em;
  line-height:1.8;
  color:var(--iad-text-muted);
}

.back-link{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  margin-top:48px;
  border-bottom:1px solid var(--iad-line-strong);
  font-size:14px;
  text-decoration:none;
}

.cta-panel{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);
  align-items:end;
  gap:48px;
  padding:48px;
  background:var(--iad-shadow);
  color:var(--iad-ivory);
}

.cta-panel h2{
  max-width:18ch;
  font-size:clamp(28px,4vw,46px);
}

.cta-panel p{
  margin-top:14px;
  color:var(--iad-sand);
}

.cta-panel a{
  justify-self:end;
  border-color:var(--iad-ivory);
  color:var(--iad-ivory);
}

/* ============================================================
   The page layer: chapter tones, the section rule, and the few
   transitions that survive. Animate transform and opacity only.
   ============================================================ */
:root{
  --tshadow:0 1px 2px rgba(5,8,8,.95),0 3px 12px rgba(5,8,8,.78),0 10px 44px rgba(5,8,8,.8);
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

.section{scroll-margin-top:80px}
.page-body{position:relative}

/* ---------- inner pages: a film frame behind the page title ---------- */
.film-hero{
  position:relative;
  padding:150px 0 84px;
  border-bottom:0;
  background:var(--iad-ink);
  color:var(--iad-ivory);
  overflow:hidden;
}

/* Film frames as classes, not style="" attributes, so the page works under a strict CSP. */
.film-corridor{--film:url('/assets/frames/corridor.jpg')}
.film-majlis{--film:url('/assets/frames/majlis.jpg')}
.film-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--film) center/cover no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.4s var(--ease),transform 7s var(--ease-out);
}

.film-hero.in::before{opacity:.62;transform:scale(1)}

.film-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(27,34,33,.78),rgba(27,34,33,.28) 60%,rgba(27,34,33,.16)),
    linear-gradient(rgba(27,34,33,.2),rgba(27,34,33,.86));
}
html[dir="rtl"] .film-hero::after{
  background:
    linear-gradient(270deg,rgba(27,34,33,.78),rgba(27,34,33,.28) 60%,rgba(27,34,33,.16)),
    linear-gradient(rgba(27,34,33,.2),rgba(27,34,33,.86));
}

.film-hero>.wrap,.film-hero>.article-shell{position:relative;z-index:1}
/* On the dark film hero the primary button inverts: ivory plate, ink text. */
.film-hero .hero-cta .button-primary{background:var(--iad-ivory);color:var(--iad-ink);border-color:var(--iad-ivory);text-shadow:none}
.film-hero .hero-cta .button-primary:focus-visible,.film-hero .hero-cta .button-primary:active{background:var(--iad-sand);border-color:var(--iad-sand)}
.film-hero .breadcrumbs,.film-hero .page-hero-lede,.film-hero .article-meta{color:var(--iad-sand)}
.film-hero .kicker{color:var(--iad-sand)}
.film-hero h1{color:var(--iad-ivory);text-shadow:0 2px 18px rgba(5,8,8,.5)}
.film-hero .page-hero-media{box-shadow:0 30px 60px rgba(5,8,8,.4)}
.film-hero :focus-visible{outline-color:var(--iad-ivory)}
.article-film{padding:150px 0 64px}
.article-film .article-shell{padding:0}
.article-film h1{margin-bottom:20px}
.article-shell{padding-top:56px}

.fact-mark{
  display:block;
  width:22px;
  height:1px;
  margin-top:.95em;
  background:var(--iad-bronze);
}

/* whisper motion per section (paused off-screen and on hidden tabs) */

.contact-section{position:relative;overflow:hidden}
.contact-section>.wrap{position:relative}

@media(max-width:760px){
  .film-hero,.article-film{padding:112px 0 56px}
}

@media(prefers-reduced-motion:reduce){
  .film-hero::before{opacity:.62}
}

@media(max-width:1000px){
  .header-inner{
    gap:20px;
  }

  .desktop-nav{
    gap:16px;
  }

  .desktop-nav a{
    font-size:13px;
  }

  .hero h1{
    font-size:clamp(40px,5.5vw,60px);
  }

  .section-heading{
    gap:32px;
  }

  .steps,
  .steps-grid,
  .insight-grid,
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.reading-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .city-grid,
  .cities-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .approach-heading{grid-template-columns:1fr}
  .approach-cta{justify-self:start}
  .approach-path{grid-template-columns:1fr;gap:0}
  .approach-path::before{top:0;bottom:0;inset-inline:auto;inset-inline-start:5px;width:1px;height:auto}
  .approach-step{padding:0 0 28px;padding-inline-start:34px}
  .approach-step::before{top:8px}
  .approach-step:last-child::after{display:none}
  .approach-step:last-child{padding-bottom:0}
  .step-number{position:static;display:block;margin-bottom:6px;font-size:18px;transform:none}
  .approach-step p{max-width:56ch}

  .content-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);
    gap:48px;
  }

  .page-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.75fr);
    gap:48px;
  }
}

@media(max-width:760px){
  .site-header,.header-inner{height:64px}
  .header-inner{padding-inline:24px}
  .brand{min-width:44px;min-height:44px}
  .brand-logo,.brand img{width:36px;height:36px;flex-basis:36px}
  .desktop-nav{display:none}
  .mobile-menu{display:block}
  .wrap{width:auto;max-width:none;margin-inline:24px}
  .section{padding:72px 0}
  #about{padding-block:56px 64px}
  #areas{padding-block:64px 72px}
  #approach{padding-block:72px 64px}
  #houses{padding-block:80px 72px}
  #insights{padding-block:56px 64px}
  #faq{padding-block:48px 64px}
  .contact-section{padding-block:72px 80px}

  .header-inner{
    gap:14px;
  }

  .mobile-menu summary{
    position:relative;
    display:grid;
    width:48px;
    height:48px;
    cursor:pointer;
    list-style:none;
    place-items:center;
    border:1px solid var(--iad-line-strong);
  }

  .mobile-menu summary::-webkit-details-marker{
    display:none;
  }

  .menu-icon{
    position:relative;
    display:block;
    width:20px;
    height:20px;
  }

  .menu-icon-open,
  .menu-icon-close{
    position:absolute;
    inset:0;
    display:block;
  }

  .menu-icon-open::before,
  .menu-icon-open::after,
  .menu-icon-close::before,
  .menu-icon-close::after{
    position:absolute;
    top:50%;
    inset-inline-start:0;
    width:20px;
    height:1px;
    background:var(--iad-ink);
    content:"";
  }

  .menu-icon-open::before{
    translate:0 -4px;
  }

  .menu-icon-open::after{
    translate:0 4px;
  }

  .menu-icon-close::before{
    rotate:45deg;
  }

  .menu-icon-close::after{
    rotate:-45deg;
  }

  .menu-icon-open{
    opacity:1;
    filter:blur(0);
    scale:1;
  }

  .menu-icon-close{
    opacity:0;
    filter:blur(4px);
    scale:.25;
  }

  .mobile-menu[open] .menu-icon-open{
    opacity:0;
    filter:blur(4px);
    scale:.25;
  }

  .mobile-menu[open] .menu-icon-close{
    opacity:1;
    filter:blur(0);
    scale:1;
  }

  .mobile-menu > nav{position:fixed;top:64px;inset-inline:0;max-height:calc(100svh - 64px);overflow-y:auto;padding:16px 24px 28px;border-bottom:1px solid var(--iad-line-strong);background:var(--iad-ivory);box-shadow:0 18px 40px var(--iad-elevation)}

  .mobile-menu > nav > a{
    display:flex;
    align-items:center;
    min-height:52px;
    border-bottom:1px solid var(--iad-line);
    font-size:16px;
    text-decoration:none;
  }

  .section-heading{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-bottom:38px;
  }

  .section-title{
    font-size:clamp(29px,8.4vw,40px);
  }

  .section-intro{
    font-size:16px;
  }

  .hero{
    min-height:auto;
    padding:32px 0 72px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }

  .hero-media{
    order:-1;
  }

  .hero h1,
  html[lang="en"] .hero h1{
    max-width:15ch;
    font-size:clamp(34px,10.8vw,46px);
  }

  html[lang="en"] .hero h1{
    line-height:1.05;
  }

  .hero .kicker{
    gap:8px;
    font-size:10px;
    letter-spacing:.09em;
    white-space:nowrap;
  }

  .hero .kicker::before{
    width:20px;
    flex-basis:20px;
  }

  .hero-lede{
    margin-top:20px;
    font-size:16px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    margin-top:28px;
  }

  .button-primary,
  .button-secondary{
    min-height:52px;
  }

  .stat-grid,.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  .stat{
    padding:22px 8px;
  }

  .stat-value{
    font-size:clamp(26px,9vw,34px);
  }

  .stat-label{
    font-size:12px;
    line-height:1.55;
  }

  .steps,.steps-grid,.city-grid,.cities-grid,.content-grid,.related-grid{grid-template-columns:1fr}
.reading-grid{grid-template-columns:1fr}
  .insight-grid{grid-template-columns:minmax(0,1fr)}

  .approach-step{
    min-height:0;
    padding:0 0 26px;
    padding-inline-start:32px;
    border-inline-start:0;
  }

  .step-number{
    margin-bottom:6px;
  }

  .insight-grid{
    gap:32px;
  }

  .insight-card{
    padding-top:20px;
  }

  .faq-list{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }

  .city-grid,
  .cities-grid{
    border-block:0;
  }

  .city{
    min-height:0;
    padding:18px 0;
    border-inline-start:0;
    border-bottom:1px solid var(--iad-line);
  }

  .presence-grid,
  .contact-grid,
  .footer-grid,
  .page-hero-grid,
  .cta-panel{
    grid-template-columns:minmax(0,1fr);
  }

  .presence-grid,
  .contact-grid{
    gap:42px;
  }

  .presence h2,
  .contact-section h2{
    font-size:clamp(32px,9vw,44px);
  }

  .footer-grid{
    gap:32px;
  }

  .footer-links{
    justify-content:flex-start;
  }

  .footer-legal{
    flex-direction:column;
    gap:8px;
  }

  .page-hero{
    padding:72px 0 56px;
  }

  .page-hero-grid{
    gap:36px;
  }

  .page-hero-media{
    order:-1;
    aspect-ratio:16/9;
  }

  /* Keep the call to action inside the first screen: headline, button, then the lede. */
  .page-hero-grid>div{display:flex;flex-direction:column}
  .page-hero-grid>div .hero-cta{order:2;margin-top:4px}
  .page-hero-grid>div .page-hero-lede{order:3;margin-top:18px}

  .page-hero h1{
    font-size:clamp(34px,10vw,46px);
  }

  .page-hero-lede{
    font-size:16px;
  }

  .content-grid{
    gap:40px;
  }

  .content-aside{
    position:static;
  }

  .fact-list li{
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }

  .related-card{
    min-height:176px;
  }

  .article-shell{
    width:auto;
    margin-inline:24px;
    padding:72px 0;
  }

  .article-shell h1{
    font-size:clamp(34px,10vw,46px);
  }

  .article-body{
    max-width:100%;
    font-size:17px;
    line-height:1.95;
    overflow-wrap:anywhere;
  }

  .article-body h2,
  .article-body h3,
  .article-body p,
  .article-body li,
  .article-body a{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .article-body blockquote{
    padding-inline-start:18px;
  }

  .cta-panel{
    gap:28px;
    padding:32px 24px;
  }

  .cta-panel a{
    width:100%;
    justify-self:stretch;
  }
}

@media(hover:hover){
  .desktop-nav a:hover::after{
    opacity:1;
  }

  .button-primary:hover{
    background:var(--iad-shadow);
    border-color:var(--iad-shadow);
  }

  .button-secondary:hover{
    background:var(--iad-ink-faint);
  }

  .related-card:hover{
    background:var(--iad-sand-wash);
  }

  .footer-links a:hover{
    color:var(--iad-ivory);
  }
}

@media(prefers-reduced-motion:no-preference){
  .desktop-nav a::after{
    transition-property:opacity;
    transition-duration:.16s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }

  .button-primary,
  .button-secondary,
  .mobile-menu summary{
    transition-property:scale;
    transition-duration:.15s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }

  .button-primary:active,
  .button-secondary:active,
  .mobile-menu summary:active{
    scale:.96;
  }

  .related-card{
    transition-property:background-color;
    transition-duration:.16s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }

  .menu-icon-open,
  .menu-icon-close,
  .faq-icon::after{
    transition-property:opacity,filter,scale;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }

  .mobile-menu > nav{
    opacity:1;
    transform:translateY(0);
    transition-property:opacity,transform;
    transition-duration:.15s;
    transition-timing-function:cubic-bezier(.2,0,0,1);
  }

  @starting-style{
    .mobile-menu[open] > nav{
      opacity:0;
      transform:translateY(-12px);
    }
  }

  .mobile-menu.is-closing > nav{
    opacity:0;
    transform:translateY(-12px);
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* ============================================================
   The house layer: chapters with their own tone, the doorway
   entrance, and the responsive behaviour of the new sections.
   Animate transform and opacity only.
   ============================================================ */

/* ---------- chapter tones: the page reads as rooms, not one wall ---------- */
.section-about{position:relative;border-top:0;padding-block:clamp(72px,9vw,132px) 0}
.section-areas{background:linear-gradient(var(--iad-sand-wash),var(--iad-sand-wash))}

/* the held statement */
.about-lead{display:block}

/* the sentence takes the whole width */
.statement{
  max-width:none;
  font-size:clamp(40px,6.6vw,96px);
  font-weight:300;
  line-height:1.15;
  text-wrap:balance;
}

html[lang="en"] .statement{line-height:1.02}

.about-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);
  margin-top:clamp(28px,3.4vw,44px);
}

.about-body>p{
  grid-column:2;
  max-width:54ch;
  margin:0;
  color:var(--iad-text-strong);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.95;
}

/* the opener: one sentence the house is signed with, before the reading chapter */
.section-word{border-top:1px solid var(--iad-line)}

.word-opener{
  margin:0;
}

.word-opener p{
  max-width:20ch;
  margin:0;
  font-size:clamp(34px,4.6vw,64px);
  font-weight:300;
  line-height:1.3;
  text-wrap:balance;
}

html[lang="en"] .word-opener p{font-family:var(--en-display);max-width:22ch;font-size:clamp(36px,5vw,68px);line-height:1.12}

.byline{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:clamp(28px,3vw,40px);
  padding-top:24px;
  border-top:1px solid var(--iad-line-strong);
  font-size:14px;
  line-height:1.5;
}

.byline-photo{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:4px;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}

.byline-rule{
  width:44px;
  height:1px;
  margin-inline-start:auto;
  background:var(--iad-bronze);
}

.signatory{display:flex;flex-direction:column}
.signatory-name{font-size:17px;font-weight:500;color:var(--iad-ink)}
.signatory-role{color:var(--iad-text-strong)}
.signatory-org{color:var(--iad-text-muted);font-size:13px}
html[lang="en"] .signatory{font-family:var(--label);font-size:12px;letter-spacing:.06em}
html[lang="en"] .signatory-name{font-family:var(--en-display);font-size:19px;letter-spacing:0}
html[lang="en"] .signatory-org{font-size:11px}

.stat-rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.stat-rail .stat{padding:0 18px;border-inline-start:1px solid var(--iad-dark-border)}
.stat-rail .stat:first-child{border-inline-start:0;padding-inline-start:0}

/* one full-bleed room under the statement, the three counts written on it */
.about-plate{
  position:relative;
  margin:clamp(40px,6vw,72px) 0 0;
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--iad-shadow);
}

.about-plate img{width:100%;height:100%;object-fit:cover}

.stat-ribbon{
  position:absolute;
  inset-inline:0;
  bottom:0;
  margin:0;
  padding:48px max(24px,calc((100% - min(1280px,88vw)) / 2)) 26px;
  background:linear-gradient(rgba(19,25,24,0),rgba(19,25,24,.88));
  color:var(--iad-ivory);
}

.stat-ribbon .stat-value{margin-bottom:2px;color:var(--iad-ivory);font-size:clamp(26px,2.6vw,36px)}
.stat-ribbon .stat-label{color:var(--iad-caption-line)}

/* ---------- the dark chapter ---------- */
.section-dark{
  position:relative;
  isolation:isolate;
  border-top:0;
  background:var(--iad-ink);
  color:var(--iad-ivory);
}

.section-plate{
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.34;
}

.section-dark::after,
.contact-section::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(rgba(19,25,24,.72),rgba(19,25,24,.92));
}

.section-dark .section-title{color:var(--iad-ivory)}
.section-dark .section-rule{background:var(--iad-bronze)}

.section-dark .steps{border-block-color:var(--iad-dark-border)}
.section-dark .approach-path::before{background:var(--iad-dark-border)}
.section-dark .approach-step::before{background:var(--iad-ink)}
.section-dark .approach-step:first-child::before{background:var(--iad-bronze)}
.section-dark .approach-cta{border-color:var(--iad-ivory);color:var(--iad-ivory)}
.section-dark .step-number{color:var(--iad-bronze)}
.section-dark .approach-step h3{color:var(--iad-ivory);font-weight:300}
.section-dark .approach-step p{color:rgba(230,225,213,.76)}

/* ---------- the horizon: one breath before the invitation ---------- */
.horizon{
  position:relative;
  height:clamp(180px,26vw,340px);
  overflow:hidden;
  background:var(--iad-ink);
}

.horizon img{width:100%;height:100%;object-fit:cover;opacity:.86}

.horizon::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(19,25,24,.28),rgba(19,25,24,.62));
}

/* ---------- contact keeps Riyadh behind it ---------- */
.contact-section{position:relative;isolation:isolate;border-top:0}
.contact-section .section-plate{opacity:.34}

/* ---------- the quiet second action ---------- */
.button-quiet{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:12px 4px;
  border-bottom:1px solid var(--iad-line-strong);
  color:var(--iad-ink);
  font-size:15px;
  text-decoration:none;
}

.button-quiet:hover{border-bottom-color:var(--iad-bronze)}

/* ---------- the entrance: one quiet fade on load, and nothing after ----------
   No scroll reveals, no looping ambience: the page is still once it has
   arrived, so reading it is never interrupted. */
@media(prefers-reduced-motion:no-preference){
  .hero h1,
  .hero-sub,
  .hero-cta,
  .arch{opacity:0;animation:fade-in .55s ease-out forwards}
  .arch{animation-delay:.06s}
  .hero-sub{animation-delay:.12s}
  .hero-cta{animation-delay:.18s}
}

@keyframes fade-in{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .area-plate img.is-on{opacity:1}
}

/* ---------- responsive: portrait first ---------- */
@media(max-width:1100px){
  .areas-layout{grid-template-columns:1fr}
  .area-plate{display:none}
}

@media(max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:40px}
  .arch{max-width:340px}
  .about-body{grid-template-columns:1fr}
  .about-body>p{grid-column:1}
}

@media(max-width:860px){
  .hero{
    grid-template-columns:1fr;
    gap:clamp(26px,6vw,40px);
    min-height:0;
    padding-block:clamp(24px,6vw,40px) clamp(48px,8vw,64px);
  }
  .hero::after{display:none}
  .arch{order:-1;align-self:center;justify-self:center;width:min(64vw,280px);max-width:none;aspect-ratio:3/4.1}
  .arch-line{inset:-10px}
  .hero-copy{max-width:none}
  .hero h1{max-width:none;font-size:clamp(32px,8.6vw,44px)}
  html[lang="en"] .hero h1{max-width:none;font-size:clamp(36px,9.8vw,52px)}
  .hero-sub{max-width:none;font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .button-primary{flex:1 1 200px;text-align:center;justify-content:center}


  .statement{max-width:none;font-size:clamp(34px,10vw,44px)}
  .stat-rail{grid-template-columns:1fr;border-top:0}
  .stat-rail .stat{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    border-inline-start:0;
    border-top:1px solid var(--iad-dark-border);
  }
  .stat-rail .stat-value{margin-bottom:0;font-size:24px}
  .about-plate{aspect-ratio:4/5}
  .stat-ribbon{padding:60px 24px 16px}

  .area-row{grid-template-columns:96px minmax(0,1fr) 22px;gap:14px;padding:18px 2px}
  .area-brand{height:42px}
  .area-row h3{font-size:19px}
  .area-row p{font-size:14px}
  .area-row::before{inset-inline:-24px}

  .house-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .house img{aspect-ratio:3/4}
  .house figcaption{padding:14px}
  .house figcaption span{font-size:15px;padding-top:8px}

  .horizon{height:clamp(150px,42vw,220px)}
}

@media(max-width:430px){
  .house-grid{grid-template-columns:1fr}
  .house img{aspect-ratio:16/11}
}

/* ---------- the reading chapter ---------- */
.insights-heading{align-items:end}
.insights-heading .more-link{padding-block:0 6px;justify-self:end}

/* the strip: six tall plates, each titled inside its own picture */
.insight-strip{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--iad-line-strong) transparent;
  padding-bottom:10px;
}

.insight-tall{
  position:relative;
  flex:0 0 clamp(220px,21vw,260px);
  aspect-ratio:3/4;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--iad-shadow);
  color:var(--iad-ivory);
  text-decoration:none;
  isolation:isolate;
}

.insight-tall img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.insight-tall::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(19,25,24,0) 35%,rgba(19,25,24,.92));
}

.insight-tall-text{
  position:absolute;
  z-index:1;
  inset-inline:18px;
  bottom:18px;
}

.insight-tall h3{
  margin:8px 0 0;
  color:var(--iad-ivory);
  font-size:18px;
  font-weight:300;
  line-height:1.5;
}

.insight-tall .kind-tag{border-color:var(--iad-caption-line);color:var(--iad-ivory)}

.insight-tall:hover img,
.insight-tall:focus-visible img{transform:scale(1.04)}
.insight-tall:focus-visible{outline:2px solid var(--iad-bronze);outline-offset:3px}

.insight-strip-hint{margin:8px 0 0;color:var(--iad-text-muted);font-size:13px}

.insight-list{border-top:1px solid var(--iad-line-strong)}

.insight-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(84px,auto) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(16px,2.4vw,32px);
  padding:clamp(20px,2.4vw,28px) 4px;
  border-bottom:1px solid var(--iad-line);
  text-decoration:none;
}

.insight-row::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline:-24px;
  z-index:-1;
  background:var(--iad-sand-wash);
  opacity:0;
  transition:opacity .35s ease;
}

.insight-row:hover::before,
.insight-row:focus-visible::before{opacity:1}

.insight-row time{
  color:var(--iad-text-muted);
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.1em;
}

.insight-row h3{
  margin-bottom:8px;
  font-size:clamp(19px,2vw,27px);
  font-weight:300;
  line-height:1.4;
}

.insight-row p{
  max-width:60ch;
  color:var(--iad-text-muted);
  font-size:15px;
}

@media(max-width:1000px){
  .insights-heading{align-items:end}
}

@media(max-width:860px){
  .insights-heading{grid-template-columns:1fr}
  .insights-heading .more-link{justify-self:start;padding-block:10px 0}
  .byline-rule{display:none}
  .byline-photo{width:60px;height:60px}
  .insight-strip{gap:14px}
  .insight-tall{flex-basis:240px}
  .insight-row{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .insight-row h3{font-size:19px}
  .insight-row p{font-size:14px}
  .insight-row::before{inset-inline:-24px}
}

/* ---------- the marks rest in grey and answer to the pointer ---------- */
.area-brand{
  display:block;
  height:56px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:right center;
  filter:grayscale(1) contrast(1.02);
  transition:filter .45s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
@media(max-width:600px){
  /* Reserve enough room for every full lockup, including at 320px and keyboard focus. */
  .area-row{grid-template-columns:84px minmax(0,1fr) 18px;gap:10px}
  .area-brand{height:36px}
  .area-number{font-size:11px}
  html[lang="ar"] .area-number{font-size:12px}
}

@media(hover:hover){
  .area-row:hover .area-brand{filter:none}
}
.area-row:focus-visible .area-brand,.area-row:active .area-brand{filter:none}

/* Keep the existing destination links; pressing reveals colour without hijacking navigation. */

@media(prefers-reduced-motion:reduce){
  .area-brand{transition:filter .01ms}
  .insight-tall img{transition:none}
  .insight-tall:hover img{transform:none}
}

/* ---------- the social marks: the glyph carries it, the label is for readers ---------- */
.social-marks{
  display:flex;
  align-items:center;
  gap:16px;
  /* the group, not each mark, is pulled out so the first glyph lines up with the text */
  margin:6px 0 6px -12px;
}

html[dir="rtl"] .social-marks{margin-inline:0 -12px}

.social-mark{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  color:var(--iad-ivory);
  opacity:.8;
  text-decoration:none;
  transition:opacity .3s var(--ease,cubic-bezier(.2,0,0,1)),color .3s var(--ease,cubic-bezier(.2,0,0,1));
}

.social-mark svg{width:22px;height:22px;display:block}

.social-mark:hover,
.social-mark:focus-visible{opacity:1;color:var(--iad-bronze)}

.footer-legal .footer-address{opacity:.7;font-size:.9em}
.footer-legal .footer-domain{margin-inline-start:auto;opacity:.7}

@media(max-width:760px){
  .footer-legal{gap:16px 18px}
  .footer-credential{width:100%}
  .footer-legal .footer-domain{margin-inline-start:0}
}

/* ---------- branches: a letterhead, not a table of codes ----------
   NB: .presence is already taken by an older section — do not reuse it. */
.branches{
  margin-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--iad-dark-border);
}

.branch-row{
  display:grid;
  grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(16px,2.6vw,40px);
  padding:clamp(18px,2.1vw,26px) 0;
}

.branch-row + .branch-row{border-top:1px solid var(--iad-dark-line)}

.branch-label{
  color:rgba(230,225,213,.56);
  font-family:var(--label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}

html[lang="ar"] .branch-label{
  font-family:var(--ar-body);
  font-size:13px;
  letter-spacing:normal!important;
  text-transform:none!important;
}

.branch-cities{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px clamp(18px,2.4vw,34px);
  margin:0;
  padding:0;
  list-style:none;
}

.branch-cities li{position:relative;display:flex;align-items:baseline;gap:8px}

/* a hairline separator between cities, never before the first */
.branch-cities li + li::before{
  content:"";
  position:absolute;
  inset-inline-start:calc(clamp(18px,2.4vw,34px) / -2);
  top:.15em;
  width:1px;
  height:.85em;
  background:var(--iad-dark-border);
}

.branches .city-name{
  font-family:var(--ar-display);
  font-size:clamp(19px,1.9vw,26px);
  font-weight:300;
  line-height:1.35;
  color:rgba(230,225,213,.84);
}

html[lang="en"] .branches .city-name{font-family:var(--en-display)}

.branches .is-seat .city-name{color:var(--iad-ivory)}

.seat-note{
  color:var(--iad-bronze);
  font-family:var(--label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

html[lang="ar"] .seat-note{
  font-family:var(--ar-body);
  font-size:12px;
  letter-spacing:normal!important;
  text-transform:none!important;
}

@media(max-width:860px){
  .branch-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .branches .city-name{font-size:19px}
  .branch-cities{gap:6px 22px}
  .branch-cities li + li::before{inset-inline-start:-11px}
}

/* ---------- a case study says what it is ---------- */
.insight-when{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.kind-tag{
  display:inline-block;
  padding:3px 9px;
  border:1px solid var(--iad-bronze);
  color:var(--iad-bronze);
  font-family:var(--label);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
}

html[lang="ar"] .kind-tag{
  font-family:var(--ar-body);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:normal!important;
  text-transform:none!important;
}

.article-meta .kind-tag,
.film-hero .kind-tag{border-color:var(--iad-bronze);color:var(--iad-bronze)}
.article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- the mark keeps its name on a phone ---------- */
@media(max-width:760px){
  .brand{gap:9px}
  .brand-logo,.brand img{width:34px;height:34px;flex-basis:34px}

  .brand-name{
    display:flex;
    max-width:none;
    font-size:10.5px;
    font-weight:500;
    line-height:1.4;
  }

  html[lang="en"] .brand-name{
    font-size:9px;
    letter-spacing:.04em;
    line-height:1.3;
    white-space:normal;
    max-width:20ch;
  }
}

/* the narrowest phones: trim before anything can push the header sideways */
@media(max-width:360px){
  .header-inner{padding-inline:18px}
  .brand{gap:8px}
  .brand-logo,.brand img{width:30px;height:30px;flex-basis:30px}
  .brand-name{font-size:9.5px}
  html[lang="en"] .brand-name{font-size:8.5px}
}

/* ---------- the section rule replaces the zigzag divider ---------- */
.section-rule{
  display:block;
  width:56px;
  height:1px;
  margin-bottom:clamp(18px,2vw,26px);
  background:var(--iad-line-strong);
}

.section-dark .section-rule,
.contact-section .section-rule{background:var(--iad-caption-line)}

/* ---------- the home list hands over to the collection ---------- */
.product-more{margin-top:6px;border-top:1px solid var(--iad-line)}

.more-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:clamp(20px,2.4vw,26px) 4px;
  color:var(--iad-ink);
  font-family:var(--ar-body);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}

html[lang="en"] .more-link{font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.more-link::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline:-24px;
  z-index:-1;
  background:var(--iad-sand-wash);
  opacity:0;
  transition:opacity .35s ease;
}

.more-link:hover::before,
.more-link:focus-visible::before{opacity:1}

.more-link-mark{
  position:relative;
  width:28px;
  height:1px;
  background:var(--iad-bronze);
  transition:width .35s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

.more-link-mark::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:7px;
  height:7px;
  border-top:1px solid var(--iad-bronze);
  border-right:1px solid var(--iad-bronze);
  transform:translateY(-50%) rotate(45deg);
}

html[dir="rtl"] .more-link-mark::after{
  right:auto;
  left:0;
  border-right:0;
  border-left:1px solid var(--iad-bronze);
  transform:translateY(-50%) rotate(-45deg);
}

.more-link:hover .more-link-mark,
.more-link:focus-visible .more-link-mark{width:42px}

@media(max-width:860px){
  .more-link{padding:18px 2px;font-size:14px}
  .more-link::before{inset-inline:-24px}
}

/* ---------- the group's own products: four equal tiles ---------- */
.section-products{background:linear-gradient(var(--iad-sand-wash),var(--iad-sand-wash))}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
  margin:0;
  padding:0;
  list-style:none;
}

.product{min-width:0}

.product-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.product-link:focus-visible{outline:2px solid var(--iad-ink);outline-offset:6px}

/* one frame for all four, so a monogram and an app icon read as a set */
.product-mark{
  display:block;
  transition:border-color .35s ease;
}

.product-link:hover .product-mark{border-color:var(--iad-line-strong)}

.product-mark{
  width:100%;
  max-width:132px;
  aspect-ratio:1;
  margin-bottom:clamp(14px,1.6vw,20px);
  overflow:hidden;
  border:1px solid var(--iad-line);
  border-radius:22%;
  background:var(--iad-ivory);
}

.product-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transition:filter .45s var(--ease-out,cubic-bezier(.16,1,.3,1));
}

@media(hover:hover){
  .product-link:hover .product-mark img,
  .product-link:focus-visible .product-mark img{filter:none}
  .product-link:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
}

/* grey everywhere, on his call: a touch screen never reveals the colour */

.product h3{
  margin-bottom:6px;
  font-size:clamp(17px,1.5vw,20px);
  font-weight:400;
}

.product p{
  max-width:30ch;
  color:var(--iad-text-muted);
  font-size:14px;
  line-height:1.75;
}

@media(max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
}

@media(max-width:520px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .product-mark{max-width:none}
  .product h3{font-size:16px}
  .product p{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .product-mark img{transition:filter .01ms}
}