/* type-a.css: variant A, THE PLATE (home) and THE COMMA (what we do). 25 Oct 2026, Nadir. Loads after type-base.css.
   Home: the letters are holes cut in a black steel plate; the lane film plays behind it and is seen only through the cuts.
   DARE is the one word that is not a hole: it is sprayed on the plate in orange. On scroll the plate hinges away at its top edge
   and the film floods the screen; DARE is the last thing to lift. The real h1 and the who block stay in the document, unseen. */

/* the scene is two screens tall; its stage holds for one screen while the plate goes */
.scene{position:relative;z-index:3;height:calc(var(--sh) * 2)}
.scene .stage{position:sticky;top:0;height:var(--sh);min-height:560px;overflow:hidden;background:var(--black) var(--ground) right top/cover no-repeat;perspective:1200px;perspective-origin:50% 50%}
.scene .bed{z-index:0}
.scene .bed.under{object-position:100% 50%}             /* the woman walks in the left third; the right half of the lane is free */
.scene .plate{position:absolute;inset:0;z-index:2;pointer-events:none}
.scene .plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the drawn plate without WebGL: an SVG sheet masked by the letters, hinged by CSS */
.scene .plate .sheet,.scene .plate .dare{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 0;will-change:transform}
.scene .plate .dare{pointer-events:none}
/* what comes up as the plate leaves: the word on the film, the caption, the one orange control */
.scene .after{position:absolute;inset:0;z-index:3;opacity:var(--rev,0);pointer-events:none}
.scene .after>*{pointer-events:auto}
.scene .after .word{position:absolute;white-space:nowrap;pointer-events:none;left:54vw;top:calc(var(--sh) * .30);font-size:var(--L7);line-height:.8;letter-spacing:0;color:var(--white)}
.scene .after .cap{z-index:4}
.scene .after .play{z-index:5}
@media (max-width:760px){.scene .after .word{left:34vw;top:calc(var(--sh) * .34)}}
/* FILM where WORK stood (Asif, 29 Oct: "there is a WO thing ... find something better to put there"). Anwar R12 (d): the film's name as a title card read 1.6 to 1 on the pale wall; FILM over the film, BRAND over the brand, whole, on the dark side (7.5 to 1); the film's name stays in the caption */
.scene .after .word{left:var(--m);right:auto;text-align:left;white-space:nowrap}
@media (max-width:760px){.scene .after .word{font-size:16vw}}
/* reduced motion: one screen, the plate stands still with the lane's first frame in the cuts; the caption is reachable */
@media (prefers-reduced-motion:reduce){
  .scene{height:var(--sh)}
  .scene .after{--rev:1}
  .scene .after .word{display:none}
}
html.plate-still .scene{height:var(--sh)}
html.plate-still .scene .after{--rev:1}
html.plate-still .scene .after .word{display:none}
/* the hollow rule on the SVG fallback: while the sheet stands (opacity over .5) the film under it is dimmed, flattened, greyed and softened, so the cuts read as smoked windows under the rim; brightness .6 with contrast .7 is a floor of 9 and a ceiling of 51 percent, the nearest a CSS filter gets to the shader's 24 percent floor and 48 percent ceiling */
.scene .bed.cutlit{filter:brightness(.6) contrast(.7) saturate(var(--hollow-sat)) blur(calc(var(--L6) * .06))}

/* ---- the home's work, bigger (Asif via the chat, 28 Oct: every work picture at 1200px or more at 1440) ---- */
/* R14 (30 Oct): the stepping sheets of three widths are gone; the strip is one object per screen, below. The three reading blocks put their picture between the heading and the words,
   at three widths and three edges: the coat runs off the right edge, the tower off the left; Who has no picture */
