/* Yuwart Studio — design concept v2 (refined type, warm palette) */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/Newsreader-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/HankenGrotesk-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20A6}

:root{
  /* palette: warm off-white → cream → beige, deep brown text, one clay accent (from the coral beads in the murals) */
  --bg:#FAF6EF;        /* page */
  --cream:#F3ECE0;     /* alternate sections */
  --beige:#E9DFCF;     /* fills, card on cream */
  --sand:#D9C9B2;      /* subtle UI, text on dark */
  --taupe:#A28C77;     /* brand mark */
  --ink:#2F2219;       /* headings, primary text  14.3:1 on bg */
  --ink-2:#5A4639;     /* body copy                8.2:1 */
  --muted:#6F5A49;     /* supporting text          5.9:1 */
  --accent:#9A4426;    /* primary actions          6.5:1 with white */
  --accent-d:#7E3519;
  --accent-soft:#F2E3D7;
  --esp:#2A1E17;       /* deep brown sections */
  --on-esp:#F3ECE0;
  --on-esp-2:#D9C9B2;
  --line:rgba(47,34,25,.13);
  --line-2:rgba(47,34,25,.22);
  --error:#9A2F22;
  --white:#FFFCF7;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* type scale (fluid, ~1.25 ratio) */
  --t-display:clamp(42px,5.4vw,80px);
  --t-h1:clamp(38px,4.6vw,66px);
  --t-h2:clamp(30px,3.3vw,46px);
  --t-h3:clamp(22px,1.9vw,26px);
  --t-lead:clamp(18px,1.45vw,20px);
  --t-body:17px;
  --t-small:14.5px;
  --t-label:14px;

  --r-img:14px;--r-card:18px;--r-input:12px;
  --wrap:1200px;--gut:clamp(20px,5vw,48px);--hdr:72px;
  --sec:clamp(72px,9vw,128px);
  --ease:cubic-bezier(.25,.6,.3,1);--ease-out:cubic-bezier(.2,.8,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 var(--t-body)/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:600px){body{font-size:16.5px}}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;color:var(--ink);line-height:1.1;margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
h3{font-weight:450;letter-spacing:-.005em}
em,i,cite{font-style:normal}
strong{font-weight:600;color:var(--ink)}
p{margin:0 0 1em}
::selection{background:var(--accent-soft);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.walk :focus-visible,.site-footer :focus-visible{outline-color:var(--sand)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.label,.caps{display:block;font:500 var(--t-label)/1.4 var(--sans);letter-spacing:.01em;color:var(--muted);margin:0 0 14px}
.dark .label,.dark .caps,.site-footer .caps{color:var(--on-esp-2)}
.muted{color:var(--muted)}
.dark .muted{color:var(--on-esp-2)}
.small{font-size:var(--t-small)}
.lede{font:400 var(--t-lead)/1.6 var(--sans);color:var(--ink-2);max-width:40em}
.dark{background:var(--esp);color:var(--on-esp)}
.dark h1,.dark h2,.dark h3{color:var(--on-esp)}
.dark .lede{color:var(--on-esp)}
.ic{width:20px;height:20px;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:999px;font:550 15.5px/1 var(--sans);letter-spacing:0;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
.btn .ic{width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-d)}
.btn-ghost{border-color:rgba(250,246,239,.6);color:var(--bg);background:rgba(42,30,23,.18)}
.btn-ghost:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.btn-ghost-dark{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost-dark:hover{background:var(--beige);border-color:var(--beige)}
.dark .btn-ghost:focus-visible,.walk .btn:focus-visible{box-shadow:0 0 0 3px rgba(42,30,23,.6),0 0 0 5px var(--sand)}
.btn.wide{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:999px;font:550 15px/1 var(--sans);color:var(--ink);text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s}
.link-arrow .ic{width:17px;height:17px;transition:transform .25s var(--ease)}
.link-arrow:hover{background:var(--beige);border-color:var(--beige)}
.link-arrow:hover .ic{transform:translateX(3px)}
.dark .link-arrow{color:var(--on-esp);border-color:rgba(243,236,224,.3)}
.dark .link-arrow:hover{background:rgba(243,236,224,.1);border-color:rgba(243,236,224,.5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas.center{justify-content:center}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--ink);background:rgba(250,246,239,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);transition:background-color .3s var(--ease),color .3s,box-shadow .3s}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;height:var(--hdr);padding:0 var(--gut);transition:height .3s var(--ease)}
.site-header.over-hero.on-dark,.site-header.over-hero:not(.scrolled){background:transparent;color:var(--bg);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.scrolled .header-inner{height:62px}
.site-header.over-hero.on-dark.scrolled{background:linear-gradient(rgba(42,30,23,.5),rgba(42,30,23,0))}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.logo-mark{width:38px;height:38px;transition:width .3s var(--ease),height .3s var(--ease)}
.scrolled .logo-mark{width:34px;height:34px}
.brand-word{font:450 21px/1 var(--serif);letter-spacing:-.01em;display:flex;flex-direction:column}
.brand-word small{font:500 11px/1.3 var(--sans);letter-spacing:.08em;margin-top:3px;opacity:.75}
.main-nav{display:none}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.main-nav a{position:relative;display:block;text-decoration:none;font:500 15px/1 var(--sans);padding:10px 12px;border-radius:999px;opacity:.82;transition:opacity .2s,background-color .2s}
.main-nav a:hover{opacity:1;background:rgba(47,34,25,.06)}
.over-hero:not(.scrolled) .main-nav a:hover,.over-hero.on-dark .main-nav a:hover{background:rgba(250,246,239,.12)}
.main-nav a[aria-current="page"]{opacity:1}
.main-nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.header-cta{min-height:40px;padding:0 18px;font-size:14.5px}
.header-cta .long{display:none}
.menu-toggle{width:44px;height:44px;border:0;background:transparent;color:inherit;display:grid;place-content:center;gap:6px;cursor:pointer;margin-right:-8px;border-radius:999px}
.menu-toggle i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.menu-toggle[aria-expanded="true"] i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--esp);color:var(--on-esp);padding:calc(var(--hdr) + 28px) var(--gut) 32px;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:opacity .28s var(--ease),transform .35s var(--ease-out)}
.mobile-menu[hidden]{display:none}
.mobile-menu.open{opacity:1;transform:none}
.mobile-menu ol{list-style:none;margin:0;padding:0}
.mobile-menu li a{display:flex;align-items:center;justify-content:space-between;font:400 32px/1.2 var(--serif);letter-spacing:-.01em;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(243,236,224,.12)}
.mobile-menu li a[aria-current="page"]{color:var(--sand)}
.mobile-menu li a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sand)}
.mobile-menu-foot{margin-top:28px}
.mobile-menu-foot .btn{width:100%}
.mobile-menu-foot p{margin-top:18px;color:var(--on-esp-2);font-size:15px;line-height:2}
.menu-open .site-header{background:transparent!important;color:var(--on-esp)!important;box-shadow:none!important;backdrop-filter:none!important}
.menu-open{overflow:hidden}
@media (min-width:980px){
  .main-nav{display:block}.menu-toggle{display:none}
  .header-cta .long{display:inline}.header-cta .short{display:none}
  .brand{margin-right:0}.main-nav{margin:0 auto}
}
.loader{display:none!important}

