:root{
  --g:#2e7d4f; --gd:#256641; --w:#ffffff;
  --rule:rgba(46,125,79,.28); --rule-soft:rgba(46,125,79,.16);
  --tint:rgba(46,125,79,.05); --wrule:rgba(255,255,255,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--w);color:var(--g);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--g);color:var(--w)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
.label{font-family:'Inter',sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;line-height:1.5}
.wrap{padding-inline:clamp(1.4rem,7vw,7rem)}
.measure{max-width:62ch}
.sec{padding-block:clamp(3.8rem,9vw,7.5rem)}
.rule-t{border-top:1px solid var(--rule-soft)}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:42px;width:auto}
.brand-name{font-weight:600;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase}
.nav-links{display:flex;gap:clamp(1.2rem,3.5vw,2.6rem)}
.nav-links a{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .25s ease}
.nav-links a:hover{border-color:var(--rule)}
.nav-links a.current{border-color:var(--g)}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Hero */
.hero{min-height:calc(100vh - 68px);display:grid;
  grid-template-columns:minmax(200px,.85fr) 1.6fr;
  align-items:center;gap:clamp(2rem,6vw,5rem);
  padding-block:clamp(3rem,6vw,5rem);position:relative}
.hero-mark{justify-self:center}
.hero-mark img{height:clamp(220px,38vh,420px);width:auto}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(2.4rem,5.3vw,4.7rem);line-height:1.07;margin:0 0 1.6rem;letter-spacing:-.01em}
.hero .sub{max-width:46ch;font-size:1.02rem;line-height:1.75;margin:0}
.scroll-cue{position:absolute;left:50%;bottom:1.4rem;width:1px;height:52px;background:var(--rule)}

/* Domain object */
.why{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
.domains .dword{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.75rem,3.8vw,2.8rem);line-height:1.28}
.domains .divider{height:1px;background:var(--g);opacity:.9;margin:1.2rem 0;max-width:300px}
.domains .src{font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.why p{margin:0 0 1.1rem}
.why p:last-child{margin-bottom:0}

/* Centered statement */
.statement{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.65rem,3vw,2.15rem);line-height:1.45;
  max-width:36ch;margin:0 auto;text-align:center}
.center{text-align:center}

/* Program rows */
.rows-intro{margin:0 0 2.4rem}
.rows-intro .big{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:500;margin:0 0 .5rem}
.rows{border-top:1px solid var(--rule-soft)}
.row{display:grid;grid-template-columns:70px 1fr 1.5fr;align-items:baseline;
  gap:1.4rem;padding:1.4rem .4rem;border-bottom:1px solid var(--rule-soft);
  transition:background .25s ease}
.row:hover{background:var(--tint)}
.row .num{font-weight:600;font-size:.7rem;letter-spacing:.22em}
.row .name{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.35rem,2.3vw,1.75rem);font-weight:500;line-height:1.1}
.row .clause{font-size:.94rem;opacity:.92}

/* Orbit: the six programs around the mark (wide screens only;
   below 861px these same elements fall back to the .row list above) */
.orbit-core,.orbit-circle{display:none}
@media (min-width: 861px){
  .orbit-circle{display:block}
  .orbit{--r:clamp(252px,26vw,280px);--spin:0deg;
    position:relative;border-top:none;margin-top:1.5rem;
    height:calc(2 * var(--r) + 180px)}
  .orbit-circle{position:absolute;left:50%;top:50%;
    width:calc(2 * var(--r));height:calc(2 * var(--r));
    margin:calc(-1 * var(--r)) 0 0 calc(-1 * var(--r));
    border:1px solid var(--rule-soft);border-radius:50%}

  .orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:220px;display:flex;flex-direction:column;align-items:center;
    gap:.9rem;text-align:center;pointer-events:none}
  .orbit-mark{height:100px;width:auto;
    transition:opacity .4s ease,transform .4s ease}
  .orbit.active .orbit-mark{opacity:.16;transform:scale(.94)}
  .orbit-text{position:relative;width:100%;min-height:5.5em}
  .orbit-text p{position:absolute;left:0;right:0;top:0;margin:0;
    transition:opacity .35s ease}
  .orbit-caption{opacity:.75}
  .orbit-clause{opacity:0;font-size:1.05rem;line-height:1.5;font-weight:500}
  .orbit.active .orbit-caption{opacity:0}
  .orbit.active .orbit-clause{opacity:1}

  .orbit-item{position:absolute;left:50%;top:50%;z-index:1;
    display:block;width:140px;padding:0;gap:0;text-align:center;
    background:none;border-bottom:none;
    transition:opacity .3s ease;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--spin) + var(--i) * 60deg))
      translateY(calc(-1 * var(--r)))
      rotate(calc(-1 * (var(--spin) + var(--i) * 60deg)))}
  .orbit-item:hover{background:none}
  .orbit-item .num{display:block;opacity:.55;margin-bottom:.3rem}
  .orbit-item .name{display:inline-block;font-size:clamp(1.3rem,1.9vw,1.6rem);
    border-bottom:1px solid transparent;transition:border-color .25s ease}
  .orbit-item:hover .name,.orbit-item:focus-visible .name{border-color:var(--g)}
  /* clause moves to the centre visually, but stays readable to screen readers */
  .orbit-item .clause{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .orbit.active .orbit-item{opacity:.4}
  .orbit.active .orbit-item.on{opacity:1}
}

