/* Home page (Milestone 2). Tokens and shell come from tokens.css / shell.css. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn--lg{min-height:56px;padding-inline:32px}
.btn--outline{background:transparent;color:inherit;border:1.5px solid currentColor;min-height:52px}
.btn--outline:hover{background:var(--ink);color:var(--warm);border-color:var(--ink)}
.theme-dark .band--dark .btn--outline:hover{background:var(--warm);color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:800;font-stretch:125%;letter-spacing:-.005em;margin:0;text-wrap:balance}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--warm);padding-block:var(--s6) var(--s8)}
.hero-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
.hero-eyebrow{color:var(--grey);margin-bottom:var(--s4)}
.hero h1{font-size:clamp(32px,calc(32px + 26 * (100vw - 390px) / 1050),52px);line-height:1.06;max-width:12ch}
.hero-lead{font-size:var(--t-lead);color:var(--grey);max-width:34ch;margin-top:var(--s5);line-height:1.5}
.hero-cta{margin-top:var(--s6)}
.hero-cta .btn{width:100%}
.motion-toggle{display:none;align-items:center;gap:var(--s2);background:transparent;color:var(--grey);border:0;cursor:pointer;min-height:44px;padding:0 var(--s2);margin-left:calc(var(--s2) * -1)}
.motion-toggle:hover{color:var(--warm)}
.js .motion-toggle--icon{display:inline-flex;justify-content:center;width:44px;min-width:44px;padding:0;margin:0;border:1px solid var(--hairline);color:var(--warm)}
.js .motion-toggle--text{display:none}
.motion-toggle .mt-play,.motion-toggle[aria-pressed="true"] .mt-pause{display:none}
.motion-toggle[aria-pressed="true"] .mt-play{display:block}

.reel{position:relative;min-width:0}
.reel-head{display:flex;align-items:stretch;justify-content:space-between;gap:var(--s4)}
.reel-tab{display:flex;align-items:center;gap:var(--s4);background:#151517;padding:var(--s3) var(--s5) var(--s3) var(--s4);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);min-height:64px}
.tab-sym{width:56px;color:var(--lime)}
.reel-tab-text{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--hairline);padding-left:var(--s4);color:var(--grey)}
.reel-count{color:var(--warm)}
.reel-count b{font-weight:500}
.reel-services{align-self:center;display:inline-flex;align-items:center;min-height:44px;color:var(--warm);text-decoration:none;box-shadow:inset 0 -1px 0 var(--warm);padding:0;white-space:nowrap}
.reel-services:hover{box-shadow:inset 0 -1px 0 var(--lime);color:var(--lime)}
.reel-frame{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.reel-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--m-base) var(--ease)}
.reel-slide.is-active{opacity:1}
.reel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.reel-slide[hidden]{display:block;visibility:hidden}
.reel-caption{position:absolute;left:0;right:0;bottom:0;padding:var(--s7) var(--s6) var(--s4) var(--s7);background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:var(--warm)}
.br{position:absolute;width:18px;height:18px;border:0 solid var(--warm);z-index:3;pointer-events:none}
.br-tl{top:12px;left:12px;border-width:2px 0 0 2px}.br-tr{top:12px;right:12px;border-width:2px 2px 0 0}
.br-bl{bottom:12px;left:12px;border-width:0 0 2px 2px}.br-br{bottom:12px;right:12px;border-width:0 2px 2px 0}

.reel-chapters{display:flex;gap:var(--s4);margin-top:var(--s4)}
.chapter{display:block;width:140px;text-decoration:none;color:var(--grey);position:relative}
.chapter .thumb{display:block;aspect-ratio:16/9;overflow:hidden;opacity:.7;transition:opacity var(--m-fast) var(--ease)}
.chapter .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chapter.is-active .thumb,.chapter:hover .thumb{opacity:1}
.chapter.is-active{color:var(--warm)}
.seg{display:block;height:3px;background:rgba(201,201,196,.3);margin-top:var(--s2);overflow:hidden}
.seg i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.chapter.is-active .seg i{transform:scaleX(1)}
.js .chapter.is-active.is-timing .seg i{transform:scaleX(0);animation:reelprog 6s linear forwards}
@keyframes reelprog{to{transform:scaleX(1)}}
.reel:hover .seg i,.reel:focus-within .seg i,.reel.is-hidden .seg i{animation-play-state:paused!important}
.chapter-name{display:block;margin-top:var(--s2)}
.reel-foot{display:none}

/* opening sequence (only when .intro-pending is set by the inline script) */
.aperture{display:none;position:absolute;left:0;top:0;width:min(52%,560px);height:auto;aspect-ratio:1974.4/1417;pointer-events:none;z-index:5;transform-origin:0 0}
.intro-pending .reel-frame{opacity:0;visibility:hidden;clip-path:inset(48% 48% 48% 48%);animation:reelfail 0s 4.5s forwards}
.intro-pending .reel-tab,.intro-pending .reel-services,.intro-pending .reel-meta{opacity:0;visibility:hidden;animation:introfail 0s 4.5s forwards}
.intro-pending .aperture{display:block;animation:aperturefail 0s 4.5s forwards}
/* Last-resort recovery, independent of any script: after 4.5 s everything hidden by .intro-pending is shown again
   (visibility:hidden also keeps the hidden controls out of the tab order until then). */
