:root{--paper:#f5f3ef;--ink:#171715;--muted:#77736d;--line:#d8d3cb;--night:#090909;--metal:#b9b4aa;--silver:#e7e3dc;--display:'Manrope',sans-serif;--body:'DM Sans',sans-serif;--serif:'Cormorant Garamond',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.announcement{height:30px;background:#0a0a0a;color:#d6d1c8;padding:0 5.2%;display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:.18em;font-weight:600}.pulse{width:5px;height:5px;background:#c8c0b3;border-radius:50%;box-shadow:0 0 8px #e8e1d5}.announcement-right{margin-left:auto;color:#918b82;font-weight:400}.site-header{height:78px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid #dcd7cf;position:relative;z-index:10}.wordmark{font:700 27px/.8 var(--display);letter-spacing:-.09em;display:flex;align-items:flex-start;position:relative}.wordmark>span{font:500 9px var(--body);letter-spacing:0;margin:0 0 0 3px}.wordmark small{font:600 7px var(--body);letter-spacing:.25em;position:absolute;top:23px;left:1px}.nav-links{display:flex;align-items:center;gap:36px;font-size:10px;color:#625e57}.nav-links a{transition:color .2s}.nav-links a:hover{color:#000}.nav-contact{border:1px solid #bdb7ad;padding:12px 16px;color:var(--ink)!important}.nav-contact span{margin-left:18px}.menu-toggle{display:none;background:transparent;border:0}.hero{background:var(--night);color:#f3f0e9;overflow:hidden}.hero-topline{padding:18px 5.2%;display:flex;justify-content:space-between;color:#8d8880;font-size:8px;letter-spacing:.18em;border-bottom:1px solid #292824}.hero-copy{padding:70px 10.4% 78px;display:grid;grid-template-columns:1fr 1.2fr;column-gap:7%;align-items:end;background:#0b0b0a}.eyebrow{font-size:9px;letter-spacing:.2em;font-weight:600;color:#80796f;margin:0}.hero-copy .eyebrow{align-self:start;padding-top:12px}.hero h1{font:500 clamp(43px,6.3vw,84px)/.91 var(--display);letter-spacing:-.08em;margin:0}.hero h1 em{font-family:var(--serif);font-weight:400;color:#bfb09a;letter-spacing:-.04em}.hero-bottom{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:30px}.hero-bottom p{font-size:12px;line-height:1.8;color:#aaa49a;max-width:440px;margin:0}.round-link{width:44px;height:44px;flex-shrink:0;border:1px solid #575149;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#ded7cb;transition:background .25s,color .25s}.round-link:hover{background:#ded7cb;color:#111}.ticker{overflow:hidden;border-top:1px solid #2c2a26;border-bottom:1px solid #2c2a26;padding:17px 0;color:#a39b8e;font-size:9px;font-weight:600;letter-spacing:.22em;white-space:nowrap}.ticker>div{width:max-content;animation:ticker 28s linear infinite}.ticker span{padding:0 30px;color:#70695d}.section-pad{padding:110px 10.4%}.section-index{font-size:8px;letter-spacing:.17em;color:#89837a;font-weight:600}.intro{display:grid;grid-template-columns:1fr 2fr;gap:8%;background:#f5f3ef}.intro-content .eyebrow{margin:0 0 22px}.intro h2,.section-heading h2,.work-heading h2,.contact h2{font:500 clamp(44px,6vw,76px)/.95 var(--display);letter-spacing:-.075em;margin:0}.intro h2 em,.section-heading h2 em,.work-heading h2 em,.contact h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;color:#827769}.intro-lower{display:grid;grid-template-columns:1.4fr 1fr;gap:12%;align-items:end;margin-top:35px}.intro-lower p,.section-heading>p,.work-heading>p,.contact-left>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#6d6860;margin:0}.text-link{font-size:10px;font-weight:600;border-bottom:1px solid #b7b0a5;padding-bottom:11px;white-space:nowrap}.text-link span{margin-left:18px}.services{background:#eae7e1}.section-heading,.work-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}.section-heading .section-index,.work-heading .section-index{margin-bottom:28px}.section-heading>p,.work-heading>p{max-width:260px;padding-bottom:7px}.service-list{border-top:1px solid #cfc8be}.service-item{display:grid;grid-template-columns:60px 1fr 30px;gap:15px;align-items:start;padding:29px 0;border-bottom:1px solid #cfc8be;transition:padding .25s}.service-item:hover{padding-left:10px;padding-right:10px}.service-no{font-size:9px;color:#898176;padding-top:8px}.service-item h3{font:500 clamp(21px,2.5vw,29px) var(--display);letter-spacing:-.05em;margin:0 0 8px}.service-item p{font-size:12px;color:#777067;line-height:1.7;margin:0;max-width:520px}.service-arrow{font-size:18px;justify-self:end;color:#82796c}.work{background:#f5f3ef}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 22px}.project-large{grid-column:span 2}.project-art{position:relative;overflow:hidden;min-height:260px;aspect-ratio:1.15/1;background:#d4cec3}.project-large .project-art{aspect-ratio:2.05/1}.art-one{background:linear-gradient(140deg,#d7cbb7,#8e8270 48%,#292724)}.art-sun{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;background:#ded6c8;top:8%;right:16%;box-shadow:0 0 80px #fff7}.art-road{position:absolute;bottom:-45%;left:23%;width:56%;height:90%;background:#363431;transform:perspective(200px) rotateX(13deg);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}.art-billboard{position:absolute;z-index:1;left:18%;top:22%;width:48%;height:52%;background:#20201e;color:#f4f0e7;padding:4% 5%;box-shadow:0 12px 22px #1115;transform:rotate(-2deg);display:flex;flex-direction:column;justify-content:space-between}.art-billboard span{font:800 clamp(24px,5vw,67px)/.83 var(--display);letter-spacing:-.09em}.art-billboard small{font-size:7px;letter-spacing:.14em}.art-two{background:#c9c4bb;display:flex;align-items:center;justify-content:center}.art-circle{width:64%;aspect-ratio:1;border-radius:50%;background:#eeeae2;display:flex;align-items:center;justify-content:center;flex-direction:column;font:800 clamp(20px,3vw,40px)/.92 var(--display);letter-spacing:-.08em;text-align:center;transform:rotate(-8deg)}.art-circle i{font-style:normal;color:#8c8377}.art-side-note{position:absolute;right:5%;bottom:8%;font-size:7px;letter-spacing:.12em;line-height:1.7}.art-three{background:#292825;color:#f2eee6;padding:8%;display:flex;flex-direction:column;justify-content:space-between}.art-three-top{font:700 clamp(19px,3vw,34px)/1 var(--display);letter-spacing:-.07em}.mini-board{background:#c9bca8;color:#1a1917;padding:8% 7%;width:85%;margin:auto;transform:rotate(3deg);box-shadow:0 10px 25px #0003;display:flex;flex-direction:column;gap:10px}.mini-board span{font:800 clamp(30px,4vw,53px) var(--display);letter-spacing:-.1em}.mini-board small{font-size:7px;letter-spacing:.14em}.art-three-bottom{font-size:8px;letter-spacing:.1em;text-align:right}.project-meta{display:flex;justify-content:space-between;gap:12px;padding-top:15px}.project-meta span{font-size:8px;letter-spacing:.1em;color:#7d766b}.project-meta h3{font:500 17px var(--display);letter-spacing:-.04em;margin:6px 0 0}.project-type{text-align:right;padding-top:5px}.portfolio-note{font-size:10px;color:#858078;margin-top:30px}.contact{background:#e6e1d8;display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact h2{margin:28px 0}.contact-left>p:not(.eyebrow){max-width:350px}.whatsapp-link{display:inline-flex;align-items:center;gap:28px;font-size:11px;font-weight:600;border-bottom:1px solid #a39a8d;padding:13px 0;margin-top:25px}.whatsapp-link span{font-size:16px}.contact-form{display:flex;flex-direction:column;gap:9px}.contact-form label{font-size:9px;letter-spacing:.11em;font-weight:700;margin-top:8px}.contact-form label span{color:#8a8378}.contact-form input,.contact-form select,.contact-form textarea{border:0;border-bottom:1px solid #c2b9ad;background:transparent;border-radius:0;padding:12px 0;color:var(--ink);outline:none;font-size:12px;resize:vertical}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#222}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#999188}.submit-button{border:0;background:#171715;color:white;padding:16px 18px;text-align:left;display:flex;justify-content:space-between;cursor:pointer;font-size:11px;font-weight:600;margin-top:13px;transition:background .2s,color .2s}.submit-button:hover{background:#b9ad9a;color:#171715}.form-note{font-size:9px;line-height:1.6;color:#777067}.form-note code{font-size:9px}.footer{background:#0a0a09;color:#f0ece4;padding:48px 5.2% 22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}.footer-mark{color:#f0ece4}.footer>p{font-size:12px;color:#aaa398;justify-self:end}.footer-bottom{grid-column:span 2;border-top:1px solid #393630;padding-top:18px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.13em;color:#9a9387}.footer-bottom a{color:#f0ece4}.reveal{animation:rise-in .8s both}.hero h1.reveal{animation-delay:.1s}.hero-bottom.reveal{animation-delay:.2s}@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media(max-width:760px){.announcement{padding:0 5%;font-size:7px;letter-spacing:.13em}.announcement-right{display:none}.site-header{height:70px;padding:0 5%}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:10px}.menu-toggle span{width:22px;height:1px;background:#171715}.nav-links{display:none;position:absolute;top:69px;left:0;right:0;background:var(--paper);padding:24px 5% 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:22px}.nav-links.open{display:flex}.nav-contact{display:flex;justify-content:space-between}.hero-topline{padding:16px 5%;font-size:7px;letter-spacing:.1em}.hero-copy{padding:47px 6% 52px;grid-template-columns:1fr;gap:22px}.hero-copy .eyebrow{padding-top:0}.hero h1{font-size:clamp(45px,12vw,72px)}.hero-bottom{grid-column:1;margin-top:0;gap:15px}.hero-bottom p{font-size:11px;max-width:300px}.round-link{flex-shrink:0;width:38px;height:38px}.section-pad{padding:75px 6%}.intro{grid-template-columns:1fr;gap:30px}.intro h2,.section-heading h2,.work-heading h2,.contact h2{font-size:clamp(42px,11vw,64px)}.intro-lower{grid-template-columns:1fr;gap:22px}.section-heading,.work-heading{display:block;margin-bottom:35px}.section-heading>p,.work-heading>p{margin-top:24px}.service-item{grid-template-columns:30px 1fr 18px;gap:10px;padding:23px 0}.service-item h3{font-size:22px}.service-item p{font-size:11px}.project-grid{gap:30px 12px}.project-large{grid-column:span 2}.project-art{min-height:190px}.project-large .project-art{min-height:210px}.project-meta{display:block}.project-meta h3{font-size:15px}.project-type{display:block;text-align:left;font-size:7px!important}.contact{grid-template-columns:1fr;gap:45px}.footer{padding:40px 6% 20px;gap:35px 15px}.footer>p{font-size:10px;text-align:right}.footer-bottom{font-size:7px;gap:10px}.footer-bottom span:last-child{display:none}}@media(max-width:390px){.project-grid{grid-template-columns:1fr}.project-large{grid-column:auto}.project-large .project-art{aspect-ratio:1.15/1}.footer-bottom{letter-spacing:.07em}}

/* ---------- Photo billboard with live Lavco advert mapped onto the screen ---------- */
.scene-stage{position:relative;overflow:hidden;background:linear-gradient(#4f719a,#9cb8d0);display:flex;justify-content:center}
.photo-wrap{position:relative;width:min(100%,1080px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(#000 80%,transparent);mask-composite:intersect}
.photo-wrap img{display:block;width:100%;height:auto}
.bb-scale{position:absolute;left:0;top:0;width:740px;height:506px;transform-origin:0 0;transform:scale(var(--s,1));pointer-events:none}
.bb-live{position:absolute;left:0;top:0;width:1200px;height:500px;transform-origin:0 0;transform:matrix3d(0.270676,-0.065075,0,-0.00009951,-0.017694,0.354988,0,-0.00002989,0,0,1,0,196.5000,152.5000,0,1);overflow:hidden;background:#0b0b09;color:#fff;font-family:'Space Mono',ui-monospace,monospace;font-weight:700;filter:saturate(1.15) contrast(1.05);backface-visibility:hidden}
.bb-live:after{content:"";position:absolute;inset:0;z-index:5;background:radial-gradient(#00000033 30%,transparent 36%) 0 0/5px 5px,linear-gradient(100deg,#ffffff1f,transparent 35%,#0000002a);mix-blend-mode:multiply}
.bb-ripple{position:absolute;left:-30%;top:-60%;width:160%;height:220%;filter:blur(7px)}
.rp1{background:repeating-radial-gradient(ellipse at 32% 60%,#ff2f64 0 14px,#f7bcd2 14px 24px,#0b0d05 24px 52px,#a7bb14 52px 70px,#0b0d05 70px 96px);animation:rp-a 18s linear infinite}
.rp2{opacity:.4;mix-blend-mode:hard-light;background:repeating-radial-gradient(ellipse at 70% 30%,#c9d21d 0 12px,#0b0d05 12px 40px,#ff3d73 40px 56px,#f9d3e2 56px 64px,#0b0d05 64px 92px);animation:rp-b 24s linear infinite}
.bb-vig{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 38% 55%,#000c 0,#0008 38%,transparent 75%)}
.bb-slide{position:absolute;inset:0;z-index:2;opacity:0;animation:slide 15s infinite}
.bb-slide:nth-child(5){animation-delay:5s}.bb-slide:nth-child(6){animation-delay:10s}
.bb-big{position:absolute;left:5%;top:50%;margin:0;transform:translateY(-50%);font-size:118px;line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.bb-small{position:absolute;left:5%;bottom:7%;font-size:34px;letter-spacing:.02em}
.bb-note{position:absolute;right:5%;top:8%;width:300px;text-align:right;font-size:24px;line-height:1.25;text-transform:uppercase}
.bb-glow{position:absolute;left:0;top:0;width:740px;height:506px;z-index:-1}
.stage-fade{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(transparent,#0b0b0a)}
.stage-label{position:absolute;left:5.2%;right:5.2%;bottom:16px;display:flex;justify-content:space-between;color:#c9d6e2;font-size:8px;letter-spacing:.2em;z-index:2}
@keyframes rp-a{from{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}to{transform:rotate(360deg) scale(1)}}
@keyframes rp-b{from{transform:rotate(360deg) scale(1.1)}50%{transform:rotate(180deg) scale(.92)}to{transform:rotate(0) scale(1.1)}}
@keyframes slide{0%{opacity:0;transform:translateX(-5%)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateX(5%)}}
@media(max-width:760px){.scene-stage{height:430px;justify-content:flex-start}.photo-wrap{width:170%;margin-left:-40%;flex-shrink:0}.stage-label{font-size:6px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.bb-slide{animation:none;opacity:0}.bb-slide:first-of-type{opacity:1}}

/* ---------- Linked cards ---------- */
a.service-item,a.project{display:grid;color:inherit}a.project{display:block}a.project:hover h3{text-decoration:underline}
.page-hero{background:var(--night);color:#f3f0e9;padding:90px 10.4% 70px}.page-hero h1{font:500 clamp(46px,7vw,92px)/.92 var(--display);letter-spacing:-.08em;margin:22px 0}.page-hero h1 em{font-family:var(--serif);font-weight:400;color:#bfb09a}.page-hero p{max-width:480px;font-size:13px;line-height:1.8;color:#aaa49a}
.detail{display:grid;grid-template-columns:1fr 1.3fr;gap:8%;padding:80px 10.4%;border-bottom:1px solid #cfc8be}.detail:nth-of-type(even){background:#eae7e1}.detail h2{font:500 clamp(32px,4vw,52px)/1 var(--display);letter-spacing:-.06em;margin:14px 0}.detail p{font-size:13px;line-height:1.9;color:#6d6860;max-width:520px}.detail ul{padding:0;margin:22px 0;list-style:none;border-top:1px solid #cfc8be}.detail li{padding:13px 0;border-bottom:1px solid #cfc8be;font-size:12px}.detail .project-art{aspect-ratio:1.3/1}.detail .text-link{display:inline-block;margin-top:14px}
@media(max-width:760px){.page-hero{padding:60px 6% 50px}.detail{grid-template-columns:1fr;gap:30px;padding:55px 6%}}

/* ---------- Day / night billboard ---------- */
.tod-toggle{position:absolute;top:16px;right:5.2%;z-index:4;display:flex;border:1px solid #ffffff55;background:#0b0b0a99;backdrop-filter:blur(6px)}
.tod-toggle button{background:transparent;border:0;color:#d6d1c8;font-size:8px;letter-spacing:.18em;font-weight:700;padding:10px 13px;cursor:pointer;transition:background .25s,color .25s}
.tod-toggle button[aria-pressed="true"]{background:#f3f0e9;color:#111}
.scene-stage::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .8s;background:radial-gradient(1px 1px at 12% 14%,#fff,transparent),radial-gradient(1px 1px at 27% 32%,#fff9,transparent),radial-gradient(1.4px 1.4px at 41% 9%,#fff,transparent),radial-gradient(1px 1px at 58% 22%,#fff9,transparent),radial-gradient(1.4px 1.4px at 73% 12%,#fff,transparent),radial-gradient(1px 1px at 86% 30%,#fff9,transparent),radial-gradient(1px 1px at 93% 8%,#fff,transparent),radial-gradient(1px 1px at 6% 40%,#fff9,transparent)}
.scene-stage{transition:background .8s}.photo-wrap{z-index:1}
.photo-wrap img{transition:filter .8s}.bb-live{transition:filter .8s,box-shadow .8s}
html[data-tod="night"] .scene-stage{background:linear-gradient(#050914,#142040)}
html[data-tod="night"] .scene-stage::before{opacity:1}
html[data-tod="night"] .photo-wrap img{filter:brightness(.3) saturate(.7) contrast(1.15) hue-rotate(10deg)}
html[data-tod="night"] .bb-live{filter:saturate(1.35) contrast(1.1) brightness(1.3);box-shadow:0 0 70px 24px #ff4f7d66}
html[data-tod="night"] .stage-label{color:#9fb0d0}

/* ---------- Floating dock: WhatsApp + chat ---------- */
.dock{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-fab,.chat-fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 8px 24px #0005;transition:transform .2s}
.wa-fab{background:#25d366}.chat-fab{background:#171715;color:#f3f0e9;border:1px solid #4a463f}
.wa-fab:hover,.chat-fab:hover{transform:scale(1.07)}
.chat-panel{order:-1;width:min(350px,calc(100vw - 36px));height:min(480px,calc(100vh - 160px));background:var(--paper);border:1px solid #cfc8be;box-shadow:0 20px 50px #0006;display:flex;flex-direction:column;animation:rise-in .3s both}
.chat-panel[hidden]{display:none}
.chat-panel header{background:#0b0b0a;color:#f3f0e9;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.chat-panel header b{display:block;font:700 14px var(--display);letter-spacing:-.03em}.chat-panel header small{font-size:9px;letter-spacing:.1em;color:#9a9387}
.chat-close{background:transparent;border:0;color:#f3f0e9;font-size:24px;cursor:pointer;line-height:1}
.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.msg{max-width:86%;padding:10px 12px;font-size:12px;line-height:1.55}
.msg.bot{background:#e6e1d8;align-self:flex-start}.msg.me{background:#171715;color:#fff;align-self:flex-end}
.msg a{display:inline-block;margin-top:6px;font-weight:700;border-bottom:1px solid #a39a8d}
.chat-chips{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:none}
.chat-chips button{flex-shrink:0;background:transparent;border:1px solid #b7b0a5;padding:7px 10px;font-size:10px;cursor:pointer;color:var(--ink)}
.chat-chips button:hover{background:#171715;color:#fff}
.chat-form{display:flex;border-top:1px solid #cfc8be}
.chat-form input{flex:1;border:0;background:transparent;padding:14px;font-size:13px;outline:none}
.chat-form button{width:48px;border:0;background:#171715;color:#fff;font-size:18px;cursor:pointer}

/* ---------- Mockup tool ---------- */
.mockup{background:#eae7e1}
.mock-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:6%;align-items:start}
.mock-stage{background:linear-gradient(#4f719a,#9cb8d0);position:relative}
.mock-stage canvas{display:block;width:100%;height:auto}
.mock-status{position:absolute;left:12px;right:12px;bottom:10px;margin:0;font-size:10px;color:#fff;text-shadow:0 1px 4px #000}
.mock-controls{display:flex;flex-direction:column;gap:9px}
.mock-controls label{font-size:9px;letter-spacing:.11em;font-weight:700;margin-top:8px;display:block}.mock-controls label span{color:#8a8378}
.mock-controls input[type=text],.mock-controls input:not([type]){border:0;border-bottom:1px solid #c2b9ad;background:transparent;padding:12px 0;font-size:12px;outline:none;color:var(--ink)}
.mock-controls input:focus{border-color:#222}
.mock-controls input[type=file]{font-size:11px;padding:8px 0}
.mock-row{display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:end}
.mock-row input[type=color]{width:46px;height:34px;padding:0;border:1px solid #c2b9ad;background:none}
.mock-row input[type=range]{width:100%}
.mock-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mock-actions .submit-button{margin-top:0}
.ghost-button{border:1px solid #a39a8d;background:transparent;padding:15px 18px;text-align:left;font-size:11px;font-weight:600;cursor:pointer;color:var(--ink)}
.ghost-button:hover{background:#171715;color:#fff}

/* ---------- Form extras ---------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.submit-button:disabled{opacity:.6;cursor:wait}

/* ---------- Scroll reveal ---------- */
.sr{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0ms),transform .8s ease var(--d,0ms)}
.sr.sr-in{opacity:1;transform:none}
.service-item.sr{transition:opacity .8s ease var(--d,0ms),transform .8s ease var(--d,0ms),padding .25s}

@media(max-width:760px){
  .mock-grid{grid-template-columns:1fr;gap:30px}
  .tod-toggle{top:12px;right:5%}
  .dock{right:14px;bottom:14px}
  .wa-fab,.chat-fab{width:52px;height:52px}
  .chat-panel{height:min(460px,calc(100vh - 150px))}
}

/* ---------- Language switch ---------- */
.lang-switch{display:flex;gap:4px;margin-left:4px}
.lang-switch button{background:transparent;border:0;border-bottom:1px solid transparent;font-size:9px;letter-spacing:.12em;font-weight:700;color:#8a8378;padding:6px 4px;cursor:pointer}
.lang-switch button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){.lang-switch{margin:0;gap:14px}.lang-switch button{font-size:11px}}

/* ---------- Modals ---------- */
.no-scroll{overflow:hidden}
.modal{position:fixed;inset:0;z-index:80;background:#000a;display:grid;place-items:center;padding:16px;animation:rise-in .25s both}
.modal[hidden]{display:none}
.modal-card{position:relative;background:var(--paper);width:min(520px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:34px 30px 28px;box-shadow:0 30px 70px #0008}
.modal-x{position:absolute;top:8px;right:12px;background:transparent;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--ink)}
.modal-card h3{font:500 clamp(24px,5vw,32px)/1.05 var(--display);letter-spacing:-.05em;margin:12px 0 18px}
.modal-card label{display:block;font-size:9px;letter-spacing:.11em;font-weight:700;margin:14px 0 2px}
.modal-card input,.modal-card select,.modal-card textarea{width:100%;border:0;border-bottom:1px solid #c2b9ad;background:transparent;padding:12px 0;font-size:13px;outline:none;color:var(--ink);border-radius:0}
.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:#222}
.offer-p{font-size:12px;line-height:1.8;color:#6d6860;margin:0 0 10px}
#offer-form{display:flex;flex-direction:column;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #b7b0a5;background:transparent;padding:11px 14px;font-size:12px;cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:#171715;color:#fff;border-color:#171715}
.bf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.bf-nav .submit-button{margin-top:0;min-width:130px}.bf-nav .submit-button:disabled{opacity:.35;cursor:not-allowed}
.bf-pre{white-space:pre-wrap;background:#e6e1d8;padding:14px;font:12px/1.6 'DM Sans',sans-serif;margin:0 0 14px}
.bf-send{display:flex;flex-direction:column;gap:10px}.bf-send .submit-button{margin-top:0}
.brief-link{background:transparent;border:0;border-bottom:1px solid #a39a8d;cursor:pointer;color:var(--ink);margin-top:8px}
#brief-print{display:none}
@media print{body>*:not(#brief-print){display:none!important}#brief-print{display:block!important;padding:30px;color:#000}#brief-print pre{font:14px/1.7 sans-serif;white-space:pre-wrap}}

/* ---------- Before / after ---------- */
.ba{background:#f5f3ef}
.ba-wrap{position:relative;max-width:1080px;margin:0 auto;--p:50%;overflow:hidden;background:linear-gradient(#4f719a,#9cb8d0);user-select:none}
.ba-wrap canvas{display:block;width:100%;height:auto}
#ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 8px #0006}
.ba-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:#171715;display:grid;place-items:center;font-style:normal;font-size:16px;box-shadow:0 4px 14px #0005}
.ba-tag{position:absolute;top:14px;font-size:8px;letter-spacing:.18em;font-weight:700;background:#0b0b0acc;color:#f3f0e9;padding:7px 10px}
.ba-l{left:14px}.ba-r{right:14px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}

/* ---------- Ideas + readability ---------- */
.ideas{display:flex;flex-direction:column;gap:8px;border:1px solid #cfc8be;padding:14px;background:#f0ede6}
.ideas[hidden]{display:none}
.ideas input,.ideas select{border:0;border-bottom:1px solid #c2b9ad;background:transparent;padding:10px 0;font-size:12px;outline:none;color:var(--ink)}
.ideas .submit-button{margin-top:4px}
.idea-list{display:flex;flex-direction:column;gap:6px}
.idea-list button{text-align:left;border:1px solid #b7b0a5;background:#fff;padding:10px 12px;font:700 12px var(--display);letter-spacing:-.02em;cursor:pointer}
.idea-list button:hover{background:#171715;color:#fff}
.read{border:1px solid #cfc8be;padding:14px;margin-top:6px;background:#f0ede6}
.read-top{display:flex;justify-content:space-between;font-size:11px}
.read-top b{letter-spacing:.06em;font-size:9px}
.read-bar{height:6px;background:#d8d3cb;margin:10px 0}
.read-bar i{display:block;height:100%;width:0;transition:width .4s,background .4s;background:#999}
.read-bar i.g{background:#3f9b5b}.read-bar i.a{background:#d49a2a}.read-bar i.r{background:#c4493a}
#rd-tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:11px;line-height:1.5}
#rd-tips li{padding-left:14px;position:relative}
#rd-tips li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#999}
#rd-tips li.ok::before{background:#3f9b5b}#rd-tips li.warn::before{background:#d49a2a}#rd-tips li.bad::before{background:#c4493a}
#rd-tips b{margin-right:6px}

/* ---------- 404 ---------- */
.nf{background:var(--night);color:#f3f0e9;padding:80px 6% 100px;text-align:center}
.nf-board{max-width:780px;margin:0 auto;background:#141412;border:6px solid #2c2a26;padding:64px 5% 56px;box-shadow:0 30px 60px #0009}
.nf-board small{font-size:9px;letter-spacing:.22em;color:#8d8880;font-weight:700}
.nf-board h1{font:800 clamp(44px,9vw,96px)/.92 var(--display);letter-spacing:-.08em;margin:22px 0}
.nf-board h1 em{font-family:var(--serif);font-weight:400;color:#bfb09a;letter-spacing:-.04em}
.nf-board p{font-size:13px;line-height:1.8;color:#aaa49a;max-width:420px;margin:0 auto}
.nf-pole{width:26px;height:110px;margin:0 auto;background:linear-gradient(90deg,#55524b,#8d8a82,#55524b)}
.nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.nf-actions .submit-button{margin-top:0;gap:30px;background:#f3f0e9;color:#111}
.nf-ghost{color:#f3f0e9;border-color:#6a655b;display:flex;gap:30px;text-align:left}
.nf-ghost:hover{background:#f3f0e9;color:#111}

@media(max-width:760px){.modal-card{padding:30px 20px 22px}.nf{padding:50px 5% 70px}}
[hidden]{display:none!important}

/* ================= Header theme toggle ================= */
.theme-toggle{display:flex;border:1px solid #bdb7ad;order:2;margin-left:22px}
.theme-toggle button{background:transparent;border:0;color:var(--ink);font-size:13px;line-height:1;padding:9px 11px;cursor:pointer;transition:background .25s,color .25s}
.theme-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.nav-links{order:1}
@media(max-width:760px){.theme-toggle{order:1;margin-left:8px;margin-right:8px}.menu-toggle{order:2}.nav-links{order:3}}

/* ================= Billboard studio page + home teaser ================= */
.studio-page{padding-top:70px}
.studio-teaser{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;align-items:center;background:#eae7e1}
.studio-copy h2{font:500 clamp(44px,6vw,76px)/.95 var(--display);letter-spacing:-.075em;margin:28px 0 22px}
.studio-copy h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;color:#827769}
.studio-copy p{font-size:12px;line-height:1.9;color:#6d6860;max-width:340px;margin:0 0 18px}
.studio-btn{display:inline-flex;gap:30px;margin-top:10px}
.studio-photo{display:block;overflow:hidden;background:linear-gradient(#4f719a,#9cb8d0)}
.studio-photo canvas{display:block;width:100%;height:auto;transition:transform .8s}
.studio-photo:hover canvas{transform:scale(1.03)}
@media(max-width:760px){.studio-teaser{grid-template-columns:1fr;gap:34px}}

/* ================= NIGHT MODE: the whole site ================= */
html{color-scheme:light}
html[data-tod="night"]{color-scheme:dark;--paper:#0e0e0d;--ink:#f1ede5;--muted:#9a9387;--line:#2d2b27}
body,.site-header,.intro,.services,.work,.ba,.mockup,.contact,.studio-teaser,.detail,.modal-card,.chat-panel,.msg,.read,.ideas,.submit-button,.ghost-button,.chip,.theme-toggle,.nav-links{transition:background-color .6s ease,color .6s ease,border-color .6s ease}
html[data-tod="night"] .site-header{border-bottom-color:#2a2823}
html[data-tod="night"] .nav-links{color:#a39d92}
html[data-tod="night"] .nav-links a:hover{color:#fff}
html[data-tod="night"] .nav-contact{border-color:#4a463f}
html[data-tod="night"] .menu-toggle span{background:#f1ede5}
html[data-tod="night"] .theme-toggle{border-color:#4a463f}
html[data-tod="night"] .intro,html[data-tod="night"] .work,html[data-tod="night"] .ba{background:#0e0e0d}
html[data-tod="night"] .services,html[data-tod="night"] .mockup,html[data-tod="night"] .studio-teaser,html[data-tod="night"] .detail:nth-of-type(even){background:#151513}
html[data-tod="night"] .contact{background:#1a1916}
html[data-tod="night"] .intro-lower p,html[data-tod="night"] .section-heading>p,html[data-tod="night"] .work-heading>p,html[data-tod="night"] .contact-left>p:not(.eyebrow),html[data-tod="night"] .studio-copy p,html[data-tod="night"] .detail p,html[data-tod="night"] .offer-p{color:#a39d92}
html[data-tod="night"] .intro h2 em,html[data-tod="night"] .section-heading h2 em,html[data-tod="night"] .work-heading h2 em,html[data-tod="night"] .contact h2 em,html[data-tod="night"] .studio-copy h2 em{color:#bfb09a}
html[data-tod="night"] .eyebrow,html[data-tod="night"] .section-index{color:#8f897f}
html[data-tod="night"] .text-link,html[data-tod="night"] .whatsapp-link,html[data-tod="night"] .brief-link{border-color:#5a554c}
html[data-tod="night"] .service-list,html[data-tod="night"] .service-item,html[data-tod="night"] .detail,html[data-tod="night"] .detail ul,html[data-tod="night"] .detail li{border-color:#2e2c27}
html[data-tod="night"] .service-item p,html[data-tod="night"] .project-meta span,html[data-tod="night"] .portfolio-note,html[data-tod="night"] .form-note,html[data-tod="night"] .contact-form label span,html[data-tod="night"] .mock-controls label span{color:#9a9387}
html[data-tod="night"] .contact-form input,html[data-tod="night"] .contact-form select,html[data-tod="night"] .contact-form textarea,html[data-tod="night"] .mock-controls input:not([type]),html[data-tod="night"] .mock-controls input[type=text],html[data-tod="night"] .modal-card input,html[data-tod="night"] .modal-card select,html[data-tod="night"] .modal-card textarea,html[data-tod="night"] .ideas input,html[data-tod="night"] .ideas select{border-bottom-color:#3d3a34;color:var(--ink)}
html[data-tod="night"] .contact-form input:focus,html[data-tod="night"] .contact-form select:focus,html[data-tod="night"] .contact-form textarea:focus,html[data-tod="night"] .mock-controls input:focus,html[data-tod="night"] .modal-card input:focus,html[data-tod="night"] .modal-card select:focus,html[data-tod="night"] .modal-card textarea:focus{border-color:#f1ede5}
html[data-tod="night"] .contact-form input::placeholder,html[data-tod="night"] .contact-form textarea::placeholder{color:#6f695f}
html[data-tod="night"] .mock-row input[type=color]{border-color:#3d3a34}
html[data-tod="night"] .submit-button{background:#f1ede5;color:#111}
html[data-tod="night"] .submit-button:hover{background:#b9ad9a;color:#111}
html[data-tod="night"] .ghost-button,html[data-tod="night"] .chat-chips button{border-color:#5a554c;color:var(--ink)}
html[data-tod="night"] .ghost-button:hover,html[data-tod="night"] .chat-chips button:hover{background:#f1ede5;color:#111}
html[data-tod="night"] .chip{border-color:#5a554c}
html[data-tod="night"] .chip[aria-pressed="true"]{background:#f1ede5;color:#111;border-color:#f1ede5}
html[data-tod="night"] .chat-panel{border-color:#2e2c27}
html[data-tod="night"] .chat-form{border-top-color:#2e2c27}
html[data-tod="night"] .chat-form button{background:#f1ede5;color:#111}
html[data-tod="night"] .msg.bot{background:#23211d}
html[data-tod="night"] .msg.me{background:#f1ede5;color:#111}
html[data-tod="night"] .msg a{border-color:#5a554c}
html[data-tod="night"] .ideas,html[data-tod="night"] .read{background:#1a1916;border-color:#2e2c27}
html[data-tod="night"] .idea-list button{background:#23211d;border-color:#3d3a34;color:var(--ink)}
html[data-tod="night"] .idea-list button:hover{background:#f1ede5;color:#111}
html[data-tod="night"] .read-bar{background:#2e2c27}
html[data-tod="night"] .bf-pre{background:#23211d}
html[data-tod="night"] .modal{background:#000c}
html[data-tod="night"] .ba-tag{background:#f1ede5;color:#111}
html[data-tod="night"] .stage-fade{background:linear-gradient(transparent,#0b0b0a)}
html[data-tod="night"] .project-art{filter:brightness(.82)}
html[data-tod="night"] .studio-photo{background:linear-gradient(#050914,#142040)}
html[data-tod="night"] .mock-stage,html[data-tod="night"] .ba-wrap{background:linear-gradient(#050914,#142040)}
html[data-tod="night"] .lang-switch button{color:#8a8378}
html[data-tod="night"] .lang-switch button[aria-pressed="true"]{color:var(--ink)}
html[data-tod="night"] .footer,html[data-tod="night"] .page-hero,html[data-tod="night"] .hero-copy{background:#0a0a09}

/* ================= Pre-load hiding (language picker / intro) ================= */
html.pre{background:#0a0a09}
html.pre body>*:not(#gate):not(#intro){visibility:hidden}

/* ================= Language picker ================= */
#gate{position:fixed;inset:0;z-index:200;background:#0a0a09;color:#f3f0e9;display:grid;place-items:center;padding:20px;transition:opacity .45s,transform .45s}
#gate.leaving{opacity:0;transform:scale(1.03)}
.g-card{width:min(560px,100%);text-align:center;animation:rise-in .7s both}
.g-mark{font:700 44px/1 var(--display);letter-spacing:-.09em;margin-bottom:34px}
.g-mark span{font:500 13px var(--body);letter-spacing:0;vertical-align:top;margin-left:4px}
.g-q{display:flex;flex-direction:column;gap:6px;margin:0 0 34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8d8880;font-weight:600}
.g-q span:first-child{color:#d6d1c8}
.g-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g-btns button{background:transparent;color:#f3f0e9;border:1px solid #4a463f;padding:26px 10px 22px;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;transition:background .25s,color .25s,transform .25s,border-color .25s}
.g-btns button b{font:700 clamp(18px,3.4vw,24px) var(--display);letter-spacing:-.05em}
.g-btns button small{font:italic 400 17px var(--serif);color:#bfb09a;letter-spacing:0;transition:color .25s}
.g-btns button:hover,.g-btns button:focus-visible{background:#f3f0e9;color:#111;border-color:#f3f0e9;transform:translateY(-3px);outline:none}
.g-btns button:hover small,.g-btns button:focus-visible small{color:#6d6254}
@media(max-width:560px){.g-btns{grid-template-columns:1fr}.g-btns button{flex-direction:row;justify-content:space-between;padding:20px 22px}.g-mark{font-size:38px}}

/* ================= "Caught your eye" intro billboard ================= */
#intro{position:fixed;inset:0;z-index:190;overflow:hidden;pointer-events:auto}
.in-half{position:absolute;top:0;bottom:0;width:50.2%;background:#ebe8e1;transition:transform 1s cubic-bezier(.77,0,.18,1)}
.in-half::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#fff6 0,transparent 60%),linear-gradient(#0000 60%,#0000001c)}
.in-l{left:0}.in-r{right:0}
.in-l::before,.in-r::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:#1c1b1833;z-index:1}
.in-l::before{right:0}.in-r::before{left:0}
html[data-tod="night"] .in-half{background:#10100e}
html[data-tod="night"] .in-half::after{background:radial-gradient(ellipse at 50% 40%,#ff4f7d22 0,transparent 62%)}
.in-lamps{position:absolute;top:0;left:0;right:0;height:46%;display:flex;justify-content:space-around;padding:0 12%;pointer-events:none;z-index:2}
.in-lamps i{display:block;width:12px;height:12px;border-radius:50%;background:#fff8e0;box-shadow:0 0 22px 8px #ffe9a888;position:relative;top:10px}
.in-lamps i::after{content:"";position:absolute;left:50%;top:6px;width:min(36vw,360px);height:46vh;transform:translateX(-50%);background:linear-gradient(#fff3c555,transparent 85%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.55}
html[data-tod="night"] .in-lamps i::after{opacity:.9}
html:not([data-tod="night"]) .in-lamps i::after{opacity:.22}
.in-face{position:absolute;inset:0;display:grid;place-items:center;z-index:3;padding:0 7%;text-align:center}
.in-line{margin:0;font:800 clamp(40px,9vw,128px)/.95 var(--display);letter-spacing:-.07em;text-transform:uppercase;color:#171715;opacity:0;max-width:14ch;transition:opacity .35s,transform .6s}
.in-line[data-beat="1"]{font-size:clamp(34px,7.4vw,104px);max-width:16ch}
.in-line[data-beat="2"]{font-size:clamp(34px,7.2vw,100px);max-width:15ch}
.in-line.on{opacity:1;animation:in-pop .7s cubic-bezier(.2,.9,.25,1.1) both}
.in-line.on.out{animation:none;opacity:0;transform:scale(1.06);filter:blur(4px);transition:opacity .3s,transform .5s,filter .5s}
html[data-tod="night"] .in-line{color:#f6f1e7;text-shadow:0 0 30px #ff4f7d88}
@keyframes in-pop{from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.in-skip{position:absolute;right:5%;bottom:5%;z-index:4;background:transparent;border:1px solid #1c1b1855;color:#171715;font-size:10px;font-weight:700;letter-spacing:.16em;padding:12px 16px;cursor:pointer;text-transform:uppercase}
.in-skip:hover{background:#171715;color:#fff}
html[data-tod="night"] .in-skip{border-color:#ffffff55;color:#f3f0e9}
html[data-tod="night"] .in-skip:hover{background:#f3f0e9;color:#111}
.in-mark{position:absolute;left:5%;bottom:5%;z-index:4;font:700 26px/1 var(--display);letter-spacing:-.09em;color:#171715}
.in-mark span{font:500 9px var(--body);letter-spacing:0;vertical-align:top;margin-left:3px}
html[data-tod="night"] .in-mark{color:#f3f0e9}
#intro.opening .in-l{transform:translateX(-101%)}
#intro.opening .in-r{transform:translateX(101%)}
#intro.opening .in-lamps,#intro.opening .in-skip,#intro.opening .in-mark{opacity:0;transition:opacity .3s}
@media(prefers-reduced-motion:reduce){.in-line.on{animation:none}.in-half{transition:none}}

/* ---------- Change-language access ---------- */
.lang-open{order:2;margin-left:10px;background:transparent;border:1px solid #bdb7ad;color:var(--ink);font-size:14px;line-height:1;padding:8px 10px;cursor:pointer}
html[data-tod="night"] .lang-open{border-color:#4a463f}
@media(max-width:760px){.lang-open{order:1;margin-left:auto;margin-right:0}.theme-toggle{margin-left:8px;margin-right:8px}}
.g-cancel{margin-top:22px;background:transparent;border:0;color:#8d8880;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:10px}
.g-cancel:hover{color:#f3f0e9}
.in-lang{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:4;background:transparent;border:1px solid #1c1b1855;color:#171715;font-size:10px;font-weight:700;letter-spacing:.16em;padding:12px 16px;cursor:pointer;text-transform:uppercase}
.in-lang:hover{background:#171715;color:#fff}
html[data-tod="night"] .in-lang{border-color:#ffffff55;color:#f3f0e9}
html[data-tod="night"] .in-lang:hover{background:#f3f0e9;color:#111}
#intro.opening .in-lang{opacity:0;transition:opacity .3s}
@media(max-width:560px){.in-mark{display:none}.in-lang{left:5%;transform:none}}
@media(max-width:760px){.theme-toggle{margin-left:auto;margin-right:0}.lang-open{order:1;margin-left:8px;margin-right:6px}}

/* Homepage billboard refresh: preserves original 15s animated slide engine, all site effects,
   existing day/night controls, global theme, and responsive billboard scaling. */
.photo-wrap{width:min(100%,1080px)}
.photo-wrap img{width:100%;height:auto;display:block}
.bb-live{transform:matrix3d(0.3455723644,-0.1119843805,0.0000000000,-0.0000679599,-0.0790471620,0.3982466350,0.0000000000,-0.0002043929,0.0000000000,0.0000000000,1.0000000000,0.0000000000,145.4947916667,171.9921875000,0.0000000000,1.0000000000);background:#111715;color:#f9f1e4;font-family:'Manrope',sans-serif;font-weight:700;filter:contrast(1.04)}
.bb-ripple.rp1{background:radial-gradient(ellipse at 10% 85%,#c8a778 0,transparent 38%),linear-gradient(135deg,#11181a,#303435 50%,#13171a);animation:rp-a 18s linear infinite;opacity:.7}
.bb-ripple.rp2{background:repeating-linear-gradient(155deg,transparent 0 65px,#dbc6a127 75px 95px,transparent 120px 200px);animation:rp-b 23s linear infinite;opacity:.55;mix-blend-mode:screen}
.bb-big{font-size:110px;line-height:.94;letter-spacing:-.065em;font-weight:800;text-transform:uppercase;max-width:950px}
.bb-note{font-size:29px;letter-spacing:.13em;line-height:1.3;color:#e7cfaa}
.bb-small{font-size:25px;letter-spacing:.16em;color:#efe2ce}
html[data-tod="night"] .bb-live{filter:brightness(1.35) saturate(1.12);box-shadow:0 0 75px 22px #f0ce905e}
@media(prefers-reduced-motion:reduce){.bb-slide{animation:none;opacity:0}.bb-slide:nth-child(4){opacity:1}}


/* Homepage billboard: animated luminous silk, retaining original slide and day/night logic. */
.bb-live{background:#13292c;isolation:isolate}
.bb-live .bb-ripple.rp1,
.bb-live .bb-ripple.rp2{left:-35%;top:-65%;width:170%;height:230%;filter:blur(16px);transform-origin:50% 50%;will-change:transform}
.bb-live .bb-ripple.rp1{
  background:
   radial-gradient(ellipse 35% 23% at 23% 64%,rgba(251,211,148,.94),transparent 90%),
   radial-gradient(ellipse 29% 24% at 68% 29%,rgba(127,204,196,.76),transparent 90%),
   conic-gradient(from 65deg at 55% 55%,#102e36 0deg,#396b70 58deg,#e6bd83 109deg,#92744e 142deg,#0f2730 210deg,#3b7377 280deg,#102e36 360deg);
  opacity:1;animation:lavcoSilkOne 18s ease-in-out infinite alternate;
}
.bb-live .bb-ripple.rp2{
  background:
    repeating-conic-gradient(from 35deg at 52% 50%,transparent 0deg 15deg,rgba(255,232,187,.2) 17deg 21deg,transparent 25deg 42deg),
    radial-gradient(ellipse 46% 16% at 52% 47%,rgba(255,230,182,.55),transparent 94%);
  opacity:.85;mix-blend-mode:screen;filter:blur(19px);animation:lavcoSilkTwo 23s ease-in-out infinite alternate;
}
.bb-live .bb-vig{background:linear-gradient(90deg,rgba(4,15,21,.65),rgba(6,19,22,.22) 52%,rgba(5,17,20,.35));z-index:1}
.bb-live .bb-slide{z-index:3;text-shadow:0 3px 20px rgba(0,0,0,.65)}
.bb-live .bb-big{color:#fff7e8;text-shadow:0 3px 25px #071417b8}
.bb-live .bb-small,.bb-live .bb-note{color:#fff1d7;text-shadow:0 2px 15px #071417}
@keyframes lavcoSilkOne{0%{transform:translate(-7%,4%) rotate(-16deg) scale(1.06)}50%{transform:translate(5%,-5%) rotate(12deg) scale(1.2)}100%{transform:translate(-2%,5%) rotate(32deg) scale(1.08)}}
@keyframes lavcoSilkTwo{0%{transform:translate(10%,-8%) rotate(18deg) scale(1)}50%{transform:translate(-8%,8%) rotate(-16deg) scale(1.25)}100%{transform:translate(6%,-4%) rotate(-34deg) scale(1.07)}}
html[data-tod="night"] .bb-live{filter:brightness(1.22) saturate(1.23);box-shadow:0 0 68px 19px rgba(232,190,124,.35)}
@media(prefers-reduced-motion:reduce){.bb-live .bb-ripple.rp1,.bb-live .bb-ripple.rp2{animation:none;transform:none}}


/* Responsive improvements — phones, tablets, laptops, ultra-wide screens */
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;overflow-x:clip}
img,video,canvas,svg{max-width:100%}
img{height:auto}
button,input,select,textarea{max-width:100%}
.hero-copy>*,.intro>*,.intro-lower>*,.contact>*,.project-grid>*,.studio-teaser>*,.detail>*,.mock-grid>*,.n-grid>*,.n-form>*{min-width:0}
.hero h1,.intro h2,.section-heading h2,.work-heading h2,.contact h2,.studio-copy h2,.n-hero h1,.n-section h2{overflow-wrap:break-word}
.site-header{gap:clamp(8px,1.4vw,22px)}
.nav-links{gap:clamp(10px,2vw,30px)}
.scene-stage{width:100%;min-height:0}
.photo-wrap{width:min(100%,1080px);max-width:100%;margin:0;flex:0 1 1080px;aspect-ratio:740/506}
.photo-wrap img{width:100%;height:100%;object-fit:contain}
.tod-toggle{max-width:calc(100% - 20px)}
.table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}
.n-est strong{font-size:clamp(32px,6vw,50px);overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1080px){
 .site-header{padding-inline:3%}
 .nav-links{gap:12px;font-size:9px}
 .section-pad{padding:80px 7%}
 .hero-copy{padding-inline:7%}
}
@media(max-width:760px){
 .scene-stage{height:auto!important;min-height:0;justify-content:center;align-items:flex-start}
 .photo-wrap{width:100%!important;max-width:100%;margin:0!important;flex:0 0 100%;aspect-ratio:740/506}
 .photo-wrap img{width:100%;height:100%;object-fit:contain}
 .stage-label{max-width:100%;padding-inline:12px;gap:10px}
 .stage-label span{min-width:0}
 .hero-topline{gap:12px;flex-wrap:wrap}
 .hero-copy{padding:40px 6% 52px}
 .hero h1{font-size:clamp(38px,11vw,66px);letter-spacing:-.065em}
 .hero-bottom{min-width:0}
 .hero-bottom p{max-width:none}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .project-art{min-height:0}
 .project-large .project-art{min-height:0}
 .contact-form input,.contact-form select,.contact-form textarea,.n-form input,.n-form textarea,.n-form select,.n-est input{font-size:16px}
 .n-section,.n-hero{padding:55px 6%}
 .n-hero h1,.n-section h2{font-size:clamp(37px,10vw,65px)}
 .n-section table{font-size:13px}
 .n-section td,.n-section th{padding:12px 10px}
 .n-section th{white-space:normal}
 .n-grid article{padding:18px}
 .n-est{padding:18px}
 .n-form{gap:15px}
 .footer-bottom{flex-wrap:wrap;line-height:1.6}
}
@media(max-width:430px){
 .announcement{letter-spacing:.07em;font-size:6.5px}
 .site-header{gap:5px}
 .wordmark{font-size:24px}
 .hero h1{font-size:clamp(37px,11vw,48px)}
 .section-pad{padding:60px 6%}
 .intro h2,.section-heading h2,.work-heading h2,.contact h2{font-size:clamp(36px,10vw,47px)}
 .project-grid{grid-template-columns:1fr;gap:26px}
 .project-large{grid-column:auto}
 .project-art,.project-large .project-art{aspect-ratio:1.15/1}
 .service-item{grid-template-columns:24px minmax(0,1fr) 16px}
 .footer{grid-template-columns:1fr}
 .footer>p{justify-self:start;text-align:left}
 .footer-bottom{grid-column:1}
 .chat-panel{width:min(350px,calc(100vw - 22px))}
 .modal-card{padding:24px 16px}
 .n-hero p{font-size:15px}
 .n-est strong{font-size:clamp(30px,9vw,42px)}
}
@media(max-width:350px){
 .hero h1{font-size:36px}
 .nav-contact{padding:11px}
 .tod-toggle{transform:scale(.84);transform-origin:top right}
}