/* ==========================================================
   KREYA — "BERKARYA" block system
   PT Teknologi Kreatif Berkarya
   ========================================================== */

:root{
  --paper:#F2F1ED;
  --ink:#0B0B0B;
  --blue:#3465AF;      /* logo — dark face */
  --accent:#4A9BD6;    /* logo — light face, used as the single accent */
  --grey:#787874;
  --bar:56px;
  --rule-on-paper:rgba(11,11,11,.16);
  --rule-on-ink:rgba(242,241,237,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; }
html.lock{ overflow:hidden; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Space Mono is for instrument labels, numbers and metadata only —
   never for running body copy, where it costs too much legibility. */
.bar,.eyebrow,.stamp,.anno,.radar-note,.note,
.p-idx,.chip,.meta li,.tags li,.svc-n,.m-num,.capx em,
.ledger em,.why-row .n,.info em,.foot-row,
.overlay nav a em,.overlay-foot,.field label{
  font-family:'Space Mono',monospace;
}
@media (hover:hover) and (pointer:fine){ body{ cursor:none; } }

img,svg,canvas{ display:block; max-width:100%; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; }

/* ---------------------------------------------------------
   TYPE
--------------------------------------------------------- */
h1,h2,h3{ font-family:'Archivo',sans-serif; font-weight:900; line-height:1; letter-spacing:-.035em; }

.h-lg{ font-size:clamp(30px,4.4vw,62px); }
.h-xl{ font-size:clamp(38px,6vw,88px); }

.eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  opacity:.55; margin-bottom:22px;
}
.eyebrow.accent-t{ color:var(--accent); opacity:1; }
.lead{ font-size:15.5px; max-width:52ch; opacity:.75; margin-top:20px; }
p + p{ margin-top:1.1em; }

/* ---------------------------------------------------------
   BAR
--------------------------------------------------------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:var(--paper);
  border-bottom:1px solid var(--rule-on-paper);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.bar.on-ink{ background:var(--ink); color:var(--paper); border-bottom-color:var(--rule-on-ink); }
.bar .mark{ display:flex; align-items:center; }
.bar .mid{ opacity:.5; }
.bar .menu{
  border:1px solid currentColor; padding:6px 14px; cursor:none;
  letter-spacing:.14em; text-transform:uppercase; font-size:11px;
  transition:background .12s,color .12s;
}
.bar .menu:hover{ background:currentColor; }
.bar .menu:hover{ color:var(--paper); }
.bar.on-ink .menu:hover{ color:var(--ink); }
@media (max-width:820px){ .bar .mid{ display:none; } }

/* ---------------------------------------------------------
   OVERLAY MENU
--------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; z-index:190;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 40px 48px; gap:36px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.overlay.on{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.overlay nav{ display:flex; flex-direction:column; }
.overlay nav a{
  display:flex; align-items:baseline; gap:20px;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(30px,6.4vw,72px); letter-spacing:-.04em;
  padding:14px 0; border-bottom:1px solid var(--rule-on-ink);
  transition:padding-left .45s var(--ease),color .25s;
}
.overlay nav a:hover{ padding-left:24px; color:var(--accent); }
.overlay nav a em{ font-family:'Space Mono',monospace; font-style:normal; font-size:12px; letter-spacing:.2em; opacity:.5; }
.overlay-foot{ display:flex; gap:32px; flex-wrap:wrap; font-size:13px; opacity:.6; }

/* ---------------------------------------------------------
   PLATE / CELL SYSTEM
--------------------------------------------------------- */
.plate{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--rule-on-paper);
}
.plate.ink{ border-bottom-color:var(--rule-on-ink); }

.cell{
  position:relative;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  color:var(--fg);
  transition:background .1s linear,color .1s linear,border-color .1s linear;
}
.cell:last-child{ border-right-color:transparent; }

.paper{ --bg:var(--paper); --fg:var(--ink);   --rule:var(--rule-on-paper); }
.ink  { --bg:var(--ink);   --fg:var(--paper); --rule:var(--rule-on-ink); }
.accent{ --bg:var(--accent); --fg:var(--ink); --rule:rgba(11,11,11,.22); }

/* sections carry a scheme so their cells inherit sane rules */
.plate.ink   > .cell:not(.paper):not(.accent){ --bg:var(--ink);   --fg:var(--paper); --rule:var(--rule-on-ink); }
.plate.paper > .cell:not(.ink):not(.accent){   --bg:var(--paper); --fg:var(--ink);   --rule:var(--rule-on-paper); }

