/* EISKAL — owner review edits (12 Oct 2026, review videos; "Website - Edits/EISKAL_edit_notes.md").
   Loaded last. Uses the type tokens from eiskal-type.css (sizes, families) and keeps its text reveals.
   Motion is driven by js/eiskal-edits.js (classes .is-in and the --p progress variable); all of it is off under reduced motion. */

/* Small supporting copy (section leads, process text, About second paragraph): one step under paragraph size. */
:root{--t-note:clamp(11px,.83vw,13px)}

/* ---------- Hero: film only, new title, centred vertical scroll line ---------- */
/* Third review: brand line / "Designed to stand apart." / disciplines / Explore our work */
html body .hero-kicker{margin:0 0 clamp(16px,2vw,26px);font-family:var(--ff-helv);font-size:var(--t-small);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(242,237,230,.86)}
html body .hero.hero-scroll h1.hero-title{margin-bottom:clamp(14px,1.6vw,24px)}
html body .hero-sub{margin:0 0 clamp(26px,3.2vw,40px);font-family:var(--ff-helv);font-size:var(--t-medium);letter-spacing:.04em;text-transform:uppercase;color:rgba(242,237,230,.72)}
/* Fourth review: the title mixes the two faces: bold grotesk line + italic serif line, same size. */
html body .hero.hero-scroll h1.hero-title .hero-title-bold{font-weight:700;letter-spacing:-.02em}
html body .hero.hero-scroll h1.hero-title .hero-title-bold .has--font-carl{font-family:inherit;font-weight:inherit}   /* no thin accent "o" inside the bold line */
html body .hero.hero-scroll h1.hero-title .hero-title-serif{font-size:1.06em;line-height:.95;margin-top:.04em;letter-spacing:-.01em;color:rgba(242,237,230,.9)}
html body .hero-scroll-cue{position:absolute;left:50%;bottom:clamp(22px,4.5vh,44px);transform:translateX(-50%);display:block;z-index:2;margin:0}
html body .hero-scroll-cue .hero-progress-track{display:block;width:1px;height:clamp(48px,7vh,72px);background:rgba(242,237,230,.22);overflow:hidden}
html body .hero-scroll-cue .hero-progress-track i{display:block;width:100%;height:100%;background:#F2EDE6;transform-origin:50% 0;animation:ek-cue 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ek-cue{0%{transform:scaleY(0);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}50.01%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* ---------- About (merged with "Our point of view"), above "How we work" ---------- */
html body #about.about-v2{overflow:hidden;padding-top:clamp(56px,7vw,110px)}
html body .work{padding-bottom:clamp(56px,7vw,110px)}
html body .about-v2-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,110px);align-items:center}
html body .about-v2-copy{transform:translate3d(calc((1 - var(--p,1)) * -48px),0,0);opacity:calc(.25 + var(--p,1) * .75)}
html body .about-v2-copy .section-title{text-align:left;margin:clamp(16px,1.6vw,24px) 0 clamp(28px,3vw,44px);max-width:none}
html body #about .about-copy{padding-right:0;max-width:640px;margin:0}
html body #about .about-copy p{margin:0 0 18px}
/* Fourth review: the lead takes the title's voice (thin grotesk + italic serif accents); the second paragraph is quieter. */
html body #about .about-copy p.about-lead{margin:0 0 clamp(20px,2vw,30px);font-family:var(--ff-helv);font-size:clamp(20px,1.8vw,28px);font-weight:300;line-height:1.12;letter-spacing:normal;text-transform:uppercase;color:var(--ink)}
html body #about .about-copy p.about-lead em{font-family:var(--ff-carl),var(--serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.08em;color:var(--muted)}
html.has-carl body #about .about-copy p.about-lead em{font-style:normal}
html body #about .about-copy p.secondary{color:var(--muted);font-size:var(--t-note);line-height:1.4}
/* Third review: no eyebrow; copy first, the title closes the block in place of the former quote. */
html body .about-v2-copy .section-title.about-statement{margin:clamp(32px,3.4vw,52px) 0 0;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
html body .about-stats{display:flex;gap:clamp(36px,4vw,72px);margin:clamp(28px,3vw,44px) 0 0;padding:0}
html body .about-stats div{margin:0}
html body .about-stats dt{font-family:var(--ff-helv);font-size:var(--t-small);text-transform:uppercase;color:var(--muted);margin:0 0 8px}
html body .about-stats dd{margin:0;font-family:var(--ff-helv);font-size:var(--h-small);font-weight:300;line-height:1}
/* Portrait: a clean frame (no faded mask) that starts enlarged and settles into the column as the section scrolls in. */
html body #about .founder.about-v2-media{position:relative;right:auto;top:auto;bottom:auto;width:100%;max-width:560px;justify-self:end;margin:0;pointer-events:none}
html body .about-v2-frame{overflow:hidden;aspect-ratio:4/5;background:#2A2620;transform:scale(calc(1 + (1 - var(--p,1)) * .32));transform-origin:70% 50%;will-change:transform}
html body #about .about-v2-frame img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;-webkit-mask-image:none;mask-image:none;
  filter:grayscale(1) brightness(.82) contrast(1.06);transform:scale(calc(1.12 - var(--p,1) * .12))}
html body #about .about-v2-media figcaption{right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);opacity:var(--p,1);text-shadow:0 1px 14px rgba(14,12,10,.9)}
html body #about .about-v2-media .founder-role{color:rgba(242,237,230,.78)}
@media (max-width:900px){
  html body .about-v2-grid{grid-template-columns:1fr}
  html body #about .founder.about-v2-media{justify-self:stretch;max-width:none}
  html body .about-v2-frame{aspect-ratio:1/1}
}

/* ---------- Projects: edge-to-edge portrait tiles, details on hover (old-site style) ---------- */
/* Fourth review: no eyebrow, smaller lead, "All projects" button at the right of the heading. */
html body .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
html body .work-head .section-title{text-align:left;margin:0 0 clamp(16px,1.8vw,24px)}
html body .work-head > .btn{flex-shrink:0;display:inline-flex}
html body .work-lead{margin:0;max-width:520px;font-family:var(--ff-helv);font-size:var(--t-note);line-height:1.4;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){html body .work-head{flex-direction:column;align-items:flex-start}}
html body .work .project-grid,html body .all-projects .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;row-gap:2px;column-gap:2px}
html body .project-grid .project-card{position:relative;display:block;overflow:hidden;background:#2A2620}
html body .project-grid .project-card .project-image{aspect-ratio:4/5;height:auto;margin:0;background:#2A2620}
html body .project-grid .project-card .project-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.84) saturate(.9);
  transform:scale(var(--z,1));transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s ease}
