/* r8.0 award-gap round 1 (Moreno 19 Oct: "how an award-winning company would design a website"), home page only.
   Gaps closed at 0 cr, from AWARD-GAP.md: (1) type carries the page, (2) no more six identical centred section stacks,
   (3) the one people photo runs edge to edge, (4) the section drawing draws itself once as it arrives. */

/* 1 + 2 · section heads as an editorial split: a big heading on the left, the body and link on the right, bottom-aligned */
.sh{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(96*var(--u));justify-items:start;align-items:end;text-align:left;margin-bottom:calc(96*var(--u))}
.sh .eyebrow{grid-column:1/-1;margin-left:0}
.sh h2{grid-column:1;max-width:none;font-size:calc(66*var(--u));line-height:1.02;letter-spacing:-.018em}
.sh .body{grid-column:2;grid-row:2;max-width:calc(440*var(--u));margin-top:0;font-size:max(calc(18*var(--u)),15.5px)}
.sh .tl{grid-column:2;grid-row:3;justify-self:start}
.doorway .h-l{font-size:calc(66*var(--u));line-height:1.02;letter-spacing:-.018em}

/* r8.1 · editorial heads share one .rise; the closing doorway body follows its separate heading */
.doorway .body.rise{transition-delay:.12s}

/* r8.1 · the na image opens from the jamb once; site.js keeps .in after arrival */
/* r8.1 lane fix: Codex animated clip-path on the photos, which repaints every frame (scroll rAF p95 33 ms). Same wipe, compositor only:
   a plaster cover over the na panel scales away from the jamb line to the right. */
html.js .work-grid .card.rise .d-na::after{content:"";position:absolute;inset:0;z-index:1;background:#e4e0d9;transform-origin:100% 50%;transform:scaleX(1);transition:transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
html.js .work-grid .stack .card:first-child .d-na::after{transition-delay:.12s}
html.js .work-grid .stack .card:last-child .d-na::after{transition-delay:.24s}
html.js .work-grid .card.rise.in .d-na::after{transform:scaleX(0)}
@media (prefers-reduced-motion: reduce){
  html.js .work-grid .card.rise .d-na::after{transform:scaleX(0);transition:none}
  .doorway .body.rise{transition-delay:0s}
}

/* 3 · the family in the finished kitchen runs edge to edge (it was the only photo still inside a plaster frame) */
.people.bleed .frame{margin:0;padding:0;border:0;background:none}
.people.bleed .frame img{aspect-ratio:16/7.2}
.people.bleed figcaption{margin-top:calc(22*var(--u))}

/* 4 · the doorsnede draws itself: lines first (cut walls, then new work, then interior), then labels and hatching.
   Only once JS has measured it (.draw-ready); without JS or with reduced motion it is simply there. */
.u-draw.draw-ready .dr{stroke-dasharray:1;stroke-dashoffset:1}
.u-draw.draw-ready text,.u-draw.draw-ready .fl{opacity:0}
.u-section.in .u-draw.draw-ready .dr{animation:u-draw 1.5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i,0) * 45ms)}
.u-section.in .u-draw.draw-ready text,.u-section.in .u-draw.draw-ready .fl{transition:opacity .8s ease 1.3s;opacity:1}
@keyframes u-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.u-draw.draw-ready .dr{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}.u-draw.draw-ready text,.u-draw.draw-ready .fl{opacity:1;transition:none}}

/* R8 (pattern check 19 Oct) · a handwritten location note instead of the tracked eyebrow, pointing at the window; it fades in when
   the cloth has gone (before that it would point at a wall). Haarlem-Noord: the pictured room is the jaren-dertighuis there. */