@keyframes reelfail{to{opacity:1;visibility:visible;clip-path:inset(0)}}
@keyframes introfail{to{opacity:1;visibility:visible}}
@keyframes aperturefail{to{opacity:0;visibility:hidden}}
.reel.intro-done .reel-frame{transition:opacity .5s var(--ease),clip-path .6s var(--ease)}

/* mobile card layout */
@media (max-width:699.98px){
  .reel-chapters{gap:var(--s2);margin-top:var(--s3)}
  .chapter{flex:1;width:auto;display:flex;align-items:center;min-height:44px}
  .chapter .thumb,.chapter-name .aria-n{display:none}
  .chapter-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .seg{height:4px;margin-top:0;flex:1}
  .reel-frame{aspect-ratio:4/3}
  .reel-foot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s3)}
  .reel-now{grid-column:1 / -1;color:var(--warm)}
  .reel-hint{color:var(--grey)}
  .reel-caption{display:none}
  .hero-copy{display:flex;flex-direction:column}
  .reel-tab{padding-right:var(--s4);flex:0 0 auto}
  .reel-services{flex:1 1 0;min-width:0}
  .svc-cover--type{aspect-ratio:auto;min-height:88px}
  .reel-tab-text span:first-child{display:none}
  .reel-tab-text{white-space:nowrap}
  .tab-sym{width:48px}
  .reel-services{font-size:var(--t-label);white-space:normal;text-align:right;line-height:1.3}
}
@media (min-width:700px){
  /* the labelled pause control is visible from 700px up (tablet and desktop); below 700px the icon control sits under the reel */
  .js .motion-toggle--icon{display:none}
  .js .motion-toggle--text{display:inline-flex;margin-top:var(--s5)}
  .hero{padding-block:var(--s7) var(--s9)}
  .hero-cta .btn{width:auto}
  .hero h1{max-width:14ch}
}
@media (min-width:1100px){
  .hero{padding-block:var(--s8) var(--s9)}
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
  .hero-copy{padding-block:var(--s9) var(--s6);display:flex;flex-direction:column;align-items:flex-start;min-height:100%;justify-content:center}
  .js .motion-toggle--text{margin-top:var(--s9)}
  .tab-sym{width:84px}
  .reel-tab{min-width:268px;padding:var(--s4) var(--s6) var(--s4) var(--s5)}
  .reel-chapters{gap:var(--s5)}
}