/* opt-in hover inversion */
.inv{ cursor:none; }
.inv.paper:hover { --bg:var(--ink);   --fg:var(--paper); --rule:var(--rule-on-ink); }
.inv.ink:hover   { --bg:var(--paper); --fg:var(--ink);   --rule:var(--rule-on-paper); }
.inv.accent:hover{ --bg:var(--ink);   --fg:var(--accent); }
.plate.ink > .inv:not(.paper):not(.accent):hover{ --bg:var(--paper); --fg:var(--ink); --rule:var(--rule-on-paper); }

.span2{ grid-column:span 2; } .span3{ grid-column:span 3; } .span5{ grid-column:span 5; }
.span2half{ grid-column:span 2; }
.services .span2half:nth-of-type(odd){ grid-column:span 3; }
.bl{ border-left:1px solid var(--rule); }

.pad-l{ padding:52px 40px; }
.pad-xl{ padding:72px 46px; }
@media (max-width:820px){ .pad-l,.pad-xl{ padding:38px 24px; } }

/* ---------------------------------------------------------
   REVEAL — block wipe
--------------------------------------------------------- */
/* clip-path alone does the hiding — no opacity, so element-level
   opacity rules (.eyebrow etc.) are never fought over */
[data-wipe]{ clip-path:inset(0 0 100% 0); will-change:clip-path; }
[data-wipe].in{
  clip-path:inset(0 0 0 0);
  transition:clip-path .85s var(--ease);
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero-plate{
  margin-top:var(--bar);
  height:calc(100svh - var(--bar));
  grid-template-rows:1.3fr 1.05fr .85fr;
}
.letter{ display:grid; place-items:center; }
.glyph{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(44px,8.6vw,150px); line-height:.8; letter-spacing:-.04em;
}
.letter:hover .glyph{ animation:flip .62s cubic-bezier(.65,0,.35,1); }
@keyframes flip{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg); } }

.c-blocks{ grid-column:span 4; overflow:hidden; }
.c-blocks canvas{ width:100%; height:100%; }
.stamp{
  position:absolute; left:16px; bottom:14px; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  opacity:.72; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.stamp em{ font-style:normal; }
/* no cursor on touch — don't promise an interaction that isn't there */
@media (hover:none),(pointer:coarse){ .stamp em{ display:none; } }
.c-dither{ overflow:hidden; }
.c-dither canvas{ width:100%; height:100%; }
.c-dither:hover canvas{ filter:invert(1); }

.c-tag{ grid-column:span 3; padding:26px 22px; display:flex; flex-direction:column; justify-content:center; }
.c-tag h1{ font-size:clamp(19px,2.5vw,36px); line-height:1.04; font-weight:800; max-width:22ch; }
.c-tag .eyebrow{ margin-bottom:14px; }

.c-cta{ grid-column:span 2; display:grid; place-items:center; }
.c-cta .go{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(19px,2.5vw,38px); letter-spacing:-.02em;
  display:flex; align-items:center; gap:16px;
}
.c-cta .go svg{ width:.7em; height:.7em; transition:transform .35s var(--ease); }
.c-cta:hover .go svg{ transform:translateX(9px); }

/* ---------------------------------------------------------
   CAPABILITIES BAND  (replaces the marquee)
--------------------------------------------------------- */
.cap-lead{ padding:38px 26px; display:flex; flex-direction:column; justify-content:space-between; }
.cap-lead h2{ font-size:clamp(22px,2.3vw,32px); }
.cap-lead .eyebrow{ margin-bottom:26px; }

.capx{ padding:38px 26px; display:flex; flex-direction:column; }
.capx em{
  font-family:'Space Mono',monospace; font-style:normal;
  font-size:10.5px; letter-spacing:.2em; color:var(--accent); margin-bottom:20px;
}
.inv:hover em{ color:inherit; }
.capx h3{ font-size:clamp(16px,1.55vw,21px); margin-bottom:12px; }
.capx p{ font-size:13.5px; opacity:.7; }

/* ---------------------------------------------------------
   CTA PLATE
--------------------------------------------------------- */
.cta-big{
  padding:70px 46px; display:flex; flex-direction:column; align-items:flex-start;
  cursor:none;
}
.cta-big .eyebrow{ margin-bottom:16px; opacity:.7; }
.cta-line{
  display:flex; align-items:center; gap:22px;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(38px,7vw,104px); line-height:.95; letter-spacing:-.045em;
}
.cta-line svg{ width:.62em; height:.62em; transition:transform .4s var(--ease); }
.cta-big:hover .cta-line svg{ transform:translateX(18px); }
.cta-sub{ margin-top:22px; font-size:15px; opacity:.72; max-width:46ch; }

/* ---------------------------------------------------------
   MANIFESTO
--------------------------------------------------------- */
.statement{
  font-size:clamp(34px,8.2vw,124px); line-height:.94; letter-spacing:-.045em;
}
.statement span{ display:block; }
.statement .hollow{
  color:transparent;
  -webkit-text-stroke:1.5px var(--paper);
  paint-order:stroke fill;
}

/* ---------------------------------------------------------
   ABOUT
--------------------------------------------------------- */
/* the About headline sits in a 2/5 column — cap it so it stays 3–4 lines */
.about .h-lg{ font-size:clamp(28px,3.1vw,42px); }
.about p{ font-size:15px; opacity:.78; max-width:52ch; }

.about .ledger{ margin-top:36px; border-top:1px solid var(--rule); }
.ledger li{
  display:flex; align-items:center; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease);
}
.ledger li:hover{ padding-left:12px; }
.ledger em{ font-style:normal; font-size:10.5px; letter-spacing:.16em; opacity:.5; }
.ledger span{ font-size:14.5px; }