/* Lineage */
.facing{display:flex;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vw,3rem);margin-bottom:2.6rem}
.facing .fname{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1}
.facing .vline{width:1px;height:clamp(3rem,7vw,4.6rem);background:var(--rule)}
.lineage-prose{max-width:58ch;margin:0 auto;text-align:center}
.lineage-prose p{margin:0 0 1.1rem}
.ital-close{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.5;margin-top:1.8rem}

/* Green bands */
.band{background:var(--g);color:var(--w)}
.band ::selection{background:var(--w);color:var(--g)}
.trust-inner{max-width:52ch;margin:0 auto;text-align:center;
  border-top:1px solid var(--wrule);border-bottom:1px solid var(--wrule);padding:2.6rem 1rem}
.trust-inner p{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.55;margin:0}

/* Work */
.method-head{max-width:62ch}
.method-head .label{display:block;margin-bottom:1.2rem}
.program{padding:clamp(2.4rem,5vw,3.6rem) 0;border-bottom:1px solid var(--rule-soft)}
.program:first-of-type{border-top:1px solid var(--rule-soft)}
.program .label{display:block;margin-bottom:.9rem}
.program h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.15;margin:0 0 1.1rem}
.program p{margin:0;max-width:68ch}
.talim{background-image:
  linear-gradient(var(--tint) 1px, transparent 1px),
  linear-gradient(90deg, var(--tint) 1px, transparent 1px);
  background-size:30px 30px}
.withwhom{max-width:54ch;margin:0 auto;text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.6}
.stamp{display:inline-block;border:1px solid var(--g);padding:.95rem 1.4rem;
  font-weight:600;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}
.steward p{max-width:64ch;margin:0 0 1.2rem;line-height:1.75}
.steward .close-line{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.4;margin-top:2.2rem;max-width:32ch}

/* About */
.nastaliq{font-family:'Noto Nastaliq Urdu',serif;direction:rtl;line-height:2.05;font-weight:400}
.vaakh-display{text-align:center;padding-block:clamp(1rem,3vw,2rem)}
.vaakh-display .nastaliq{font-size:clamp(2.1rem,6vw,3.9rem)}
.vaakh-display .caption{margin-top:1.4rem;font-size:.78rem;letter-spacing:.12em;opacity:.8}
.dropcap::first-letter{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  float:left;font-size:3.9em;line-height:.82;padding:.06em .12em 0 0}
.prose p{margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.case-lead{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.18em;letter-spacing:.005em}
.case p{margin:0}
.case .case-block{padding:1.9rem 0;border-bottom:1px solid var(--rule-soft)}
.case .case-block:first-child{border-top:1px solid var(--rule-soft)}
.ledger{border-top:1px solid var(--rule-soft)}
.ledger-row{display:grid;grid-template-columns:220px 1fr;gap:1.6rem;
  padding:1.5rem .2rem;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.ledger-row .term{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.35rem;line-height:1.2}
.ledger-row .def{font-size:.95rem;margin:0}
.covenant{border:1px solid var(--g);padding:clamp(1.8rem,5vw,3.2rem);max-width:70ch}
.covenant p{margin:0 0 1.1rem;max-width:60ch}
.covenant p:last-child{margin-bottom:0}
.coda{max-width:54ch;margin:0 auto;text-align:center;font-size:.95rem;opacity:.95}

/* Contact */
.contact-open{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.35;max-width:26ch;margin:0}
.dir{border-top:1px solid var(--rule-soft);margin-top:2.8rem}
.dir-entry{padding:1.7rem .2rem;border-bottom:1px solid var(--rule-soft)}
.dir-entry .label{display:block;margin-bottom:.55rem}
.dir-entry p{margin:0;max-width:62ch;font-size:.97rem}
.address{padding-top:clamp(2.5rem,6vw,4rem)}
.address a{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.15;
  border-bottom:1.5px solid var(--g);padding-bottom:.1em}
.address .place{margin-top:1rem;font-size:.85rem;letter-spacing:.1em}

/* 404 */
.notfound{min-height:60vh;display:grid;place-content:center;text-align:center;gap:1.2rem}
.notfound .rule-mini{width:64px;height:1px;background:var(--rule);margin:0 auto}

/* Footer */
footer{background:var(--g);color:var(--w);padding-block:2.6rem;text-align:center}
footer .fline{font-size:.78rem;letter-spacing:.14em;margin:.35rem 0}
footer a{border-bottom:1px solid var(--wrule)}

/* Drawn dividers: every .rule-t strokes in when its section arrives */
.rule-t{position:relative;border-top-color:transparent}
.rule-t::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--rule-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.22,.61,.36,1)}
.rule-t.in::before{transform:scaleX(1)}
/* contact has no .rule-t; its directory rule and the 404 ornament draw the same way */
.dir{position:relative;border-top-color:transparent}
.dir::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--rule-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.22,.61,.36,1)}
.dir.in::before{transform:scaleX(1)}
.rule-mini{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.61,.36,1) .15s}
.rule-mini.in{transform:scaleX(1)}