/* ---------- headings with a calm line reveal ---------- */
.split{font-size:var(--t-h2);line-height:1.1;margin-bottom:.55em}
.split .line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .line>span{display:inline-block}
.split.center{text-align:center}
.js .split .line>span{transform:translateY(100%);transition:transform .8s var(--ease-out)}
.js .split .line:nth-child(2)>span{transition-delay:.07s}
.js .split .line:nth-child(3)>span{transition-delay:.14s}
.js .split.in .line>span{transform:none}

/* reveal */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-wipe>img,.js .reveal-wipe>video{clip-path:inset(0 0 100% 0 round var(--r-img));transform:scale(1.04);transition:clip-path .9s var(--ease-out),transform 1.1s var(--ease-out)}
.js .reveal-wipe.in>img,.js .reveal-wipe.in>video{clip-path:inset(0 0 0 0 round var(--r-img));transform:scale(1)}
.js .reveal-wipe>.tag{opacity:0;transition:opacity .4s .5s}.js .reveal-wipe.in>.tag{opacity:1}

/* ---------- walk-through hero ---------- */
.walk{position:relative;height:calc(var(--scenes) * 75svh);background:var(--esp)}
.walk-stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--bg)}
.w-layer{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);will-change:opacity}
.w-layer.is-active{opacity:1}
.w-layer img,.w-layer video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - .06 * var(--lp,0)));transform-origin:50% 55%;will-change:transform}
.w-video{background:var(--esp)}
.w-layer[data-scene="0"] video{transform:scale(calc(1.24 - .03 * var(--lp,0)));transform-origin:50% 15%}
.w-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,30,23,.55) 0%,rgba(42,30,23,.12) 26%,rgba(42,30,23,.22) 48%,rgba(42,30,23,.72) 72%,rgba(42,30,23,.9) 100%);pointer-events:none}
@media (min-width:760px){.w-shade{background:linear-gradient(180deg,rgba(42,30,23,.5) 0%,rgba(42,30,23,.1) 30%,rgba(42,30,23,.3) 60%,rgba(42,30,23,.85) 100%),linear-gradient(90deg,rgba(42,30,23,.55) 0%,rgba(42,30,23,0) 55%)}}
.w-concept{position:absolute;right:14px;bottom:14px;font:500 12px/1 var(--sans);background:rgba(42,30,23,.6);color:var(--bg);padding:7px 11px;border-radius:999px;z-index:3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.w-concept.real{background:rgba(250,246,239,.88);color:var(--ink)}
.w-hero{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(80px,13vh,128px);max-width:1320px;margin:0 auto;z-index:4;transition:opacity .45s var(--ease),transform .6s var(--ease-out)}
.w-hero.away{opacity:0;transform:translateY(-20px);pointer-events:none;visibility:hidden;transition:opacity .45s,transform .6s var(--ease-out),visibility 0s .45s}
.hero-h{font-size:var(--t-display);line-height:1.02;letter-spacing:-.022em;font-weight:400;color:var(--bg);margin:0 0 20px;max-width:12ch}
.hero-h .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-h .line>span{display:inline-block}
.js .hero-h .line>span{transform:translateY(100%);transition:transform .9s var(--ease-out)}
.js .hero-h .line:nth-child(2)>span{transition-delay:.08s}
.hero-ready .hero-h .line>span{transform:none!important}
.hero-sub{font:450 clamp(17px,1.5vw,20px)/1.5 var(--sans);color:#FAF6EF;text-shadow:0 1px 14px rgba(42,30,23,.55);max-width:30ch;margin:0 0 30px}
.js .hero-sub,.js .w-hero .hero-ctas{opacity:0;transform:translateY(8px);transition:opacity .7s .3s var(--ease),transform .7s .3s var(--ease-out)}
.hero-ready .hero-sub,.hero-ready .w-hero .hero-ctas{opacity:1;transform:none}
.w-title{position:absolute;z-index:4;max-width:min(88vw,620px);padding:0 var(--gut);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--ease-out);pointer-events:none}
.w-title.is-active{opacity:1;transform:none}
.w-title.pos-tl{left:0;top:calc(var(--hdr) + 6vh)}
.w-title.pos-tr{right:0;top:calc(var(--hdr) + 6vh);text-align:right}
.w-title.pos-bl{left:0;bottom:11vh}
.w-title.pos-br{right:0;bottom:11vh;text-align:right}
.w-title.pos-c{left:50%;top:50%;transform:translate(-50%,-44%);text-align:center;width:100%}
.w-title.pos-c.is-active{transform:translate(-50%,-50%)}
.w-idx{display:none}
.w-big{font:400 clamp(36px,4.8vw,66px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 8px;color:var(--bg)}
.w-sub{font:450 16px/1.45 var(--sans);color:rgba(250,246,239,.88);margin:0}
.w-dots{position:absolute;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:10px;z-index:5}
.w-dots li{width:6px;height:6px;border-radius:50%;background:rgba(250,246,239,.35);transition:background .3s,transform .3s var(--ease)}
.w-dots li.on{background:var(--bg);transform:scale(1.3)}
.w-cue{white-space:nowrap;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;font:500 13px/1 var(--sans);color:rgba(250,246,239,.75);display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;transition:opacity .4s}
.w-cue span{width:1px;height:26px;background:linear-gradient(var(--bg),transparent);animation:cue 2.6s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.walk.past-first .w-cue{opacity:0}
@media (min-width:760px){.w-dots{display:flex}.w-cue{display:none}}
@media (max-width:759px){.w-hero .btn{flex:1 1 auto}.w-title.pos-tr,.w-title.pos-br{text-align:left;left:0;right:auto}}

/* ---------- home: intro ---------- */
.intro{padding-top:var(--sec);padding-bottom:var(--sec)}
.intro-grid{display:grid;gap:8px}
.intro .split{font-size:var(--t-h1)}
@media (min-width:900px){.intro .split{max-width:11ch}}
.intro-body p:not(.lede){max-width:36em}
.intro-body .lede{color:var(--ink);margin-bottom:1.1em}
.intro-body .link-arrow{margin-top:12px}
@media (min-width:900px){.intro-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:start}.intro-body{padding-top:14px}}

/* ---------- home: services (a calm list, not numbered rows) ---------- */
.services-band{background:var(--cream);padding:var(--sec) 0}
.svc-grid{display:grid;gap:36px}
.svc-head .split{margin-bottom:.4em}
.svc-head p{max-width:30em}
.svc-head .link-arrow{margin-top:10px}
@media (min-width:900px){.svc-grid{grid-template-columns:4fr 7fr;gap:72px;align-items:start}.svc-head{position:sticky;top:110px}}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list li{border-bottom:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:76px 1fr 24px;align-items:center;gap:18px;padding:16px 10px;margin:0 -10px;border-radius:var(--r-card);text-decoration:none;transition:background-color .2s var(--ease)}
.svc-row:hover{background:rgba(255,252,247,.7)}
.svc-thumb{width:76px;height:92px;border-radius:10px;overflow:hidden;background:var(--beige)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.svc-row:hover .svc-thumb img{transform:scale(1.05)}
.svc-name{display:block;font:400 clamp(21px,1.8vw,25px)/1.2 var(--serif);color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}
.svc-desc{display:block;font-size:15px;line-height:1.5;color:var(--muted)}
.svc-go{color:var(--muted);transition:transform .25s var(--ease),color .2s}
.svc-row:hover .svc-go{color:var(--accent);transform:translateX(3px)}
@media (max-width:420px){.svc-row{grid-template-columns:64px 1fr;gap:14px}.svc-thumb{width:64px;height:80px}.svc-go{display:none}}

/* ---------- home: featured project ---------- */
.feature{padding-top:var(--sec);padding-bottom:var(--sec)}
.feature-grid{display:grid;gap:40px}
@media (min-width:900px){.feature-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}}
.feature-media,.case-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--beige);border-radius:var(--r-img);max-width:500px}
.feature-media video,.case-media video{width:100%;height:100%;object-fit:cover}
.feature-media .tag,.case-media .tag{position:absolute;left:14px;top:14px}
.feature .split{font-size:var(--t-h1)}
.feature-text p:not(.label):not(.lede){max-width:36em}
.feature-stills{list-style:none;padding:0;margin:28px 0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:460px}
.feature-stills li{aspect-ratio:3/4;overflow:hidden;background:var(--beige);border-radius:10px}
.feature-stills img{width:100%;height:100%;object-fit:cover}
.js .feature-stills .reveal-wipe>img{clip-path:inset(0 0 100% 0 round 10px)}
.js .feature-stills .reveal-wipe.in>img{clip-path:inset(0 0 0 0 round 10px)}

