/* ════════════════════════════════════════════════════════════════
   Matra — matramedia.co.in
   Monochrome: black & ivory. Peacock for wayfinding, champagne for
   measure. The shirorekha (Devanagari headstroke) is the signature:
   a thin champagne line above every heading. √2 modular scale.
   ════════════════════════════════════════════════════════════════ */
:root{
  --fs--1:.7071rem; --fs--05:.8409rem; --fs-0:1.0625rem; --fs-05:1.1892rem;
  --fs-1:1.4142rem; --fs-2:2rem; --fs-3:2.8284rem; --fs-4:4rem; --fs-5:5.6569rem;
  --sp-1:.3536rem; --sp-2:.5rem; --sp-3:.7071rem; --sp-4:1rem; --sp-5:1.4142rem;
  --sp-6:2rem; --sp-7:2.8284rem; --sp-8:4rem; --sp-9:5.6569rem; --sp-10:8rem; --sp-11:11.3137rem;

  --black:#0C0B09;
  --black-2:#121110;
  --ivory:#F3EEE3;
  --ivory-soft:#B5B1A6;
  --ivory-faint:#8E8B80;
  --rule:rgba(243,238,227,.13);
  --rule-strong:rgba(243,238,227,.3);

  --peacock:#54B8AF;        /* 8.3:1 on black */
  --peacock-deep:#11605B;   /* surfaces only, never text */
  --champagne:#DCC394;      /* 11.5:1 */
  --champagne-soft:#C7AE7F; /* 9.2:1 */

  --diag:125.26deg;
  --display:'Newsreader',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --maxw:80rem;
  --narrow:46rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--ivory);
  font-family:var(--body);font-size:var(--fs-0);line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--champagne);color:var(--black)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--peacock);outline-offset:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

.skip{position:absolute;left:-999px;top:var(--sp-3);z-index:99;background:var(--peacock);color:var(--black);
  padding:var(--sp-3) var(--sp-5);font-size:var(--fs--05);font-weight:600;font-family:var(--body)}
.skip:focus{left:var(--sp-3)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-7)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--sp-6)}

/* type */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.012em;margin:0 0 .5em;color:var(--ivory)}
h1{font-size:clamp(var(--fs-2),5vw,var(--fs-4));font-weight:300;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(var(--fs-1),2.8vw,var(--fs-2))}
h3{font-size:var(--fs-1);font-weight:430}
p{margin:0 0 var(--sp-5)}
em,i{font-style:italic}
.lede{font-size:var(--fs-05);line-height:1.65;color:var(--ivory-soft)}
.meta{font-size:var(--fs--05);color:var(--ivory-faint);line-height:1.9;font-variant-numeric:tabular-nums}
.meta b{color:var(--ivory-soft);font-weight:600}
.dev{font-family:var(--display);font-weight:300}

/* the shirorekha — headstroke above headings */
.shiro{position:relative;padding-top:var(--sp-5)}
.shiro::before{content:'';position:absolute;top:0;left:0;width:var(--sp-9);height:2px;background:var(--champagne)}
.shiro-center{padding-top:var(--sp-5);position:relative}
.shiro-center::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--sp-9);height:2px;background:var(--champagne)}

/* links */
.tlink{color:var(--peacock);border-bottom:1px solid rgba(84,184,175,.4);padding-bottom:2px;transition:border-color .25s,color .25s}
.tlink:hover{border-color:var(--peacock)}
.qlink{border-bottom:1px solid var(--rule-strong);padding-bottom:2px;transition:.25s}
.qlink:hover{color:var(--peacock);border-color:var(--peacock)}
.btn{display:inline-block;background:var(--ivory);color:var(--black);padding:var(--sp-4) var(--sp-7);
  font-family:var(--body);font-size:var(--fs-0);font-weight:600;transition:background .25s}
.btn:hover{background:var(--champagne)}