@media (min-width:761px){
  .type-a:not(.inner) .block .pic{position:relative;left:auto;right:auto;top:auto;display:block;margin:0 0 calc(var(--m) * 1.1)}
  .type-a:not(.inner) .audit .pic{width:86vw;height:54vw;margin-left:auto;margin-right:calc(var(--m) * -1)}
  .type-a:not(.inner) .audit .pic img{object-position:50% 62%}
  .type-a:not(.inner) .ai .pic{width:90vw;height:43vw;margin-left:calc(var(--m) * -1)}
  .type-a:not(.inner) .grow{padding-left:var(--m)}   /* Who carries no picture (Asif, 28 Oct: the tea stall is out), so the indent glow-a.css:105 kept for it goes and the words stand on the margin like the other blocks */
  /* Anwar R11: without the photo the column left a hole, so the title and the lines face each other across the field, as on What we do (type-a.css:65); "to grow." and "See the work" share one baseline */
  .type-a:not(.inner) .grow{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,360px);grid-template-rows:auto 1fr auto auto auto;column-gap:calc(var(--m) * 2)}
  .type-a:not(.inner) .grow .lab{grid-column:1 / -1;grid-row:1}
  .type-a:not(.inner) .grow .h{grid-column:1;grid-row:2 / 6;align-self:last baseline;font-size:5vw;margin-bottom:0}
  .type-a:not(.inner) .grow p{grid-column:2}
  .type-a:not(.inner) .grow p:nth-of-type(1){grid-row:3}
  .type-a:not(.inner) .grow p:nth-of-type(2){grid-row:4}
  .type-a:not(.inner) .grow .go{grid-column:2;grid-row:5;justify-self:start;align-self:last baseline;margin-bottom:0}
}

/* ---- what we do: THE COMMA ---- */
/* YOUR WHOLE BUSINESS, at L4; READ. at L6, orange, on its own line: a 2 to 1 jump between two stencil sizes. The pause, then the verdict */
.comma{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--m) calc(var(--m) * 1.5)}
.comma h1{font-size:var(--L4);line-height:.9;letter-spacing:0}
.comma h1 .l1,.comma h1 .l2{display:block}
.comma h1 .l2{font-size:var(--L6);line-height:.88;letter-spacing:-.01em;margin-top:calc(var(--L6) * .06)}
.comma .lines{display:grid;gap:10px;max-width:34ch;font-size:var(--L2);line-height:1.4;margin-top:calc(var(--m) * 1.2)}
.comma .lines .go{justify-self:start;margin-top:8px;font-size:var(--L0)}
@media (min-width:761px){
  .comma .end{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--m) * 2)}
  .comma .lines{margin-top:0;padding-bottom:calc(var(--L6) * .04);flex:0 0 clamp(300px,24vw,360px)}
  .comma h1{flex:1 1 auto;min-width:0}
}
/* the two lines arrive through the cut, the way the service words do; READ. half a second after the first line */
.comma.arm h1 .l1,.comma.arm h1 .l2{clip-path:inset(-12% 100% -12% 0%)}
.comma.in h1 .l1{clip-path:inset(-12% 0% -12% 0%);transition:clip-path .5s cubic-bezier(.6,0,.8,1)}
.comma.in h1 .l2{clip-path:inset(-12% 0% -12% 0%);transition:clip-path .56s cubic-bezier(.6,0,.8,1) .5s}
@media (prefers-reduced-motion:reduce){.comma.arm h1 .l1,.comma.arm h1 .l2{clip-path:none;transition:none}}
/* reduced motion keeps the stair below, so the open takes Anwar's first option: the title's cap top at 40 percent of the screen, the two lines on its cap line at the right */
@media (prefers-reduced-motion:reduce) and (min-width:761px){
  .comma{justify-content:flex-start;padding-top:calc(var(--sh) * .4 - 8px)}
  .comma .end{align-items:flex-start}
  .comma .lines{padding-bottom:0}
}
/* the phone: the title hangs from the top, never pinned to the foot of a full screen (Anwar round 2, ruling 5: the first content row within 200 CSS px of the nav).
   40 percent of 844 would leave 271 under the nav's last row, so the cap top sits at 30 percent (253) and the lines follow it */
@media (max-width:760px){
  .comma{justify-content:flex-start;padding-top:calc(var(--sh) * .3 - 8px)}
}
/* 60, 30, 10: the one orange action on the home's first screen is the ask in the bar, so its underline is the thread; the four row links on what we do are white (Anwar round 2, ruling 7) */
/* R16 (Anwar R15 4.1 and 6): the bar's size and the ask's look live in bar.css for all eleven pages (the links at L1 in full white, the ask the
   underlined word at L1, weight 600). The home's solid orange stamp (Asif, 29 Oct: "make the top buttons more prominent") is one switch away,
   Asif's call: add the class ask-block to the body on index.html line 21 and the three rules below return, with Anwar R12 (a)'s phone outline */