/* tags */
.tag{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.2 var(--sans);letter-spacing:0;padding:5px 10px;border-radius:999px;background:var(--beige);color:var(--ink-2);border:0;white-space:nowrap}
.tag-real{background:rgba(255,252,247,.92);color:var(--ink)}
.tag-real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tag-concept{background:rgba(42,30,23,.68);color:var(--bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- why (circle reveal, calmer) ---------- */
.why{position:relative;height:180svh}
.why-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.why-circle{position:absolute;inset:0;clip-path:circle(calc(var(--r,.18) * 75%) at 50% 50%);will-change:clip-path}
.why-circle video{width:100%;height:100%;object-fit:cover;filter:brightness(.5) sepia(.15)}
.why-copy{position:relative;z-index:2;max-width:760px;padding:0 var(--gut);text-align:center;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 16px))}
.why-copy .label{color:var(--sand)}
.why-h{font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.015em;margin-bottom:22px}
.why-copy p:last-child{max-width:34em;margin:0 auto;color:rgba(243,236,224,.86)}

/* ---------- selected work ---------- */
.selected{padding-top:var(--sec);padding-bottom:var(--sec)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;margin-bottom:clamp(28px,4vw,48px)}
.band-head .split{margin-bottom:0}
.band-head p{max-width:30em;margin:0}
.sel-grid{list-style:none;margin:0;padding:0;display:grid;gap:30px 18px;grid-template-columns:1fr 1fr}
.sel-grid a{text-decoration:none;display:block}
.sel-img{display:block;overflow:hidden;position:relative;background:var(--beige);aspect-ratio:3/4;border-radius:var(--r-img)}
.sel-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.sel-grid a:hover .sel-img img{transform:scale(1.03)}
.sel-img .tag{position:absolute;left:10px;bottom:10px}
.sel-cap{display:block;margin-top:12px;font:400 20px/1.25 var(--serif);color:var(--ink);letter-spacing:-.005em}
.sel-cap small{display:block;font:400 14px/1.5 var(--sans);color:var(--muted);margin-top:3px;letter-spacing:0}
.sel-a{grid-column:1/-1}
.sel-a .sel-img{aspect-ratio:4/3}
@media (min-width:900px){
  .sel-grid{grid-template-columns:repeat(4,1fr);gap:44px 24px;align-items:start}
  .sel-a{grid-column:1/3;grid-row:1/3}.sel-a .sel-img{aspect-ratio:4/5}
  .sel-b{grid-column:3}.sel-c{grid-column:4;margin-top:56px}
  .sel-d{grid-column:3/5;grid-row:2}.sel-d .sel-img{aspect-ratio:16/10}
}
@media (max-width:899px){.sel-d{grid-column:1/-1}.sel-d .sel-img{aspect-ratio:16/11}}

