/* Page sections, top to bottom: hero (with mountains), services, work, about, contact. */

/* hero */
.hero{padding-top:clamp(112px,16vh,190px)}
.hero h1{font-weight:400;font-size:var(--fs-4);line-height:1.12;letter-spacing:0;text-align:center;text-wrap:balance;max-width:42ch;margin:0 auto}
.hero h1 b{font-weight:800}
/* one client problem at a time under the hero line; all stacked in one cell so the height never jumps */
.hero-problems{display:grid;max-width:760px;margin:clamp(18px,2.6vw,28px) auto 0;text-align:center}
.hp{grid-area:1/1;display:grid;gap:8px;align-content:start;color:var(--ink-soft);text-decoration:none;opacity:0;transform:translate3d(0,6px,0);pointer-events:none;
  transition:opacity .24s var(--ease-out),transform .24s var(--ease-out)}
.hp.on{opacity:1;transform:none;pointer-events:auto}
.hp.off{opacity:0;transform:translate3d(0,-6px,0)}
.hp-q{font-size:var(--fs-3);line-height:1.3;letter-spacing:0;text-wrap:balance}
.hp-who{font-size:var(--fs-1);font-weight:700;color:var(--blue)}
.hp-who i{display:inline-block;font-style:normal;transition:transform .2s var(--ease-out)}
.hp:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hp:hover .hp-q{color:var(--ink)}.hp:hover .hp-who i{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.hp,.hp.off{transform:none;transition:none}}
.hero-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vw,40px)}
.mountains{margin-top:clamp(40px,8vh,90px);height:clamp(240px,46vw,880px);position:relative;overflow:hidden}
/* the hero range: one size of blue dot, falling into place on load (js/peaks.js) */
.peaks{position:absolute;left:0;top:0;width:100%;height:118%;will-change:transform}

/* shared section frame: a small label, then a statement that lights up word by word (js/sections.js) */
.sec{padding-top:clamp(110px,13vw,180px)}
.sec-label{margin:0 0 18px;font-weight:700;font-size:var(--fs-3);color:var(--ink-soft);letter-spacing:0}
.lit{margin:0;font-weight:800;font-size:var(--fs-5);line-height:1.02;letter-spacing:0;max-width:17ch;text-wrap:balance}
.lit .w{color:var(--unlit);transition:color .35s ease}
.lit .w.on{color:var(--ink)}

/* services: three cards that stack as you scroll */
.cards{display:grid;gap:22px;margin-top:clamp(40px,6vw,72px)}
.card{position:sticky;top:calc(84px + var(--i) * 22px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);min-height:0;padding:clamp(24px,2.6vw,36px);border-radius:26px;background:var(--card);box-shadow:0 0 0 8px var(--paper)}  /* taste-skill-ignore: a ring of page colour, not a shadow or border, sets a stacked card apart from the one before */
.card-text{display:flex;flex-direction:column;min-width:0}
.card h3{margin:0;font-weight:800;font-size:var(--fs-5);line-height:.95;letter-spacing:0}
.card h3 span{display:block;color:var(--ink-soft)}
.card-body{margin-top:auto;padding-top:28px;display:grid;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.card-cases{margin:0;font-size:var(--fs-2);color:var(--ink-soft)}
.card .chip{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.15em;transition:color .2s ease}
.card .chip:hover{color:var(--blue)}
.card .chip:active{color:var(--blue)}
.card-body p{margin:0;font-size:var(--fs-2);line-height:1.5;color:var(--ink-soft);max-width:46ch}
.card-art{position:relative;border-radius:18px;overflow:hidden;background:var(--paper);aspect-ratio:16/10;max-height:340px;justify-self:end;width:100%}
.card-art canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* desktop: hovering a project chip shows a peek of that case (js/sections.js) */
.peek{position:fixed;left:0;top:0;z-index:25;width:280px;pointer-events:none;opacity:0;transform:translateY(6px) scale(.97);transform-origin:50% 100%;transition:opacity .18s ease,transform .22s var(--ease-out);background:var(--paper);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.18)} /* taste-skill-ignore: floats above the page */
.peek.on{opacity:1;transform:none}
.peek-img{display:block;aspect-ratio:16/10;background:var(--card)}
.peek-img img{width:100%;height:100%;object-fit:cover}
.peek p{margin:0;padding:12px 14px 14px;font-size:var(--fs-1);line-height:1.45;color:var(--ink-soft)}
.peek b{display:block;margin-bottom:4px;font-size:var(--fs-2);color:var(--ink)}
@media (hover:none){.peek{display:none}}

