:root {
  --paper:#f8edd7;
  --lime:#d7fa3f;
  --yellow:#ffed00;
  --blue:#088beb;
  --black:#090909;
  --border:2.5px solid var(--black);
  --radius:20px;
  --pad:clamp(14px,1.05vw,22px);
  font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  color:var(--black);
  background:var(--paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #242424;outline-offset:4px}
img{display:block;max-width:100%}
.page{max-width:2000px;min-height:100svh;margin:0 auto;padding:0 var(--pad);display:flex;flex-direction:column}
.site-header{min-height:clamp(69px,6.3vh,85px);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:3px 1% 0}
.site-title{font-size:clamp(26px,1.85vw,37px);font-weight:900;line-height:1;white-space:nowrap;letter-spacing:-.5px}
.main-nav{display:flex;align-items:center;gap:clamp(10px,.78vw,18px);font-size:clamp(19px,1.25vw,26px);font-weight:600;line-height:1}
.main-nav a{transition:opacity .2s,transform .2s}
.main-nav a:hover{opacity:.55;transform:translateY(-1px)}
.slash{font-weight:700}
.mobile-nav-toggle,.mobile-nav{display:none}
.showcase{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:clamp(12px,.95vw,20px);min-height:0;height:clamp(650px,calc(100svh - clamp(69px,6.3vh,85px) - 45px),1080px)}
.panel{position:relative;border:var(--border);border-radius:var(--radius);overflow:hidden;isolation:isolate}
.personal{display:flex;flex-direction:column;background:var(--lime)}
.personal-main{position:relative;flex:1;min-height:0;padding:clamp(24px,2.05vw,43px) clamp(20px,1.9vw,39px);isolation:isolate}
.intro-title{position:relative;z-index:2;margin:0;font-weight:900;font-size:clamp(68px,6.05vw,124px);line-height:.82;letter-spacing:-.018em;max-width:100%}
.intro-title span{display:block;white-space:nowrap}
.intro-description{position:relative;z-index:2;margin:clamp(16px,1.25vw,27px) 0 0;font-size:clamp(23px,1.4vw,31px);line-height:1.07;font-weight:500;letter-spacing:.004em}
.remote-badge{position:absolute;z-index:3;width:clamp(135px,10.3vw,207px);top:4%;right:1.4%;transform:rotate(-10deg);transition:transform .25s}
.remote-badge:hover{transform:rotate(-5deg) scale(1.05)}
.star-doodle{position:absolute;z-index:2;width:clamp(46px,4.4vw,92px);top:41.5%;right:3%;transform:rotate(7deg)}
.dog-illustration{position:absolute;width:46%;right:1.5%;bottom:2.5%;z-index:1;filter:drop-shadow(0 0 0 transparent)}
.intro-cta{position:absolute;z-index:4;left:clamp(20px,1.9vw,39px);bottom:6.8%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,.85vw,17px)}
.pill{display:flex;align-items:center;justify-content:center;gap:7px;min-width:clamp(194px,12.9vw,258px);padding:clamp(8px,.56vw,12px) clamp(15px,1.2vw,24px);font-size:clamp(25px,1.43vw,33px);font-weight:900;line-height:1;border:var(--border);border-radius:100px;white-space:nowrap;transition:transform .2s,background-color .2s}
.pill span{font-size:1.3em;font-weight:500;line-height:.75}
.pill:hover{transform:translateX(4px)}
.pill-primary{background:#050505;color:white}
.pill-secondary{background:transparent}
.pill-secondary:hover{background:#fff6}
.contact-strip{position:relative;display:flex;align-items:center;flex:none;height:21.5%;min-height:140px;border-top:var(--border);padding:12px clamp(20px,1.9vw,39px)}
.contact-links{display:flex;flex-direction:column;gap:clamp(6px,.55vw,11px);width:100%;font-size:clamp(19px,1.22vw,27px);font-weight:500;line-height:1}
.contact-links a{display:grid;grid-template-columns:24px clamp(92px,7.2vw,146px) minmax(0,1fr);column-gap:7px;align-items:center;width:100%;white-space:nowrap;transition:opacity .2s}
.contact-links a:hover{opacity:.6}
.contact-links a span:first-child{font-size:1.4em;line-height:.6}
.contact-links a span:last-child{overflow:hidden;text-overflow:ellipsis}
.work-grid{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44.7% minmax(0,1fr);gap:clamp(12px,.95vw,20px)}
.project{min-height:0;isolation:isolate;transition:box-shadow .2s}
.project:hover{box-shadow:0 2px 0 0 rgba(0,0,0,.06)}
.project-inquru{grid-column:1/-1;background:var(--yellow)}
.project-wake{background:var(--blue);color:white}
.project-fylto{background:#edf3fd}
.project-topline{position:absolute;z-index:5;top:clamp(12px,.9vw,19px);left:clamp(16px,1vw,25px);font-size:clamp(24px,1.5vw,34px);font-weight:800;line-height:1}
.project-headline{position:absolute;z-index:5;margin:0;line-height:.86;font-weight:900;letter-spacing:-.012em}
.inquru-headline{top:19%;left:1.5%;font-size:clamp(66px,6.3vw,136px)}
.inquru-art{position:absolute;z-index:1;width:62%;max-width:none;right:-3%;top:-33%;height:165%;object-fit:contain;object-position:center;pointer-events:none;transition:transform .5s ease}
.project-inquru:hover .inquru-art{transform:translateX(-10px) scale(1.02)}
.project-description{position:absolute;z-index:6;left:clamp(16px,1vw,25px);line-height:.99;font-size:clamp(22px,1.5vw,33px);font-weight:500;margin:0}
.project-description span{font-size:1.3em;line-height:.5}
.inquru-description{top:62%}
.tag-row{position:absolute;left:clamp(16px,1vw,25px);bottom:clamp(12px,.83vw,19px);z-index:6;display:flex;gap:clamp(5px,.35vw,9px);align-items:center;flex-wrap:wrap}
.tag-row span{border:2px solid currentColor;border-radius:40px;font-size:clamp(16px,.99vw,23px);font-weight:800;line-height:1;padding:4px clamp(10px,.7vw,17px);white-space:nowrap}
.project-open{position:absolute;z-index:8;top:clamp(12px,.9vw,19px);right:clamp(12px,.9vw,19px);display:grid;place-items:center;width:clamp(42px,2.75vw,58px);height:clamp(42px,2.75vw,58px);border:2px solid var(--black);border-radius:50%;background:#060606;color:#fff;font-family:Arial,sans-serif;font-size:clamp(30px,2vw,43px);line-height:1;transition:transform .2s,background-color .2s}
.project-open:hover{transform:rotate(45deg)}
.project-open.light{background:#090909;color:#fff}
.wake-bg,.wake-boat,.fylto-bg,.fylto-window{position:absolute;max-width:none;pointer-events:none}
.wake-bg{z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.wake-dim{z-index:1;position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,51,120,.49) 0%,rgba(4,60,122,.31) 33%,transparent 69%),linear-gradient(0deg,rgba(0,42,108,.54) 0%,transparent 37%);pointer-events:none}
.wake-boat{z-index:2;width:98%;height:auto;top:7%;right:-20%;filter:drop-shadow(0 9px 8px rgba(4,49,103,.08));transition:transform .4s ease}
.project-wake:hover .wake-boat{transform:translate(-5px,-6px)}
.wake-css-wave{position:absolute;left:-7%;bottom:-1%;width:114%;height:33%;z-index:3;pointer-events:none}
.wake-headline{top:26%;left:3%;font-size:clamp(58px,4.05vw,94px);color:#fff;text-shadow:0 2px 2px rgba(0,29,77,.09)}
.wake-headline span{display:block}.wake-headline span:nth-child(2){padding-left:.36em}
.wake-description{bottom:16%;font-size:clamp(20px,1.31vw,31px);text-shadow:0 1px 2px rgba(0,38,79,.19)}
.tag-row-wake{color:#fff}
.fylto-bg{inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fylto-window{z-index:2;width:108%;right:-34%;top:-5%;height:118%;object-fit:contain;transition:transform .4s}
.project-fylto:hover .fylto-window{transform:translateX(-8px)}
.fylto-headline{top:26%;left:3%;width:45%;max-width:265px}
.fylto-headline img{width:100%;height:auto}
.fylto-description{bottom:16%;font-size:clamp(20px,1.31vw,31px)}
.tag-row-fylto{color:#090909}
.hero-footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;flex:none;min-height:clamp(43px,4.3vh,50px);gap:10px;padding:0 clamp(4px,.6vw,14px);font-size:clamp(18px,1.15vw,24px);font-weight:500;line-height:1;text-transform:uppercase}
.hero-footer :nth-child(2){text-align:center}
.hero-footer :nth-child(3){text-align:right}
.hero-footer a:hover{text-decoration:underline}
.toast{position:fixed;z-index:9999;bottom:24px;left:50%;transform:translateX(-50%);border:2px solid #111;background:#fff;padding:11px 18px;border-radius:12px;font-size:20px;font-weight:700;box-shadow:5px 5px 0 #111;white-space:nowrap}
.toast[hidden]{display:none}

/* Keep lettering legible over foam/wave layers without losing the bright game artwork. */
.wake-text-shade{position:absolute;z-index:4;left:0;bottom:0;width:81%;height:56%;pointer-events:none;background:radial-gradient(ellipse 80% 86% at 2% 92%,rgba(0,43,105,.75) 0%,rgba(0,53,113,.48) 44%,rgba(0,53,113,0) 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%)}
/* A soft pale glass wash under copy; the real Fylto screenshot remains unobscured on the right. */
.fylto-text-shade{position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 14% 98%,rgba(255,255,255,.98) 0%,rgba(250,252,255,.90) 50%,rgba(250,252,255,0) 100%),linear-gradient(90deg,rgba(250,252,255,.64) 0%,rgba(250,252,255,.32) 25%,rgba(250,252,255,0) 64%)}
.tag-row-fylto span{background:rgba(252,254,255,.90);box-shadow:0 1px 5px rgba(255,255,255,.25)}

@media(max-width:1550px) and (min-width:1101px){
 .intro-title{font-size:clamp(58px,5.65vw,90px)}
 .intro-description{font-size:clamp(20px,1.6vw,27px)}
 .remote-badge{width:clamp(115px,10.5vw,160px)}
 .pill{font-size:clamp(20px,1.65vw,28px);min-width:clamp(156px,12.9vw,215px)}
 .contact-links{font-size:clamp(16px,1.3vw,21px)}
 .contact-links a{grid-template-columns:20px clamp(70px,6.7vw,104px) minmax(0,1fr);gap:3px}
 .wake-headline{font-size:clamp(52px,4vw,70px)}
 .project-description{font-size:clamp(20px,1.52vw,26px)}
 .tag-row span{font-size:clamp(15px,1.05vw,19px);padding:4px 9px}
}
@media(max-width:1100px){
 .page{padding:0 clamp(12px,2.4vw,24px)}
 .site-header{min-height:76px}
 .main-nav{font-size:20px;gap:9px}
 .showcase{height:auto;display:flex;flex-direction:column;gap:15px}
 .personal{min-height:660px}
 .personal-main{min-height:525px}
 .intro-title{font-size:clamp(86px,12vw,135px)}
 .intro-description{font-size:clamp(23px,3vw,31px)}
 .remote-badge{width:clamp(144px,19vw,220px);top:5%;right:5%}
 .dog-illustration{width:min(53%,400px);right:4%;bottom:3%}
 .star-doodle{width:75px;top:48%}
 .pill{font-size:29px;min-width:228px}
 .contact-strip{min-height:145px;height:auto;padding-top:25px;padding-bottom:25px}
 .contact-links{font-size:24px}
 .contact-links a{grid-template-columns:30px 120px minmax(0,1fr)}
 .work-grid{min-height:0;grid-template-rows:340px 470px;gap:15px}
 .inquru-headline{font-size:clamp(70px,9vw,110px)}
 .inquru-art{width:65%;height:155%;top:-25%;right:-8%}
 .project-description{font-size:clamp(21px,2.3vw,28px)}
 .wake-headline{font-size:clamp(55px,8vw,80px)}
 .project-topline{font-size:clamp(24px,2.6vw,30px)}
 .tag-row span{font-size:clamp(16px,1.9vw,22px)}
 .fylto-window{right:-29%;width:110%}
 .hero-footer{min-height:58px;font-size:20px}
}
@media(max-width:680px){
 :root{--radius:16px;--border:2px solid var(--black)}
 .site-header{min-height:66px;padding:0 2px}
 .site-title{font-size:clamp(25px,6.6vw,35px)}
 .main-nav{display:none}
 .mobile-nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;width:46px;height:42px;border:2px solid #111;border-radius:12px;background:transparent;cursor:pointer}
 .mobile-nav-toggle span{display:block;width:21px;height:2px;background:#111}
 .mobile-nav{display:flex;flex-direction:column;gap:12px;background:#fffdf8;border:2px solid #111;border-radius:15px;padding:15px;margin-bottom:12px;font-size:23px;font-weight:800}
 .mobile-nav[hidden]{display:none}
 .showcase{gap:12px}
 .personal{min-height:625px}
 .personal-main{padding:24px 20px;min-height:486px}
 .intro-title{font-size:clamp(61px,13.7vw,93px);line-height:.87}
 .intro-description{font-size:clamp(20px,4.55vw,26px);margin-top:19px;max-width:90%}
 .desktop-only{display:none}
 .remote-badge{top:6%;right:2%;width:clamp(100px,27vw,150px)}
 .dog-illustration{width:58%;right:2%;bottom:4.5%}
 .star-doodle{width:50px;right:4%;top:48%}
 .intro-cta{bottom:9%;left:20px;gap:9px}
 .pill{font-size:clamp(19px,5.3vw,27px);min-width:0;padding:10px 13px}
 .contact-strip{min-height:136px;padding:16px 15px}
 .contact-links{gap:8px;font-size:clamp(16px,4.15vw,22px)}
 .contact-links a{grid-template-columns:19px 72px minmax(0,1fr);column-gap:5px}
 .work-grid{display:flex;flex-direction:column;gap:12px}
 .project-inquru{height:350px;flex:none}
 .project-wake{height:490px;flex:none}
 .project-fylto{height:480px;flex:none}
 .project-topline{top:16px;left:15px;font-size:24px}
 .project-open{top:11px;right:11px;width:43px;height:43px;font-size:30px}
 .inquru-headline{top:20%;left:14px;font-size:clamp(66px,16vw,100px)}
 .inquru-description{top:59%;font-size:clamp(21px,5.1vw,29px)}
 .inquru-art{height:110%;width:93%;top:-10%;right:-42%;opacity:.93}
 .tag-row{left:15px;bottom:14px;gap:5px}
 .tag-row span{font-size:clamp(14px,3.6vw,20px);padding:4px 9px;border-width:1.7px}
 .wake-bg{object-position:42% center}
 .wake-boat{width:117%;right:-33%;top:2%}
 .wake-dim{background:linear-gradient(90deg,rgba(0,46,112,.32),transparent 80%),linear-gradient(0deg,rgba(0,40,104,.71),rgba(0,47,98,.13) 44%,transparent 68%)}
 .wake-headline{top:auto;bottom:28%;left:16px;font-size:clamp(72px,19vw,115px)}
 .wake-css-wave{height:46%}
 .wake-description{bottom:15%;font-size:clamp(20px,5.3vw,28px)}
 .fylto-bg{object-position:center}
 .fylto-window{top:8%;right:-28%;height:84%;width:120%}
 .fylto-headline{top:26%;left:17px;width:53%;max-width:240px}
 .fylto-description{bottom:15%;font-size:clamp(19px,5.1vw,26px);left:17px}
 .hero-footer{font-size:16px;grid-template-columns:1fr 1fr;padding:12px 2px;gap:9px}
 .hero-footer :nth-child(2){text-align:right}
 .hero-footer :nth-child(3){display:none}
}
@media(max-width:385px){
 .personal{min-height:588px}
 .personal-main{min-height:458px}
 .intro-title{font-size:clamp(56px,13.5vw,67px)}
 .intro-description{font-size:19px}
 .remote-badge{width:102px;right:0}
 .dog-illustration{width:60%;right:1%;bottom:3%}
 .pill{font-size:19px}
 .contact-links{font-size:16px}
 .contact-links a{grid-template-columns:16px 65px minmax(0,1fr)}
 .project-wake{height:450px}
 .project-fylto{height:440px}
 .wake-headline{font-size:69px}
 .wake-description,.fylto-description{font-size:20px}
 .tag-row span{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Alpha polish: preserve character silhouette and avoid collisions at breakpoints. */
@media (min-width:1101px){
  .wake-boat{width:82%;right:-7%;top:8%}
  .wake-headline{text-shadow:0 2px 9px rgba(0,24,79,.35)}
  .wake-dim{background:linear-gradient(90deg,rgba(3,47,112,.58) 0%,rgba(4,56,120,.37) 35%,transparent 72%),linear-gradient(0deg,rgba(0,40,106,.61) 0%,transparent 40%)}
}
@media (min-width:681px) and (max-width:1100px){
  .personal{min-height:785px}
  .personal-main{min-height:622px}
  .intro-cta{bottom:8%}
  .wake-boat{width:86%;right:-8%;top:10%}
}
@media (max-width:680px){
  .inquru-art{width:82%;height:95%;top:0;right:-19%}
  .wake-boat{width:109%;right:-12%;top:1%}
  .wake-headline{text-shadow:0 2px 8px rgba(0,20,65,.36)}
  .fylto-window{width:108%;height:67%;right:-32%;top:22%}
  .fylto-headline{top:21%;width:45%}
  .fylto-description{bottom:17%}
}
@media (max-width:680px){
  /* Yellow backing keeps the Inquru descriptor readable even when the mascot shifts on a narrow screen. */
  .inquru-description{background:var(--yellow);padding:3px 10px 3px 0;max-width:78%}
  /* Keep the screenshot a showcase, not a backdrop behind small typography. */
  .fylto-description{background:linear-gradient(90deg,rgba(245,248,255,.97) 0%,rgba(245,248,255,.90) 72%,rgba(245,248,255,0) 100%);padding:5px 14px 6px 0;max-width:82%}
}

/* Alpha v2 desktop: a little more gradient under white Wake Rush text. */
@media (min-width:1101px){
  .wake-dim{background:linear-gradient(90deg,rgba(3,44,108,.68) 0%,rgba(4,56,120,.46) 34%,transparent 75%),linear-gradient(0deg,rgba(0,38,101,.66) 0%,rgba(0,40,106,.24) 26%,transparent 47%)}
}


/* LOWER HOMEPAGE / EDITORIAL GALLERIES */
.gallery-section{scroll-margin-top:20px;border-top:2.5px solid var(--black);padding:24px clamp(4px,.6vw,14px) 60px;margin-top:clamp(12px,1.05vw,22px)}
.gallery-section--banners{margin-top:10px}
.section-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:clamp(18px,1.25vw,25px);font-weight:800;line-height:1}
.section-count{border:2px solid #111;border-radius:50px;padding:7px 16px;background:var(--lime)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0 28px}
.section-heading h2{font-size:clamp(78px,10vw,190px);line-height:.85;font-weight:900;letter-spacing:-.03em;margin:8px 0 0}
.section-period{color:#bbdf1d}
.section-heading p{font-size:clamp(19px,1.5vw,30px);font-weight:500;line-height:1.1;margin:18px 0 0}
.section-deco{font-size:clamp(65px,8.5vw,170px);color:var(--black);transform:rotate(-12deg);line-height:1}
.gallery-grid{margin:0;min-width:0}
.gallery-grid--logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.1vw,22px)}
.gallery-grid--banners{columns:3;column-gap:clamp(12px,1.1vw,22px)}
.image-card{display:block;width:100%;min-width:0;padding:0;margin:0;appearance:none;outline-offset:5px;border:var(--border);border-radius:var(--radius);background:#fff;cursor:zoom-in;color:var(--black);font-family:inherit;text-align:left;overflow:hidden;transition:transform .18s,box-shadow .18s;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.image-card:hover{transform:translateY(-4px);box-shadow:5px 5px 0 var(--black)}
.image-card[hidden]{display:none!important}
.gallery-grid--banners .image-card{margin:0 0 clamp(12px,1.1vw,22px)}
.image-card__media{display:block;position:relative;background:#fff;overflow:hidden}
.gallery-grid--logos .image-card__media{aspect-ratio:1/1;display:block;position:relative;min-height:0;overflow:hidden}
.image-card__media img{display:block;max-width:100%;height:auto;width:100%;object-fit:contain;transition:transform .3s}
.gallery-grid--logos .image-card__media img{position:absolute;inset:clamp(12px,1.3vw,22px);width:calc(100% - 2 * clamp(12px,1.3vw,22px));height:calc(100% - 2 * clamp(12px,1.3vw,22px));object-fit:contain;object-position:center center}
.gallery-grid--banners .image-card__media img{width:100%;height:auto}
.image-card:hover .image-card__media img{transform:scale(1.025)}
.image-card__caption{background:var(--paper);display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;border-top:2px solid var(--black);padding:12px clamp(12px,1vw,19px) 13px}
.image-card__num{grid-column:1/-1;font-size:clamp(14px,1vw,18px);font-weight:600;letter-spacing:.04em;line-height:1}
.image-card__label{font-size:clamp(23px,1.8vw,35px);font-weight:800;line-height:1}
.image-card__arrow{font-size:clamp(24px,1.65vw,32px);line-height:.8;transition:transform .2s}
.image-card:hover .image-card__arrow{transform:translate(3px,-3px)}
.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0 0}
.gallery-toolbar__left{font-size:clamp(18px,1.25vw,25px);font-weight:600}
.gallery-toggle{display:flex;align-items:center;gap:clamp(12px,1vw,20px);border:2px solid #111;border-radius:100px;background:var(--black);color:white;cursor:pointer;padding:12px clamp(16px,1.5vw,28px);font-family:inherit;font-weight:800;font-size:clamp(22px,1.5vw,30px);line-height:1;transition:transform .2s,box-shadow .2s}
.gallery-toggle:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--lime)}
.gallery-toggle__count{display:grid;place-items:center;border-radius:100px;background:var(--lime);color:#111;min-width:42px;height:32px;font-size:20px}
.gallery-toggle__arrow{font-size:32px;font-weight:500;line-height:.7}
.closing-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1vw,20px);margin:clamp(35px,4.5vw,80px) 0 0;min-height:480px}
.closing-section .panel{padding:clamp(22px,2.1vw,42px);display:flex;flex-direction:column;justify-content:flex-start}
.closing-about{background:var(--lime)}
.closing-contact{background:#161616;color:white;scroll-margin-top:20px}
.closing-kicker{font-size:clamp(21px,1.5vw,30px);font-weight:800}
.closing-section h2{font-size:clamp(60px,6.2vw,118px);font-weight:900;line-height:.81;letter-spacing:-.028em;margin:clamp(20px,2vw,38px) 0}
.closing-dot{color:#090909}
.closing-section p{max-width:560px;font-size:clamp(22px,1.55vw,30px);line-height:1.1;font-weight:500;margin:0}
.closing-asterisk{position:absolute;right:4%;top:12%;font-size:clamp(72px,9vw,180px);transform:rotate(15deg);opacity:.2;pointer-events:none}
.closing-contact .closing-dot{color:var(--lime)}
.closing-mail{display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--lime);border:2px solid var(--lime);border-radius:80px;color:var(--black);font-weight:900;font-size:clamp(24px,2.2vw,44px);padding:14px 24px;margin-top:auto;transition:transform .2s}
.closing-mail:hover{transform:translateY(-4px)}
.closing-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 23px;margin-top:24px;font-size:clamp(19px,1.2vw,25px);font-weight:700}
.closing-links a:hover{text-decoration:underline}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;border-top:2.5px solid var(--black);padding:14px 2px 20px;font-size:clamp(18px,1.3vw,26px);font-weight:600}
.site-footer strong{font-weight:900}
.site-footer a:hover{text-decoration:underline}
/* IMAGE VIEWER */
.portfolio-lightbox{border:0;border-radius:0;background:transparent;color:#fff;padding:0;margin:auto;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;overflow:hidden}
.portfolio-lightbox::backdrop{background:rgba(0,0,0,.93);backdrop-filter:blur(10px)}
.lightbox-panel{height:100%;width:100%;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;gap:6px;align-items:center;padding:72px 16px 24px}
.lightbox-close,.lightbox-prev,.lightbox-next{display:grid;place-items:center;padding:0;color:#fff;border:2px solid #fff;background:rgba(0,0,0,.48);border-radius:50%;width:52px;height:52px;cursor:pointer;font-family:inherit;font-size:32px;line-height:1;justify-self:center}
.lightbox-prev svg,.lightbox-next svg{display:block;width:28px;height:28px;flex:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.portfolio-lightbox button:focus-visible{outline-color:#bbdf1d;outline-offset:4px}
.lightbox-close{position:absolute;right:clamp(15px,3vw,54px);top:clamp(14px,2vw,34px);z-index:3;font-size:25px}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:var(--lime);color:#111;border-color:var(--lime)}
.lightbox-figure{min-height:0;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}
.lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 156px);object-fit:contain;border-radius:6px}
.lightbox-caption{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;font-size:clamp(21px,1.7vw,31px);font-weight:700;text-align:center;line-height:1}
.lightbox-caption__count{opacity:.62;font-weight:500}
body.lightbox-active{overflow:hidden}
@media(max-width:1200px){
 .gallery-grid--logos{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gallery-grid--banners{columns:2}
 .closing-section{min-height:420px}
}
@media(max-width:680px){
 .gallery-section{padding:16px 2px 38px;margin-top:48px}
 .gallery-section--banners{margin-top:8px}
 .section-meta{font-size:16px}
 .section-count{padding:5px 10px}
 .section-heading{padding:10px 0 20px}
 .section-heading h2{font-size:clamp(70px,19vw,120px)}
 .section-heading p{margin-top:10px;font-size:20px;max-width:270px}
 .section-deco{font-size:68px}
 .gallery-grid--logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .gallery-grid--banners{columns:1}
 .gallery-grid--banners .image-card{margin-bottom:12px}
 .image-card__caption{padding:10px}
 .image-card__label{font-size:24px}
 .image-card__num{font-size:13px}
 .image-card__arrow{font-size:24px}
 .gallery-toolbar{gap:12px;margin-top:18px;align-items:flex-start;flex-direction:column}
 .gallery-toolbar__left{font-size:18px}
 .gallery-toggle{width:100%;justify-content:space-between;font-size:23px;padding:12px 16px}
 .closing-section{grid-template-columns:1fr;min-height:0;gap:12px;margin-top:30px}
 .closing-section .panel{min-height:350px;padding:22px}
 .closing-section h2{font-size:clamp(65px,14vw,95px);margin:25px 0}
 .closing-section p{font-size:22px}
 .closing-mail{margin-top:28px;font-size:28px;padding:12px 19px}
 .closing-links{font-size:20px}
 .site-footer{flex-wrap:wrap;font-size:17px;margin-top:16px}
 .site-footer span{order:3;width:100%}
 .lightbox-panel{grid-template-columns:44px minmax(0,1fr) 44px;gap:1px;padding:64px 4px 30px}
 .lightbox-close{width:43px;height:43px}
 .lightbox-prev,.lightbox-next{width:39px;height:39px;font-size:25px}
 .lightbox-prev svg,.lightbox-next svg{width:23px;height:23px}
 .lightbox-image{max-height:calc(100dvh - 170px)}
 .lightbox-caption{font-size:20px}
}
/* Flox artwork has transparent pale-white strokes; a deep slate canvas preserves its contrast without altering the original logo. */
.image-card[data-slug="flox"] .image-card__media{background:#172B35}

/* v4: The supplied wide Inquru SVG is layered into the hero (not baked into the background). */
.project-inquru .inquru-art{width:68%;height:116%;right:-3.8%;top:-7%;object-fit:contain;object-position:right center}
.project-inquru:hover .inquru-art{transform:translateX(-8px) scale(1.015)}

/* v4: original skateboard-dog SVG moves on hovering anywhere over the green panel. */
.dog-illustration{transform-origin:50% 85%;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.personal:hover .dog-illustration{transform:translateX(-6%) scale(1.055)}
.personal:hover .remote-badge{transform:rotate(-5deg) scale(1.05)}

/* v4: fit entire tall logo images within their square presentation frames. */
.image-card[data-slug="skate-and-destroy"] .image-card__media img,
.image-card[data-slug="blazepay"] .image-card__media img{inset:clamp(17px,1.75vw,31px);width:calc(100% - 2 * clamp(17px,1.75vw,31px));height:calc(100% - 2 * clamp(17px,1.75vw,31px))}
/* Give the Wallpaper Paradise mark a slightly higher visual centre. */
.image-card[data-slug="wallpaper-paradise"] .image-card__media img{object-position:center 42%;transform:translateY(-9px) scale(.97)}
.image-card[data-slug="wallpaper-paradise"]:hover .image-card__media img{transform:translateY(-9px) scale(1.003)}
/* The user's new Informatics art should nearly fill its tile. */
.image-card[data-slug="informatics"] .image-card__media img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
@media(max-width:680px){
 .project-inquru .inquru-art{width:100%;height:100%;right:-35%;top:0;object-fit:contain}
 .gallery-section--logos{margin-top:15px}
 .image-card[data-slug="wallpaper-paradise"] .image-card__media img{transform:translateY(-4px) scale(.95)}
}
@media(prefers-reduced-motion:reduce){.dog-illustration{transition:none!important}.personal:hover .dog-illustration{transform:none!important}.personal:hover .remote-badge{transform:rotate(-10deg)!important}}
/* The new mascot can flow behind the mobile headline; keep letters on solid brand yellow. */
@media(max-width:680px){.inquru-headline{background:var(--yellow);padding-right:6px}}


/* Alpha v5: requested visual refinements */
/* Only clip the composition at the viewport edge, never within the yellow project card. */
body{overflow-x:clip}
@media(min-width:1101px){
  .project-inquru{overflow:visible;z-index:4}
  .project-inquru .inquru-art{width:72%;height:130%;right:-7.8%;top:-5%;object-position:right center}
  .project-inquru:hover .inquru-art{transform:translate(-5px,-3px) scale(1.008)}
  .project-wake,.project-fylto{z-index:1}
}
/* Let the artwork fill the available square without truncating skull, lettering or board. */
.image-card[data-slug="skate-and-destroy"] .image-card__media img{transform:scale(1.26)}
.image-card[data-slug="skate-and-destroy"]:hover .image-card__media img{transform:scale(1.285)}
.gallery-toggle__arrow{display:inline-block;min-width:1em;text-align:center;transition:transform .2s}
/* Avoid horizontal scrolling when Inquru's right hand goes beyond the viewport. */
html{overflow-x:clip}


/* Alpha v6: interactive Inquru storyboard, composed entirely of the supplied SVG layers.
   All art positions are relative to the yellow card, so the scene scales as one unit. */
@media (min-width:1101px) {
  .project-inquru{overflow:visible;z-index:5}
  .project-inquru .inquru-headline{transform-origin:left center;will-change:transform}
}
/* The clipping surface extends to the inner edge of the card, so the two characters
   remain tucked behind its edge except for intentionally overlaid hands and leg. */
.inquru-scene{position:absolute;inset:0;border-radius:calc(var(--radius) - 3px);overflow:hidden;z-index:1;pointer-events:none}
.inquru-main-character,.inquru-peek-character,.inquru-leg-duplicate,.inquru-hand,.inquru-droplet{
  position:absolute;display:block;max-width:none;height:auto;pointer-events:none;user-select:none;
}
.inquru-main-character{
  z-index:1;width:70%;right:9%;top:7%;transform-origin:58% 48%;
  transform:translateX(22%) scale(.96);
  transition:transform .78s cubic-bezier(.22,1,.36,1);will-change:transform;
}
.inquru-peek-character{
  z-index:2;width:24%;right:-5%;top:29%;transform-origin:90% 40%;
  transform:translateX(104%) rotate(7deg);
  transition:transform .83s cubic-bezier(.2,.78,.18,1);will-change:transform;
}
.inquru-leg-window{
  position:absolute;top:100%;right:-5%;width:24%;height:32%;overflow:hidden;
  pointer-events:none;z-index:12;
  opacity:0;transform:translateX(104%) rotate(7deg);transform-origin:90% -150%;
  transition:transform .83s cubic-bezier(.2,.78,.18,1),opacity .2s ease;
}
.inquru-leg-duplicate{width:100%;height:auto;right:0;bottom:0}
.inquru-hand{z-index:11;width:4%;filter:none;transition:transform .62s cubic-bezier(.2,.8,.2,1)}
.inquru-hand--top{right:-2.5%;top:14%;transform:rotate(0deg)}
.inquru-hand--bottom{right:-2.5%;top:62%;transform:rotate(0deg)}
.inquru-droplet{z-index:3;opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rotate,0deg)) scale(0);transform-origin:var(--origin,85% 90%);transition:transform .48s cubic-bezier(.19,1.4,.33,1),opacity .16s ease;will-change:transform}
.inquru-droplet--one{left:36%;top:19%;width:4.3%;--rotate:-22deg;--dx:23px;--dy:15px;--origin:100% 95%}
.inquru-droplet--two{left:29.5%;top:66%;width:3.5%;--rotate:42deg;--dx:18px;--dy:-17px;--origin:95% 0%}
.inquru-droplet--three{left:69%;top:27%;width:5.6%;--rotate:-48deg;--dx:-22px;--dy:15px;--origin:0% 90%}
.inquru-droplet--four{left:90%;top:6%;width:3.4%;--rotate:-15deg;--dx:-14px;--dy:28px;--origin:50% 100%}
.inquru-droplet--five{left:81.5%;top:65%;width:3.6%;--rotate:30deg;--dx:12px;--dy:-16px;--origin:95% 5%}
.inquru-droplet--six{left:95%;top:41%;width:3.8%;--rotate:-25deg;--dx:0px;--dy:0px;--origin:85% 90%}

@media(max-width:1100px){
  /* Mobile/tablet: retain a stable single-character visual until the responsive hero is redesigned. */
  .inquru-main-character{width:77%;right:-8%;top:5%;transform:none}
  .inquru-peek-character,.inquru-leg-window,.inquru-hand,.inquru-droplet{display:none}
}
@media(max-width:680px){.inquru-main-character{width:105%;right:-48%;top:1%;opacity:.93}}
@media(prefers-reduced-motion:reduce){
  .inquru-main-character,.inquru-peek-character,.inquru-leg-window,.inquru-hand,.inquru-droplet,.inquru-headline{transition:none!important;animation:none!important}
}
/* Refined against the reference storyboard: text remains unobstructed. */


@media(min-width:1101px){
  /* Preserve a small amount of visible paper around the hands at the viewport's right edge. */
  .inquru-hand--top,.inquru-hand--bottom{right:-1.1%}
}

/* ===== Alpha v7: embedded Inquru calibrator, occupying the original Fylto grid tile. ===== */
.fylto-original{position:absolute;inset:0;z-index:1}
.calibration-workspace{position:absolute;inset:0;z-index:25;color:#121819;background:#f7f5ed;display:flex;flex-direction:column;text-align:left;border-radius:calc(var(--radius) - 3px);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.calibration-workspace[hidden],.cal-import[hidden],.cal-reopen[hidden]{display:none!important}
.cal-top{display:flex;justify-content:space-between;align-items:center;flex:none;padding:10px 14px;background:#d7fa3f;border-bottom:2px solid #111;gap:8px}
.cal-brow{font:800 10px/1 Arial,sans-serif;letter-spacing:1.3px}
.cal-plain{border:1.5px solid #111;border-radius:7px;background:#fff;cursor:pointer;min-width:28px;height:25px;font-size:14px;font-weight:900;line-height:1}
.cal-body{padding:12px 14px 15px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}
.cal-body h3{font:900 clamp(22px,2.2vw,36px)/1 'Barlow Condensed',Impact,sans-serif;margin:0 0 11px;letter-spacing:0}
.cal-body h3 span{color:#3163ed}
.cal-label{display:block;font:800 10px/1.1 Arial,sans-serif;letter-spacing:.8px;margin:10px 0 5px}
.cal-state-picker{display:grid;grid-template-columns:1fr 1fr 32px;gap:5px}
.cal-state-button{background:#fff;color:#111;border:1.5px solid #111;padding:7px 2px;font:800 11px/1 Arial,sans-serif;border-radius:7px;cursor:pointer}
.cal-state-button.is-active{background:#111;color:#d7fa3f}
.cal-play{height:30px}
.cal-select{width:100%;background:#fff;color:#111;border:1.5px solid #111;border-radius:7px;padding:8px;font:600 12px Arial,sans-serif;min-width:0}
.cal-link{font:600 11px/1.35 Arial,sans-serif;display:flex;align-items:center;gap:7px;margin-top:10px;cursor:pointer}
.cal-link input{accent-color:#3761f2;width:16px;height:16px}
.cal-hint{font:11px/1.45 Arial,sans-serif;color:#62666b;margin:7px 0 9px}
.cal-control{margin:7px 0 12px}
.cal-control__label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;font:700 11px Arial,sans-serif}
.cal-control__input{display:flex;align-items:center;gap:7px}
.cal-control input[type=range]{width:100%;min-width:0;accent-color:#315cff;cursor:pointer}
.cal-control input[type=number]{width:63px;min-width:0;padding:4px 4px;background:#fff;border:1px solid #aaa;border-radius:5px;font:700 12px Arial,sans-serif;text-align:center;color:#111}
.cal-control small{color:#62666b;font-size:10px;width:15px}
.cal-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.cal-button{background:white;border:1.5px solid #111;color:#111;border-radius:7px;padding:8px 4px;font:800 10px/1.1 Arial,sans-serif;cursor:pointer}
.cal-button:hover{background:#e5eaf8}
.cal-primary{background:#d7fa3f}
.cal-danger{color:#b72121}
.cal-import{margin-top:10px}
.cal-import textarea,.cal-export-text{display:block;resize:vertical;width:100%;font:11px/1.35 monospace;color:#111;background:#fff;border:1px solid #b9bec1;border-radius:7px;padding:7px;margin-top:8px;min-height:38px}
.cal-import .cal-button{margin-top:6px;width:100%}
.cal-export-text{height:36px}
.cal-status{color:#43604c;font:11px/1.3 Arial,sans-serif;margin:7px 0 0}
.cal-reopen{position:absolute;z-index:29;bottom:15px;right:15px;background:#d7fa3f;border:2px solid #111;border-radius:30px;padding:8px 14px;font:900 13px Arial,sans-serif;cursor:pointer;box-shadow:3px 3px 0 #111}
.calibration-anchor{display:none;position:absolute;z-index:30;width:18px;height:18px;pointer-events:none;border:1.5px dashed #ec2434;border-radius:50%;background:#ffffffbb;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fff8}
.calibration-anchor span{display:grid;place-items:center;color:#d50020;font:900 19px/1 Arial,sans-serif;height:100%}
.calibration-enabled .calibration-anchor{display:block}
.calibration-enabled .calibration-selected{outline:1.5px dashed #f04455;outline-offset:2px}
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-main-character,
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-peek-character,
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-leg-window,
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-hand,
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-droplet,
.calibration-enabled:not(.calibration-playing) .project-inquru .inquru-headline{transition:none!important}
.calibration-playing .project-inquru .inquru-main-character,
.calibration-playing .project-inquru .inquru-peek-character,
.calibration-playing .project-inquru .inquru-leg-window,
.calibration-playing .project-inquru .inquru-hand,
.calibration-playing .project-inquru .inquru-droplet,
.calibration-playing .project-inquru .inquru-headline{transition:left .75s cubic-bezier(.22,1,.36,1),top .75s cubic-bezier(.22,1,.36,1),width .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),opacity .55s ease,letter-spacing .75s ease!important}
@media(max-width:1100px){.calibration-workspace,.cal-reopen{display:none!important}.fylto-original{display:block!important}.calibration-anchor{display:none!important}}


/* ===== Alpha v8: single movement path for the peeking Inquru and leg. ===== */
@media (min-width:1101px) {
  /* Leg is only the portion of the duplicated SVG below the card edge. No
     independent leg transform, easing, rotation pivot or keyframes. */
  .project-inquru .inquru-leg-window {
    position:absolute;left:0;right:auto;top:calc(100% - 1px);
    width:100%;height:85%;overflow:hidden;z-index:12;
    transform:none!important;transform-origin:initial!important;
    opacity:1!important;pointer-events:none;transition:none!important;
  }
  .project-inquru .inquru-leg-duplicate {
    position:absolute;max-width:none;height:auto;
    transform-origin:90% 40%;will-change:transform,top,left,width;
  }
  .project-inquru .inquru-peek-character,
  .project-inquru .inquru-leg-duplicate {
    transition:left .75s cubic-bezier(.22,1,.36,1),
               top .75s cubic-bezier(.22,1,.36,1),
               width .75s cubic-bezier(.22,1,.36,1),
               transform .75s cubic-bezier(.22,1,.36,1),
               opacity .55s ease!important;
  }
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-leg-duplicate,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-peek-character{
    transition:none!important;
  }
  .calibration-playing .project-inquru .inquru-leg-duplicate,
  .calibration-playing .project-inquru .inquru-peek-character {
    transition:left .75s cubic-bezier(.22,1,.36,1),
               top .75s cubic-bezier(.22,1,.36,1),
               width .75s cubic-bezier(.22,1,.36,1),
               transform .75s cubic-bezier(.22,1,.36,1),
               opacity .55s ease!important;
  }
}

/* Calibration entry button: visible only when the editor is closed.
   It is layered over Fylto without altering the tile or grid dimensions. */
.cal-reopen{display:block}
.cal-reopen[hidden]{display:none!important}
.cal-reopen:hover{background:#c3f52a;transform:translateY(-2px)}
.cal-reopen:focus-visible{outline:3px solid #3761f2;outline-offset:3px}

/* ===== Alpha v9: deterministic calibrated initial frame =====
   The default state is now part of the stylesheet: no pre-calibration frame
   and no competing legacy :hover selector before the initial script runs. */
@media(min-width:1101px) {
  .project-inquru .inquru-main-character{left:56%;top:4.3%;right:auto;bottom:auto;width:40.8%;opacity:1;transform-origin:58% 48%;transform:rotate(0deg) scale(0.88);}
  .project-inquru .inquru-peek-character{left:111%;top:29%;right:auto;bottom:auto;width:24%;opacity:1;transform-origin:90% 40%;transform:rotate(78deg) scale(1);}
  .project-inquru .inquru-hand--top{left:97.8%;top:11.5%;right:auto;bottom:auto;width:4%;opacity:1;transform-origin:center;transform:rotate(0deg) scale(0.86);}
  .project-inquru .inquru-hand--bottom{left:98.2%;top:68%;right:auto;bottom:auto;width:4%;opacity:1;transform-origin:center;transform:rotate(-4deg) scale(0.84);}
  .project-inquru .inquru-droplet--one{left:60%;top:31.1%;right:auto;bottom:auto;width:4.3%;opacity:0;transform-origin:100% 95%;transform:rotate(-54deg) scale(0);}
  .project-inquru .inquru-droplet--two{left:62.9%;top:22.2%;right:auto;bottom:auto;width:3.5%;opacity:0;transform-origin:95% 0%;transform:rotate(-30deg) scale(0.14);}
  .project-inquru .inquru-droplet--three{left:93.3%;top:24%;right:auto;bottom:auto;width:4.6%;opacity:0;transform-origin:0% 90%;transform:rotate(115deg) scale(0);}
  .project-inquru .inquru-droplet--four{left:100%;top:8.5%;right:auto;bottom:auto;width:3.5%;opacity:0;transform-origin:50% 100%;transform:rotate(-15deg) scale(0);}
  .project-inquru .inquru-droplet--five{left:100%;top:53%;right:auto;bottom:auto;width:3%;opacity:0;transform-origin:95% 5%;transform:rotate(20deg) scale(0);}
  /* New sixth droplet starts hidden in both CSS and JS to avoid a first-frame jump. */
  .project-inquru .inquru-droplet--six{left:95%;top:41%;right:auto;bottom:auto;width:3.8%;opacity:0;transform-origin:85% 90%;transform:rotate(-25deg) scale(0);}
  .project-inquru .inquru-headline{left:1.5%;top:19%;width:auto;letter-spacing:1.8px;transform:scaleX(1.32);transform-origin:left center}
  .project-inquru .inquru-leg-duplicate{left:111%;top:calc(-83.5294118% + 1px);width:24%;transform:rotate(78deg) scale(1);opacity:1;transform-origin:90% 40%;}
  /* No movement at page construction; transitions enabled only once calibrated. */
  html:not(.inquru-ready) .project-inquru .inquru-main-character,
  html:not(.inquru-ready) .project-inquru .inquru-peek-character,
  html:not(.inquru-ready) .project-inquru .inquru-leg-duplicate,
  html:not(.inquru-ready) .project-inquru .inquru-hand,
  html:not(.inquru-ready) .project-inquru .inquru-droplet,
  html:not(.inquru-ready) .project-inquru .inquru-headline{transition:none!important;}
  html.inquru-ready .project-inquru .inquru-main-character,
  html.inquru-ready .project-inquru .inquru-peek-character,
  html.inquru-ready .project-inquru .inquru-leg-duplicate,
  html.inquru-ready .project-inquru .inquru-hand,
  html.inquru-ready .project-inquru .inquru-droplet,
  html.inquru-ready .project-inquru .inquru-headline{
    transition:left .75s cubic-bezier(.22,1,.36,1),top .75s cubic-bezier(.22,1,.36,1),width .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),opacity .55s ease,letter-spacing .75s ease!important;
  }
  /* Preview-only and calibrating still suppress interactive transitions. */
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-main-character,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-peek-character,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-leg-duplicate,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-hand,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-droplet,
  .calibration-enabled:not(.calibration-playing) .project-inquru .inquru-headline{transition:none!important}
}
@media(prefers-reduced-motion:reduce){
  .project-inquru .inquru-main-character,
  .project-inquru .inquru-peek-character,
  .project-inquru .inquru-leg-duplicate,
  .project-inquru .inquru-hand,
  .project-inquru .inquru-droplet,
  .project-inquru .inquru-headline{transition:none!important;animation:none!important}
}

/* Alpha v11: editor remains in code for future calibration, but hidden from ordinary visitors.
   Add ?calibration=1 to the URL to re-enable it. */
html:not(.dev-calibration) .calibration-workspace,
html:not(.dev-calibration) .cal-reopen {display:none!important;}
html:not(.dev-calibration) .fylto-original {display:block!important;}
/* Case-study pages */
.case-page{padding-bottom:30px;display:block;}
.case-header{padding:24px 1% 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.case-back{font-weight:900;font-size:clamp(19px,1.4vw,26px);border:2px solid var(--black);border-radius:50px;padding:9px 20px;transition:background .2s,transform .2s;}
.case-back:hover{background:var(--lime);transform:translateX(-4px)}
.case-sup{font-weight:800;font-size:clamp(18px,1.35vw,27px)}
.case-hero{border:var(--border);border-radius:var(--radius);overflow:hidden;position:relative;min-height:clamp(370px,37vw,670px)}
.case-hero h1{position:relative;z-index:2;margin:24px 0 0;font-size:clamp(100px,13vw,245px);line-height:.75;letter-spacing:-.035em;font-weight:900}
.case-hero-content{position:relative;z-index:2;padding:clamp(22px,3vw,55px);max-width:780px}
.case-hero-content p{font-size:clamp(22px,2vw,37px);line-height:1.08;max-width:520px;margin:33px 0}
.case-hero--inquru{background:var(--yellow)}
.case-hero--inquru .case-mascot{position:absolute;right:-6%;top:1%;height:108%;width:67%;object-fit:contain;pointer-events:none}
.case-hero--wake{background:#0788dc;color:white}
.case-hero--wake .case-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero--wake .case-boat{position:absolute;right:-6%;bottom:-18%;width:70%;height:111%;object-fit:contain;pointer-events:none}
.case-hero--wake:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,35,98,.8),transparent 80%);pointer-events:none}
.case-hero--wake .case-hero-content{z-index:3}
.case-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.case-action{display:inline-flex;align-items:center;gap:24px;border:2px solid #111;background:#111;color:white;border-radius:50px;padding:12px 23px;font-weight:800;font-size:clamp(21px,1.55vw,28px);transition:transform .2s}
.case-action:hover{transform:translateY(-3px)}
.case-action--outline{background:transparent;color:inherit;border-color:currentColor}
.case-hero--wake .case-action{background:var(--lime);color:#111;border-color:#111}
.case-body{max-width:1500px;margin:0 auto;padding:clamp(28px,3vw,60px) 1% 10px}
.case-section-label{font-size:clamp(18px,1.3vw,25px);font-weight:800;border-top:2.5px solid var(--black);padding-top:16px;margin:0 0 24px}
.case-lead{font-size:clamp(30px,3.5vw,65px);line-height:.98;font-weight:800;max-width:1100px;margin:0 0 35px}
.case-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 50px}
.case-info{border:2px solid var(--black);border-radius:16px;padding:22px;background:#fffaf0}
.case-info small{display:block;font-size:18px;font-weight:800;margin-bottom:8px}
.case-info strong{display:block;font-size:clamp(23px,2vw,35px);line-height:1.05}
.brandbook-intro{width:100%;max-width:1100px;margin:0 auto 24px;border:2px solid #111;border-radius:18px;overflow:hidden;background:#ffed00}
.brandbook-intro img{display:block;width:100%;height:auto}
.brandbook-frame{border:2px solid #111;border-radius:20px;background:#ffed00;overflow:hidden;min-height:300px}
.brandbook-frame img{display:block;width:100%;height:auto}
.brandbook-load{display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;min-height:270px;padding:35px 20px;text-align:center}
.brandbook-load strong{font-size:clamp(30px,3vw,55px)}
.brandbook-load p{font-size:23px;line-height:1.1;max-width:680px}
.brandbook-load .case-action{background:#111;color:white}
.case-note{font-size:20px;line-height:1.3;color:#343434;margin:15px 0 25px}
.case-game-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin-top:25px}
.case-picture{position:relative;border:2px solid #111;border-radius:18px;background:#058adc;overflow:hidden;min-height:420px}
.case-picture img{position:absolute;width:100%;height:100%;object-fit:cover}
.case-picture img:last-child{object-fit:contain;width:105%;height:105%;right:-5%;top:-5%}
.case-blurb{border:2px solid #111;border-radius:18px;background:var(--lime);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between}
.case-blurb h2{margin:0;font-size:clamp(55px,5.3vw,100px);line-height:.83}
.case-blurb p{font-size:clamp(24px,2vw,38px);line-height:1.1}
.case-bottom{margin:40px 0 0;border-top:2px solid #111;padding:25px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:22px;font-weight:700}
@media(max-width:750px){.case-hero--inquru .case-mascot{opacity:.5;right:-44%;width:100%}.case-hero--wake .case-boat{right:-34%;width:110%;opacity:.7}.case-hero h1{font-size:clamp(78px,17vw,130px)}.case-info-grid{grid-template-columns:1fr}.case-game-layout{grid-template-columns:1fr}.case-picture{min-height:360px}.case-hero-content{padding:25px}.case-header{padding-inline:0}}

/* Keep the Inquru case-study headline out of the mascot's extended hand. */
.case-hero--inquru h1{font-size:clamp(88px,9.7vw,185px);letter-spacing:-.034em}
@media(max-width:750px){.case-hero--inquru h1{font-size:clamp(75px,17vw,120px)}}


/* Alpha v12: green periods only (Contact ending remains unchanged). */
/* An extra-long vertical publication can be browsed directly, no extra click. */
.brandbook-frame{position:relative;max-width:1100px;margin-inline:auto;overflow:visible;min-height:280px;background:#ffed00;}
.brandbook-frame img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.brandbook-frame #brandbook-full{display:none}
.brandbook-frame.is-fullres #brandbook-preview{display:none}
.brandbook-frame.is-fullres #brandbook-full{display:block}
.book-availability{border:2px solid #111;background:#fffaf0;border-radius:14px;padding:14px 18px;font-size:clamp(17px,1.35vw,22px);line-height:1.22;margin-top:15px;}
.book-availability strong{font-weight:900}
.book-availability a{text-decoration:underline;text-underline-offset:3px}
.book-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 20px}
.book-tools a{display:inline-flex;border:2px solid #111;border-radius:40px;padding:9px 16px;font-size:clamp(17px,1.25vw,23px);font-weight:800;transition:transform .2s}
.book-tools a:hover{transform:translateY(-2px)}
/* An on-page player that matches the site's black stroke/radius system. */
.game-embed{margin:14px 0 48px}
.game-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.game-heading h2{font-size:clamp(50px,6vw,110px);font-weight:900;line-height:.84;margin:4px 0 16px;letter-spacing:-.018em}
.game-kicker{font-size:clamp(18px,1.4vw,26px);font-weight:800}
.game-pill{border:2px solid #111;border-radius:50px;background:var(--lime);padding:8px 16px;font-size:clamp(16px,1.25vw,22px);font-weight:900;margin-bottom:16px}
.game-stage{position:relative;width:100%;background:#083669;border:2.5px solid #111;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;min-height:260px;box-shadow:7px 7px 0 #111;isolation:isolate}
.game-stage iframe{display:block;width:100%;height:100%;border:0;background:#072447}
.game-controls{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.game-controls-group{display:flex;gap:10px;flex-wrap:wrap}
.game-control{border:2px solid #111;background:var(--paper);border-radius:50px;padding:10px 18px;color:#111;cursor:pointer;font-family:inherit;font-size:clamp(17px,1.4vw,24px);font-weight:900;line-height:1;text-decoration:none;transition:transform .2s,background .2s}
.game-control:hover{transform:translateY(-2px);background:var(--lime)}
.game-control--primary{background:var(--lime)}
.game-guidance{font-size:clamp(18px,1.4vw,24px);line-height:1.15;margin:18px 0 0;color:#333;max-width:1050px}
.game-stage:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.game-stage:fullscreen iframe{width:100%;height:100%}
@media(max-width:650px){.game-stage{min-height:220px;aspect-ratio:4/3;box-shadow:4px 4px 0 #111}.game-heading h2{font-size:clamp(53px,14vw,88px)}.game-controls{align-items:stretch}.game-control{padding:10px 12px}}


/* Alpha v13 — requested visual and content refinements. */
/* The raised wave and stronger gradient sit under text in the Wake Rush hero. */
.project-wake .wake-css-wave{height:42%;bottom:-.8%;opacity:.96}
.project-wake .wake-text-shade{height:70%;width:90%;background:radial-gradient(ellipse 85% 93% at 0% 101%,rgba(0,35,93,.91) 0%,rgba(0,48,109,.69) 35%,rgba(0,51,111,.30) 70%,transparent 100%)}
.project-wake .wake-description{text-shadow:0 2px 3px rgba(0,25,70,.42)}
/* Extended About info without disturbing the dark contact block's dot. */
.closing-about p{max-width:620px;font-size:clamp(20px,1.35vw,27px);line-height:1.14}
.about-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(18px,2vw,30px);z-index:1}
.about-tags span{border:2px solid #111;border-radius:50px;padding:5px 12px;font-size:clamp(16px,1.12vw,23px);line-height:1;font-weight:800}
.closing-about .about-opportunity{font-weight:800;font-size:clamp(17px,1.15vw,23px);margin-top:clamp(16px,1.7vw,27px);max-width:620px}
.closing-about{padding-bottom:clamp(28px,2.2vw,42px)!important}
/* Editorial case details */
.case-editorial-text{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 28px}
.case-editorial-text p{font-size:clamp(22px,1.8vw,33px);line-height:1.16;font-weight:500;margin:0}
/* Brandbook is FULL BLEED: no frame, repeated cover, or sharp gallery box. */
.brandbook-immersive{width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw;margin-top:15px;background:#ffed00;scroll-margin-top:0}
.brandbook-bridge{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,#fff3aa 22%,#ffef3b 70%,#ffed00 100%);padding:clamp(45px,6vw,115px) max(3vw,calc((100vw - 1880px)/2)) clamp(28px,4vw,80px);isolation:isolate}
.brandbook-bridge:before{content:'';position:absolute;width:min(45vw,740px);aspect-ratio:1;border-radius:50%;right:-10%;top:-20%;background:radial-gradient(circle,#ffed0080,transparent 69%);pointer-events:none;z-index:-1}
.brandbook-bridge__meta,.brandbook-bridge__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:clamp(18px,1.5vw,28px);font-weight:800}
.brandbook-bridge__meta{border-top:2px solid #111;padding-top:14px}
.brandbook-bridge__main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(200px,.6fr);align-items:end;gap:22px;margin:clamp(35px,4vw,68px) 0 50px}
.brandbook-overline{font-weight:800;font-size:clamp(19px,1.35vw,27px)}
.brandbook-bridge h2{margin:13px 0 0;font-size:clamp(86px,12vw,225px);font-weight:900;line-height:.79;letter-spacing:-.045em}
.black-period{color:#111}
.brandbook-bridge__side{display:flex;flex-direction:column;gap:25px;align-items:flex-start}
.brandbook-bridge__side p{margin:0;font-size:clamp(25px,2.3vw,44px);font-weight:600;line-height:1.05;max-width:470px}
.brandbook-bridge__side span{font-size:clamp(19px,1.3vw,26px);font-weight:800}
.brandbook-bridge__bottom{border-bottom:2px solid #111;padding-bottom:15px}
.brandbook-bridge__bottom a{border:2px solid #111;border-radius:99px;padding:7px 16px;transition:background .2s,transform .2s}
.brandbook-bridge__bottom a:hover{background:#111;color:#ffed00;transform:translateY(-2px)}
.brandbook-gallery{width:100%;background:#ffed00;line-height:0;margin:0;padding:0}
.brandbook-gallery img{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;border:0;vertical-align:top}
.brandbook-end{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#ffed00;padding:35px clamp(20px,3vw,70px) 50px;font-size:clamp(21px,2vw,34px);font-weight:900;border-top:2px solid #111}
.brandbook-end a{border:2px solid #111;border-radius:99px;padding:8px 25px;transition:background .2s}
.brandbook-end a:hover{background:#111;color:#ffed00}
/* Click-to-play game: the iframe has NO src until explicitly launched. */
.game-stage--idle{background:#0b80dc}
.game-idle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3.5vw,60px);overflow:hidden;background:linear-gradient(145deg,#149dea 0%,#0876d7 45%,#072d80 100%);color:white}
.game-idle[hidden]{display:none!important}
.game-idle__eyebrow,.game-idle__bottom{font-weight:800;font-size:clamp(18px,1.5vw,30px);position:relative;z-index:2}
.game-idle__content{position:relative;z-index:2;align-self:center;text-align:center}
.game-idle__content h3{font-size:clamp(90px,11vw,230px);letter-spacing:-.04em;font-weight:900;line-height:.74;margin:15px 0 24px}
.game-idle__content h3 span{color:#bbdf1d}
.game-idle__content p{font-size:clamp(20px,1.7vw,34px);line-height:1;margin:0 0 28px}
.game-launch{border:2px solid #111;border-radius:99px;background:#bbdf1d;padding:14px 30px;font-size:clamp(24px,2vw,39px);font-weight:900;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:25px;box-shadow:6px 6px 0 #111;transition:transform .2s,box-shadow .2s}
.game-launch:hover{transform:translateY(-4px);box-shadow:6px 10px 0 #111}
.game-idle__decor{position:absolute;border:3px solid rgba(255,255,255,.3);width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;transform:rotate(-15deg)}
.game-idle__decor--one{right:-22%;top:-39%}
.game-idle__decor--two{left:-45%;bottom:-115%;width:120%;border-width:30px;border-color:#59d4f6a0}
.game-stage iframe[hidden]{display:none!important}
.game-control:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.process-section{margin-top:38px;border-top:2.5px solid #111;padding-top:25px}
.process-heading{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:start}
.process-heading>span{font-size:clamp(20px,1.4vw,28px);font-weight:800}
.process-heading h2{grid-column:2;font-size:clamp(75px,7.4vw,150px);line-height:.78;letter-spacing:-.036em;margin:0;font-weight:900}
.process-heading p{grid-column:2;max-width:780px;margin:10px 0 32px;font-size:clamp(24px,2vw,39px);line-height:1.12}
.process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.process-card{border:2px solid #111;border-radius:20px;min-height:300px;background:#fff9ee;padding:clamp(22px,2.4vw,45px);display:flex;flex-direction:column;gap:24px}
.process-card:nth-child(2){background:#bbdf1d}
.process-card:nth-child(3){background:#d9edfc}
.process-card:nth-child(4){background:#101820;color:white}
.process-card>span{font-size:clamp(19px,1.4vw,27px);font-weight:800}
.process-card h3{margin:0;font-size:clamp(55px,5vw,102px);line-height:.86;letter-spacing:-.035em;font-weight:900}
.process-card p{font-size:clamp(23px,1.9vw,35px);font-weight:500;line-height:1.12;margin:0;max-width:660px}
.process-card strong{font-size:clamp(18px,1.4vw,26px);font-weight:800;margin-top:auto}
@media(max-width:900px){.brandbook-bridge__main{grid-template-columns:1fr}.brandbook-bridge__side{flex-direction:row;justify-content:space-between;flex-wrap:wrap}.process-heading{grid-template-columns:1fr}.process-heading h2,.process-heading p{grid-column:1}}
@media(max-width:680px){.project-wake .wake-css-wave{height:46%}.project-wake .wake-text-shade{height:67%}.closing-about p{font-size:21px}.about-tags span{font-size:16px}.brandbook-bridge{padding:40px 18px 32px}.brandbook-bridge h2{font-size:clamp(68px,16vw,110px)}.brandbook-bridge__meta,.brandbook-bridge__bottom{font-size:17px}.brandbook-bridge__side{gap:12px}.brandbook-bridge__side p{font-size:24px}.brandbook-end{padding:22px 18px;font-size:19px}.game-idle{padding:16px}.game-idle__content h3{font-size:clamp(70px,17vw,110px)}.game-idle__content p{font-size:19px;margin-bottom:18px}.game-launch{font-size:23px;padding:12px 20px;box-shadow:4px 4px 0 #111}.game-idle__eyebrow,.game-idle__bottom{font-size:15px}.process-grid{grid-template-columns:1fr}.process-card{min-height:260px}.process-card h3{font-size:65px}.process-card p{font-size:23px}.process-heading h2{font-size:74px}.case-editorial-text{grid-template-columns:1fr;gap:14px}}

/* Alpha v14: yellow end-to-end footer on Inquru's brandbook page. */
.case-page--inquru{padding-bottom:0}
.inquru-footer-wrap{position:relative;left:50%;margin-left:-50vw;width:100vw;max-width:100vw;background:#ffed00;padding:clamp(26px,4vw,65px) clamp(20px,3vw,70px) clamp(22px,3vw,44px)}
.inquru-footer{max-width:1500px;margin:0 auto;border-top:2px solid #111;padding:22px 0 0}



/* Alpha v15 — full-width About / Contacts panels, with composed editorial interiors */
.closing-section{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,1.35vw,24px);
  min-height:0;
  margin-top:clamp(35px,4.5vw,80px);
}
.closing-section .panel{min-height:0;padding:clamp(25px,3vw,62px);overflow:hidden}
.closing-about__grid,
.closing-contact__grid{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  align-items:start;
  gap:clamp(26px,5vw,116px);
}
.closing-section h2{
  font-size:clamp(72px,7.1vw,142px);
  line-height:.82;
  letter-spacing:-.035em;
  margin:clamp(24px,2.5vw,48px) 0 0;
  max-width:none;
}
.closing-about__content,
.closing-contact__content{
  position:relative;
  z-index:1;
  padding-top:clamp(32px,4vw,75px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.closing-about .closing-about__content p,
.closing-about .closing-about__content .about-opportunity{
  max-width:760px;
  font-size:clamp(21px,1.65vw,32px);
  line-height:1.14;
}
.closing-about .closing-about__content .about-opportunity{
  margin-top:clamp(20px,2vw,35px);
  font-size:clamp(19px,1.28vw,26px);
}
.closing-about__content .about-tags{margin-top:clamp(20px,2vw,36px)}
.closing-contact .closing-contact__content p{
  max-width:760px;
  font-size:clamp(23px,1.8vw,34px);
}
.closing-contact__content .closing-mail{
  width:100%;
  max-width:820px;
  margin-top:clamp(44px,5vw,90px);
}
.closing-contact__content .closing-links{margin-top:24px}
.closing-about .closing-asterisk{right:3.5%;top:9%;opacity:.13}
@media (max-width:850px){
  .closing-about__grid,
  .closing-contact__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .closing-section h2{font-size:clamp(64px,11.5vw,100px);margin:24px 0 0}
  .closing-about__content,.closing-contact__content{padding-top:22px}
  .closing-about .closing-about__content p,
  .closing-about .closing-about__content .about-opportunity{font-size:clamp(20px,3.4vw,25px)}
  .closing-contact__content .closing-mail{margin-top:30px}
  .closing-section .panel{padding:clamp(21px,3vw,36px)}
}
/* Alpha v15 — framed continuous brandbook, not edge-to-edge */
.brandbook-immersive{
  position:relative;left:auto;margin:clamp(28px,3vw,60px) auto 0;
  width:min(1440px,100%);max-width:100%;
  border:2px solid #111;border-radius:clamp(16px,1.6vw,26px);
  background:#ffed00;overflow:hidden;
}
.brandbook-bridge{
  padding:clamp(32px,4vw,75px) clamp(22px,4vw,65px) clamp(22px,3vw,42px);
  background:linear-gradient(180deg,#f8edd7 0%,#ffef8a 34%,#ffed00 100%);
}
.brandbook-bridge h2{font-size:clamp(64px,9vw,150px)}
.brandbook-bridge__main{margin:clamp(30px,4vw,55px) 0 36px}
.brandbook-bookmat{
  margin:0 clamp(12px,3vw,48px) clamp(18px,2.8vw,42px);
  border:2px solid #111;border-radius:clamp(11px,1vw,16px);
  overflow:hidden;background:#111;
  box-shadow:9px 12px 0 rgba(0,0,0,.15);
}
.brandbook-bookmat__rail{
  background:#151515;color:#ffed00;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 18px;padding:13px clamp(12px,2vw,28px);
  font-size:clamp(13px,1.1vw,21px);font-weight:800;letter-spacing:.025em;
}
.brandbook-bookmat__rail--bottom{color:#f8edd7;border-top:1px solid #ffed00}
.brandbook-gallery{background:#fff;width:100%;line-height:0;margin:0;padding:0}
.brandbook-gallery img{display:block;width:100%;height:auto;max-width:100%;margin:0;padding:0;border:0}
.brandbook-end{padding:clamp(20px,2.5vw,38px) clamp(23px,4vw,66px);border-top:2px solid #111}
@media(max-width:680px){
  .brandbook-immersive{margin-top:24px;width:100%}
  .brandbook-bridge{padding:28px 17px 20px}
  .brandbook-bridge__main{grid-template-columns:1fr}
  .brandbook-bridge h2{font-size:clamp(60px,15vw,90px)}
  .brandbook-bookmat{margin:0 8px 15px;box-shadow:4px 5px 0 rgba(0,0,0,.15)}
  .brandbook-bookmat__rail{padding:10px 9px;font-size:12px}
  .brandbook-end{padding:20px 12px 24px;font-size:18px}
}


/* Alpha v16 — editorial spacing, anchor destinations, supplied mascot and project content */
.closing-section{gap:clamp(28px,3.4vw,65px);margin-top:clamp(45px,5vw,100px);margin-bottom:clamp(38px,4.2vw,80px)}
#about,#contact-details{scroll-margin-top:clamp(95px,16svh,210px)}
.closing-about__content{gap:0}
.closing-about__content .about-intro-copy{display:flex;flex-direction:column;gap:clamp(15px,1.3vw,25px);max-width:760px}
.closing-about .closing-about__content .about-intro-copy p{font-size:clamp(22px,1.68vw,33px);font-weight:500;line-height:1.15;margin:0;max-width:100%;text-wrap:pretty}
.about-intro-copy strong{font-weight:800;text-decoration:underline;text-decoration-color:rgba(17,17,17,.28);text-decoration-thickness:2px;text-underline-offset:4px}
.closing-about__content .about-tags{margin-top:clamp(26px,2vw,38px)}
.closing-about .closing-about__content .about-opportunity{margin-top:clamp(24px,2.4vw,43px)}
.closing-about .closing-asterisk{right:2.5%;top:8%;opacity:.10}
/* The book is framed, so its footer returns to the site's cream surface. */
.case-page--inquru{padding-bottom:0}
.inquru-footer-wrap{background:var(--paper);padding-top:clamp(25px,4vw,70px);padding-bottom:clamp(20px,3vw,48px)}
/* Use the original user-supplied SVG for the Inquru case hero. */
.case-hero--inquru .case-mascot{right:-5%;top:7%;height:90%;width:57%;object-fit:contain;object-position:center;opacity:1}
/* The full production summary includes motion as a distinct discipline. */
.case-info-grid--wake{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,.9vw,16px)}
.case-info-grid--wake .case-info{padding:clamp(14px,1.4vw,26px)}
.case-info-grid--wake .case-info strong{font-size:clamp(22px,1.7vw,32px)}
@media(max-width:1100px){.case-info-grid--wake{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.closing-section{gap:26px;margin:42px 0 55px}.closing-about .closing-about__content .about-intro-copy p{font-size:clamp(21px,3.4vw,26px)}.closing-about__content .about-intro-copy{gap:18px}#about,#contact-details{scroll-margin-top:clamp(64px,12svh,150px)}}
@media(max-width:750px){.case-hero--inquru .case-mascot{right:-38%;top:12%;width:110%;height:79%;opacity:.46}}
@media(max-width:550px){.case-info-grid--wake{grid-template-columns:1fr 1fr;gap:8px}.case-info-grid--wake .case-info{padding:12px}.case-info-grid--wake .case-info small{font-size:15px}.case-info-grid--wake .case-info strong{font-size:clamp(20px,5vw,25px)}.closing-section{margin-bottom:45px}}
/* Keep hero typography unobstructed on narrow phones. */
@media(max-width:750px){
 .case-hero--inquru .case-mascot{right:-50%;top:27%;width:113%;height:73%;opacity:.44;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 45%,#000 82%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 45%,#000 82%)}
}
@media(max-width:550px){
 .case-header{gap:8px}
 .case-header .site-title{font-size:clamp(19px,5.6vw,23px)}
 .case-back{white-space:nowrap;font-size:16px;padding:9px 11px}
}
/* Sufficient cream breathing room after the contact card makes #contact-details
   scroll to the intended 12-16vh top offset even at the very end of the page. */
.closing-section{margin-bottom:clamp(190px,30svh,280px)}
@media(max-width:850px){.closing-section{margin-bottom:clamp(150px,20svh,205px)}}


/* Alpha v17 — quiet quick-navigation (rather than a full sticky header). */
.floating-navigation{
  position:fixed;top:clamp(13px,2.2vw,26px);right:max(15px,calc((100vw - 1950px)/2));
  z-index:150;display:flex;flex-direction:column;align-items:flex-end;
  filter:drop-shadow(0 5px 11px rgba(0,0,0,.16));
}
.floating-navigation[hidden],.floating-navigation__panel[hidden]{display:none!important}
.floating-navigation__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  min-height:49px;padding:8px 15px 8px 19px;
  border:2px solid #111;border-radius:100px;background:var(--paper);
  color:#111;font-size:19px;line-height:1;font-weight:900;letter-spacing:.035em;
  cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.floating-navigation__toggle:hover,.floating-navigation__toggle[aria-expanded="true"]{background:var(--lime)}
.floating-navigation__toggle:hover{transform:translateY(-2px)}
.floating-navigation__burger{display:flex;flex-direction:column;gap:4px;width:20px}
.floating-navigation__burger i{display:block;height:2px;width:100%;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.floating-navigation__toggle[aria-expanded="true"] .floating-navigation__burger i:first-child{transform:translateY(6px) rotate(45deg)}
.floating-navigation__toggle[aria-expanded="true"] .floating-navigation__burger i:nth-child(2){opacity:0}
.floating-navigation__toggle[aria-expanded="true"] .floating-navigation__burger i:last-child{transform:translateY(-6px) rotate(-45deg)}
.floating-navigation__panel{
  display:flex;flex-direction:column;width:clamp(225px,17vw,300px);
  margin-top:9px;padding:7px 13px;background:var(--paper);
  border:2px solid #111;border-radius:17px;
  max-height:calc(100dvh - 95px);overflow-y:auto;
}
.floating-navigation__panel a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 8px;border-bottom:1px solid #1114;
  font-size:clamp(21px,1.4vw,26px);font-weight:800;line-height:1;
  transition:padding-left .2s ease,background .2s ease;
}
.floating-navigation__panel a:hover{background:#d7fa3f77;padding-left:14px}
.floating-navigation__panel a:last-child{border-bottom:0}
.floating-navigation__panel .floating-navigation__top{color:#444;font-size:18px}
/* Inline portfolio links belong to the text, not a separate list of tags. */
.about-intro-copy .about-project-link{
  color:inherit;font-weight:800;text-decoration:underline;
  text-decoration-thickness:2px;text-decoration-color:#111;text-underline-offset:4px;
  white-space:normal;
}
.about-project-link span[aria-hidden="true"]{font-size:.82em;white-space:nowrap}
.about-intro-copy .about-project-link:hover{background:#111;color:var(--lime);text-decoration-color:transparent}
.about-project-link__soon{
  display:inline-block;vertical-align:middle;padding:4px 6px;margin-left:3px;
  border:1.5px solid #111;border-radius:20px;font-weight:900;
  font-size:clamp(10px,.66vw,13px);letter-spacing:.01em;line-height:1;
}
/* Contact alternatives fill the same width as the large email action. */
.closing-contact__content .closing-links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;max-width:820px;gap:clamp(7px,.8vw,13px);
  margin-top:clamp(12px,1vw,20px);
}
.closing-contact__content .closing-links a{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  min-width:0;min-height:clamp(55px,4.15vw,76px);
  padding:10px clamp(12px,1.1vw,24px);
  background:var(--paper);border:2px solid var(--paper);border-radius:70px;
  color:#111;font-size:clamp(20px,1.58vw,32px);font-weight:900;
  line-height:1;white-space:nowrap;text-decoration:none;
  transition:background .2s,transform .2s;
}
.closing-contact__content .closing-links a:hover{background:var(--lime);transform:translateY(-3px);text-decoration:none}
.closing-contact__content .closing-links a span{flex:none;font-size:1.1em}
@media(max-width:850px){
  .floating-navigation{right:14px;top:12px}
  .floating-navigation__toggle{min-height:46px;font-size:18px;padding:7px 12px 7px 15px}
  .floating-navigation__panel{width:min(260px,calc(100vw - 28px))}
  .closing-contact__content .closing-links a{font-size:clamp(18px,3.4vw,27px)}
}
@media(max-width:550px){
  .closing-contact__content .closing-links{grid-template-columns:1fr;gap:9px}
  .closing-contact__content .closing-links a{font-size:24px;min-height:53px}
}
@media(prefers-reduced-motion:reduce){
  .floating-navigation__toggle,.floating-navigation__burger i,.floating-navigation__panel a,
  .closing-contact__content .closing-links a{transition:none}
}


/* Alpha v18: a single, fixed-coordinate animation canvas scales as ONE graphic.
   Reference: 1212.46875 x 374.125 card pixels. The main calibration JSON stays unchanged.
   ResizeObserver sets a uniform min(cardWidth/refWidth, cardHeight/refHeight) transform. */
@media(min-width:1101px){
  .project-inquru .inquru-stage{
    position:absolute;z-index:2;width:1212.46875px;height:374.125px;
    top:0;left:0;transform-origin:top left;pointer-events:none;
  }
  .project-inquru .inquru-stage .inquru-headline{font-size:121px;line-height:.86}
  .project-inquru .inquru-stage .inquru-scene{inset:0}
}
@media(max-width:1100px){
  .project-inquru .inquru-stage{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:none!important;}
  .project-inquru .inquru-stage .inquru-headline{font-size:clamp(70px,9vw,110px)}
}
@media(max-width:680px){
  .project-inquru .inquru-stage .inquru-headline{font-size:clamp(66px,16vw,100px)}
}
/* Logos with dark canvases must not expose the default white media behind inset image edges. */
.image-card[data-slug="flox"] .image-card__media{background:#172b35}
.image-card[data-slug="new-gta"] .image-card__media{background:#000}
.image-card[data-slug="flox"] .image-card__media img,
.image-card[data-slug="new-gta"] .image-card__media img{inset:0;width:100%;height:100%;object-fit:contain}
/* Metal House is a landscape mark: its neutral tile uses the same uniform canvas as its artwork. */
.image-card[data-slug="metal-house"] .image-card__media{background:#fff}
/* Use a smaller, fully framed boat on narrow screens so the girl and bow stay visible. */
@media(max-width:750px){
  .case-hero--wake .case-boat{
    width:93%;height:auto;max-height:62%;right:-5%;bottom:0;top:auto;
    object-fit:contain;object-position:center bottom;opacity:1;
  }
  .case-hero--wake:after{background:linear-gradient(90deg,rgba(0,36,101,.81) 0%,rgba(0,41,104,.45) 50%,transparent 95%),linear-gradient(0deg,rgba(0,37,97,.25),transparent 50%)}
}
@media(max-width:420px){
  .case-hero--wake .case-boat{width:91%;right:-2%;bottom:2%;max-height:56%}
}
/* Email dialog, complementary to the portfolio's graphic palette. */
.email-dialog{border:2px solid #111;border-radius:22px;background:#171717;color:#fff;
  padding:0;width:min(545px,calc(100vw - 28px));max-height:calc(100dvh - 26px);
  box-shadow:12px 12px 0 rgba(0,0,0,.28);font-family:'Barlow Condensed',Impact,sans-serif;
}
.email-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.email-dialog__inner{padding:clamp(20px,3.3vw,38px)}
.email-dialog__top{display:flex;justify-content:space-between;align-items:center;color:var(--lime);font-size:20px;font-weight:800}
.email-dialog__close{border:1.5px solid #fff;border-radius:50%;color:#fff;background:transparent;cursor:pointer;font-size:28px;width:39px;height:39px;line-height:1}
.email-dialog h2{font-size:clamp(61px,10vw,95px);line-height:.82;margin:30px 0 23px;font-weight:900}
.email-dialog h2 span{color:var(--lime)}
.email-dialog p{font-size:clamp(20px,2.8vw,25px);line-height:1.1;margin:0 0 24px}
.email-dialog__address{border:1px solid #6b6b6b;border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:9px}
.email-dialog__address>span:first-child{color:#bfbfbf;font-size:16px;font-weight:800}
.email-dialog__address strong{font-size:clamp(22px,4.5vw,30px);font-weight:700;overflow-wrap:anywhere}
.email-dialog__address button{background:var(--lime);border:2px solid var(--lime);border-radius:60px;color:#111;padding:11px;cursor:pointer;font-size:24px;font-weight:900}
.email-dialog__feedback{font-size:16px;min-height:19px;color:var(--lime)}
.email-dialog__services{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.email-dialog__services a{border:2px solid #f8edd7;border-radius:50px;padding:12px 9px;text-align:center;font-weight:800;font-size:21px;color:#111;background:var(--paper)}
.email-dialog__services a:hover,.email-dialog__other:hover{background:var(--lime);color:#111}
.email-dialog__other{display:block;color:#eaeaea;text-align:center;font-size:18px;font-weight:700;margin-top:17px}
.email-dialog :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media(max-width:380px){.email-dialog__services{grid-template-columns:1fr}}
/* Keep the address on a single readable line wherever possible on mobile. */
@media(max-width:550px){.email-dialog__address strong{font-size:clamp(17px,5vw,23px);letter-spacing:-.01em}}


/* ALPHA V19: contact modal interaction / accessibility polish */
.email-dialog__close {display:grid;place-items:center;padding:0;line-height:1;}
.email-dialog__close span {display:block;font:400 23px/1 Arial, sans-serif;transform:none;margin:0;}
.email-dialog__other {display:flex;justify-content:center;align-items:center;margin-top:12px;min-height:49px;padding:11px 16px;border:2px solid var(--paper);border-radius:999px;color:#fff;background:transparent;font-size:clamp(18px,2.3vw,21px);font-weight:800;transition:background .15s,color .15s;}
.email-dialog__services a {display:flex;align-items:center;justify-content:center;min-width:0;min-height:49px;padding:9px 9px;font-size:clamp(16px,2vw,20px);white-space:nowrap;line-height:1;}
@media(max-width:550px){
 .email-dialog__services {gap:9px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .email-dialog__services a{font-size:clamp(14px,3.6vw,18px);padding:8px 5px;min-height:42px}
 .email-dialog__other{min-height:43px;font-size:17px}
 .email-dialog__feedback:empty{min-height:0;display:none}
 .email-dialog__inner{padding:clamp(16px,5vw,24px)}
}
/* ALPHA V19: fixed calibration layer. Align to card TOP, not bottom, to prevent
   headline drift toward the description at intermediate widths (e.g. 1245px). */
@media(min-width:1101px){
 .project-inquru .inquru-stage{top:0!important;transform-origin:top left}
 .project-inquru .inquru-stage .inquru-headline{z-index:5}
}
/* Tablet gets independent non-hover composition, without sharing desktop coordinates. */
@media(min-width:681px) and (max-width:1100px){
 .project-inquru{overflow:hidden}
 .project-inquru .inquru-stage{inset:0!important;width:100%!important;height:100%!important}
 .project-inquru .inquru-main-character{width:min(58%,430px);right:1%;left:auto;top:11%;opacity:1;transform:none!important}
 .project-inquru .inquru-headline{left:3%!important;top:27%!important;font-size:clamp(65px,8vw,103px)!important;letter-spacing:-.02em!important;transform:none!important;width:auto!important}
 .project-inquru .inquru-description{left:3%;top:62%;max-width:60%;padding-right:10px;background:var(--yellow)}
 .project-inquru .inquru-peek-character,.project-inquru .inquru-hand,.project-inquru .inquru-droplet,.project-inquru .inquru-leg-window{display:none!important}
}
/* Narrow phone: dedicated layout (peek character ONLY), no CSS stretch applied
   from the desktop calibrator, and reserved text zone. */
@media(max-width:680px){
 .personal-main{min-height:620px;padding:23px 19px}
 .personal{min-height:0}
 .intro-title{font-size:clamp(51px,12.8vw,82px);max-width:100%}
 .intro-description{font-size:clamp(18px,4.45vw,24px);max-width:90%}
 .intro-cta{top:53%;bottom:auto;left:19px;gap:10px}
 .dog-illustration{width:min(55%,230px);right:3%;bottom:3%;transform:none!important}
 .star-doodle{display:none!important}
 .project-inquru{height:450px;overflow:hidden;isolation:isolate}
 .project-inquru .inquru-stage{inset:0!important;width:100%!important;height:100%!important;left:0!important;top:0!important;transform:none!important;overflow:hidden}
 .project-inquru .inquru-main-character{display:none!important}
 .project-inquru .inquru-peek-character{
   display:block!important;position:absolute!important;
   top:41%!important;left:auto!important;right:-15%!important;
   width:55%!important;opacity:1!important;transform:none!important;transition:none!important;
   z-index:1;max-width:none;
 }
 .project-inquru .inquru-leg-window,.project-inquru .inquru-hand,.project-inquru .inquru-droplet{display:none!important}
 .project-inquru .inquru-headline{
   position:absolute!important;top:21%!important;left:15px!important;
   font-size:clamp(66px,17.1vw,99px)!important;line-height:.85!important;
   letter-spacing:-.025em!important;transform:none!important;max-width:calc(100% - 25px)!important;
   width:auto!important;background:transparent!important;z-index:5
 }
 .project-inquru .inquru-description{
   top:61%!important;left:15px!important;max-width:53%;
   background:var(--yellow);font-size:clamp(18px,4.65vw,25px)!important;
   line-height:1.02!important;padding:4px 5px 4px 0;z-index:6
 }
 .project-inquru .tag-row{z-index:6;bottom:14px;left:13px;max-width:calc(100% - 20px)}
 .project-inquru .tag-row span{background:var(--yellow);font-size:clamp(12px,3.3vw,18px)}
}
@media(max-width:385px){
 .personal-main{min-height:590px}
 .intro-cta{top:53%}
 .dog-illustration{width:54%;right:1%;bottom:3%}
 .project-inquru .inquru-headline{font-size:clamp(58px,17vw,69px)!important}
 .project-inquru .inquru-peek-character{right:-21%!important;width:61%!important}
}
/* At intermediate desktop widths keep headline and descriptors in separate vertical bands. */
@media(min-width:1101px) and (max-width:1440px){
 .project-inquru .inquru-description{top:68%;font-size:clamp(18px,1.55vw,23px)}
 .project-inquru .tag-row{bottom:13px}
}
/* WAKE RUSH case: reserve mobile headline / description space; boat sits below copy. */
@media(max-width:750px){
 .case-hero--wake{min-height:690px;display:flex;flex-direction:column}
 .case-hero--wake .case-hero-content{position:relative;z-index:5;padding:22px;display:flex;flex-direction:column;width:100%;max-width:none}
 .case-hero--wake .case-hero-content h1{font-size:clamp(85px,22vw,126px);margin:22px 0 0;line-height:.79}
 .case-hero--wake .case-hero-content p{max-width:100%;font-size:clamp(19px,5vw,24px);line-height:1.12;margin:18px 0 0;max-width:330px}
 .case-hero--wake .case-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:18px;width:100%}
 .case-hero--wake .case-action{display:flex;justify-content:center;padding:10px 5px;font-size:clamp(14px,4vw,20px);line-height:1;gap:4px;text-align:center;white-space:nowrap;min-width:0}
 .case-hero--wake .case-boat{left:auto;right:-1%;width:93%;max-height:53%;height:auto;bottom:0;top:auto;object-fit:contain;object-position:right bottom;opacity:1}
 .case-hero--wake:after{background:linear-gradient(180deg,rgba(0,38,92,.78) 0%,rgba(0,41,103,.53) 34%,transparent 63%),linear-gradient(90deg,rgba(0,44,98,.45),transparent 85%)}
 .case-hero--wake .case-hero-content{background:linear-gradient(180deg,rgba(0,48,109,.33),transparent)}
 /* This is a tall game, not a landscape video. */
 .game-stage{height:auto;aspect-ratio:2/3;min-height:0;max-height:none;box-shadow:4px 4px 0 #111}
 .game-stage iframe{position:absolute;inset:0;width:100%;height:100%;display:block;}
 .game-stage .game-idle{padding:clamp(16px,5vw,28px)}
 .game-stage .game-idle__content h3{font-size:clamp(88px,24vw,144px)}
 .game-stage .game-idle__content p{font-size:clamp(20px,5vw,25px)}
 .game-stage .game-launch{font-size:clamp(19px,5vw,28px);padding:13px 18px}
}
/* Once the game is loaded, fill tall stage; fullscreen still fills the actual viewport. */
@media(max-width:750px){.game-stage:fullscreen{aspect-ratio:auto;height:100dvh;width:100vw;max-height:none}}
/* Language switch: faithful to the original graphic UI. */
.lang-switch{display:inline-flex;align-items:center;border:2px solid #111;border-radius:60px;overflow:hidden;flex:none;white-space:nowrap;font-size:clamp(17px,1.15vw,23px);font-weight:900;line-height:1;background:var(--paper)}
.lang-switch a{display:block;padding:7px 12px;color:#111}
.lang-switch a[aria-current="page"]{background:var(--lime)}
.lang-switch a:hover:not([aria-current="page"]){background:#fff}
.site-header .lang-switch{margin-left:6px}
@media(max-width:1050px){.main-nav{gap:7px;font-size:clamp(15px,1.6vw,21px)}.site-title{font-size:clamp(22px,2.4vw,35px)}}
@media(max-width:850px){.site-header .main-nav{display:none}.mobile-nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;width:43px;height:40px;border:2px solid #111;border-radius:12px;background:transparent;cursor:pointer}.mobile-nav-toggle span{width:20px;height:2px;background:#111;display:block}.mobile-nav{display:flex;flex-direction:column;gap:10px;background:#fffdf8;border:2px solid #111;border-radius:15px;padding:15px;margin-bottom:10px;font-size:22px;font-weight:800}.mobile-nav[hidden]{display:none}.site-header>.lang-switch{margin-left:auto}.site-header{gap:8px}}
@media(min-width:851px){.site-header>.lang-switch{display:inline-flex}}
@media(max-width:380px){.lang-switch a{padding:7px 9px}.site-title{font-size:24px}}
.case-header .lang-switch{margin-left:auto}
/* Ukrainian typography: Cyrillic-capable condensed typeface. */
html[lang="uk"]{font-family:'Barlow Condensed','Arial Narrow',sans-serif}
html[lang="uk"] .intro-title{font-size:clamp(60px,5.1vw,103px);letter-spacing:-.025em}
html[lang="uk"] .intro-title span{white-space:nowrap}
html[lang="uk"] .intro-description{letter-spacing:0}
@media(min-width:1101px) and (max-width:1460px){html[lang="uk"] .intro-title{font-size:clamp(47px,4.35vw,68px)}}
@media(max-width:1100px){html[lang="uk"] .intro-title{font-size:clamp(70px,9.1vw,112px)}}
@media(max-width:680px){html[lang="uk"] .intro-title{font-size:clamp(43px,10.8vw,62px)}html[lang="uk"] .intro-description{font-size:clamp(17px,4.25vw,23px)}}
html[lang="uk"] .case-header,html[lang="uk"] .email-dialog,html[lang="uk"] .toast{font-family:'Barlow Condensed','Arial Narrow',sans-serif}
html[lang="uk"] .email-dialog h2{font-size:clamp(50px,9vw,85px)}
/* v19 last-pass collision fixes */
@media(min-width:1101px) and (max-width:1450px){
 .personal-main .remote-badge{top:48%;right:4%;width:clamp(94px,9.7vw,140px)}
 .personal-main .star-doodle{display:none}
 .project-inquru .inquru-stage .inquru-headline{
  font-size:106px!important;letter-spacing:2px!important;transform:scaleX(1.06)!important;
 }
}
@media(max-width:1100px){.personal-main .star-doodle{display:none!important}}
@media(max-width:680px){
 .personal-main .remote-badge,.personal-main .remote-badge-ua{top:37%;right:4%;width:clamp(98px,27vw,140px)}
 .contact-links a{grid-template-columns:19px clamp(83px,24vw,100px) minmax(0,1fr);column-gap:7px}
}
.remote-badge-ua{display:none}
html[lang="uk"] .personal-main .remote-badge{display:none}
html[lang="uk"] .personal-main .remote-badge-ua{
 display:grid;place-items:center;position:absolute;z-index:3;top:5%;right:3%;width:clamp(135px,10.3vw,205px);
 aspect-ratio:1;background:#070707;color:#fff;text-align:center;
 font:900 clamp(12px,1.15vw,21px)/.95 'Barlow Condensed','Arial Narrow',sans-serif;
 clip-path:polygon(50% 0,58% 12%,70% 3%,76% 18%,91% 13%,88% 29%,100% 39%,90% 51%,100% 62%,85% 71%,89% 88%,73% 86%,64% 100%,51% 90%,37% 100%,28% 87%,11% 91%,13% 75%,0 64%,11% 52%,1% 39%,16% 30%,10% 13%,27% 17%,39% 3%);
 transform:rotate(-9deg);padding:16%;pointer-events:none;
}
@media(min-width:1101px) and (max-width:1450px){html[lang="uk"] .personal-main .remote-badge-ua{top:48%;right:4%;width:clamp(95px,9.7vw,140px);font-size:13px}}
@media(min-width:681px) and (max-width:1100px){html[lang="uk"] .personal-main .remote-badge-ua{top:5%;right:5%;width:clamp(140px,19vw,205px);font-size:18px}}
@media(max-width:680px){html[lang="uk"] .personal-main .remote-badge-ua{top:37%;right:4%;width:clamp(101px,27vw,140px);font-size:clamp(12px,3vw,15px)}}


/* ===== ALPHA V20: mobile alignment and Ukrainian letterforms ===== */
/* The attached Anton-Regular doesn't contain Cyrillic. Oswald's Cyrillic
   glyphs provide a matching narrow/tall display language without fallback
   patches between Latin and Ukrainian letters. */
html[lang="uk"]{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:400}
html[lang="uk"] .site-title,
html[lang="uk"] .main-nav,
html[lang="uk"] .intro-title,
html[lang="uk"] .project-topline,
html[lang="uk"] .section-heading h2,
html[lang="uk"] .case-hero h1,
html[lang="uk"] .case-lead,
html[lang="uk"] .case-section-label,
html[lang="uk"] .email-dialog h2,
html[lang="uk"] .project-description,
html[lang="uk"] .project-inquru .tag-row,
html[lang="uk"] .pill{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700}
html[lang="uk"] .case-header,
html[lang="uk"] .email-dialog,
html[lang="uk"] .toast,
html[lang="uk"] .remote-badge-ua{font-family:'Barlow Condensed','Arial Narrow',sans-serif}
html[lang="uk"] .intro-title{letter-spacing:-.025em}
html[lang="uk"] .intro-description{font-weight:500}
html[lang="uk"] .remote-badge-ua{font-weight:700}
/* All small screens: keep language control accessible alongside a shorter Back to Work. */
@media(max-width:550px){
 .case-header{padding:16px 0 14px;display:flex;flex-wrap:nowrap;gap:5px;min-width:0}
 .case-header .site-title{font-size:clamp(17px,4.55vw,20px);letter-spacing:-.035em;flex:0 1 auto;min-width:0;white-space:nowrap}
 .case-header .case-back{font-size:clamp(12px,3.4vw,15px);padding:7px 8px;flex:0 1 auto;white-space:nowrap;margin-left:auto}
 .case-header .lang-switch{margin-left:0;flex:0 0 auto;font-size:13px;border-width:1.7px}
 .case-header .lang-switch a{padding:7px 8px}
 html[lang="uk"] .case-header .case-back{font-size:clamp(11px,3vw,14px)}
}
/* Especially small devices: safe two-row layout beats clipping any control. */
@media(max-width:360px){
 .case-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .case-header .site-title{grid-column:1;grid-row:1;align-self:center;font-size:19px}
 .case-header .lang-switch{grid-column:2;grid-row:1}
 .case-header .case-back{grid-column:1/-1;grid-row:2;justify-self:end;margin:0}
}
/* Text and peek graphic each have a dedicated horizontal territory.
   The peeking character stays fully inside the card, not cropped on the right. */
@media(max-width:680px){
 .project-inquru{overflow:hidden;isolation:isolate}
 .project-inquru .inquru-stage{overflow:hidden}
 .project-inquru .inquru-peek-character,
 .project-inquru .inquru-stage .inquru-peek-character{
   display:block!important;left:auto!important;right:0!important;
   top:auto!important;bottom:0!important;
   width:min(42%,175px)!important;height:auto!important;
   transform:none!important;opacity:1!important;
   object-fit:contain!important;object-position:right bottom!important;
   max-height:65%;
 }
 .project-inquru .inquru-headline,
 .project-inquru .inquru-stage .inquru-headline{
   top:20%!important;left:15px!important;max-width:calc(100% - 32px)!important;
   font-size:clamp(55px,15.4vw,76px)!important;letter-spacing:-.02em!important;
   transform:none!important;z-index:6!important
 }
 .project-inquru .inquru-description{top:61%!important;left:15px!important;max-width:55%;z-index:7!important}
 .project-inquru .tag-row{bottom:14px;left:13px;max-width:100%;z-index:8!important}
}
@media(max-width:380px){
 .project-inquru .inquru-peek-character,.project-inquru .inquru-stage .inquru-peek-character{width:40%!important;right:0!important;max-height:62%}
 .project-inquru .inquru-headline,.project-inquru .inquru-stage .inquru-headline{font-size:clamp(51px,14.9vw,62px)!important}
}
/* Explicitly paint inset gaps with the intended surface rather than white. */
.gallery-grid--logos .image-card[data-slug="flox"] .image-card__media{background:#172b35!important}
.gallery-grid--logos .image-card[data-slug="new-gta"] .image-card__media{background:#000!important}
.gallery-grid--logos .image-card[data-slug="metal-house"] .image-card__media{background:var(--paper)!important}
.gallery-grid--logos .image-card[data-slug="flox"] .image-card__media img,
.gallery-grid--logos .image-card[data-slug="new-gta"] .image-card__media img{
  inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;
}
.gallery-grid--logos .image-card[data-slug="metal-house"] .image-card__media img{
  inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;
}
@media(max-width:680px){
 html[lang="uk"] .intro-title{font-size:clamp(45px,10.5vw,62px);font-weight:700;line-height:1.04;letter-spacing:-.025em;}
 html[lang="uk"] .intro-title span{white-space:nowrap}
 html[lang="uk"] .project-inquru .inquru-description{font-size:clamp(18px,4.7vw,23px)!important}
}
/* v20 final browser test: prevent case title and return link from sharing pixels at 393px. */
@media(min-width:361px) and (max-width:550px){
 .case-header .site-title{font-size:clamp(15px,4.05vw,18px);flex:0 1 auto;letter-spacing:-.045em}
 .case-header .case-back{font-size:clamp(11px,3.05vw,13px);padding:6px 7px;line-height:1;flex:0 1 auto}
 .case-header .lang-switch{font-size:12px;flex-shrink:0}
 .case-header .lang-switch a{padding:6px 7px}
}
/* Edge breathing room: the mobile peek head and foot are now fully visible. */
@media(max-width:680px){
 .project-inquru .inquru-peek-character,.project-inquru .inquru-stage .inquru-peek-character{
   right:2.5%!important;bottom:2.5%!important;
 }
 html[lang="uk"] .project-inquru .inquru-description{
   max-width:58%!important;font-size:clamp(16px,4.2vw,21px)!important;
 }
}


/* ===== ALPHA V21 — mobile layout / consistent gallery tiles ===== */
/* Oswald from the user's OFL-licensed supplied archive. Embedded in CSS so
   Ukrainian text is reliable offline and cannot fall back to a Latin-only face. */

html[lang="uk"]{font-family:'Barlow Condensed','Arial Narrow',sans-serif}
html[lang="uk"] .page,html[lang="uk"] .case-page,html[lang="uk"] button,html[lang="uk"] .email-dialog,
html[lang="uk"] .intro-title,html[lang="uk"] .site-title,html[lang="uk"] .main-nav,
html[lang="uk"] .section-heading h2,html[lang="uk"] .section-meta,
html[lang="uk"] .case-hero h1,html[lang="uk"] .project-topline,html[lang="uk"] .project-description,
html[lang="uk"] .pill,html[lang="uk"] .closing-contact h2,html[lang="uk"] .closing-about h2,
html[lang="uk"] .remote-badge-ua,html[lang="uk"] .floating-navigation,html[lang="uk"] .mobile-nav,
html[lang="uk"] .email-dialog h2,html[lang="uk"] .image-card{font-family:'Barlow Condensed','Arial Narrow',sans-serif}

/* MENU sits immediately to the LEFT of ENG / UA, as a single right-side group. */
@media(max-width:850px){
 .site-header{justify-content:flex-start;gap:7px}
 .site-header .site-title{margin-right:auto;flex-shrink:1;min-width:0}
 .site-header .mobile-nav-toggle{order:2;flex:none;margin-left:0}
 .site-header>.lang-switch{order:3;margin-left:0;flex:none}
}
@media(max-width:380px){.site-header{gap:5px}.site-header .site-title{font-size:clamp(19px,6vw,24px)}.site-header .mobile-nav-toggle{width:39px;height:37px}}

/* Compact mobile green card: contacts/CTAs near remote badge; dog moves up
   with the shortened panel and remains free of interactive elements. */
@media(max-width:680px){
 .personal{min-height:0!important;height:auto}
 .personal-main{flex:none;min-height:0!important;height:clamp(492px,133vw,565px);padding:24px 19px}
 .personal-main .remote-badge,html[lang="uk"] .personal-main .remote-badge-ua{top:45%!important;right:3%!important;width:clamp(95px,27vw,130px)!important}
 .personal-main .intro-cta{top:51.5%!important;bottom:auto!important;left:19px!important;gap:9px}
 .personal-main .dog-illustration{width:clamp(178px,54%,247px);right:2%;bottom:2.5%;transform:none!important}
 .contact-strip{height:auto;min-height:126px;padding:15px 15px}
 .personal-main .star-doodle{display:none!important}
}
@media(max-width:360px){
 .personal-main{height:515px}
 .personal-main .intro-cta{top:52.5%!important}
 .personal-main .dog-illustration{width:51%;right:1%;bottom:2%}
 .contact-links{font-size:clamp(14px,4.1vw,17px)}
}

/* Mobile Inquru: separate vertical zones and a large peeking silhouette centered
   at the RIGHT boundary. Both EN/UA use identical card composition. */
@media(max-width:680px){
 .project-inquru{height:425px!important}
 .project-inquru .inquru-stage .inquru-peek-character,
 .project-inquru .inquru-peek-character{
   display:block!important;left:auto!important;right:0!important;
   top:24%!important;bottom:auto!important;
   width:min(49%,190px)!important;height:auto!important;max-height:none!important;
   transform:none!important;opacity:1!important;object-fit:contain!important;object-position:right center!important;
 }
 .project-inquru .inquru-headline,.project-inquru .inquru-stage .inquru-headline{top:20%!important}
 .project-inquru .inquru-description{top:66%!important;max-width:53%!important}
}
@media(max-width:360px){
 .project-inquru .inquru-stage .inquru-peek-character,.project-inquru .inquru-peek-character{width:46%!important;top:25%!important}
}

/* Fylto application's window is the focal mockup: lift it a bit on phones. */
@media(max-width:680px){.project-fylto .fylto-window{top:12%!important;height:73%!important;right:-30%!important;width:110%!important}}

/* Consistent full-bleed square preview tiles without alpha-edge bleed-through.
   Enlarged lightbox art still references the original full-resolution assets. */
.gallery-grid--logos .image-card[data-slug="flox"] .image-card__media,
.gallery-grid--logos .image-card[data-slug="new-gta"] .image-card__media{background:#000}
.gallery-grid--logos .image-card[data-slug="flox"] .image-card__media{background:#172b35!important}
.gallery-grid--logos .image-card[data-slug="metal-house"] .image-card__media{background:#fff!important}
.gallery-grid--logos .image-card[data-slug="flox"] .image-card__media img,
.gallery-grid--logos .image-card[data-slug="new-gta"] .image-card__media img,
.gallery-grid--logos .image-card[data-slug="metal-house"] .image-card__media img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
}
.gallery-grid--logos .image-card__media{aspect-ratio:1/1;flex:none}

/* Bring the copy control down but eliminate the phantom feedback whitespace. */
.email-dialog__address{gap:5px}
.email-dialog__address .email-dialog__copy{margin-top:14px}
.email-dialog__feedback:empty{display:none!important;min-height:0!important}
.email-dialog__feedback:not(:empty){min-height:0;margin-top:4px}

/* Grid cards are buttons: Chromium may vertically center their contents when a
   neighbouring two-line caption makes the shared grid row taller. Use an
   explicit top-to-bottom flex stack, so every artwork starts at the top edge. */
.gallery-grid--logos .image-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:flex-start}
.gallery-grid--logos .image-card__media{width:100%;flex:0 0 auto}
.gallery-grid--logos .image-card__caption{width:100%;flex:1 0 auto;align-content:end}
@media(max-width:680px){
  .personal-main .dog-illustration{width:47%;right:0;bottom:2.5%}
}