/* ---------- booking call-out (a contained card, not a full-bleed slab) ---------- */
.december{padding:0 0 var(--sec)}
.dec-card{background:var(--beige);border-radius:24px;padding:clamp(28px,5vw,64px);display:grid;gap:24px;align-items:end}
.dec-card .split{font-size:var(--t-h2);margin-bottom:.35em;max-width:16ch}
.dec-card p{max-width:34em;margin:0;color:var(--ink-2)}
.dec-card .hero-ctas{align-self:end}
@media (min-width:900px){.dec-card{grid-template-columns:7fr 5fr;gap:56px}.dec-card .hero-ctas{justify-content:flex-end}}
.status{display:inline-flex;align-items:center;gap:8px;font:550 13.5px/1 var(--sans);color:var(--accent-d);background:var(--accent-soft);padding:8px 12px;border-radius:999px;margin-bottom:18px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- contact strip ---------- */
.contact-strip{display:grid;grid-template-columns:1fr;gap:0;padding-top:0;padding-bottom:var(--sec)}
.cs-title{grid-column:1/-1;font:400 var(--t-h3)/1.2 var(--serif);color:var(--ink);margin:0 0 18px}
.cs-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);transition:color .2s}
.cs-item:hover{color:var(--accent-d)}
.cs-item:hover .ic{color:var(--accent)}
.cs-item .ic{width:20px;height:20px;color:var(--muted);transition:color .2s}
.cs-item small{display:block;font:450 13.5px/1.4 var(--sans);color:var(--muted)}
.cs-item span{font-size:16px;line-height:1.35;overflow-wrap:break-word;min-width:0}
@media (min-width:700px){.contact-strip{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media (min-width:1100px){.contact-strip{grid-template-columns:1fr 1fr 1.45fr 1fr 1fr;column-gap:24px}}

/* ---------- footer ---------- */
.site-footer{background:var(--esp);color:var(--on-esp);padding:clamp(56px,7vw,88px) 0 28px}
.site-footer .brand{margin-bottom:18px}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1/-1}
.footer-talk{grid-column:1/-1;order:5}
.footer-brand p{max-width:320px}
@media (min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1.3fr 1.3fr}.footer-brand,.footer-talk{grid-column:auto;order:0}}
.foot-h{font:550 14px/1 var(--sans);color:var(--on-esp-2);margin-bottom:16px;letter-spacing:0}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 10px;font-size:15px;overflow-wrap:anywhere}
.site-footer a{text-decoration:none;color:rgba(243,236,224,.9);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.site-footer a:hover{background-size:100% 1px;color:#fff}
.site-footer .brand{background:none;color:var(--on-esp)}
.site-footer .muted{color:var(--on-esp-2)}
.footer-base{margin-top:52px;padding-top:22px;background:linear-gradient(rgba(243,236,224,.14),rgba(243,236,224,.14)) var(--gut) 0/calc(100% - 2 * var(--gut)) 1px no-repeat;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;font-size:13.5px;color:var(--on-esp-2)}
.footer-base p{margin:0;max-width:720px}
.footer-base strong{color:var(--on-esp);font-weight:550}

/* ---------- inner pages ---------- */
.page-hero{padding-top:calc(var(--hdr) + clamp(48px,8vw,104px));padding-bottom:clamp(40px,6vw,72px);display:grid;gap:4px}
.page-hero h1,.page-hero .split{font-size:var(--t-h1);margin-bottom:.35em;max-width:14ch}
.page-hero .lede{max-width:34em;margin:0}
@media (min-width:900px){.page-hero{grid-template-columns:7fr 5fr;gap:64px;align-items:end}.page-hero h1,.page-hero .split{margin-bottom:0}.page-hero .lede{padding-bottom:.35em}}

.case{padding-bottom:var(--sec)}
.case-grid{display:grid;gap:40px}
@media (min-width:900px){.case-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}}
.case-h{font-size:var(--t-h2)}
.case .lede{color:var(--ink)}
.facts{margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts dt{font:550 14px/1.6 var(--sans);color:var(--muted)}
.facts dd{margin:0;font-size:16px;color:var(--ink-2)}

.gallery{padding-bottom:var(--sec)}
.gal-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:10px;position:sticky;top:61px;z-index:20;background:rgba(250,246,239,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px var(--gut);margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
.gal-h{font-size:var(--t-h3);margin:0 auto 0 0}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:100%;-webkit-overflow-scrolling:touch;order:3;width:100%}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:500 14.5px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.gal-count{margin:0;font-size:14px}
@media (min-width:900px){.filters{order:0;width:auto}}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;color:var(--muted);margin:8px 0 28px}
.legend>span{display:inline-flex;align-items:center;gap:8px}
@media (max-width:600px){.legend{flex-direction:column;align-items:flex-start;gap:8px}}
.g-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 14px}
@media (min-width:760px){.g-grid{grid-template-columns:repeat(3,1fr);gap:36px 22px}}
@media (min-width:1150px){.g-grid{grid-template-columns:repeat(4,1fr)}}
.g-item.hide{display:none}
.g-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;color:inherit;font:inherit;position:relative;border-radius:var(--r-img)}
.g-media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--beige);border-radius:var(--r-img)}
.g-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.g-btn:hover .g-media img,.g-btn:focus-visible .g-media img{transform:scale(1.03)}
.g-meta{display:block;margin-top:10px}
.g-num{display:none}
.g-title{display:block;font:400 18px/1.3 var(--serif);color:var(--ink)}
.g-cat{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.g-btn .tag{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:250;background:rgba(42,30,23,.96);display:grid;grid-template-columns:56px 1fr 56px;align-items:center;padding:20px 8px;opacity:0;transition:opacity .25s}
.lightbox.open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;grid-column:2;display:grid;justify-items:center;gap:12px;max-height:100%}
.lightbox img{max-height:calc(100svh - 120px);width:auto;max-width:100%;object-fit:contain;border-radius:var(--r-img);transform:scale(.98);transition:transform .3s var(--ease-out)}
.lightbox.open img{transform:none}
.lightbox figcaption{color:var(--on-esp);font:400 18px/1.35 var(--serif);text-align:center}
.lightbox button{width:46px;height:46px;border-radius:999px;border:1px solid rgba(243,236,224,.3);background:transparent;color:var(--on-esp);font:300 28px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.lightbox button:hover{background:var(--on-esp);color:var(--ink)}
.lb-close{position:absolute;top:16px;right:16px}
.lb-prev{grid-column:1}.lb-next{grid-column:3}
@media (max-width:600px){.lightbox{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:16px}.lightbox figure{grid-column:1/-1;grid-row:1}.lb-prev{grid-row:2;grid-column:1;justify-self:end}.lb-next{grid-row:2;grid-column:2;justify-self:start}}

/* services page */
.sv-list{display:grid;gap:clamp(56px,8vw,112px);padding-bottom:var(--sec)}
.sv-item{display:grid;gap:26px;scroll-margin-top:90px}
@media (min-width:900px){.sv-item{grid-template-columns:5fr 6fr;gap:80px;align-items:center}.sv-item:nth-child(even){grid-template-columns:6fr 5fr}.sv-item:nth-child(even) .sv-img{order:2}}
.sv-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--beige);max-height:600px;border-radius:var(--r-img)}
.sv-img img{width:100%;height:100%;object-fit:cover}
.sv-img .tag{position:absolute;left:12px;bottom:12px}
.s-num{display:none}
.sv-h{font-size:clamp(28px,2.8vw,38px);margin-bottom:.45em}
.sv-text p{max-width:32em;color:var(--ink-2)}
.sv-text .link-arrow{margin-top:8px}
.process{padding:var(--sec) 0}
.process .band-head p{color:var(--on-esp-2)}
.steps{list-style:none;margin:0 0 48px;padding:0;display:grid;gap:0;counter-reset:st}
.steps li{padding:26px 0;border-top:1px solid rgba(243,236,224,.16);display:grid;gap:6px}
.step-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(243,236,224,.35);font:550 14px/1 var(--sans);color:var(--on-esp);margin-bottom:10px}
.steps h3{font-size:var(--t-h3);margin:0 0 4px}
.steps p{color:rgba(243,236,224,.78);max-width:30em;margin:0}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}