/* room to scroll while the pinned cards fold into a row (js/sections.js) */
.card{transform-origin:0 0;will-change:transform;margin-bottom:calc((2 - var(--i)) * 22px)} /* equal release point, so the folded row leaves as one */
.fold-room{height:55vh}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(40px,6vw,72px)}
.wk{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);text-decoration:none;transition:transform var(--press) var(--ease-out)}
.wk:active{transform:scale(.97)}
.wk-img{position:relative;display:block;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:var(--ph,var(--card))}
.wk-img.is-soon{background:var(--card)}
.wk-meta{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:var(--fs-1);font-weight:700;color:var(--ink-soft);--logo-h:15px}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.wk-title{display:block;margin-top:14px;font-weight:800;font-size:var(--fs-3);letter-spacing:0;line-height:1.1;transition:color .2s ease}
.wk-tease{display:block;margin-top:6px;font-size:var(--fs-2);color:var(--ink-soft);max-width:44ch}
@media (hover:hover) and (pointer:fine){
  .wk:hover .wk-img img{transform:scale(1.03)}
  .wk:hover .wk-title{color:var(--blue)}
}

/* about */
/* who: one statement beside the portraits, right after the hero; on phones the words come first */
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.sheet{margin:0;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:2048/1638}
.sheet img{width:100%;height:100%;object-fit:cover}
.who-lit{max-width:22ch;font-size:var(--fs-4);line-height:1.12;letter-spacing:0}
.who + .services{padding-top:clamp(72px,9vw,128px)}
@media (max-width:860px){
  .who-grid{grid-template-columns:1fr}
  .who-lit{order:-1;max-width:24ch}
}

/* contact: email, the form, and the name at full width */
.end{margin-top:clamp(110px,14vw,200px);padding-bottom:calc(var(--rail-h) + 24px + env(safe-area-inset-bottom,0px));}
.end{text-align:center}
.end-foot{text-align:left}
.end-label{margin:0 0 8px;font-size:var(--fs-1);color:var(--ink-soft)}
.copy-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--card);font-weight:700;font-size:var(--fs-1);cursor:pointer;color:var(--ink);transition:transform var(--press) var(--ease-out),background-color .2s ease}
.copy-pill:hover{background:var(--ink);color:var(--paper)}
.copy-pill:active{transform:scale(.97)}
.giant{display:inline-block;margin:clamp(60px,9vw,120px) 0 0;font-weight:800;letter-spacing:0;line-height:.8;white-space:nowrap;color:var(--ink);font-size:9vw} /* taste-skill-ignore: sized by js to fill the width exactly */
.giant span,.giant i.b{color:var(--blue)}

/* the sentence you finish by tapping (js/finale.js) */
.end-hint{color:var(--blue)}
.mad{position:relative;margin:18px auto 0;max-width:30ch;font-weight:800;font-size:var(--fs-4);line-height:1.3;letter-spacing:0;text-wrap:balance}
.mad-ruler{position:absolute;visibility:hidden;white-space:pre;pointer-events:none;left:0;top:0;padding:0 .04em}
/* typed blanks: a dotted line you write on */
.blank{width:8ch;max-width:100%;padding:0 .04em;border:0;border-radius:0;background:none;font:inherit;letter-spacing:inherit;color:var(--ink);text-align:center;
  box-shadow:inset 0 -.08em 0 var(--line);transition:box-shadow .2s ease} /* taste-skill-ignore: the writing line under a blank */