/* About: the vaakh unveils right to left, the direction it is read */
.vaakh-display .nastaliq{display:inline-block;clip-path:inset(0 0 0 100%);
  transition:clip-path 1.25s cubic-bezier(.22,.61,.36,1) .15s}
.vaakh-display.in .nastaliq{clip-path:inset(0 0 0 0)}

/* About: the case argument, drawn as you scroll it */
.case-rail{position:relative}
.case-rail::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;
  background:var(--rule-soft);transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
.case-rail.in::before{transform:scaleY(1)}
.case-block{position:relative}
.case-block::before{content:'';position:absolute;top:calc(1.9rem + .5em);
  width:9px;height:9px;border-radius:50%;background:var(--w);border:1px solid var(--g);
  opacity:0;transform:scale(.4);
  transition:opacity .5s ease .3s,transform .5s cubic-bezier(.34,1.56,.64,1) .3s}
.case-block.in::before{opacity:1;transform:scale(1)}
@media (min-width: 861px){
  .case-rail{padding-left:40px}
  .case-block::before{left:-38px}
}
@media (max-width: 860px){
  .case-rail::before,.case-block::before{display:none}
}

/* Work: the six programs as a fixed rail, one arc each */
.rail{display:none}
@media (min-width: 1200px){
  .rail{display:block;position:fixed;left:.75rem;top:50%;transform:translateY(-50%);
    z-index:40;width:62px;height:62px;opacity:0;transition:opacity .5s ease}
  .rail.live{opacity:1}
  .rail svg{width:62px;height:62px;display:block}
  .rail .hit{fill:none;stroke:transparent;stroke-width:17;pointer-events:stroke;cursor:pointer}
  .rail .arc{fill:none;stroke:var(--rule);stroke-width:3.4;stroke-linecap:round;
    pointer-events:none;transition:stroke .35s ease}
  .rail a:hover .arc{stroke:var(--gd)}
  .rail a:focus-visible .arc{stroke:var(--g)}
  .rail a.on .arc{stroke:var(--g)}
  .rail-num{position:absolute;inset:0;display:grid;place-items:center;
    font-weight:600;font-size:.62rem;letter-spacing:.08em;pointer-events:none}
}
.program{scroll-margin-top:96px}

/* Motion opt-out for everything above (must follow those rules to win) */
@media (prefers-reduced-motion: reduce){
  .rule-t::before,.dir::before,.case-rail::before{transform:none;transition:none}
  .rule-mini{transform:none;transition:none}
  .case-block::before{opacity:1;transform:none;transition:none}
  .vaakh-display .nastaliq{clip-path:none;transition:none}
  .rail,.rail .arc{transition:none}
}

/* Responsive */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr;text-align:center;gap:2.2rem;min-height:auto;padding-block:3.2rem 4.6rem}
  .hero-mark img{height:clamp(170px,26vh,240px)}
  .hero .sub{margin-inline:auto}
  .scroll-cue{display:none}
  .why{grid-template-columns:1fr;gap:2.6rem}
  .domains .divider{max-width:220px}
  .row{grid-template-columns:54px 1fr;grid-template-rows:auto auto;row-gap:.35rem}
  .row .clause{grid-column:2}
  .ledger-row{grid-template-columns:1fr;gap:.4rem}
  .brand-name{display:none}
  .facing .fname{font-size:1.7rem}
}