:root{
  --paper:#f4f1ea;
  --paper-2:#faf9f6;
  --white:#ffffff;
  --ink:#171917;
  --muted:#6d706b;
  --line:#d8d3c9;
  --gold:#a47732;
  --gold-soft:#d7bd8a;
  --sage:#87958b;
  --black:#050606;
  --radius:20px;
  --shell:min(1320px,calc(100vw - 72px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
::selection{background:#d8c7a8;color:#111}
.page-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none}.page-progress span{display:block;width:0;height:100%;background:var(--gold)}
.shell{width:var(--shell);margin-inline:auto}
.section{padding:140px 0}
.eyebrow{margin:0 0 28px;font-size:11px;font-weight:700;letter-spacing:.16em;color:#7b766d}.eyebrow.inverse{color:rgba(255,255,255,.65)}
.display,.section-title{margin:0;font-weight:460;letter-spacing:-.055em;line-height:.95}.display{font-size:clamp(50px,7.1vw,108px)}.display span,.section-title span{font-family:"Iowan Old Style",Baskerville,"Times New Roman",serif;font-weight:400;font-style:italic;color:var(--gold)}.section-title{font-size:clamp(42px,5vw,76px)}

/* navigation */
.topbar{position:fixed;z-index:100;top:0;left:0;width:100%;height:88px;padding:0 max(36px,calc((100vw - 1320px)/2));display:flex;align-items:center;gap:46px;color:#fff;transition:background .45s,color .45s,border .45s,height .35s;mix-blend-mode:normal}
.topbar.on-light{height:76px;color:var(--ink);background:rgba(250,249,246,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(80,72,60,.12)}
.brand{display:flex;align-items:center;flex-shrink:0}.brand-logo{display:block;width:72px;height:auto;object-fit:contain}
.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:30px}.desktop-nav a{font-size:12px;letter-spacing:.02em;opacity:.78;transition:opacity .2s}.desktop-nav a:hover{opacity:1}.nav-cta{font-size:12px;border-bottom:1px solid currentColor;padding-bottom:4px;margin-left:8px}.nav-cta span{margin-left:7px}.menu-button{display:none;margin-left:auto;width:40px;height:40px;border:0;background:transparent;padding:11px;color:inherit}.menu-button span{display:block;height:1px;background:currentColor;margin:7px 0}
.mobile-menu{display:none}

/* scrub hero */
.scrub-hero{height:520vh;background:#000;position:relative}
.scrub-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.scrub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#000}
.scrub-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.03) 58%,rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 43%);pointer-events:none}
.scrub-grain{position:absolute;inset:-50%;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .18s steps(2) infinite}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
.hero-copy{position:absolute;left:max(36px,calc((100vw - 1320px)/2));bottom:11vh;color:#fff;max-width:720px;opacity:0;transform:translateY(24px);pointer-events:none;will-change:opacity,transform}.hero-copy h1,.hero-copy h2{font-size:clamp(58px,8vw,124px);font-weight:420;letter-spacing:-.065em;line-height:.84;margin:0}.hero-copy em{font-family:"Iowan Old Style",Baskerville,serif;font-weight:400;color:#dbc18e}.hero-copy .hero-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:27px 0 0;color:rgba(255,255,255,.62)}.hero-final .hero-link{display:inline-flex;align-items:center;gap:15px;margin-top:32px;font-size:12px;text-transform:uppercase;letter-spacing:.11em;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:8px;pointer-events:auto}.scrub-index{position:absolute;right:max(36px,calc((100vw - 1320px)/2));bottom:9.5vh;color:#fff;display:grid;grid-template-columns:26px 150px 26px;align-items:center;gap:12px;font-size:9px;letter-spacing:.12em;opacity:.65}.scrub-track{height:1px;background:rgba(255,255,255,.25);position:relative}.scrub-track i{display:block;position:absolute;inset:0 auto 0 0;width:0;background:#fff}

/* intro */
.intro{background:var(--paper-2);padding-top:170px}.intro-grid{display:grid;grid-template-columns:1fr 2.3fr;column-gap:70px;align-items:start}.intro-grid .display{grid-column:2}.intro-copy{grid-column:2;width:min(620px,100%);font-size:18px;line-height:1.65;color:var(--muted);margin:45px 0 0}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:100px}.cap-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 28px;min-height:365px;display:flex;flex-direction:column;background:rgba(255,255,255,.48);transition:transform .35s,background .35s,border .35s}.cap-card:hover{transform:translateY(-7px);background:#fff;border-color:#cbc3b5}.cap-card.featured{background:#fff}.cap-top{display:flex;justify-content:space-between;color:#8f8d86;font-size:11px}.cap-icon{font-size:22px;color:var(--gold)}.cap-card h3{font-size:25px;letter-spacing:-.035em;margin:78px 0 16px}.cap-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 34px}.cap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.cap-tags span{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#747069}

/* headings */
.section-head{display:grid;grid-template-columns:2fr 1fr;gap:80px;align-items:end;margin-bottom:72px}.section-head>p{font-size:15px;line-height:1.65;color:var(--muted);max-width:430px;margin:0 0 5px}

/* work */
.work{background:#fff}.work-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:610px 430px;gap:18px}.project{position:relative;border-radius:24px;overflow:hidden;background:#ece9e2;min-height:300px}.project-film{grid-row:1 / span 1;background:#050505}.project-film video{width:100%;height:100%;object-fit:cover}.project-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.56),transparent 58%)}.project-meta{position:absolute;left:26px;right:26px;top:24px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#76736d}.project-meta.light,.project-title.light{color:#fff}.project-title{position:absolute;left:26px;bottom:26px}.project-title h3{font-size:28px;letter-spacing:-.035em;margin:0 0 8px}.project-title p{font-size:11px;letter-spacing:.04em;margin:0;opacity:.72}.arch-visual{position:absolute;inset:80px 40px 90px;background:#f6f4ef;border:1px solid #d9d5cc}.plan-line{position:absolute;background:#a8a49b}.p1{left:10%;top:16%;width:1px;height:70%}.p2{left:10%;top:16%;width:72%;height:1px}.p3{left:39%;top:16%;width:1px;height:53%}.p4{left:10%;top:69%;width:60%;height:1px}.arch-box{position:absolute;border:1px solid #8e8a82}.b1{left:17%;top:27%;width:15%;height:28%}.b2{left:46%;top:26%;width:25%;height:21%}.b3{left:46%;top:54%;width:33%;height:24%}.dimension{position:absolute;font-size:8px;letter-spacing:.14em;color:#918b80}.d1{left:40%;top:8%}.d2{left:3%;top:48%;transform:rotate(-90deg)}.project-auto{background:#e7ece7}.mini-flow{position:absolute;left:40px;right:40px;top:150px;display:flex;align-items:center;gap:10px}.mini-node{background:#fbfcfa;border:1px solid #bdc9bf;border-radius:10px;padding:16px 12px;min-width:90px;text-align:center;font-size:9px;letter-spacing:.1em}.mini-flow i{height:1px;background:#a6b4a9;flex:1;position:relative}.mini-flow i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-right:1px solid #7c8f80;border-top:1px solid #7c8f80;transform:rotate(45deg)}.project-mira-card{background:#efe8dc}.mira-ui-mini{position:absolute;left:45px;right:45px;top:70px;height:235px;background:#fbfaf7;border:1px solid #d9d0c1;border-radius:13px;box-shadow:0 22px 40px rgba(82,69,46,.08);overflow:hidden}.mini-browser{height:25px;border-bottom:1px solid #ddd6ca;display:flex;gap:5px;align-items:center;padding:0 9px}.mini-browser span{width:5px;height:5px;border-radius:50%;background:#c3b8a6}.mini-sidebar{position:absolute;left:0;top:25px;bottom:0;width:62px;border-right:1px solid #e3ddd2;padding:12px}.mini-sidebar i{display:block;height:20px;border-radius:4px;background:#ede9e0;margin-bottom:8px}.mini-room{position:absolute;left:62px;right:0;top:25px;bottom:0;background:linear-gradient(#f5f2eb 70%,#d8c4a7 70%)}.mini-counter{position:absolute;left:28%;right:8%;bottom:17%;height:25%;background:#fff;border:1px solid #d8d3c9}.mini-cab{position:absolute;top:12%;height:27%;width:19%;background:#ebe5da;border:1px solid #d7cfbf}.mini-cab.a{left:31%}.mini-cab.b{left:52%}.mini-window{position:absolute;left:8%;top:18%;width:16%;height:43%;background:#c9d6d4;border:5px solid #f9f8f4}

/* MIRA */
.mira{background:var(--paper);padding-top:165px;padding-bottom:165px}.mira-layout{display:grid;grid-template-columns:.8fr 1.55fr;gap:90px;align-items:center}.mira-copy>p:not(.eyebrow){font-size:15px;line-height:1.75;color:var(--muted);margin:30px 0}.mira-list{display:grid;gap:0;margin:34px 0 37px;border-top:1px solid var(--line)}.mira-list span{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}.mira-list b{font-size:9px;color:var(--gold)}.text-link{font-size:12px;border-bottom:1px solid #9d968b;padding-bottom:6px}.text-link span{margin-left:8px}
.mira-demo{background:#fff;border:1px solid #dad4c9;border-radius:20px;padding:16px;box-shadow:0 28px 80px rgba(66,55,37,.10)}.mira-toolbar,.mira-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.11em;color:#878179;padding:3px 2px 14px}.mira-bottom{padding:10px 2px 0}.mira-canvas{height:440px;position:relative;overflow:hidden;border-radius:12px;background:#ddd}.room-scene{position:absolute;inset:0}.room-scene svg{width:100%;height:100%;display:block}.after-scene{clip-path:inset(0 42% 0 0)}.room-label{position:absolute;left:16px;top:15px;z-index:2;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border-radius:999px;padding:7px 10px;font-size:8px;letter-spacing:.11em;color:#5d5b56}.room-label.after{background:#282925;color:#fff}.compare-line{position:absolute;top:0;bottom:0;left:58%;width:1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}.compare-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.15);font-size:14px}.compare-range{width:100%;margin:10px 0 0;appearance:none;height:1px;background:#cfc8bb;outline:none}.compare-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);cursor:ew-resize}

/* automation */
.automation{background:#e9eee9}.automation-head{margin-bottom:84px}.flow-board{position:relative;background:#f8faf7;border:1px solid #cfd8d0;border-radius:24px;min-height:360px;padding:105px 36px 60px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;overflow:hidden}.flow-label{position:absolute;left:30px;top:27px;font-size:9px;letter-spacing:.14em;color:#77827a}.flow-line{position:absolute;left:10%;right:10%;top:50%;height:1px;background:#c3cec5}.flow-node{position:relative;z-index:2;background:#fff;border:1px solid #cbd4cc;border-radius:16px;padding:22px 18px;min-height:130px;box-shadow:0 10px 28px rgba(76,97,81,.04)}.flow-node span{font-size:9px;color:#8a978d}.flow-node strong{display:block;font-size:15px;margin:27px 0 7px}.flow-node small{font-size:10px;color:#7d867f;line-height:1.4}.signal{position:absolute;z-index:1;top:50%;width:8px;height:8px;border-radius:50%;background:#819686;box-shadow:0 0 0 5px rgba(129,150,134,.12);animation:signal 4.5s linear infinite}.s1{animation-delay:0s}.s2{animation-delay:1.5s}.s3{animation-delay:3s}@keyframes signal{0%{left:9%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:90%;opacity:0}}.automation-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}.automation-notes span{font-size:9px;letter-spacing:.14em;color:#718075}.automation-notes p{font-size:13px;color:#667169;line-height:1.6;margin:10px 0 0;max-width:330px}

/* process */
.process{background:#fff}.process-rail{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-rail article{padding:30px 24px 42px;border-right:1px solid var(--line);min-height:260px}.process-rail article:first-child{padding-left:0}.process-rail article:last-child{border-right:0}.process-rail span{font-size:9px;color:var(--gold)}.process-rail h3{font-size:21px;letter-spacing:-.03em;margin:75px 0 12px}.process-rail p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}

/* about & contact */
.about{background:var(--paper-2);padding-top:120px}.about-grid{display:grid;grid-template-columns:.5fr 1.45fr .85fr;gap:70px}.about blockquote{font-size:clamp(34px,4vw,62px);letter-spacing:-.045em;line-height:1.02;margin:0}.about blockquote em{font-family:Baskerville,serif;font-weight:400;color:var(--gold)}.about-copy p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 20px}.contact{background:var(--paper-2);padding-top:30px}.contact-card{background:#1c1e1b;color:#fff;border-radius:28px;padding:78px;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end}.contact-card .eyebrow{color:#9b9e97}.contact-card h2{font-size:clamp(55px,7vw,105px);font-weight:430;letter-spacing:-.065em;line-height:.86;margin:0}.contact-actions p{font-size:15px;line-height:1.65;color:#b9bbb5;margin:0 0 34px}.primary-button{display:flex;justify-content:space-between;align-items:center;background:#f4f1ea;color:#161816;border-radius:999px;padding:17px 19px 17px 22px;font-size:12px;transition:transform .2s,background .2s}.primary-button:hover{transform:translateY(-2px);background:#fff}.contact-actions small{display:block;margin-top:14px;color:#8f928c;font-size:10px;letter-spacing:.05em}

/* Direct WhatsApp enquiry, designed to sit beneath the existing email CTA. */
.contact-whatsapp{display:flex;align-items:center;gap:14px;min-height:76px;margin-top:24px;padding:12px 16px;border:1px solid rgba(255,255,255,.16);border-radius:17px;background:rgba(255,255,255,.035);color:#fff;transition:background .2s,border-color .2s,transform .2s}
.contact-whatsapp:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.contact-whatsapp:focus-visible{outline:2px solid #25d366;outline-offset:4px}
.contact-whatsapp-icon{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:50%;background:#25d366;color:#fff}
.contact-whatsapp-icon svg{display:block;width:25px;height:25px}
.contact-whatsapp-details{display:flex;flex-direction:column;gap:5px;min-width:0}
.contact-whatsapp-label{font-size:10px;letter-spacing:.085em;text-transform:uppercase;font-weight:600;color:#b9c7bc}
.contact-whatsapp-number{font-size:17px;font-weight:500;letter-spacing:.012em;white-space:nowrap}
.contact-whatsapp-arrow{margin-left:auto;color:#bfc5be;font-size:18px;transition:transform .2s}
.contact-whatsapp:hover .contact-whatsapp-arrow{transform:translate(2px,-2px)}
@media(max-width:380px){.contact-whatsapp{padding:11px 12px;gap:11px}.contact-whatsapp-number{font-size:15px}.contact-whatsapp-icon{width:39px;height:39px;flex-basis:39px}}
@media(prefers-reduced-motion:reduce){.contact-whatsapp,.contact-whatsapp-arrow{transition:none}}

footer{background:var(--paper-2);padding:38px 0 48px}.footer-grid{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}.footer-brand{display:block;width:144px}.footer-logo{display:block;width:100%;height:auto;object-fit:contain}.footer-grid>p{font-size:10px;color:#77736c;text-align:center;margin:0}.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:9px;font-size:9px;letter-spacing:.06em;color:#77736c}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1000px){
  :root{--shell:calc(100vw - 40px)}.section{padding:100px 0}.topbar{padding:0 20px;height:72px}.desktop-nav,.nav-cta{display:none}.menu-button{display:block}.topbar.on-light{height:68px}.mobile-menu{display:flex;position:fixed;z-index:95;inset:68px 0 auto 0;background:rgba(250,249,246,.97);backdrop-filter:blur(18px);padding:28px 22px 34px;flex-direction:column;gap:0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s}.mobile-menu.open{transform:none}.mobile-menu a{padding:14px 0;border-bottom:1px solid #e5e0d7;font-size:16px}.intro-grid,.mira-layout,.about-grid{grid-template-columns:1fr}.intro-grid .display,.intro-copy{grid-column:1}.intro-grid{gap:20px}.capability-grid{grid-template-columns:1fr}.cap-card{min-height:300px}.cap-card h3{margin-top:50px}.section-head{grid-template-columns:1fr;gap:26px}.work-grid{grid-template-columns:1fr;grid-template-rows:520px 420px 380px 380px}.project-film{grid-row:auto}.mira-layout{gap:55px}.flow-board{grid-template-columns:1fr;padding:85px 25px 28px;gap:10px}.flow-line,.signal{display:none}.flow-node{min-height:auto}.flow-node strong{margin:14px 0 5px}.automation-notes{grid-template-columns:1fr}.process-rail{grid-template-columns:1fr}.process-rail article{border-right:0;border-bottom:1px solid var(--line);min-height:auto;padding:24px 0 28px}.process-rail article:last-child{border-bottom:0}.process-rail h3{margin:28px 0 8px}.about-grid{gap:35px}.contact-card{padding:45px 30px;grid-template-columns:1fr;gap:46px}.footer-grid{grid-template-columns:1fr;gap:24px}.footer-grid>p{text-align:left}.footer-links{align-items:flex-start}.mira-canvas{height:390px}
}
@media(max-width:650px){
  :root{--shell:calc(100vw - 30px)}.section{padding:82px 0}.hero-copy{left:20px;right:20px;bottom:15vh}.hero-copy h1,.hero-copy h2{font-size:clamp(50px,16vw,82px)}.scrub-index{left:20px;right:20px;bottom:5.5vh;grid-template-columns:20px 1fr 20px}.scrub-vignette{background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 56%)}.intro{padding-top:110px}.display{font-size:clamp(45px,14vw,70px)}.intro-copy{font-size:16px;margin-top:28px}.capability-grid{margin-top:65px}.section-title{font-size:clamp(42px,12vw,64px)}.work-grid{grid-template-rows:430px 390px 350px 350px}.arch-visual{inset:80px 22px 90px}.mini-flow{left:20px;right:20px;top:130px;gap:6px}.mini-node{min-width:0;flex:1;padding:14px 7px;font-size:7px}.mira-ui-mini{left:22px;right:22px}.mira-canvas{height:300px}.mira-toolbar,.mira-bottom{gap:15px}.mira-toolbar span:last-child,.mira-bottom span:last-child{display:none}.about blockquote{font-size:39px}.contact-card{padding:38px 24px}.contact-card h2{font-size:52px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scrub-grain,.signal{animation:none}.reveal{opacity:1;transform:none;transition:none}}

/* Keep the official square logo intact at every navigation size. */
.topbar.on-light .brand-logo{width:60px}
@media(max-width:1000px){.brand-logo{width:56px}.topbar.on-light .brand-logo{width:52px}}

/* Product films retain their complete frame and accessible playback controls. */
.work-grid{grid-template-rows:auto;grid-auto-rows:430px}
.product-film{grid-row:auto;min-height:0;display:flex;flex-direction:column;background:#faf9f6;border:1px solid var(--line)}
.product-film video{display:block;flex:1;min-height:0;width:100%;height:calc(100% - 116px);object-fit:contain;background:#050505}
.film-caption{flex:0 0 116px;padding:18px 24px;color:var(--ink)}
.film-caption p{margin:0 0 10px;font-size:9px;letter-spacing:.12em;color:var(--muted)}
.film-caption h3{margin:0 0 6px;font-size:26px;letter-spacing:-.035em}
.film-caption span{font-size:11px;color:var(--muted)}
@media(min-width:1001px){.work-grid{grid-template-columns:1fr 1fr}.work-grid .project-mira-card:last-child{grid-column:1 / -1}}
@media(max-width:650px){.work-grid{grid-template-rows:auto;grid-auto-rows:350px}.film-caption{padding:16px 18px}.film-caption h3{font-size:24px}}

/* YouTube portfolio */
#work{scroll-margin-top:76px}.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}.portfolio-filters{display:flex;flex-wrap:wrap;gap:8px}.portfolio-filters button{padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;font-size:12px}.portfolio-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.portfolio-toolbar>p{font-size:12px;color:var(--muted);white-space:nowrap}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}.portfolio-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper-2)}.portfolio-card[hidden]{display:none}.portfolio-play{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#151714}.portfolio-play img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.portfolio-play:hover img{transform:scale(1.035)}.portfolio-format{position:absolute;left:14px;top:14px;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.portfolio-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#141713b8;color:white;padding-left:3px}.portfolio-caption{padding:22px}.portfolio-caption p{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}.portfolio-caption h3{font-size:18px;line-height:1.4;letter-spacing:-.025em;margin:0;font-weight:500}.portfolio-channel{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.portfolio-channel p{font-size:14px;color:var(--muted)}.portfolio-player{width:min(960px,calc(100% - 32px));max-height:94vh;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--paper-2);color:var(--ink)}.portfolio-player::backdrop{background:rgba(5,8,7,.85)}.player-header{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:16px}.player-header h2{margin:0;font-size:18px;font-weight:500}.player-close{flex-shrink:0;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}.portfolio-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}.portfolio-player.is-short{max-width:480px}.portfolio-player.is-short iframe{aspect-ratio:9/16;max-height:68vh}.portfolio-player>p{font-size:12px;margin:16px 0 0}.video-open{overflow:hidden}.portfolio-play:focus-visible,.portfolio-filters button:focus-visible,.player-close:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.portfolio-grid{grid-template-columns:1fr}.portfolio-toolbar{align-items:flex-start;flex-direction:column;gap:6px}.portfolio-channel{align-items:flex-start;flex-direction:column;gap:12px}.portfolio-player{padding:14px}.player-header h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.portfolio-play img{transition:none}}

.footer-social{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.footer-social>span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.footer-social>div{display:flex;flex-wrap:wrap;gap:12px 28px}
.footer-social a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;color:var(--ink)}
.footer-social a span{color:var(--gold)}
.footer-social .social-icon{width:18px;height:18px;flex-shrink:0}
.footer-social a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-social a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(max-width:650px){.footer-social{flex-direction:column;align-items:flex-start;gap:12px}.footer-social>div{gap:10px 24px}}

/* Cinematic estate backdrop for Design & Visualization. */
.cap-card.cap-card-design{background:linear-gradient(180deg,rgba(5,10,14,.12) 0%,rgba(5,10,14,.35) 28%,rgba(5,10,14,.9) 58%,rgba(5,10,14,.96) 100%),url("assets/luxury-estate.png") center 32% / cover no-repeat;color:#fff;border-color:#333b3d}
.cap-card-design .cap-top{color:#f0e4ce}.cap-card-design .cap-icon{color:#e7c589}.cap-card-design h3{color:#fff}.cap-card-design p{color:#e2e5e3}.cap-card-design .cap-tags span{color:#f0e7d7;border-color:#ffffff59;background:#0b10184d}

/* Supplied cinematic collage behind AI Creative Studio. */
.cap-card.cap-card-ai{background:linear-gradient(180deg,rgba(7,9,18,.16) 0%,rgba(7,9,18,.38) 26%,rgba(7,9,18,.88) 56%,rgba(7,9,18,.96) 100%),url("assets/cinematic-ai-tools.png") center center / cover no-repeat;color:#fff;border-color:#343442}
.cap-card-ai .cap-top{color:#f0e4ce}.cap-card-ai .cap-icon{color:#e7c589}.cap-card-ai h3{color:#fff}.cap-card-ai p{color:#e2e5ed}.cap-card-ai .cap-tags span{color:#f0e7d7;border-color:#ffffff59;background:#0b10184d}

/* n8n-inspired workflow background for AI Automation. */
.cap-card.cap-card-automation{background:linear-gradient(180deg,rgba(6,13,12,.08) 0%,rgba(6,13,12,.25) 26%,rgba(6,13,12,.86) 56%,rgba(6,13,12,.96) 100%),url("assets/ai-automation-workflow.png") center 25% / cover no-repeat;color:#fff;border-color:#34413c}
.cap-card-automation .cap-top{color:#f0e4ce}.cap-card-automation .cap-icon{color:#e7c589}.cap-card-automation h3{color:#fff}.cap-card-automation p{color:#e2e5e3}.cap-card-automation .cap-tags span{color:#f0e7d7;border-color:#ffffff59;background:#0b10184d}

/* Aligned, accessible MIRA before-and-after comparison. */
.mira-demo{min-width:0}.mira-canvas{height:auto;aspect-ratio:800/520;isolation:isolate}
.mira-canvas .room-label{left:16px;right:auto;z-index:3;pointer-events:none;font-size:10px;background:#faf9f6ed;color:#32352f}
.mira-canvas .room-label.after{left:auto;right:16px;background:#282925;color:#fff}
.mira-canvas .after-scene{clip-path:inset(0 0 0 50%)}
.mira-canvas .compare-line{left:50%;z-index:4;pointer-events:none;width:2px}
.mira-canvas .compare-line span{width:44px;height:44px;color:#282925;font-size:18px}
.mira-canvas .compare-range{position:absolute;z-index:5;top:0;left:-22px;width:calc(100% + 44px);height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.mira-canvas .compare-range::-webkit-slider-thumb{width:44px;height:44px}
.mira-canvas .compare-range::-moz-range-thumb{width:44px;height:44px;border:0}
.mira-canvas:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.mira-toolbar,.mira-bottom{font-size:10px;line-height:1.5;letter-spacing:.05em;gap:12px;flex-wrap:wrap}.mira-bottom{padding-top:16px}
@media(max-width:650px){.mira-demo{padding:12px}.mira-canvas .room-label{top:10px;left:10px;font-size:9px}.mira-canvas .room-label.after{left:auto;right:10px}.mira-toolbar span:last-child,.mira-bottom span:last-child{display:block}}

/* V3: landscape portfolio treatment — video playback aspect ratios are unchanged. */
.portfolio-play--rotate-motorcycle img {
  transform: rotate(-90deg) scale(1.82);
  transform-origin: center;
}
.portfolio-play--rotate-motorcycle:hover img { transform: rotate(-90deg) scale(1.88); }
/* Shorts thumbnail fills the same wide 16:9 portfolio card without stretching. */
.portfolio-play--short-cover img { object-fit: cover; object-position: 50% 50%; }
.portfolio-play--short-cover:hover img { transform: scale(1.035); }


/* MIRA original-aspect photo pair: show each entire 3:4 image, never crop or stretch. */
.mira-canvas { width: min(100%, 390px); aspect-ratio: 3 / 4; height: auto; margin-inline: auto; }
.mira-canvas .room-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }


/* automation node illustrations update */
.flow-board{align-items:end;min-height:430px}
.flow-node--visual{display:flex;flex-direction:column;align-items:flex-start;min-height:280px;padding:18px 16px 18px;overflow:hidden}
.flow-node--visual > span{position:relative;z-index:2}
.flow-node-media{display:block;width:100%;max-width:168px;aspect-ratio:1 / 1;object-fit:contain;align-self:center;margin:10px auto 14px;filter:drop-shadow(0 10px 18px rgba(88,107,93,.08));}
.flow-node-copy{margin-top:auto;width:100%}
.flow-node--visual strong{display:block;font-size:15px;margin:0 0 7px}
.flow-node--visual small{display:block;font-size:10px;color:#7d867f;line-height:1.4}
@media (max-width: 980px){.flow-node--visual{min-height:auto;padding:18px 16px 16px}.flow-node-media{max-width:190px;margin:12px auto 16px}.flow-node-copy{margin-top:0}}

/* V6.2 – subtle liquid glass response, automation boxes only */
.flow-board{perspective:1000px}
.flow-node--visual{
  --glass-x:50%; --glass-y:50%; --glass-tilt-x:0deg; --glass-tilt-y:0deg;
  --glass-lift:0px; --glass-glow:0;
  isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(250,253,252,.91));
  transform:perspective(850px) translateY(var(--glass-lift)) rotateX(var(--glass-tilt-x)) rotateY(var(--glass-tilt-y));
  transform-style:preserve-3d;
  border:1px solid rgba(186,205,196,.8);
  box-shadow:0 10px 28px rgba(54,90,79,.055),inset 0 1px 0 rgba(255,255,255,.86);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease,background .4s ease;
}
.flow-node--visual::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle 125px at var(--glass-x) var(--glass-y),rgba(255,255,255,.95),rgba(213,244,234,.35) 47%,rgba(188,235,218,0) 83%),
    linear-gradient(127deg,rgba(255,255,255,.12),rgba(163,219,209,.1) 50%,rgba(255,255,255,.5));
  opacity:var(--glass-glow);transition:opacity .42s ease;
}
.flow-node--visual::after{
  content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;z-index:0;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  opacity:.6;transition:opacity .35s ease;
}
.flow-node--visual>span,.flow-node--visual .flow-node-copy,.flow-node--visual .flow-node-media{
  position:relative;z-index:1;
}
.flow-node--visual .flow-node-media{
  transition:transform .46s cubic-bezier(.2,.8,.2,1),filter .46s ease;
  transform:translateY(0) scale(1);
}
@media (hover:hover) and (pointer:fine){
  .flow-node--visual:hover{
    --glass-lift:-7px;--glass-glow:1;
    border-color:rgba(117,192,169,.75);
    box-shadow:0 22px 44px rgba(48,111,90,.13),0 0 28px rgba(112,202,171,.14),inset 0 1px 0 #fff;
    background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(229,249,243,.86));
  }
  .flow-node--visual:hover::after{opacity:1}
  .flow-node--visual:hover .flow-node-media{
    transform:translateY(-3px) scale(1.045);
    filter:drop-shadow(0 14px 18px rgba(73,139,114,.14));
  }
}
@media (hover:none), (pointer:coarse){
  .flow-node--visual{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .flow-node--visual,.flow-node--visual::before,.flow-node--visual::after,.flow-node--visual .flow-node-media{transition:none!important;transform:none!important}
}