.blank::placeholder{color:var(--ink-soft)}
.blank:focus{outline:none;box-shadow:inset 0 -.08em 0 var(--blue)} /* taste-skill-ignore: focus line */
.blank.miss{box-shadow:inset 0 -.08em 0 #c2410c} /* taste-skill-ignore: missing answer */
.mad-note{margin:-8px 0 0;font-size:var(--fs-1);color:var(--ink-soft)}
.mad-note:empty{display:none}
.mad-note a{color:var(--blue)}
.mad-done .mad{max-width:24ch}
.slot{position:relative;display:inline-block;vertical-align:bottom;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--blue);cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:.06em;text-underline-offset:.14em;transition:transform var(--press) var(--ease-out)} /* taste-skill-ignore: the dotted line marks the words you can change */
.slot-win{display:inline-grid;vertical-align:bottom;overflow:hidden;contain:paint;padding:.02em .04em .12em;line-height:1.05}
.slot.spinning .slot-win{-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)} /* taste-skill-ignore: soft edges on the reel window while it spins */
.slot-win > span{grid-area:1/1;white-space:nowrap}
.mad .nw{white-space:nowrap}
.slot:hover{color:var(--ink)}
.slot:active{transform:scale(.97)}
.slot-in.roll{animation:roll-in .26s var(--ease-out) both}
.slot-out{animation:roll-out .22s var(--ease-out) both}
.slot.spinning{cursor:default}
.slot.spinning .slot-win{justify-items:center}
.slot-in.reel{animation:reel-in .13s linear both}
.slot.spinning .slot-out{animation:reel-out .13s linear both}
@keyframes reel-in{from{transform:translateY(105%)}}
@keyframes reel-out{to{transform:translateY(-105%)}}
@keyframes roll-in{from{transform:translateY(70%);opacity:0}}
@keyframes roll-out{to{transform:translateY(-70%);opacity:0}}
.end-actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(28px,4vw,44px)}
.end-alt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px}
.end-alt .copy-pill{min-height:36px;padding:0 14px}
.end-actions .btn:active{transform:scale(.97)}
.end-or{font-size:var(--fs-2);color:var(--ink-soft)}
.end-or a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.15em}
.end-or a:hover{color:var(--blue);border-color:var(--blue)}

/* the name: letters drop in, lean toward the cursor, hop when tapped */
.giant{cursor:default;user-select:none}
.giant i{display:inline-block;font-style:normal;cursor:pointer;transition:color .2s ease}
.reveal-ready .giant i{opacity:0;transform:translateY(-60%)}
.giant.in i{opacity:1;transform:none;transition:opacity .35s ease calc(var(--k) * 28ms),transform .6s var(--ease-out) calc(var(--k) * 28ms),color .2s ease}
.giant i.hop{animation:hop .5s var(--ease-out)}
/* hovered letters turn to dots for a moment (js/finale.js draws the dotted twin) */
.giant i{position:relative}
.giant i::after{content:"";position:absolute;left:0;right:0;top:-.25em;bottom:-.25em;background:var(--dots) 0 0/100% 100% no-repeat;opacity:0;transform:scale(.96);transition:opacity .18s ease,transform .3s var(--ease-out);pointer-events:none}
.giant i.dot{color:transparent}
.giant i.dot::after{opacity:1;transform:none}
.giant.in i.dot{transition:opacity .35s ease calc(var(--k) * 28ms),transform .6s var(--ease-out) calc(var(--k) * 28ms),color .12s ease}
@keyframes hop{30%{transform:translateY(-22%) rotate(-6deg)}60%{transform:translateY(3%) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.reveal-ready .giant i{opacity:1;transform:none}}
.end-foot{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-size:var(--fs-1);color:var(--ink-soft)} /* taste-skill-ignore */
.end-foot a{text-decoration:none}
.end-foot a:hover{color:var(--blue)}

@media (max-width:1200px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* service cards: compact, art as a tile beside the title, so the next card shows below */
  .cards{gap:14px}
  .card{top:calc(70px + var(--i) * 14px);grid-template-columns:minmax(0,1fr) clamp(96px,26vw,180px);grid-template-areas:"title art" "body body";gap:18px 16px;min-height:0;padding:18px}
  .card-text{display:contents}
  .card h3{grid-area:title;align-self:center;font-size:var(--fs-4)}
  .fold-room{display:none}
  .card{margin-bottom:0}
  .card-art{grid-area:art;aspect-ratio:1;max-height:none}
  .card-body{padding-top:0}
  .card-body{grid-area:body;margin-top:0;gap:14px}
  .end{margin-top:clamp(80px,16vw,120px)}
}
@media (max-width:600px){
  .grid{grid-template-columns:minmax(0,1fr)}
}