.type-a.ask-block .top .ask{mix-blend-mode:normal;background:var(--accent);color:var(--black);border:0;padding:10px 18px}
.type-a.ask-block .top .ask:hover{background:var(--white)}
@media (max-width:760px){
  .type-a.ask-block .top .ask{font-size:13px;padding:8px 12px;background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--accent)}   /* Anwar R12 (a): on the phone a solid stamp competed with DARE on the same edge; an orange outline keeps DARE the one orange mass */
}
.wwd.type-a .duo .go{border-bottom-color:var(--white)}
.wwd.type-a .duo .go:hover{border-bottom-color:var(--accent)}

/* the four row pictures stand as four sheets at four depths and turn one by one like pages being read; the words stay a ledger on the left */
@media (min-width:761px){
  .wwd.type-a .duo{min-height:52vh}
  .wwd.type-a .duo.last{min-height:48vh;padding-bottom:calc(var(--m) * 2.2)}
  .wwd.type-a .pages{position:absolute;z-index:5;top:calc(var(--m) * 2.2);right:var(--m);width:26vw;height:32.5vw;perspective:1800px;perspective-origin:20% 50%;transform-style:preserve-3d}
  .wwd.type-a .pages .pic,.wwd.type-a .pages .pic.tall,.wwd.type-a .pages .pic.wide{position:absolute;left:0;top:0;right:auto;width:100%;height:100%;margin:0;transform-origin:0 50%;transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
  /* a moved sheet carries its own clip and picture sizing: glow.css's .duo .pic rules no longer match it (Anwar round 2, ruling 4) */
  .wwd.type-a .pages .pic{overflow:hidden}
  .wwd.type-a .pages .pic img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:none;will-change:auto}
  .wwd.type-a .pages .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 40%);opacity:var(--lift,0);pointer-events:none;z-index:4}
  .wwd.type-a .pages .pic .lab{z-index:5}
}
/* BRAND, halved with the rest, anchored to the right margin so the whole word stays on screen (it ran off the edge at 56vw) */
.type-a .chhaya .word{left:auto;right:var(--m)}

/* ---- R14, 30 Oct 2026, Nadir: the home reads expensive (Nazar's references: Active Theory's object owning the frame, Wolff Olins's one object per screen) ---- */

/* THE PLATE AT HERO SCALE: a whole screen between the hero and Chhaya, flat black, the mark3d plate across it. The plate's long edge is 71 percent of the
   viewport at 1440 (the canvas fit 2.62 by 1.75, read by mark3d.js from data-fit) and 89 percent on the phone (2.25 by 1.75). One raking light from the left
   (data-light), so the right wall of every cut catches and the face falls off toward the right; the plate turns 14 degrees about its vertical axis as the
   screen scrolls past (data-turn), on top of its idle breathing and the pointer, so the light moves across a real thickness. One 14px line in the corner:
   the two cities, already on the site. Never glass, never chrome: the blackened steel as it is in the footer, forty times the area */