/* about */
.founder{display:grid;gap:40px;padding-bottom:var(--sec)}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}}
.founder-photo{margin:0;max-width:440px}
.founder-photo .fp-frame{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-img);overflow:hidden;background:var(--beige)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.founder-photo figcaption,.caption{font-size:14px;color:var(--muted);margin-top:12px}
.founder-photo figcaption a,.caption a{color:var(--ink);text-underline-offset:3px}
.founder-h{font-size:var(--t-h2)}
.founder-h em{color:var(--muted)}
.founder-text .lede{color:var(--ink)}
.quote-band{padding:var(--sec) 0}
.quote-grid{display:grid;gap:28px}
@media (min-width:900px){.quote-grid{grid-template-columns:7fr 5fr;gap:72px;align-items:end}}
.big-quote{margin:0}
.big-quote p{max-width:17em}
.big-quote p{font:400 clamp(28px,3.4vw,46px)/1.18 var(--serif);letter-spacing:-.015em;margin:0;color:var(--on-esp)}
.quote-band .narrow{margin:0;color:rgba(243,236,224,.8)}
.about-cols{display:grid;gap:48px;padding-top:var(--sec);padding-bottom:var(--sec)}
@media (min-width:900px){.about-cols{grid-template-columns:1fr 1fr;gap:88px}}
.col-h{font-size:var(--t-h3);font-size:clamp(24px,2.2vw,30px)}
.about-cols .link-arrow{margin-top:8px}