/* masthead */
header.site{border-bottom:1px solid var(--rule)}
.mast{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-5) 0}
.brand{display:flex;align-items:center;gap:var(--sp-4)}
.brand img{height:2.1rem;width:auto}
.brand .bname{font-family:var(--display);font-size:var(--fs-1);font-weight:400;letter-spacing:.01em}
.brand .bname span{color:var(--champagne)}
nav.primary{display:flex;gap:var(--sp-6);align-items:baseline;flex-wrap:wrap}
nav.primary a{font-size:var(--fs--05);font-family:var(--body);color:var(--ivory-soft);padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
nav.primary a:hover{color:var(--ivory)}
nav.primary a[aria-current="page"]{color:var(--champagne);border-color:var(--champagne)}

/* hero (home) */
.hero{padding:var(--sp-10) 0 var(--sp-9);position:relative;overflow:hidden}
.hero .devmark{
  position:absolute;right:-2%;top:50%;transform:translateY(-54%);
  font-family:var(--display);font-weight:300;font-size:clamp(14rem,30vw,26rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(220,195,148,.22);pointer-events:none;user-select:none;
}
.hero .inner{position:relative;max-width:46em}
.hero .eyebrow{display:block;margin-bottom:var(--sp-5)}
.hero h1 .em{font-style:italic;color:var(--champagne)}
.hero .lede{max-width:30em;margin-top:var(--sp-5)}
.hero .acts{margin-top:var(--sp-7);display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}

/* sections */
.sect{padding-top:var(--sp-10)}
.sect-head{margin-bottom:var(--sp-7)}
.sect-head .meta{display:block;margin-bottom:var(--sp-3)}
.two{display:grid;grid-template-columns:1fr 1.4142fr;gap:var(--sp-9);align-items:start}
.two .sticky{position:sticky;top:var(--sp-6)}

/* clientele */
.clients{border-top:1px solid var(--rule)}
.client{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.client .cname{font-family:var(--display);font-size:clamp(var(--fs-1),2.4vw,var(--fs-2));font-weight:350;line-height:1.15}
.client p{margin:0;color:var(--ivory-soft);font-size:var(--fs--05);line-height:1.8;max-width:38em}

/* operations / index rows */
.oprow{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.oprow:first-of-type{border-top:1px solid var(--rule)}
.oprow .no{font-family:var(--display);font-style:italic;color:var(--champagne);font-size:var(--fs-05);min-width:2.4em}
.oprow h3{margin:0}
.oprow p{margin:var(--sp-2) 0 0;color:var(--ivory-soft);font-size:var(--fs--05);line-height:1.8;max-width:44em}
.oprow .where{font-size:var(--fs--05);color:var(--ivory-faint);text-align:right;white-space:nowrap}
a.oprow{transition:background .25s}
a.oprow:hover{background:var(--black-2)}
a.oprow:hover h3{color:var(--champagne)}

/* stats band */
.band{margin-top:var(--sp-10);background:var(--black-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band .inner{padding:var(--sp-8) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(var(--fs-2),3.6vw,var(--fs-3));color:var(--champagne);line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs--05);color:var(--ivory-soft)}

/* course grid */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--sp-7)}
.course{background:var(--black);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:background .25s;min-height:11rem}
.course:hover{background:var(--black-2)}
.course .cno{font-family:var(--display);font-style:italic;font-weight:300;color:var(--champagne);font-size:var(--fs--05)}
.course h3{margin:0;font-size:var(--fs-05);font-weight:430;line-height:1.3}
.course:hover h3{color:var(--champagne)}
.course .cmeta{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs--05);color:var(--ivory-faint);font-variant-numeric:tabular-nums}
.course .cmeta .price{color:var(--peacock);font-weight:600}

/* books / placeholders */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-7)}
.book .cover{aspect-ratio:1/1.4142;border:1px solid var(--rule-strong);display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(243,238,227,.025) 14px 28px),var(--black-2)}
.book .cover span{font-size:var(--fs--05);color:var(--ivory-faint);text-align:center;padding:0 var(--sp-5);line-height:1.8}
.book h3{margin-top:var(--sp-4);font-size:var(--fs-05);font-weight:430}
.book p{margin:var(--sp-1) 0 0;font-size:var(--fs--05);color:var(--ivory-faint)}