.plate-screen{position:relative;z-index:1;height:var(--sh);min-height:560px;overflow:hidden;background:none}   /* Anwar R14: the plate hangs on the wall, its shadow and sprayed mark land on plaster as under the footer */
.plate-screen .mark3d{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;--pw:calc(min(100cqw / 2.62, 100cqh / 1.75) * 2.128)}   /* the CSS fallback plate (reduced motion, no WebGL) keeps the same width as the live one */
.plate-screen .mark3d::before{background:linear-gradient(104deg,#2e2d2b 0%,#1a1a19 30%,#121211 58%,#0f0f0e 100%);box-shadow:inset 1px 1px 0 rgba(242,242,240,.16),inset -1px -1px 0 rgba(0,0,0,.7),3.6cqw 2.4cqw 3cqw -1cqw rgba(0,0,0,.4)}   /* the same light from the left on the still plate */
.plate-screen .line{position:absolute;left:var(--m);bottom:var(--m);z-index:3;margin:0;font-size:14px;line-height:1.3;letter-spacing:.027em;color:var(--white);font-variant-ligatures:none}
@media (max-width:760px){.plate-screen .mark3d{--pw:calc(min(100cqw / 2.25, 100cqh / 1.75) * 2.128)}}

/* THE STRIP, ONE OBJECT PER SCREEN: each of the three (the film, the picture, the website) gets the whole viewport on flat black, the picture covering it;
   the caption stays bottom left at 12px, two lines; a counter bottom right, 01 / 03, the current number the only orange on the screen (the film's play control
   sits above it, the one thing you can touch). A low fade under the caption so the white words read on a pale picture; measured, never a band */
.type-a:not(.inner) .strip{display:block;padding:0;gap:0;overflow:visible;background:var(--black)}
.type-a:not(.inner) .strip .s1w,.type-a:not(.inner) .strip .s2,.type-a:not(.inner) .strip .s3{position:relative;display:block;width:100%;height:var(--sh);min-height:560px;margin:0;overflow:hidden;box-shadow:none;aspect-ratio:auto;align-self:auto;z-index:auto}
.type-a:not(.inner) .strip .s1{position:absolute;inset:0;width:100%;height:100%}
.type-a:not(.inner) .strip img,.type-a:not(.inner) .strip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.type-a:not(.inner) .strip .s2 img{object-position:50% 42%}   /* Asif, 30 Oct: the wide meeting-room picture (houses-03); her face sits left of centre, the speaker's shoulder frames the right */
.type-a:not(.inner) .strip .s3 img{object-position:50% 40%}
@media (max-width:760px){.type-a:not(.inner) .strip .s2 img{object-position:30% 42%}.type-a:not(.inner) .strip .s3 img{object-position:18% 50%}}   /* Anwar R14: on the phone the face and the ring stay in frame. The ring's centre sits at 26 percent of the picture's width (measured by code, 30 Oct) and the phone shows about a quarter of that width, so 18 percent centres it; this block sits AFTER the all-widths rules above, or it loses to them */
.type-a:not(.inner) .strip .s1w::after,.type-a:not(.inner) .strip .s2::after,.type-a:not(.inner) .strip .s3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(10,9,8,.6),rgba(10,9,8,0));pointer-events:none;z-index:2}
.type-a:not(.inner) .strip .cap{max-width:46ch}
.type-a:not(.inner) .strip .cap{padding-right:calc(9ch + var(--m))}   /* the caption never runs under the counter (390, 30 Oct: "same light02 / 03") */
.type-a:not(.inner) .strip .num{position:absolute;right:var(--m);bottom:calc(var(--m) + 2px);z-index:3;font-size:var(--L0);font-weight:500;letter-spacing:.08em;color:var(--white);font-variant-numeric:tabular-nums;pointer-events:none}
.type-a:not(.inner) .strip .num b{font-weight:500;color:var(--accent)}
.type-a:not(.inner) .strip .play{right:var(--m);bottom:calc(var(--m) + 36px)}
@media (min-width:761px){.type-a:not(.inner) .strip > *{scroll-snap-align:start}}
@media (max-width:760px){
  .type-a:not(.inner) .strip .s1w::after,.type-a:not(.inner) .strip .s2::after,.type-a:not(.inner) .strip .s3::after{height:42%;background:linear-gradient(to top,rgba(10,9,8,.78),rgba(10,9,8,.3) 55%,rgba(10,9,8,0))}
  .type-a:not(.inner) .strip .s1 video{object-position:52% 50%}
  .type-a:not(.inner) .strip .s3::after{height:24%}   /* Anwar R14: the ring stays above the fade; the black velvet under the Websites caption reads at 18 to 1 on its own */
}
@media (min-width:761px){.type-a:not(.inner) .strip .s2::after{background:linear-gradient(to top,rgba(10,9,8,.72),rgba(10,9,8,0))}}   /* Anwar R14: the pale meeting-room picture, caption at 4.5 to 1 or better */