/* contact */
.contact-grid{display:grid;gap:44px;padding-bottom:var(--sec);align-items:start}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.contact-ways{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.contact-ways>*{grid-column:1/-1}
@media (min-width:480px){.contact-ways>.way:nth-of-type(4),.contact-ways>.way:nth-of-type(5){grid-column:auto}}
.ways-h{font:400 var(--t-h3)/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.way{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:var(--white);color:var(--ink);transition:border-color .2s,background-color .2s}
.way:hover{border-color:var(--line-2);background:#fff}
.way .ic{width:22px;height:22px;color:var(--muted)}
.way strong{display:block;font-weight:600;font-size:16px}
.way small{display:block;color:var(--muted);font-size:14px;overflow-wrap:anywhere;margin-top:2px}
.way-main{background:var(--accent);color:#fff;border-color:var(--accent)}
.way-main strong{color:#fff}
.way-main .ic{color:#fff}.way-main small{color:rgba(255,255,255,.85)}
.way-main:hover{background:var(--accent-d);border-color:var(--accent-d)}
.next-steps{margin-top:28px;padding:24px;border-radius:var(--r-card);background:var(--cream)}
.next-steps h3{font-size:22px;margin:0 0 14px}
.next-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.next-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.next-steps li b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--white);border:1px solid var(--line-2);font:600 13px/1 var(--sans);color:var(--ink)}
.next-steps li strong{display:block;font-weight:600;color:var(--ink)}

.book-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,44px);scroll-margin-top:84px;box-shadow:0 1px 2px rgba(47,34,25,.04),0 12px 32px -18px rgba(47,34,25,.18)}
.book-h{font-size:clamp(28px,2.8vw,36px);margin-bottom:.3em}
.book-intro{color:var(--ink-2);margin-bottom:22px}
.book-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:6px;font:500 13.5px/1.2 var(--sans);color:var(--muted)}
.book-steps li{flex:1;display:grid;gap:8px}
.book-steps li::before{content:"";height:3px;border-radius:3px;background:var(--beige);transition:background-color .3s var(--ease)}
.book-steps li.is-done::before,.book-steps li.is-on::before{background:var(--accent)}
.book-steps li.is-on{color:var(--ink)}
.proto-note{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.55;color:var(--ink-2);margin-bottom:26px}
.proto-note::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--muted);font:600 12px/1 var(--serif);color:var(--muted);margin-top:1px}
.book-form fieldset{border:0;margin:0 0 10px;padding:0;min-width:0}
.book-form legend{font:450 19px/1.3 var(--serif);color:var(--ink);padding:0;margin:0 0 16px}
.book-form legend{float:left;width:100%}
.book-form legend+*{clear:both}
.book-form fieldset+fieldset{border-top:1px solid var(--line);padding-top:24px;margin-top:6px}
.field{display:grid;gap:6px;margin-bottom:18px;min-width:0}
.field-row{display:grid;gap:0 16px}
@media (min-width:600px){.field-row{grid-template-columns:1fr 1fr}}
label{font:550 15px/1.35 var(--sans);color:var(--ink)}
label .opt{font-weight:400;color:var(--muted)}
.hint{font-size:13.5px;line-height:1.45;color:var(--muted);margin:-2px 0 2px}
input,select,textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-input);padding:12px 14px;min-height:48px;transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236F5A49' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
textarea{resize:vertical;min-height:124px}
input::placeholder,textarea::placeholder{color:#9A8878}
input:hover,select:hover,textarea:hover{border-color:rgba(47,34,25,.38)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,68,38,.16)}
[aria-invalid="true"]{border-color:var(--error);background-color:#FDF6F3}
.err{display:flex;gap:7px;align-items:flex-start;color:var(--error);font-size:14px;line-height:1.45;margin:0}
.err::before{content:"!";flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--error);color:#fff;font:700 11px/1 var(--sans);margin-top:1px}
.err:empty{display:none}
.form-foot{display:grid;gap:12px;margin-top:8px}
.reassure{font-size:14px;color:var(--muted);margin:0;text-align:center}
.form-done:focus{outline:none}
.form-done h3{font-size:clamp(26px,2.6vw,32px);margin-bottom:.4em}
.form-done>p{color:var(--ink-2)}
.summary{margin:18px 0 22px;border:1px solid var(--line);border-radius:14px;padding:4px 16px;background:var(--bg)}
.summary div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.summary div:last-child{border-bottom:0}
.summary dt{color:var(--muted)}
.summary dd{margin:0;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.form-done .btn{margin-top:10px}
.faq{padding-bottom:var(--sec)}
.faq-grid{display:grid;gap:24px}
@media (min-width:900px){.faq-grid{grid-template-columns:4fr 7fr;gap:72px}}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font:400 clamp(19px,1.6vw,22px)/1.35 var(--serif);color:var(--ink);position:relative;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent-d)}
.faq details p{padding:0 0 22px;max-width:38em;margin:0;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .w-layer[data-scene="0"] video{transform:scale(1.24)!important;transform-origin:50% 15%}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-wipe,.js .split .line>span,.js .hero-h .line>span,.js .hero-sub,.js .w-hero .hero-ctas{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .reveal-wipe>img,.js .reveal-wipe>video{transform:none!important;clip-path:none!important}.js .reveal-wipe>.tag{opacity:1!important}
  .w-layer img,.w-layer video{transform:none!important}
  .why{height:auto}.why-stage{position:relative;height:auto;min-height:100svh;padding:100px 0}.why-circle{clip-path:none}.why-copy{opacity:1;transform:none}
}

/* Official Yuwart logo (supplied by Naza, Oct 30) — mask so it takes the text colour */
.logo-mark,.logo-word{display:inline-block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;flex:none}
.logo-mark{--m:url(img/brand/yuwart-mark.png);width:38px;height:32px}
.logo-word{--m:url(img/brand/yuwart-wordmark.png);width:104px;height:30px}
.brand{gap:12px}
.site-footer .brand .logo-mark{width:58px;height:49px}
.site-footer .brand .logo-word{width:150px;height:43px}
@media (max-width:759px){.logo-mark{width:32px;height:27px}.logo-word{width:88px;height:25px}}

/* Window-Y logo (approved by Naza, Oct 30) */
.logo-lockup{display:inline-block;flex:none;width:153px;height:40px;background:url(/img/brand/yuwart-logo.png) left center/contain no-repeat}
.site-header.over-hero.on-dark .logo-lockup,.site-header.over-hero:not(.scrolled) .logo-lockup,.menu-open .site-header .logo-lockup,.site-footer .logo-lockup{background-image:url(/img/brand/yuwart-logo-light.png)}
.site-footer .brand .logo-lockup{width:200px;height:52px}
@media (max-width:759px){.logo-lockup{width:130px;height:34px}}

/* cart count on the Art Gallery nav link (set by script.js from the saved cart) */
.nav-count{display:inline-grid;place-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--accent);color:#fff;font:600 11.5px/1 var(--sans);vertical-align:2px}
.mobile-menu .nav-count{min-width:24px;height:24px;font-size:13px;vertical-align:6px;margin-left:10px}