/* portrait */
.portrait{position:relative;overflow:hidden;border:1px solid var(--rule)}
.portrait img{filter:grayscale(1) contrast(1.05);width:100%}
.portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(12,11,9,.5))}
.ph-portrait{aspect-ratio:1/1.2;border:1px solid var(--rule-strong);display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(243,238,227,.025) 14px 28px),var(--black-2)}
.ph-portrait span{font-size:var(--fs--05);color:var(--ivory-faint)}

/* prose + quote */
.prose{color:var(--ivory-soft);max-width:38em}
.prose p{margin-bottom:var(--sp-5)}
.prose strong{color:var(--ivory);font-weight:600}
blockquote.pull{margin:var(--sp-7) 0;padding:0;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(var(--fs-1),2.6vw,var(--fs-2));line-height:1.3;color:var(--ivory);text-indent:-.42em}
blockquote.pull .q{color:var(--champagne)}

/* social row */
.socials{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-6)}
.socials a{font-size:var(--fs--05);color:var(--peacock);border-bottom:1px solid rgba(84,184,175,.4);padding-bottom:2px}
.socials a:hover{border-color:var(--peacock)}

/* contact ledger */
.ledg{border-top:1px solid var(--rule-strong);max-width:38em}
.ledg .row{display:flex;gap:var(--sp-4);align-items:baseline;padding:var(--sp-4) 0;border-bottom:1px solid var(--rule);font-size:var(--fs--05)}
.ledg .k{color:var(--ivory-faint);min-width:7em}
.ledg .v{color:var(--ivory)}

/* page head */
.phead{padding:var(--sp-9) 0 var(--sp-7);border-bottom:1px solid var(--rule)}
.phead .meta{display:block;margin-bottom:var(--sp-4)}
.phead h1{max-width:14em}
.phead .lede{max-width:34em;margin-top:var(--sp-4)}

/* footer */
footer.site{margin-top:var(--sp-11);border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:1.4142fr 1fr 1fr;gap:var(--sp-8);padding:var(--sp-8) 0 var(--sp-7)}
.foot-grid p{font-size:var(--fs--05);color:var(--ivory-faint);line-height:1.85;margin:var(--sp-4) 0 0;max-width:26em}
.fcol{display:flex;flex-direction:column;gap:var(--sp-3)}
.fcol h2{font-family:var(--body);font-size:var(--fs--05);font-weight:600;color:var(--ivory-faint);margin:0 0 var(--sp-2)}
.fcol a{font-size:var(--fs--05);color:var(--ivory-soft)}
.fcol a:hover{color:var(--champagne)}
.foot-base{border-top:1px solid var(--rule);padding:var(--sp-5) 0 var(--sp-7);display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs--1);color:var(--ivory-faint)}

/* close cta */
.close-cta{padding-top:var(--sp-11);display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-8);align-items:end}
.close-cta h2{margin:0;font-weight:300;font-size:clamp(var(--fs-2),4.4vw,var(--fs-3))}
.close-cta .act{justify-self:end;text-align:right}