html body .project-grid .project-card:hover .project-image img,html body .project-grid .project-card:focus-visible .project-image img{--z:1.045;filter:brightness(1) saturate(1)}
html body .project-grid .project-card .project-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,.9) 0,rgba(14,12,10,.35) 32%,rgba(14,12,10,0) 58%);opacity:0;transition:opacity .45s ease}
html body .project-grid .project-card:hover .project-image:after,html body .project-grid .project-card:focus-visible .project-image:after{opacity:1}
html body .project-info{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.6vw,26px);display:flex;flex-direction:column;gap:6px;text-align:left;color:#F2EDE6;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
html body .project-grid .project-card:hover .project-info,html body .project-grid .project-card:focus-visible .project-info{opacity:1;transform:none}
html body .project-info h3{margin:0;color:#F2EDE6}
html body .project-cat,html body .project-facts{font-family:var(--ff-helv);font-size:var(--t-small);line-height:var(--lh-small);text-transform:uppercase;color:rgba(242,237,230,.72)}
@media (hover:none){   /* touch: no hover, so the details are always shown */
  html body .project-grid .project-card .project-image:after{opacity:1}
  html body .project-info{opacity:1;transform:none}
  html body .project-grid .project-card .project-image img{filter:none}
}
@media (max-width:1100px){html body .work .project-grid,html body .all-projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){html body .work .project-grid,html body .all-projects .project-grid{grid-template-columns:1fr}}
/* Home: a 3D ring of project cards (naya-studio-dubai.webflow.io portfolio), driven by js/project-ring.js.
   The ring element is a flat 3D context; each .ring-item gets its rotateY/translateZ (and fade) from the script. */
html body .work .project-grid.is-ring{display:block;margin:clamp(36px,5vw,80px) calc(var(--pad) * -1) 0;--ring-w:clamp(240px,26vw,440px)}
html body .project-grid.is-ring .ring-stage{position:relative;height:calc(var(--ring-w) * 1.25 * 1.45 + 90px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  perspective-origin:50% 50%}
html body .project-grid.is-ring.is-dragging .ring-stage{cursor:grabbing}
html body .project-grid.is-ring .ring{position:absolute;inset:0;transform-style:preserve-3d}
html body .project-grid.is-ring .ring-item{position:absolute;left:50%;top:50%;width:var(--ring-w);margin:calc(var(--ring-w) * -.68) 0 0 calc(var(--ring-w) * -.5);
  transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
html body .project-grid.is-ring .project-card{display:block;width:100%;padding:0;background:none;overflow:visible;text-align:left;color:#F2EDE6}
html body .project-grid.is-ring .project-card .project-image{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#2A2620}
html body .project-grid.is-ring .project-card .project-image:after{display:none}
html body .project-grid.is-ring .project-card .project-image img{pointer-events:none;-webkit-user-drag:none;filter:brightness(.82) saturate(.92)}
html body .project-grid.is-ring .ring-item.is-front .project-image img,html body .project-grid.is-ring .project-card:hover .project-image img,
html body .project-grid.is-ring .project-card:focus-visible .project-image img{filter:none}
html body .project-grid.is-ring .project-card:hover .project-image img{--z:1.04}
html body .project-grid.is-ring .project-card:focus-visible{outline:none}
html body .project-grid.is-ring .project-card:focus-visible .project-image{outline:1px solid #C9A97A;outline-offset:4px}
/* label under the image: name left, year right (reference) */
html body .project-grid.is-ring .project-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 2px 0}
html body .project-grid.is-ring .project-label h3{margin:0;font-family:var(--ff-helv);font-size:var(--t-medium);font-weight:400;line-height:1.15;text-transform:uppercase;color:#F2EDE6}
html body .project-grid.is-ring .project-label span{font-family:var(--ff-helv);font-size:var(--t-small);text-transform:uppercase;color:rgba(242,237,230,.6);flex-shrink:0}
/* controls */
html body .project-grid.is-ring .ring-controls{display:flex;justify-content:center;align-items:center;gap:clamp(18px,2vw,28px);margin-top:clamp(8px,1.4vw,20px)}
html body .project-grid.is-ring .ring-arrow{width:46px;height:46px;border:1px solid rgba(242,237,230,.32);border-radius:50%;background:none;color:#F2EDE6;font-size:16px;line-height:1;cursor:pointer;
  transition:border-color .3s ease,background-color .3s ease,color .3s ease}
html body .project-grid.is-ring .ring-arrow:hover,html body .project-grid.is-ring .ring-arrow:focus-visible{border-color:#F2EDE6;background:#F2EDE6;color:#1C1915;outline:none}
html body .project-grid.is-ring .ring-hint{font-family:var(--ff-helv);font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,230,.55)}
/* the generic tile reveal moves the button; the ring places the wrapper, so only fade the button in */
html.ek-motion .project-grid.is-ring .project-card{transform:none}
@media (max-width:760px){
  html body .work .project-grid.is-ring{--ring-w:min(62vw,300px)}
}
html body .work-more{display:flex;justify-content:center;margin-top:clamp(40px,5vw,72px)}
html body .work-more .btn{display:inline-flex}

/* All-projects page (#projects) */
html body .all-projects{display:none;position:fixed;inset:0;z-index:140;background:#1C1915;color:#F2EDE6;overflow-y:auto;padding:0 var(--pad) 80px;--ink:#F2EDE6;--paper:#1C1915}
html body .all-projects.open{display:block}
html body .all-projects:focus{outline:none}
html body .all-projects-head{padding:clamp(48px,6vw,96px) 0 clamp(28px,3vw,40px)}
html body .all-projects-head .section-title{text-align:left;margin:clamp(16px,1.6vw,24px) 0 clamp(28px,3vw,40px)}
html body .all-projects .portfolio-controls{margin:0}

/* ---------- Project pages ---------- */
/* Hero: the grid cover, full width (landscape frame), title on the image. */
html body .project-detail .detail-cover{position:relative;margin:0 calc(var(--pad) * -1);height:clamp(420px,56.25vw,calc(100svh - 68px));overflow:hidden;background:#2A2620}
html body .project-detail .detail-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(calc(1.08 - var(--p,1) * .08));transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
html body .project-detail .detail-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.78) 0,rgba(14,12,10,.2) 38%,rgba(14,12,10,0) 60%),linear-gradient(180deg,rgba(14,12,10,.35) 0,rgba(14,12,10,0) 22%)}
html body .project-detail .detail-cover-copy{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(28px,4vw,60px);color:#F2EDE6}
html body .project-detail .detail-cover-copy .eyebrow{color:rgba(242,237,230,.8);font-family:var(--ff-helv);font-size:var(--t-small);text-transform:uppercase}
html body .project-detail .detail-cover-copy h1{margin:clamp(12px,1.2vw,18px) 0 clamp(10px,1vw,14px);font-family:var(--ff-helv);font-size:var(--h-medium);font-weight:300;line-height:.9;text-transform:uppercase;letter-spacing:normal;color:#F2EDE6;overflow-wrap:anywhere}
html body .project-detail .detail-cover-copy .detail-loc{margin:0;font-family:var(--ff-helv);font-size:var(--t-small);text-transform:uppercase;color:rgba(242,237,230,.8)}
/* Overview + key facts under the hero (no space index chips). */
html body .project-detail .detail-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,80px);align-items:start}
html body .project-detail .detail-intro .detail-overview{display:block;margin:0;padding:0;border:0;grid-template-columns:none}
html body .project-detail .detail-top,html body .all-projects .detail-top{margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
html body .project-detail .detail-overview h2{margin:0 0 16px;font-family:var(--ff-helv);font-size:var(--t-small);font-weight:400;text-transform:uppercase;color:var(--muted)}
html body .project-detail .detail-overview p{margin:0;max-width:640px;font-family:var(--ff-helv);font-size:var(--t-medium);line-height:1.45;text-transform:uppercase;color:var(--ink)}
html body .project-detail .detail-overview p + p{margin-top:14px}
html body .project-detail .detail-overview .detail-concept{color:var(--muted);font-style:normal}
html body .project-detail .detail-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:0;padding:0}
html body .project-detail .detail-spec{border-top:1px solid var(--line);padding-top:12px;margin:0}
html body .project-detail .detail-spec dt{margin:0 0 8px;font-family:var(--ff-helv);font-size:var(--t-small);text-transform:uppercase;color:var(--muted)}
html body .project-detail .detail-spec dd{margin:0;font-family:var(--ff-helv);font-size:var(--t-medium);font-weight:400;line-height:1.35;text-transform:uppercase}
/* Gallery: full-bleed rows, two images side by side (three in a closing odd row), no gaps, no captions. */
html body .project-detail .detail-gallery{display:flex;flex-direction:column;gap:2px;margin:0 calc(var(--pad) * -1) clamp(56px,7vw,100px)}
html body .project-detail .dg-row{display:flex;gap:2px}
html body .project-detail .dg-row .dg-item{margin:0;min-width:0;overflow:hidden;background:#2A2620}
html body .project-detail .dg-row .dg-item img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
html body .project-detail .dg-row.is-1{justify-content:center}
html body .project-detail .dg-row.is-1 .dg-item{flex:none!important;width:min(100%,calc(var(--r,1.5) * (100svh - 68px)))}
@media (max-width:760px){
  html body .project-detail .detail-cover{height:min(78svh,120vw)}
  html body .project-detail .detail-intro{grid-template-columns:1fr}
  html body .project-detail .dg-row{flex-direction:column}
  html body .project-detail .dg-row .dg-item{flex:none!important;width:100%}
}

/* ---------- Services (fourth review): scroll-pinned flip cards (kael-donovan.vercel.app "Capabilities"), js/services-cards.js ---------- */
/* Fifth review: dark section (site ink), larger cards, smaller lead, no number on the card fronts. */
html body section.services.svc-v3{padding-bottom:0;background:#1C1915;color:#F2EDE6;--ink:#F2EDE6;--paper:#1C1915;--muted:#A39C93;--line:rgba(242,237,230,.16)}
html body section.services.svc-v3 .section-title{color:#F2EDE6}   /* the base sheet still colours .services for the old light version */
html body section.services.svc-v3 .section-title em{color:rgba(242,237,230,.56)}
html body .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--line)}
html body .svc-head .section-title{text-align:left;margin:0}
html body .svc-v3 .svc-lead{margin:clamp(16px,1.8vw,24px) 0 0;max-width:460px;font-family:var(--ff-helv);font-size:var(--t-small);line-height:1.45;text-transform:uppercase;color:var(--muted)}
html body .svc-head > .btn{flex-shrink:0;display:inline-flex}
/* pinned track: 1 screen of stage + 3 screens of scroll (reference: pin for 3 × viewport height) */
html body .svc-pin{position:relative;height:460vh;margin:0 calc(var(--pad) * -1)}
html body .svc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html body .svc-cards{list-style:none;margin:0;padding:0;position:absolute;inset:0}
html body .svc-card{position:absolute;top:52%;left:50%;width:clamp(200px,17.5vw,330px);aspect-ratio:300/480;max-height:76vh;transform:translate(-50%,-50%);perspective:1000px;--flip:0deg}
html body .svc-card:nth-child(1){z-index:5}html body .svc-card:nth-child(2){z-index:4}html body .svc-card:nth-child(3){z-index:3}html body .svc-card:nth-child(4){z-index:2}html body .svc-card:nth-child(5){z-index:1}
html body .svc-card-float{position:absolute;inset:0;animation:ek-svc-float 3s ease-in-out infinite}
html body .svc-card:nth-child(2) .svc-card-float{animation-delay:.2s}html body .svc-card:nth-child(3) .svc-card-float{animation-delay:.4s}
html body .svc-card:nth-child(4) .svc-card-float{animation-delay:.6s}html body .svc-card:nth-child(5) .svc-card-float{animation-delay:.8s}
@keyframes ek-svc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
html body .svc-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--flip))}
html body .svc-card-front,html body .svc-card-back{position:absolute;inset:0;border-radius:var(--svc-r,12px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
html body .svc-card-front{background:#2A2620;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
html body .svc-card-front img{width:100%;height:100%;object-fit:cover;display:block}
html body .svc-card-front:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,.35),rgba(14,12,10,0) 35%)}
/* while the stack fills the stage (start of the pin) the cards hold still */
html body .svc-v3.is-full .svc-card-float{animation:none}
html body .svc-v3.is-full .svc-card-front{box-shadow:none}
/* Sixth review: white card, black text, no number; title = bold grotesk + italic serif (site heading style) */
html body .svc-card-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(22px,2vw,32px);background:#F2EDE6;color:#1C1915;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
html body .svc-card-back h3{margin:0;font-family:var(--ff-helv);font-size:clamp(18px,1.6vw,26px);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:#1C1915}
html body .svc-card-back h3 b{display:block;font-weight:700}
html body .svc-card-back h3 em{display:block;margin-top:.08em;font-family:var(--ff-carl),var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:0;text-transform:none;color:#756F68}
html.has-carl body .svc-card-back h3 em{font-style:normal}
html body .svc-card-back ul{list-style:none;margin:auto 0 0;padding:clamp(14px,1.4vw,22px) 0 0}
html body .svc-card-back li{padding:clamp(9px,.9vw,13px) 0;border-bottom:1px dashed rgba(28,25,21,.22);font-family:var(--ff-helv);font-size:var(--t-note);line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:#1C1915}
html body .svc-card-back li:last-child{border-bottom:0}
/* static layout: tablets / phones and reduced motion: a grid, image above the details */
html body .svc-v3.is-static .svc-pin{height:auto;margin:clamp(32px,5vw,56px) 0 0}
html body .svc-v3.is-static .svc-stage{position:static;height:auto;overflow:visible}
html body .svc-v3.is-static .svc-cards{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
html body .svc-v3.is-static .svc-card{position:static;width:auto;aspect-ratio:auto;max-height:none;transform:none;perspective:none}
html body .svc-v3.is-static .svc-card-float{position:static;animation:none}
html body .svc-v3.is-static .svc-card-inner{transform:none;height:auto;display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
html body .svc-v3.is-static .svc-card-front,html body .svc-v3.is-static .svc-card-back{position:relative;inset:auto;transform:none;border-radius:0;box-shadow:none}
html body .svc-v3.is-static .svc-card-front{aspect-ratio:16/10}
html body .svc-v3.is-static .svc-card-back{flex:1;gap:8px}
@media (max-width:760px){
  html body .svc-head{flex-direction:column;align-items:flex-start}
  html body .svc-v3.is-static .svc-cards{grid-template-columns:1fr}
}

/* ---------- How we work (third review): no eyebrow; the intro text runs the full width of its column ---------- */
html body .process-intro .section-title{margin-top:0}
html body .process-intro p{max-width:min(100%,780px)}
/* Fourth review: intro and step descriptions one size smaller */
html body .process .process-intro p,html body .process .step p{font-size:var(--t-note);line-height:1.4}

/* ---------- The site footer repeated at the end of the project pages and the all-projects page (js/portfolio.js) ---------- */
html body .overlay-footer{margin:clamp(56px,7vw,100px) calc(var(--pad) * -1) 0;--ink:#F2EDE6;--paper:#1C1915;--line:rgba(242,237,230,.16);--muted:#A39C93;background:#1C1915;color:#F2EDE6}
html body .all-projects{padding-bottom:0}

/* ---------- Contact (second review): brief button beside the title; closing row = wordmark left, invitation right ---------- */
/* Third review: no eyebrow, the brief button sits on the title's last line, full-width wordmark (no tagline). */
html body .contact-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(48px,6vw,80px)}
html body .contact-head .contact-title{margin-bottom:0}
html body .contact-head .btn{flex-shrink:0;margin:0 0 .4em}
html body .contact-cta{display:block;padding:clamp(32px,3.4vw,56px) 0;border-bottom:1px solid var(--line)}
html body .contact-logo{display:block;width:100%;line-height:0}
html body .contact-logo img{display:block;width:100%;height:auto;opacity:.92}
html body .contact{padding-bottom:clamp(40px,4vw,64px)}
html body .footer{border-top:0}
@media (max-width:760px){
  html body .contact-head{flex-direction:column;align-items:flex-start}
  html body .contact-head .btn{display:inline-flex;margin:0}
}

/* ---------- Cursor (old-site dot + trailing ring) in the site palette: ivory, inverted over light sections ---------- */
.ek-cursor,.ek-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transition:opacity .3s ease;mix-blend-mode:difference}
.ek-cursor{width:8px;height:8px;margin:-4px 0 0 -4px;background:#F2EDE6}
.ek-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(242,237,230,.85);display:grid;place-items:center;
  transition:opacity .3s ease,width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease}
.ek-ring span{font-family:var(--ff-helv);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#1C1915;opacity:0;transition:opacity .2s ease}
html.ek-cursor-on .ek-cursor,html.ek-cursor-on .ek-ring{opacity:1}
html.ek-cursor-on .ek-ring.is-link{width:58px;height:58px;margin:-29px 0 0 -29px}
html.ek-cursor-on .ek-ring.is-view{width:84px;height:84px;margin:-42px 0 0 -42px;background:#F2EDE6;border-color:transparent;mix-blend-mode:normal}
html.ek-cursor-on .ek-ring.is-view span{opacity:1}@media (hover:hover) and (pointer:fine){
  html.ek-cursor-on,html.ek-cursor-on body,html.ek-cursor-on a,html.ek-cursor-on button,html.ek-cursor-on .project-card{cursor:none}
}

/* ---------- Lenis smooth scroll (js/smooth-scroll.js) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}   /* the base sheet's scroll-behavior:smooth would fight Lenis on every frame */
html.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
html.lenis.lenis-stopped{overflow:hidden}

/* ---------- Scroll reveals ---------- */
html.ek-motion .project-grid .project-card{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.ek-motion .project-grid .project-card .project-image img{--z:1.12}
html.ek-motion .project-grid .project-card.is-in{opacity:1;transform:none}
html.ek-motion .project-grid .project-card.is-in .project-image img{--z:1}
html.ek-motion .project-grid .project-card.is-in:hover .project-image img{--z:1.045}
html.ek-motion .project-detail .dg-item img{opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
html.ek-motion .project-detail .dg-item.is-in img{opacity:1;transform:none}
html.ek-motion .contact-head .btn,html.ek-motion .contact-logo{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.ek-motion .contact-head.is-in .btn,html.ek-motion .contact-cta.is-in .contact-logo{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html body .hero-scroll-cue .hero-progress-track i{animation:none;transform:none}
  html body .about-v2-copy,html body .about-v2-frame,html body #about .about-v2-frame img,html body .project-detail .detail-cover img{transform:none!important;opacity:1!important}
}

/* =====================================================================================================================
   TYPE SYSTEM (publish pass): one size per role, everywhere. Tokens live in eiskal-type.css (:root); this block maps
   every text role on the site to them and is loaded last, so it wins over the older per-section values above.
     --h1        hero title                                   72px @1440 · 34px @390
     --h-medium  section titles, contact title, dialog title  56px        · 28px
     --h-small   figures (About stats)                        28px        · 21px
     --t-large   card / step titles, founder name             20px        · 16px
     --t-medium  body copy, contact details, captions         15px        · 14px
     --t-note    section intros, supporting copy, lists       12px        · 11px
     --t-small   labels, buttons, navigation, metadata        11px        · 11px
   Faces: thin grotesk (100) for titles, bold grotesk (700) + italic serif for the mixed headings, 400 for text.
   ===================================================================================================================== */
@media (max-width:760px){
  :root{--h1:clamp(30px,8.8vw,44px);--h-medium:clamp(26px,7.2vw,36px);--h-small:clamp(19px,5.4vw,24px);--t-large:clamp(15px,4.1vw,18px);--t-medium:clamp(13px,3.6vw,15px)}
}
html body .hero.hero-scroll h1.hero-title{font-size:var(--h1)}
html body .section-title,html body .contact-title,html body .modal h2,html body .about-v2-copy .section-title.about-statement{font-size:var(--h-medium)}
html body .about-stats dd{font-size:var(--h-small)}
html body .process .step h3,html body .svc-card-back h3,html body #about .founder .founder-name{font-size:var(--t-large);line-height:1.1}
html body .hero-sub,html body .contact-item address,html body .contact-item a,html body .modal .sub,html body .project-grid.is-ring .project-label h3{font-size:var(--t-medium)}
html body .work-lead,html body .svc-v3 .svc-lead,html body .process .process-intro p,html body .process .step p,html body #about .about-copy p.secondary,html body .svc-card-back li{font-size:var(--t-note);line-height:1.45}
html body .svc-card-back li{line-height:1.15}
html body .hero-kicker{letter-spacing:.24em}
@media (max-width:760px){
  html body #about .about-copy p.about-lead{font-size:var(--t-large);line-height:1.18}   /* owner review: smaller lead on phones */
}

/* ---------- Phones: About = copy, then the portrait, then the title and figures (owner review) ---------- */
@media (max-width:900px){
  html body .about-v2-grid{gap:0}
  html body .about-v2-copy{display:contents}
  html body .about-v2-copy .about-copy{order:1}
  html body #about .founder.about-v2-media{order:2;margin:clamp(20px,5vw,32px) 0 0}
  html body .about-v2-copy .section-title.about-statement{order:3}
  html body .about-stats{order:4}
}

/* ---------- Phones / tablets: services as image cards with the text set directly on the photo ---------- */
html body .svc-v3.is-static .svc-card-inner{position:relative;display:block;height:auto;aspect-ratio:4/5;border-radius:12px;overflow:hidden}
html body .svc-v3.is-static .svc-card-front{position:absolute;inset:0;aspect-ratio:auto}
html body .svc-v3.is-static .svc-card-front:after{background:linear-gradient(to top,rgba(14,12,10,.9) 0,rgba(14,12,10,.6) 42%,rgba(14,12,10,.12) 72%,rgba(14,12,10,0) 100%)}
html body .svc-v3.is-static .svc-card-back{position:absolute;inset:0;z-index:1;justify-content:flex-end;gap:0;padding:clamp(20px,5vw,28px);background:none;border:0;box-shadow:none;color:#F2EDE6}
html body .svc-v3.is-static .svc-card-back h3{color:#F2EDE6}
html body .svc-v3.is-static .svc-card-back h3 em{color:rgba(242,237,230,.72)}
html body .svc-v3.is-static .svc-card-back ul{margin:0;padding:clamp(10px,3vw,16px) 0 0}
html body .svc-v3.is-static .svc-card-back li{padding:8px 0;color:rgba(242,237,230,.9);border-bottom-color:rgba(242,237,230,.22)}
/* =====================================================================================================================
   EIGHTH REVIEW (design pass, publish): mobile services and portrait, hero rhythm, marquee, radius scale.
   Radius rule for the whole site: image cards 12px; buttons, tiles and full-bleed media square; round icon buttons 50%.
   ===================================================================================================================== */
html body .project-grid.is-ring .project-card .project-image{border-radius:12px}

/* Hero: one spacing rhythm between brand line, title, disciplines and the link (tighter steps, larger before the CTA). */
/* Ninth review: more air between every line of the hero (brand line, both title lines, disciplines, link). */
html body .hero-kicker{margin-bottom:clamp(20px,1.8vw,26px)}
html body .hero.hero-scroll h1.hero-title{margin-bottom:clamp(20px,1.8vw,26px)}
html body .hero.hero-scroll h1.hero-title .hero-title-serif{margin-top:.34em}
html body .hero-sub{margin-bottom:clamp(30px,2.8vw,40px)}
@media (max-width:760px){
  html body .hero-copy{margin-bottom:clamp(72px,14vh,128px);padding-right:0}   /* lifted off the bottom edge (owner review) */
  html body .hero-scroll-cue{display:none}                                        /* the line crossed the CTA on phones */
}

/* Disciplines strip under the hero: smaller and quieter. */
/* Ninth review: always one line. Desktop: the five items spread across the width; phones: a slow loop
   (the second group is an aria-hidden copy so the loop is seamless). */
html body .marquee{display:block;padding:12px 0;overflow:hidden;white-space:nowrap}
html body .marquee-track{display:flex;width:100%}
html body .marquee-group{display:flex;flex:1 0 100%;justify-content:space-between;gap:28px;padding:0 var(--pad)}
html body .marquee-group[aria-hidden="true"]{display:none}
html body .marquee span{flex-shrink:0;font-size:10px;letter-spacing:.06em;color:rgba(242,237,230,.7)}
@media (max-width:760px){
  html body .marquee-track{width:max-content;animation:ek-marquee 26s linear infinite}
  html body .marquee-group{flex:0 0 auto;justify-content:flex-start;padding:0 14px}
  html body .marquee-group[aria-hidden="true"]{display:flex}
}
@keyframes ek-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html body .marquee-track{animation:none}
  html body .marquee{overflow-x:auto}
  html body .marquee-group[aria-hidden="true"]{display:none}
}

/* Services on phones / tablets: title on one line (bold + italic), details under it, gradient behind the text,
   slight zoom as the card scrolls through (--zt from js/eiskal-edits.js). */
html body .svc-v3.is-static .svc-card-back h3 b,html body .svc-v3.is-static .svc-card-back h3 em{display:inline}
html body .svc-v3.is-static .svc-card-back h3 em{margin:0 0 0 .1em}
html body .svc-v3.is-static .svc-card-front img{transform:scale(calc(1.02 + var(--zt,0) * .12));transform-origin:50% 40%;will-change:transform}
html body .svc-v3.is-static .svc-card-front:after{background:linear-gradient(to top,rgba(14,12,10,.92) 0,rgba(14,12,10,.7) 34%,rgba(14,12,10,.2) 62%,rgba(14,12,10,0) 80%)}

/* Founder portrait on phones / tablets: same slight zoom, and a top gradient that melts the photo into the page and
   lifts as the portrait scrolls into view. */
@media (max-width:900px){
  html body .about-v2-frame{position:relative;transform:none}
  html body #about .about-v2-frame img{transform:scale(calc(1.02 + var(--zt,0) * .12));transform-origin:50% 35%}
  html body .about-v2-frame:after{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,#1C1915 0,rgba(28,25,21,.55) 40%,rgba(28,25,21,0) 100%);opacity:calc(1 - var(--zt,0) * .75)}
}
@media (prefers-reduced-motion:reduce){
  html body .svc-v3.is-static .svc-card-front img,html body #about .about-v2-frame img{transform:none!important}
}
/* ---------- Logo intro on every load (tenth review). The film plays where autoplay is allowed; otherwise
   (.use-logo) the wordmark is drawn left to right. The page underneath cannot scroll meanwhile. ---------- */
html.intro-on,html.intro-on body{overflow:hidden}
html body .brand-intro{display:grid}
html body .brand-intro .intro-logo{grid-area:1/1;width:min(72vw,520px);height:auto;opacity:0;pointer-events:none;
  filter:invert(1) brightness(.18)}          /* the white footer wordmark, turned ink-coloured for the ivory intro */
html body .brand-intro video{grid-area:1/1}
html body .brand-intro.use-logo video{visibility:hidden}
html body .brand-intro.use-logo .intro-logo{animation:ek-logo-draw 1.9s cubic-bezier(.65,0,.35,1) .1s forwards}
@keyframes ek-logo-draw{0%{opacity:0;clip-path:inset(0 100% 0 0)}15%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  html body .brand-intro.use-logo .intro-logo{animation:none;opacity:1;clip-path:none}
}
/* Intro film edges (eleventh review): Safari renders video a touch brighter than the same colour in CSS, which
   showed the film as a lighter rectangle on iPhone. The frame edges now feather into the ivory page, so there is
   no hard edge on any device; the logo itself sits well inside the faded margins. */
html body .brand-intro{background:#F2EDE7}
html body .brand-intro video{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-composite:intersect}/* ...and the film is blended with "darken": the page shows whichever is darker, film or ivory. The film's light
   background (whatever shade a browser renders it) therefore vanishes into the page and only the dark logo lines
   remain. The feathered mask above stays as a fallback where blending is not applied. */
html body .brand-intro{isolation:isolate}
html body .brand-intro video{mix-blend-mode:darken}