/* ---------- bands ---------- */
.band{padding-block:var(--s9)}
.band--light{background:var(--warm);color:var(--ink)}
.band--dark{background:var(--ink);color:var(--warm)}
.sec-label{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.tick{width:8px;height:8px;background:var(--lime);display:inline-block;outline:1px solid var(--ink)}
.band--dark .tick{outline:0}
.band h2{font-size:var(--t-h2);line-height:1.08}
.sec-head{display:flex;flex-direction:column;gap:var(--s5);margin-bottom:var(--s7)}
.sec-note{max-width:34ch;color:var(--grey);font-size:var(--t-small)}
.sec-foot{margin-top:var(--s7)}
@media (min-width:900px){.sec-head{flex-direction:row;justify-content:space-between;align-items:flex-end}.sec-head--split .sec-note{text-align:left}}

/* selected work */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips[hidden]{display:none}
.chip{min-height:44px;padding:0 var(--s4);font:inherit;font-weight:700;font-size:var(--t-small);background:transparent;color:var(--ink);border:1.5px solid var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--ink)}
.chip:hover{background:var(--ink);color:var(--warm)}
.chip[aria-pressed="true"]:hover{background:var(--lime);color:var(--ink)}
.wl-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
.wl{border-top:1px solid rgba(10,10,11,.2)}
.wl li[hidden]{display:none}
.wl-row{display:grid;grid-template-columns:2.5ch 1fr auto 16px;align-items:center;gap:var(--s4);min-height:64px;padding:var(--s3) var(--s4);text-decoration:none;border-bottom:1px solid rgba(10,10,11,.2);transition:background-color var(--m-fast) var(--ease)}
.wl-n{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);color:#5b5b57}
.wl-t{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(15px,calc(15px + 4 * (100vw - 390px) / 1050),19px);line-height:1.2}
.wl-d{color:#3d3d3a;text-align:right}
.wl-arrow{opacity:0;transition:transform var(--m-fast) var(--ease)}
.wl-row:hover,.wl-row:focus-visible,.wl-row.is-active{background:var(--lime)}
.wl-row:hover .wl-arrow,.wl-row:focus-visible .wl-arrow,.wl-row.is-active .wl-arrow{opacity:1}
.wl-row:hover .wl-arrow{transform:translate(3px,-3px)}
.wl-preview{position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden;display:none}
.wl-fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--m-base) var(--ease)}
.wl-fig.is-on{opacity:1}
.wl-fig img{width:100%;height:100%;object-fit:cover;display:block}
.wl-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s6) var(--s4) var(--s3);background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));color:var(--warm)}
.wl-type{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s5);padding:var(--s5);background:var(--graphite);color:var(--warm)}
.wl-type-n{margin-bottom:auto;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(64px,10vw,120px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--grey)}
.wl-type-d{color:var(--grey);margin-top:var(--s2)}
.wl-type-t{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:var(--t-h2);line-height:1.1}
@media (min-width:900px){.wl-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s7);align-items:start}.wl-preview{display:block;position:sticky;top:var(--s6)}}

/* services */
.svc-grid{display:grid;gap:var(--s7) var(--s5);grid-template-columns:1fr}
.svc-cover{aspect-ratio:16/9;overflow:hidden;background:var(--graphite);border-top:3px solid var(--lime)}
.svc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.svc-cover--type{display:flex;align-items:flex-end;padding:var(--s4);background:#151517;border-top-color:var(--grey)}
.svc-cover--type span{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(48px,6vw,72px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--grey)}
.svc-n{color:var(--lime);margin-top:var(--s4)}
.svc h3{font-size:clamp(18px,calc(18px + 3 * (100vw - 390px) / 1050),20px);line-height:1.2;margin-top:var(--s2)}
.svc-text{margin-top:var(--s3);font-size:var(--t-small);color:var(--grey);max-width:34ch}
.svc-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin-top:var(--s3);font-weight:700;font-size:var(--t-small);text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:2px}
.svc-link .arrow{transition:transform var(--m-fast) var(--ease)}
.svc-link:hover .arrow{transform:translate(4px,-4px)}
@media (min-width:700px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.svc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.svc-link{white-space:nowrap}}

/* studio teaser */
.studio-grid{display:grid;gap:var(--s7);grid-template-columns:1fr;align-items:start}
.studio-portrait{position:relative;background:var(--ink);aspect-ratio:4/5;overflow:hidden;max-width:420px}
.studio-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.studio-portrait .br{border-color:var(--warm)}
.studio-by{color:#3d3d3a;margin-top:var(--s4)}
.studio-lead{font-size:var(--t-lead);margin-top:var(--s5);max-width:40ch}
.studio-text{margin-top:var(--s4);max-width:52ch;color:#3d3d3a}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.tags li{padding:var(--s2) var(--s3);border:1.5px solid var(--ink);font-weight:700;font-size:var(--t-small)}
.mark-strip{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s6);padding:var(--s5);background:var(--ink);color:var(--warm)}
.mark-strip .sym{width:88px;color:var(--lime)}
.mark-label{color:var(--lime);margin-bottom:var(--s2)}
.mark-strip .name-si{font-family:var(--font-sinhala);font-weight:700;font-size:20px;margin-left:var(--s2);white-space:nowrap}
@media (max-width:699.98px){.mark-strip{flex-direction:column;align-items:flex-start}.mark-strip .sym{width:64px}}
@media (min-width:900px){.studio-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8)}.studio-portrait{max-width:none;aspect-ratio:4/5}}

/* closing call to action */
.band--cta{padding-block:var(--s9)}
.cta-grid{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:end}
.cta-sub{margin-top:var(--s4);color:var(--grey);font-size:var(--t-lead)}
.cta-act .btn{width:100%}
.cta-mail{margin-top:var(--s5);color:var(--grey);text-transform:none;letter-spacing:.02em}
.cta-mail a{color:var(--warm);display:inline-flex;min-height:44px;align-items:center}
@media (min-width:700px){.cta-act .btn{width:auto}}
@media (min-width:900px){.cta-grid{grid-template-columns:1fr 1fr}}