@media (max-width:920px){
  .wrap{padding:0 var(--sp-5)}
  .mast{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  nav.primary{gap:var(--sp-5)}
  .two{grid-template-columns:1fr;gap:var(--sp-7)}
  .two .sticky{position:static}
  .band .inner{grid-template-columns:1fr 1fr;gap:var(--sp-7) var(--sp-5)}
  .cgrid{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr 1fr}
  .client{grid-template-columns:1fr;gap:var(--sp-2)}
  .oprow{grid-template-columns:auto 1fr}
  .oprow .where{display:none}
  .close-cta{grid-template-columns:1fr}
  .close-cta .act{justify-self:start;text-align:left;margin-top:var(--sp-5)}
  .foot-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero .devmark{opacity:.5}
}

/* ── Shimmer & section washes ─────────────────────────────── */
body{background:
  radial-gradient(110% 60% at 85% -10%, rgba(17,96,91,.14) 0%, transparent 55%),
  var(--black)}
.hero{background:
  radial-gradient(56% 44% at 18% 18%, rgba(220,195,148,.07) 0%, transparent 60%),
  radial-gradient(70% 60% at 92% 70%, rgba(17,96,91,.16) 0%, transparent 62%)}
.sect-wash-t{background:linear-gradient(180deg, rgba(17,96,91,.085) 0%, transparent 38%)}
.sect-wash-c{background:radial-gradient(60% 50% at 50% 0%, rgba(220,195,148,.05) 0%, transparent 60%)}
.band{background:
  linear-gradient(115deg, rgba(17,96,91,.22) 0%, rgba(18,17,16,.9) 45%, rgba(220,195,148,.07) 100%),
  var(--black-2)}
footer.site{background:linear-gradient(180deg, transparent 0%, rgba(17,96,91,.1) 100%)}

/* shimmer on the shirorekha — a slow champagne sheen */
.shiro::before,.shiro-center::before{
  background:linear-gradient(90deg, var(--champagne) 0%, #F6E8C8 30%, var(--champagne) 60%);
  background-size:200% 100%;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}

/* ── Hero entrance ────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.75;transform:translateY(-54%) scale(1)}50%{opacity:1;transform:translateY(-55%) scale(1.012)}}
.hero .inner > *{animation:rise .9s cubic-bezier(.22,1,.36,1) both}
.hero .inner > *:nth-child(1){animation-delay:.05s}
.hero .inner > *:nth-child(2){animation-delay:.16s}
.hero .inner > *:nth-child(3){animation-delay:.3s}
.hero .inner > *:nth-child(4){animation-delay:.46s}
.hero .devmark{animation:breathe 9s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .hero .inner > *,.hero .devmark,.shiro::before,.shiro-center::before{animation:none!important}
}

/* portraits keep their photograph's own ratio */
.portrait img{height:auto;aspect-ratio:auto}

/* ── Mobile rhythm — compress the vertical scale ──────────── */
@media (max-width:920px){
  .mast{padding:var(--sp-4) 0;gap:var(--sp-3)}
  .brand img{height:1.7rem}
  .brand .bname{font-size:var(--fs-05)}
  nav.primary{gap:var(--sp-3) var(--sp-5)}
  nav.primary a{padding-bottom:2px}
  .hero{min-height:auto;padding:var(--sp-8) 0 var(--sp-8)}
  .hero .devmark{opacity:.3;font-size:16rem;right:-12%}
  .sect{padding-top:var(--sp-8)}
  .sect-head{margin-bottom:var(--sp-6)}
  .phead{padding:var(--sp-7) 0 var(--sp-6)}
  .band{margin-top:var(--sp-8)}
  .band .inner{padding:var(--sp-7) 0}
  .close-cta{padding-top:var(--sp-8)}
  footer.site{margin-top:var(--sp-8)}
  .foot-grid{padding:var(--sp-7) 0 var(--sp-6)}
  .client .cname{font-size:var(--fs-1)}
  .oprow{gap:var(--sp-4)}
  .course{min-height:auto;padding:var(--sp-5)}
  blockquote.pull{font-size:var(--fs-1)}
  .two .sticky .portrait{max-width:24rem}
}

/* ── Hero text choreography ───────────────────────────────── */
.hero .inner.shiro::before{width:0;animation:draw 1.1s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes draw{to{width:var(--sp-9)}}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .line-in{display:inline-block;transform:translateY(115%);opacity:.001;
  animation:lineup 1s cubic-bezier(.22,1,.36,1) forwards}
.hero h1 .line:nth-child(1) .line-in{animation-delay:.25s}
.hero h1 .line:nth-child(2) .line-in{animation-delay:.42s}
.hero h1 .line:nth-child(3) .line-in{animation-delay:.59s}
@keyframes lineup{to{transform:none;opacity:1}}
.hero .inner > .lede{animation-delay:.95s}
.hero .inner > .acts{animation-delay:1.15s}
.hero .inner > .eyebrow{animation-delay:.1s}
@media (prefers-reduced-motion: reduce){
  .hero h1 .line-in{animation:none!important;transform:none;opacity:1}
  .hero .inner.shiro::before{animation:none!important;width:var(--sp-9)}
}

/* mobile stats — numerals sized to the column, no overflow */
@media (max-width:920px){
  .band .inner{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-5)}
  .stat b{font-size:var(--fs-2)}
  .stat span{display:block;max-width:11em}
}
@media (max-width:380px){
  .band .inner{grid-template-columns:1fr}
}

/* ── The work layer — specimen frames ─────────────────────── */
.specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-7)}
.spec{display:block}
.spec figure{margin:0}
.spec .frame{position:relative;border:1px solid var(--rule-strong);padding:var(--sp-3);background:var(--black-2);transition:border-color .3s}
.spec:hover .frame,.spec:focus-visible .frame{border-color:var(--champagne)}
.spec .frame::before{content:'';position:absolute;top:0;left:var(--sp-3);right:var(--sp-3);height:2px;background:var(--champagne)}
.spec .frame img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.02);transition:filter .4s}
.spec:hover .frame img{filter:grayscale(.25) contrast(1.02)}
.spec figcaption{margin-top:var(--sp-4);display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline}
.spec .sname{font-family:var(--display);font-size:var(--fs-05);font-weight:430}
.spec:hover .sname{color:var(--champagne)}
.spec .srole{font-size:var(--fs--05);color:var(--ivory-faint);text-align:right}