/* ---------------------------------------------------------
   VISION
--------------------------------------------------------- */
.vision blockquote{
  margin-top:28px; padding-left:20px; border-left:2px solid var(--accent);
  font-size:15px; opacity:.7; max-width:46ch;
}
.c-blocks-sm{ overflow:hidden; min-height:220px; }
.c-blocks-sm canvas{ width:100%; height:100%; }
.mission{ padding:34px 24px 28px; display:flex; flex-direction:column; }
.mission .m-num{ font-size:11px; letter-spacing:.18em; color:var(--accent); margin-bottom:16px; }
.inv:hover .m-num{ color:inherit; }
.mission h3{ font-size:clamp(16px,1.6vw,21px); margin-bottom:10px; }
.mission p{ font-size:13px; opacity:.65; }
.mission-end{ padding:34px 24px 28px; display:flex; flex-direction:column; justify-content:space-between; }
.mission-end .m-num{ font-size:22px; margin-bottom:16px; }
.mission-end h3{ font-size:clamp(16px,1.6vw,21px); }

/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */
.svc{ padding:44px 36px 36px; }
.svc-n{ position:absolute; top:26px; right:30px; font-size:11px; letter-spacing:.18em; opacity:.4; }
.iso{ width:58px; height:64px; margin-bottom:26px; }
.iso .f-top{ fill:var(--fg); opacity:.95; }
.iso .f-left{ fill:var(--fg); opacity:.45; }
.iso .f-right{ fill:var(--fg); opacity:.7; }
.iso .node{ fill:var(--accent); }
.iso .wire{ stroke:var(--fg); stroke-width:1.4; opacity:.45; fill:none; }
.iso .leaf{ fill:var(--accent); }
.svc h3{ font-size:clamp(19px,2vw,27px); margin-bottom:14px; max-width:17ch; }
.svc p{ font-size:14px; opacity:.7; margin-bottom:22px; max-width:44ch; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{ font-size:11px; padding:5px 12px; border:1px solid var(--rule); opacity:.75; }

/* ---------------------------------------------------------
   WORK
--------------------------------------------------------- */
.proj .p-idx{ display:block; font-size:11px; letter-spacing:.2em; opacity:.45; margin-bottom:18px; }
.chip{
  display:inline-block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 13px; border:1px solid var(--rule); margin-bottom:20px;
}
.chip.hot{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.proj h3{ font-size:clamp(22px,2.6vw,38px); margin-bottom:16px; }
.proj h3 em{ display:block; font-style:normal; font-family:'Space Mono',monospace;
  font-size:13px; font-weight:400; letter-spacing:.04em; opacity:.55; margin-top:10px; }
.proj p{ font-size:14.5px; opacity:.72; max-width:46ch; }
.meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.meta li{ font-size:11px; padding:5px 12px; border:1px solid var(--rule); opacity:.7; }

.shot-cell{ padding:44px 40px; display:flex; align-items:center; }
.anno{
  position:absolute; top:18px; left:40px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.45;
}
.frame{ width:100%; border:1px solid var(--rule); background:#08121F; }
.frame-bar{
  display:flex; align-items:center; gap:7px; padding:9px 14px;
  background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.1);
}
.frame-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); }
.frame-bar i:first-child{ background:#FF5F57; }
.frame-bar i:nth-child(2){ background:#FEBC2E; }
.frame-bar i:nth-child(3){ background:#28C840; }
.frame-bar span{ margin-left:10px; font-size:10.5px; color:rgba(255,255,255,.45); }
.shot{ width:100%; height:auto; }

/* radar placeholder */
.radar{ position:relative; aspect-ratio:560/340; background:#0B0B0B; display:grid; place-items:center; overflow:hidden; }
.rings{ position:absolute; inset:0; display:grid; place-items:center; }
.rings i{ position:absolute; border:1px solid rgba(74,155,214,.2); border-radius:50%; }
.rings i:nth-child(1){ width:30%; aspect-ratio:1; }
.rings i:nth-child(2){ width:56%; aspect-ratio:1; }
.rings i:nth-child(3){ width:82%; aspect-ratio:1; }
.sweep{
  position:absolute; width:82%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,rgba(74,155,214,.38),transparent 62deg);
  -webkit-mask-image:radial-gradient(circle,#000 60%,transparent 100%);
  mask-image:radial-gradient(circle,#000 60%,transparent 100%);
  animation:sweep 3.8s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.blip{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.blip.b1{ top:32%; left:60%; animation:blip 3.8s ease-in-out infinite; }
.blip.b2{ top:60%; left:40%; animation:blip 3.8s 1.3s ease-in-out infinite; }
.blip.b3{ top:46%; left:72%; animation:blip 3.8s 2.5s ease-in-out infinite; }
@keyframes blip{ 0%,70%,100%{opacity:.12} 12%{opacity:1} }
.radar-note{
  position:absolute; bottom:14px; left:14px; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  opacity:.5; border:1px solid rgba(242,241,237,.25); padding:5px 11px;
}

/* ---------------------------------------------------------
   WHY
--------------------------------------------------------- */
.why-row{
  display:grid; grid-template-columns:80px 1.05fr 1.5fr 40px;
  align-items:center; gap:26px; padding:30px 40px;
  transition:padding-left .45s var(--ease),background .1s,color .1s;
}
.why-row:hover{ padding-left:60px; }
.why-row .n{ font-size:11px; letter-spacing:.18em; color:var(--accent); }
.inv:hover .n{ color:inherit; }
.why-row h3{ font-size:clamp(18px,2.1vw,28px); }
.why-row p{ font-size:14px; opacity:.65; }
.arw{ justify-self:end; width:10px; height:10px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); opacity:.4; transition:transform .4s var(--ease),opacity .3s; }
.why-row:hover .arw{ opacity:1; transform:rotate(45deg) translate(4px,-4px); }

/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */
.contact .info{ margin-top:44px; border-top:1px solid var(--rule); }
.info li{ display:grid; grid-template-columns:88px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--rule); }
.info em{ font-style:normal; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.5; padding-top:3px; }
.info a,.info span{ font-size:14.5px; }
.info a{ border-bottom:1px solid transparent; transition:border-color .25s; }
.info a:hover{ border-bottom-color:currentColor; }

.field{ position:relative; margin-bottom:26px; }
.field input,.field textarea{
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--rule);
  padding:20px 0 10px; font-family:inherit; font-size:15px;
  outline:none; resize:vertical; color:inherit;
}
.field label{
  position:absolute; left:0; top:18px; font-size:14px; opacity:.5;
  pointer-events:none; transition:all .3s var(--ease);
}
.field input:focus,.field textarea:focus{ border-bottom-color:var(--ink); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.8;
}
.send{
  display:flex; align-items:center; gap:12px; cursor:none;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(18px,2vw,26px); letter-spacing:-.02em;
  padding:14px 0; border-bottom:2px solid currentColor; width:100%;
  transition:gap .3s var(--ease);
}
.send:hover{ gap:22px; }
.send svg{ width:.72em; height:.72em; }
.note{ margin-top:16px; font-size:12.5px; min-height:18px; opacity:.75; }


/* ---------------------------------------------------------
   EASTER EGG — block stacker
--------------------------------------------------------- */
.game-intro{ display:flex; flex-direction:column; }
.game-intro h2{ font-size:clamp(26px,3vw,44px); margin-bottom:16px; }
.game-hint{ font-size:14px; opacity:.6; max-width:32ch; }

.score{ display:flex; gap:44px; margin-top:auto; padding-top:36px; }
.score .k{
  display:block; font-family:'Space Mono',monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.5;
}
.score b{
  display:block; margin-top:6px;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(26px,3vw,42px); letter-spacing:-.03em; line-height:1;
}
#g-score{ color:var(--accent); }

.g-reset{
  align-self:flex-start; margin-top:26px; cursor:none;
  font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--rule-on-ink); padding:9px 16px;
  transition:background .12s,color .12s,border-color .12s;
}
.g-reset:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.game-stage{ position:relative; overflow:hidden; min-height:420px; }
#stack{ width:100%; height:100%; display:block; cursor:none; outline:none; }
#stack:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.g-msg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px;
  text-align:center; pointer-events:none;   /* background clicks reach the canvas */
  /* scrim: the tower sits directly behind this text, so it has to recede */
  background:rgba(11,11,11,.8);
  transition:opacity .3s;
}
.g-msg.hide{ opacity:0; }
.g-msg b{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(20px,2.2vw,30px); letter-spacing:-.02em;
}
.g-msg span{
  font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; opacity:.68;
}

/* the reward: a well-built tower earns a route to the contact form */
.g-cta{
  display:none; align-items:center; gap:11px;
  pointer-events:auto; cursor:none;
  margin:14px 0 4px; padding-bottom:4px;
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(15px,1.6vw,21px); letter-spacing:-.02em;
  color:var(--accent); border-bottom:2px solid var(--accent);
  transition:gap .3s var(--ease);
}
.g-cta svg{ width:.8em; height:.8em; }
.g-cta:hover{ gap:20px; }
.g-msg.reward .g-cta{ display:inline-flex; }

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.footer{ background:var(--ink); color:var(--paper); overflow:hidden; padding-top:60px; }
.foot-word{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(96px,25vw,380px); line-height:.74; letter-spacing:-.055em;
  text-align:center; color:transparent;
  -webkit-text-stroke:1.5px rgba(242,241,237,.28);
  user-select:none; white-space:nowrap;
  margin-bottom:-.09em;
}
.foot-row{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--rule-on-ink);
  padding:22px 40px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55;
}

/* ---------------------------------------------------------
   CURSOR
--------------------------------------------------------- */
.cur{ position:fixed; top:0; left:0; z-index:900; pointer-events:none; will-change:transform; }
@media (hover:none),(pointer:coarse){ .cur{ display:none; } }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:1000px){
  .plate{ grid-template-columns:repeat(2,1fr); }
  .span2,.span3,.span5,.span2half,
  .services .span2half:nth-of-type(odd){ grid-column:span 2; }
  .c-blocks,.c-tag,.c-cta{ grid-column:span 2; }
  .bl{ border-left:none; }

  .hero-plate{ height:auto; grid-template-rows:none; }
  .letter{ height:16vh; min-height:110px; }
  .c-blocks{ height:34vh; min-height:240px; }
  .c-dither{ height:20vh; min-height:150px; }
  .c-cta{ min-height:130px; }
  .cta-big{ padding:52px 24px; }
  .proj.rev .shot-cell{ order:2; }
  .why-row{ grid-template-columns:56px 1fr; grid-template-areas:'n h' '. p'; row-gap:6px; padding:26px 24px; }
  .why-row .n{ grid-area:n; } .why-row h3{ grid-area:h; } .why-row p{ grid-area:p; }
  .arw{ display:none; }
  .why-row:hover{ padding-left:36px; }
  .shot-cell{ padding:34px 24px; }
  .anno{ left:24px; }
  .info li{ grid-template-columns:1fr; gap:3px; }
}

@media (max-width:620px){
  .plate{ grid-template-columns:1fr; }
  .span2,.span3,.span5,.span2half,.c-blocks,.c-tag,.c-cta,
  .services .span2half:nth-of-type(odd){ grid-column:span 1; }
  .hero-plate{ grid-template-columns:repeat(5,1fr); }
  .hero-plate .letter{ grid-column:span 1; height:13vh; min-height:78px; }
  .hero-plate .c-blocks,.hero-plate .c-dither,
  .hero-plate .c-tag,.hero-plate .c-cta{ grid-column:span 5; }
  .cell{ border-right-color:transparent; }
  .hero-plate .letter{ border-right-color:var(--rule); }
  .foot-row{ flex-direction:column; gap:8px; padding:20px 24px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-wipe]{ clip-path:none !important; opacity:1 !important; }
}