.hero .loc-note{position:absolute;z-index:2;left:calc(380*var(--hu));top:calc(214*var(--hu));display:flex;align-items:flex-start;gap:calc(4*var(--hu));
  font:400 calc(30*var(--hu))/1 "Jost",sans-serif;color:#f4efe6;text-shadow:0 0 calc(12*var(--hu)) rgba(30,24,20,.6);transform:rotate(-3deg);transition:opacity 1.1s ease .2s;pointer-events:none}
.hero .loc-note svg{width:calc(200*var(--hu));height:calc(90*var(--hu));margin-top:calc(10*var(--hu));color:#e8d3ad;filter:drop-shadow(0 0 calc(6*var(--hu)) rgba(30,24,20,.5))}
.hero.pre .loc-note{opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){.hero .loc-note{transition:none}}

/* R23 (pattern check 19 Oct) · one asymmetric offset section: the pencilled plan bleeds off the right edge, the text card overlaps
   its lower-left corner (the image + text + small link split was on 4 sites) */
.plan-sec{overflow:hidden}
.plan-split{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0;align-items:end;margin-right:calc(-1*var(--side))}
.plan-split .scan-frame{grid-column:2;grid-row:1;transform:none}
.plan-split .scan-frame figcaption{padding-right:var(--side)}
.plan-split .plan-txt{grid-column:1/3;grid-row:1;align-self:end;position:relative;z-index:1;max-width:calc(556*var(--u));margin-bottom:calc(-48*var(--u));
  padding:calc(44*var(--u)) calc(46*var(--u));background:var(--plaster);box-shadow:0 1px 0 rgba(35,31,27,.08)}

/* Image dimensions reserve space; retain the authored aspect ratios. */
.idea-na img,.people img,.u-team .frame img,.doorway .door img{height:auto}

/* r8.2 · home device pass. Desktop geometry is unchanged. */
@media (max-width:1000px){
  :root{--gut:24px;--maxw:100%}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .section{padding-top:80px;padding-bottom:80px}
  .sh{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:48px}
  .sh h2{font-size:clamp(38px,6vw,52px);max-width:100%}
  .sh .body{grid-column:1;grid-row:auto;max-width:560px;margin-top:24px}
  .sh .tl{grid-column:1;grid-row:auto}
  .work-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .work-grid .stack{gap:48px}
  .grow{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .grow li{grid-template-columns:minmax(0,1fr);min-width:0}
  .grow::before{content:none}
  .grow li:last-child{grid-column:1/-1;max-width:360px}
  .u-section{padding-left:0;padding-right:0}
  .idea-pair.with-margin{grid-template-columns:minmax(0,1fr);gap:32px}
  .idea-pair .sketch{width:100%;max-width:300px;margin-top:0}
  .u-team{grid-template-columns:minmax(0,1fr)}
  .u-cart{border-left:1px solid #231f1b;margin-top:24px}
  .u-cart td .r{display:block;margin:8px 0 0;line-height:1.4}
  .plan-split{grid-template-columns:minmax(0,1fr);gap:24px;margin-right:0}
  .plan-split .scan-frame{grid-column:1;grid-row:1}
  .plan-split .plan-txt{grid-column:1;grid-row:2;max-width:none;margin-bottom:0;padding:28px}
  .plan-split .scan-frame figcaption{padding-right:0}
  .people figcaption{flex-wrap:wrap;gap:12px}
  .doorway{grid-template-columns:minmax(0,1fr);padding-top:80px;padding-bottom:80px}
  .doorway .door{grid-column:1;grid-row:auto;width:min(100%,360px);margin:0 0 32px}
  .doorway h2,.doorway .body,.doorway .dw-act{grid-column:1;grid-row:auto}
  .doorway .h-l{font-size:clamp(38px,6vw,52px)}
  .dw-act{flex-wrap:wrap;gap:20px}
}
@media (max-width:600px), (max-width:1000px) and (max-height:500px){
  .hero{height:100svh;min-height:600px;--h:max(100svh,600px)}
  .hero header,.home-bar,.home-bar.on{padding:16px 24px;flex-wrap:wrap;gap:4px 24px}
  .hero .mark.logo,.home-bar .mark.logo{display:flex;align-items:center;height:44px;min-width:44px}
  .hero .mark.logo svg,.home-bar .mark.logo svg{height:20px;margin:0}
  :root .hero header nav,:root .home-bar nav{flex-wrap:wrap;min-width:0}
  :root .hero header nav a,:root .home-bar nav a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 9px;font-size:12px}
  .hero .copy{left:24px;width:calc(100% - 48px);bottom:40px}
  .hero h1{font-size:30px;line-height:1.08;white-space:normal;max-width:100%}
  .hero .lede{font-size:15px;line-height:1.5;max-width:300px;margin-top:18px}
  .hero .ctas{flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px}
  .hero .btn,.hero .u-tl{height:44px;min-width:44px;font-size:14px}
  .hero .u-tl{margin-left:0}
  .hero .loc-note{left:24px;top:140px;font-size:26px;white-space:nowrap}
  .hero .loc-note svg{width:100px;height:48px;margin-top:8px}
  .plan-txt .links{flex-wrap:wrap;gap:12px 24px}
  .foot-line nav{flex-wrap:wrap;gap:0 18px}
  .foot-line a,.tl{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  .foot-line .mark.logo{display:flex;align-items:center}
  .btn{min-height:44px}
  .card .meta{min-height:44px}
  .u-cart th,.u-cart td{padding:14px 12px}
  .nw{white-space:normal}
}
/* Short phone landscapes keep the complete copy and both actions above the fold. */
@media (max-width:1000px) and (max-height:500px){
  .hero{min-height:100svh;--h:100svh}
  .hero header,.home-bar,.home-bar.on{padding:12px 24px;flex-wrap:nowrap}
  .hero .copy{bottom:20px;width:460px;max-width:calc(100% - 48px)}
  .hero .photo img,.hero .photo video{width:150%;max-width:none;object-position:0% 15%}
  .hero h1{font-size:30px}
  .hero .lede{font-size:13px;line-height:1.4;max-width:400px;margin-top:10px}
  .hero .ctas{flex-direction:row;align-items:center;gap:20px;margin-top:16px}
  .hero .loc-note{left:calc(100% - 260px);top:84px;font-size:23px}
}