.oprow.has-spec{grid-template-columns:auto 1.2fr 1fr;align-items:center}
.oprow .rowspec{border:1px solid var(--rule-strong);padding:var(--sp-2);background:var(--black-2);position:relative}
.oprow .rowspec::before{content:'';position:absolute;top:0;left:var(--sp-2);right:var(--sp-2);height:2px;background:var(--champagne)}
.oprow .rowspec img{width:100%;display:block;filter:grayscale(1);transition:filter .4s}
a.oprow:hover .rowspec img{filter:grayscale(.25)}

.recg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
.recg figure{margin:0}
.recg .frame{position:relative;border:1px solid var(--rule-strong);padding:var(--sp-2);background:var(--black-2)}
.recg .frame::before{content:'';position:absolute;top:0;left:var(--sp-2);right:var(--sp-2);height:2px;background:var(--champagne)}
.recg img{width:100%;display:block;filter:grayscale(1) contrast(1.05)}
.recg figcaption{margin-top:var(--sp-3);font-size:var(--fs--05);color:var(--ivory-faint);line-height:1.7}
@media(max-width:920px){
  .specgrid{grid-template-columns:1fr}
  .recg{grid-template-columns:1fr}
  .oprow.has-spec{grid-template-columns:1fr;gap:var(--sp-4)}
}

/* the name in peacock */
.namehero{background:linear-gradient(var(--diag),
    #5FE8D5 0%, #2FB3A4 16%, #1E847B 30%, #43C9B8 42%, #E8CE96 54%, #F6E7C1 62%, #DCC394 70%, #4FD2C0 88%, #8FDDD3 100%);
  background-size:130% 130%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:namein 1.4s cubic-bezier(.22,1,.36,1) .2s both, namesheen 9s ease-in-out 1.8s infinite}
@keyframes namesheen{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes namein{from{opacity:0;transform:translateY(26px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion: reduce){.namehero{animation:none!important}}