:root{
     --font-family-primary:Syne,sans-serif;
     --c-ink:#171411;
    --c-cream:#f4eddd;
    --c-paper:#fbf8f0;
    --c-brown:#6b4b37;
    --c-taupe:#a38c75;
    --c-line:rgba(23,20,17,.16);
    --c-dark:#0c0c0c;
    --c-white:#f7f3e9;
    --c-accent:#b36b3e;
     --shadow:0 24px 80px rgba(22,15,10,.16);
    --r:18px;
    --header:92px;
     --ease:cubic-bezier(.16,1,.3,1) 
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:var(--font-family-primary);
    background:var(--c-paper);
    color:var(--c-ink);
    font-weight:500;
    overflow-x:hidden
}
body.menu-open{
    overflow:hidden
}
a{
    color:inherit;
    text-decoration:none
}
img{
    max-width:100%;
    display:block
}
button,input,textarea,select{
    font:inherit
}
button{
    color:inherit
}
.container{
    width:min(1240px,calc(100% - 72px));
    margin-inline:auto
}
.skip-link{
    position:fixed;
    left:16px;
    top:-60px;
    z-index:9999;
    background:#fff;
    padding:12px
}
.skip-link:focus{
    top:12px
}
.site-header{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1000;
    height:var(--header);
    border-bottom:1px solid rgba(255,255,255,.16);
    color:#fff;
    transition:.4s var(--ease);
    mix-blend-mode:difference
}
.site-header.is-scrolled{
    background:rgba(12,12,12,.9);
    backdrop-filter:blur(14px);
    mix-blend-mode:normal
}
.nav{
    height:100%;
    display:flex;
    align-items:center;
    gap:34px
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto
}
.brand-mark{
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid currentColor;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em
}
.brand-name{
    font-size:13px;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.12em
}
.nav-links{
    display:flex;
    gap:28px;
    list-style:none;
    padding:0;
    margin:0
}
.nav-links a{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    position:relative
}
.nav-links a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-7px;
    height:1px;
    background:currentColor;
    transition:.3s
}
.nav-links a:hover:after,.nav-links a[aria-current=page]:after{
    right:0
}
.nav-cta{
    border:1px solid currentColor;
    border-radius:999px;
    padding:13px 18px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em
}
.menu-toggle{
    display:none;
    background:none;
    border:0;
    width:46px;
    height:46px;
    position:relative
}
.menu-toggle span{
    position:absolute;
    width:22px;
    height:1px;
    background:currentColor;
    left:12px;
    top:20px
}
.menu-toggle span+span{
    top:27px
}
.page-transition{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    pointer-events:none
}
.page-transition span{
    flex:1;
    background:var(--c-brown);
    transform:scaleY(0);
    transform-origin:bottom
}
.cursor-dot,.cursor-ring{
    position:fixed;
    left:0;
    top:0;
    z-index:6000;
    pointer-events:none;
    border-radius:50%;
    transform:translate(-50%,-50%);
    opacity:0
}
.cursor-dot{
    width:5px;
    height:5px;
    background:#fff;
    mix-blend-mode:difference
}
.cursor-ring{
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.8);
    mix-blend-mode:difference;
    transition:width .25s,height .25s
}
.cursor-ring.is-hover{
    width:68px;
    height:68px
}
.section{
    padding:30px 0
}
.section-tight{
    padding:80px 0
}
.eyebrow{
    display:inline-block;
    font-size:10px;
    letter-spacing:.17em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:18px
}
.display{
    font-size:clamp(68px,9vw,145px);
    line-height:.82;
    letter-spacing:-.065em;
    margin:0;
    max-width:1150px;
    font-weight:600
}
.headline{
    font-size:clamp(46px,6vw,88px);
    line-height:.92;
    letter-spacing:-.05em;
    margin:0;
    font-weight:600
}
.lead{
    font-size:clamp(16px,1.5vw,15px);
    line-height:1.65;
    max-width:720px
}
.muted{
    opacity:.65
}
.btn{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border:1px solid currentColor;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase
}
.btn-light{
    background:var(--c-white);
    color:var(--c-dark);
    border-color:var(--c-white)
}
.btn-dark{
    background:var(--c-dark);
    color:var(--c-white);
    border-color:var(--c-dark)
}
.btn-ghost{
    color:#fff
}
.text-link{
    display:inline-block;
    margin-top:24px;
    border-bottom:1px solid;
    padding-bottom:5px
}
.intro-grid,.two-col{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:10vw;
    align-items:start
}
.reveal{
    will-change:transform,opacity
}
/* Hero Observer slider */
 .hero-slider{
    height:100svh;
    min-height:680px;
    position:relative;
    background:#080808;
    color:#fff;
    overflow:hidden
}
.hero-slides,.hero-slide{
    position:absolute;
    inset:0
}
.hero-slide{
    visibility:hidden;
    overflow:hidden
}
.hero-slide.is-active{
    visibility:visible
}
.hero-slide-bg,.hero-slide-bg img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-slide-bg img{
    filter:saturate(.72) contrast(1.05);
    transform:scale(1.05)
}
.hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25) 60%,rgba(0,0,0,.45)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 52%)
}
.hero-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    z-index:3;
    padding-top:60px
}
.hero-copy .display{
    max-width:980px
}
.hero-copy .lead{
    max-width:720px
}
.hero-actions{
    display:flex;
    gap:12px;
    margin-top:28px
}
.hero-ui{
    position:absolute;
    z-index:6;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:24px
}
.hero-progress{
    height:1px;
    background:rgba(255,255,255,.28)
}
.hero-progress span{
    display:block;
    height:2px;
    background:#fff;
    width:33.333%;
    transform-origin:left
}
.hero-count,.hero-hint{
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase
}
.hero-count{
    display:flex;
    gap:8px
}
.hero-count i{
    font-style:normal;
    opacity:.4
}
.hero-hint{
    opacity:.55
}
.touch-grid{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    display:grid;
    grid-template-columns:repeat(22,1fr);
    grid-template-rows:repeat(13,1fr);
    opacity:.35
}
.touch-grid i{
    position:relative
}
.touch-grid i:after{
    content:"+";
    position:absolute;
    color:#fff;
    font-size:12px;
    opacity:.13;
    transform:translate(-50%,-50%);
    transition:.16s
}
.touch-grid i.is-hot:after{
    opacity:.95;
    transform:translate(-50%,-50%) rotate(45deg) scale(1.5)
}
/* Stacked cards */
 .stack-section{
    padding:130px 0;
    background:var(--c-cream)
}
.stack-head{
    margin-bottom:70px
}
.stack-wrap{
    position:relative
}
.stack-card{
    position:sticky;
    top:calc(var(--header) + 24px);
    min-height:520px;
    border-radius:var(--r);
    background:var(--c-paper);
    border:1px solid var(--c-line);
    box-shadow:var(--shadow);
    padding:54px;
    display:grid;
    grid-template-columns:70px 1fr 44%;
    gap:36px;
    align-items:center;
    margin-bottom:38px;
    overflow:hidden
}
.stack-card:nth-child(2){
    top:calc(var(--header) + 46px)
}
.stack-card:nth-child(3){
    top:calc(var(--header) + 68px)
}
.stack-card h3{
    font-size:clamp(40px,5vw,74px);
    line-height:.94;
    margin:0 0 20px;
    letter-spacing:-.05em
}
.stack-card p{
    font-size:16px;
    line-height:1.7;
    max-width:560px
}
.stack-card img{
    width:100%;
    height:390px;
    object-fit:cover;
    border-radius:12px
}
.stack-index{
    align-self:start;
    font-size:11px;
    letter-spacing:.18em
}
/* Horizontal scroll */
 .horizontal-section,.services-horizontal{
    background:var(--c-dark);
    color:#fff;
    position:relative
}
.horizontal-pin{
    height:100vh;
    min-height:700px;
    display:flex;
    align-items:center;
    gap:8vw;
    padding-left:max(36px,calc((100vw - 1240px)/2));
    overflow:hidden
}
.horizontal-intro{
    width:min(520px,70vw);
    flex:none
}
.horizontal-intro h2{
    font-size:clamp(60px,7vw,110px);
    line-height:.85;
    letter-spacing:-.06em;
    margin:0 0 22px
}
.horizontal-track{
    display:flex;
    gap:20px;
    width:max-content;
    padding-right:8vw
}
.project-panel{
    width:min(62vw,780px);
    height:68vh;
    min-height:480px;
    position:relative;
    overflow:hidden;
    flex:none
}
.project-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s var(--ease)
}
.project-panel:hover img{
    transform:scale(1.035)
}
.project-panel:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%)
}
.project-panel div{
    position:absolute;
    left:30px;
    bottom:28px;
    z-index:2
}
.project-panel span{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase
}
.project-panel h3{
    font-size:42px;
    margin:7px 0
}
.compact-track .cap-panel{
    width:42vw;
    max-width:560px;
    height:52vh;
    min-height:360px;
    border:1px solid rgba(255,255,255,.2);
    padding:46px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}
.cap-panel strong{
    font-size:clamp(46px,5vw,78px);
    letter-spacing:-.05em
}
.cap-panel p{
    font-size:16px;
    max-width:340px;
    opacity:.62
}
/* morph */
 .morph-story{
    background:var(--c-paper)
}
.morph-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:6vw;
    align-items:center
}
.morph-visual{
    min-height:560px;
    background:var(--c-cream);
    display:grid;
    place-items:center;
    border-radius:var(--r)
}
.morph-visual svg{
    width:86%;
    max-width:650px
}
.morph-base{
    fill:none;
    stroke:rgba(23,20,17,.15);
    stroke-width:2
}
.morph-live{
    fill:none;
    stroke:var(--c-brown);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round
}
.morph-visual circle{
    fill:var(--c-accent)
}
.cta-band{
    background:var(--c-brown);
    color:#fff;
    padding:110px 0
}
.cta-band h2,.manifesto h2{
    font-size:clamp(64px,9vw,140px);
    line-height:.83;
    letter-spacing:-.065em;
    margin:0 0 38px;
    max-width:1100px
}
/* page hero */
 .page-hero{
    min-height:76vh;
    padding:calc(var(--header) + 90px) 0 90px;
    display:flex;
    align-items:flex-end;
    background:var(--c-cream)
}
.page-hero-dark{
    background:var(--c-dark);
    color:#fff;
}
.page-hero-grid{
    position:relative;
    overflow:hidden;
    background:var(--c-brown);
    color:#fff
}
.page-hero-grid .container{
    position:relative;
    z-index:5
}
.page-hero .lead{
    margin-top:32px
}
.manifesto{
    padding:130px 0;
    background:var(--c-brown);
    color:#fff
}
.story-steps .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--c-line)
}
.story-step{
    padding:40px 26px 60px;
    border-right:1px solid var(--c-line)
}
.story-step span{
    font-size:10px
}
.story-step h3{
    font-size:36px;
    margin:50px 0 15px
}
.story-step p{
    line-height:1.7
}
/* particle */
 .particle-story{
    height:135vh;
    background:#070707;
    color:#fff;
    position:relative
}
.particle-story canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.particle-source{
    display:none
}
.particle-copy{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    pointer-events:none;
    z-index:2
}
.particle-copy h2{
    max-width:760px;
    font-size:clamp(60px,7vw,110px);
    line-height:.87;
    letter-spacing:-.06em;
    margin:0 0 20px
}
.particle-copy p{
    max-width:440px;
    line-height:1.7;
    opacity:.66
}
/* service stack */
 .service-stack-section{
    background:var(--c-dark);
    color:#fff;
    padding:120px 0
}
.service-stack-section .stack-head{
    padding-bottom:20px
}
.service-stack{
    width:min(1240px,calc(100% - 72px));
    margin:auto
}
.service-stack-card{
    position:sticky;
    top:calc(var(--header) + 18px);
    height:72vh;
    min-height:570px;
    border:1px solid rgba(255,255,255,.18);
    background:#111;
    padding:45px;
    display:grid;
    grid-template-columns:70px 1fr 46%;
    gap:34px;
    align-items:center;
    margin-bottom:30px;
    box-shadow:0 30px 70px rgba(0,0,0,.4)
}
.service-stack-card:nth-child(2){
    top:calc(var(--header) + 34px)
}
.service-stack-card:nth-child(3){
    top:calc(var(--header) + 50px)
}
.service-stack-card:nth-child(4){
    top:calc(var(--header) + 66px)
}
.service-stack-card:nth-child(5){
    top:calc(var(--header) + 82px)
}
.service-stack-card img{
    height:100%;
    width:100%;
    object-fit:cover
}
.service-stack-card h2{
    font-size:clamp(58px,7vw,110px);
    line-height:.84;
    letter-spacing:-.06em;
    margin:0 0 24px
}
.service-stack-card p{
    max-width:550px;
    line-height:1.7;
    opacity:.68
}
.service-num{
    align-self:start;
    font-size:10px;
    letter-spacing:.15em
}
/* Zoom draggable gallery */
 .zoom-gallery-section{
    height:100svh;
    min-height:720px;
    background:#090909;
    color:#fff;
    position:relative;
    overflow:hidden
}
.zoom-toolbar{
    position:absolute;
    z-index:20;
    left:30px;
    right:30px;
    top:calc(var(--header) + 18px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    pointer-events:none
}
.zoom-toolbar p{
    margin:0;
    font-size:11px;
    opacity:.55
}
.zoom-control{
    pointer-events:auto;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:7px 12px;
    display:flex;
    align-items:center;
    gap:10px
}
.zoom-control button{
    width:36px;
    height:36px;
    border:0;
    background:none;
    color:#fff;
    cursor:pointer
}
.zoom-control input{
    width:150px
}
.zoom-viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    cursor:grab
}
.zoom-viewport:active{
    cursor:grabbing
}
.zoom-grid{
    position:absolute;
    left:50%;
    top:50%;
    width:1700px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    transform-origin:center
}
.zoom-tile{
    position:relative;
    border:0;
    padding:0;
    background:#222;
    aspect-ratio:4/3;
    overflow:hidden;
    color:#fff;
    cursor:pointer
}
.zoom-tile:nth-child(3n+1){
    aspect-ratio:3/4
}
.zoom-tile:nth-child(4n){
    aspect-ratio:1/1
}
.zoom-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s var(--ease)
}
.zoom-tile:hover img{
    transform:scale(1.04)
}
.zoom-tile span{
    position:absolute;
    left:12px;
    bottom:10px;
    font-size:9px;
    letter-spacing:.12em
}
.zoom-detail{
    position:fixed;
    inset:0;
    z-index:4500;
    background:var(--c-paper);
    display:grid;
    grid-template-columns:1.25fr .75fr;
    visibility:hidden;
    opacity:0
}
.zoom-detail.is-open{
    visibility:visible
}
.zoom-detail-media{
    min-width:0;
    overflow:hidden;
    background:#111
}
.zoom-detail-media .zoom-tile{
    width:100%;
    height:100%;
    aspect-ratio:auto
}
.zoom-detail-copy{
    padding:clamp(50px,7vw,110px);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.zoom-detail-copy h2{
    font-size:clamp(60px,7vw,110px);
    line-height:.85;
    letter-spacing:-.06em;
    margin:0 0 24px
}
.zoom-detail-copy p{
    line-height:1.7
}
.zoom-detail-close{
    position:absolute;
    z-index:2;
    right:25px;
    top:25px;
    width:52px;
    height:52px;
    border:1px solid var(--c-line);
    border-radius:50%;
    background:var(--c-paper);
    cursor:pointer;
    font-size:25px
}
.portfolio-note{
    background:var(--c-cream)
}
/* shatter */
 .shatter-section{
    padding:30px 0 70px;
    /* background:var(--c-dark); */
    color:#fff
}
.shatter-stage{
    width:min(1240px,calc(100% - 72px));
    height:78vh;
    min-height:620px;
    margin:auto;
    position:relative;
    overflow:hidden;
    background:#111
}
.shatter-base{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.shatter-stage:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 70%)
}
.shatter-fragments{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none
}
.shatter-fragment{
    position:absolute;
    background-size:1200% 800%;
    will-change:transform,opacity
}
.shatter-copy{
    position:absolute;
    z-index:4;
    left:7%;
    bottom:13%;
    max-width:640px
}
.shatter-copy h2{
    font-size:clamp(62px,8vw,120px);
    line-height:.82;
    letter-spacing:-.06em;
    margin:0 0 20px
}
.shatter-controls{
    position:absolute;
    z-index:5;
    right:26px;
    bottom:26px;
    display:flex;
    align-items:center;
    gap:14px
}
.shatter-controls button{
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(0,0,0,.25);
    color:#fff
}
.shatter-controls span{
    font-size:10px;
    letter-spacing:.15em
}
.infinite-carousel-section{
    overflow:hidden
}
.infinite-carousel{
    height:470px;
    position:relative;
    margin-top:10px;
    cursor:grab;
    perspective:1200px
}
.carousel-card{
    position:absolute;
    width:360px;
    height:420px;
    left:50%;
    top:20px;
    margin-left:-180px;
    transform-origin:center;
    will-change:transform
}
.carousel-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    box-shadow:var(--shadow)
}
.carousel-card span{
    position:absolute;
    left:18px;
    bottom:16px;
    background:rgba(255,255,255,.86);
    padding:7px 10px;
    font-size:9px;
    letter-spacing:.1em
}
.feature-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--c-line)
}
.feature-list article{
    padding:36px 30px;
    border-right:1px solid var(--c-line)
}
.feature-list h3{
    font-size:36px
}
.feature-list p{
    line-height:1.7
}
/* journal hover grid */
 .journal-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px
}
.journal-card{
    background:var(--c-cream);
    overflow:hidden
}
.journal-card a{
    display:grid;
    grid-template-columns:44% 56%;
    min-height:360px
}
.journal-card img{
    width:100%;
    height:100%;
    object-fit:cover
}
.journal-card div{
    padding:34px
}
.journal-card h2{
    font-size:clamp(28px,3vw,48px);
    line-height:.98;
    letter-spacing:-.04em;
    margin:8px 0 18px
}
.journal-card p{
    line-height:1.65
}
/* contact */
 .contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:9vw
}
.contact-list{
    padding:0;
    list-style:none;
    margin-top:50px
}
.contact-list li{
    padding:22px 0;
    border-top:1px solid var(--c-line);
    display:flex;
    flex-direction:column;
    gap:6px
}
.contact-list small{
    text-transform:uppercase;
    letter-spacing:.13em
}
.project-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.field{
    display:flex;
    flex-direction:column;
    gap:8px
}
.field.full{
    grid-column:1/-1
}
.field label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em
}
.field input,.field textarea,.field select{
    border:1px solid var(--c-line);
    background:transparent;
    padding:16px;
    min-height:52px;
    border-radius:0
}
.field textarea{
    min-height:170px;
    resize:vertical
}
.field :focus{
    outline:2px solid var(--c-brown);
    outline-offset:2px
}
.form-status{
    margin-top:10px
}
/* footer */
 .site-footer{
    background:var(--c-dark);
    color:#fff;
    padding:100px 0 35px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.6fr .7fr .7fr;
    gap:60px
}
.footer-big h2{
    font-size:clamp(48px,6vw,86px);
    line-height:.9;
    letter-spacing:-.05em;
    margin:0
}
.site-footer h3{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.14em
}
.site-footer p,.footer-links{
    font-size:14px;
    line-height:1.7;
    opacity:.65
}
.footer-links{
    padding:0;
    list-style:none
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid rgba(255,255,255,.14);
    margin-top:70px;
    padding-top:24px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em
}
.back-top{
    border:0;
    background:none;
    color:#fff;
    cursor:pointer
}
 @media(max-width:980px){
    :root{
        --header:76px
    }
    .container{
        width:min(100% - 36px,900px)
    }
    .nav-links,.nav-cta{
        display:none
    }
    .menu-toggle{
        display:block
    }
    /* Mobile navigation is defined once in mobile-navigation.css. */
    .display{
        font-size:clamp(60px,15vw,98px)
    }
    .headline{
        font-size:clamp(44px,11vw,72px)
    }
    .intro-grid,.two-col,.morph-grid,.contact-grid,.footer-grid{
        grid-template-columns:1fr
    }
    .stack-card,.service-stack-card{
        position:relative!important;
        top:auto!important;
        grid-template-columns:50px 1fr;
        min-height:0;
        height:auto;
        padding:28px;
        margin-bottom:18px
    }
    .stack-card img,.service-stack-card img{
        grid-column:1/-1;
        height:360px
    }
    .service-stack{
        width:min(100% - 36px,900px)
    }
    .horizontal-pin{
        height:auto;
        min-height:0;
        display:block;
        padding:80px 18px;
        overflow:auto
    }
    .horizontal-intro{
        width:auto;
        margin-bottom:35px
    }
    .horizontal-track{
        overflow-x:auto;
        width:auto;
        padding-bottom:18px;
        scroll-snap-type:x mandatory
    }
    .project-panel{
        width:82vw;
        height:58vh;
        scroll-snap-align:center
    }
    .compact-track .cap-panel{
        width:78vw
    }
    .story-steps .container,.feature-list{
        grid-template-columns:1fr 1fr
    }
    .zoom-grid{
        width:1200px
    }
    .zoom-detail{
        grid-template-columns:1fr;
        overflow:auto
    }
    .zoom-detail-media{
        min-height:55vh
    }
    .journal-grid{
        grid-template-columns:1fr
    }
    .journal-card a{
        grid-template-columns:1fr
    }
    .journal-card img{
        height:310px
    }
    .footer-grid{
        gap:40px
    }
    .particle-story{
        height:110vh
    }
    .particle-copy h2{
        font-size:clamp(50px,12vw,85px)
    }
}
 @media(max-width:640px){
    .container{
        width:calc(100% - 28px)
    }
    .hero-slider{
        min-height:650px
    }
    .hero-copy{
        padding-top:76px
    }
    .hero-copy .display{
        font-size:clamp(56px,16vw,82px)
    }
    .hero-copy .lead{
        font-size:14px
    }
    .hero-actions{
        flex-wrap:wrap
    }
    .hero-ui{
        grid-template-columns:1fr auto;
        bottom:18px
    }
    .hero-hint{
        display:none
    }
    .section{
        padding:30px 0
    }
    .section-tight{
        padding:58px 0
    }
    .stack-section,.service-stack-section{
        padding:86px 0
    }
    .stack-card,.service-stack-card{
        grid-template-columns:1fr;
        padding:22px
    }
    .stack-index,.service-num{
        margin-bottom:-8px
    }
    .stack-card img,.service-stack-card img{
        height:280px
    }
    .horizontal-intro h2{
        font-size:60px
    }
    .project-panel{
        width:86vw;
        min-height:420px
    }
    .morph-visual{
        min-height:380px
    }
    .story-steps .container,.feature-list{
        grid-template-columns:1fr
    }
    .story-step,.feature-list article{
        border-right:0;
        border-bottom:1px solid var(--c-line)
    }
    .page-hero{
        min-height:68vh;
        padding-bottom:55px
    }
    .zoom-toolbar{
        left:15px;
        right:15px;
        align-items:flex-end
    }
    .zoom-toolbar>div:first-child p{
        display:none
    }
    .zoom-control input{
        width:90px
    }
    .zoom-grid{
        width:900px;
        grid-template-columns:repeat(3,1fr)
    }
    .zoom-detail-copy{
        padding:32px 22px
    }
    .shatter-stage{
        width:calc(100% - 28px);
        min-height:560px
    }
    .shatter-copy{
        left:22px;
        right:22px
    }
    .shatter-copy h2{
        font-size:58px
    }
    .infinite-carousel{
        height:390px
    }
    .carousel-card{
        width:280px;
        height:350px;
        margin-left:-140px
    }
    .project-form{
        grid-template-columns:1fr
    }
    .field.full{
        grid-column:auto
    }
    .footer-bottom{
        align-items:flex-start;
        gap:18px;
        flex-direction:column
    }
    .touch-grid{
        grid-template-columns:repeat(14,1fr);
        grid-template-rows:repeat(18,1fr)
    }
}
 @media(pointer:coarse){
    .cursor-dot,.cursor-ring{
        display:none
    }
}
 @media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    .cursor-dot,.cursor-ring{
        display:none
    }
    *{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important
    }
    .touch-grid{
        display:none
    }
}
/* ========================================================= 2026 INTERACTION EXTENSIONS + HOME ENQUIRY / WHATSAPP ========================================================= */
 .hp-field{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important
}
 .floating-whatsapp{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:4800;
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#25D366;
    color:#fff;
    box-shadow:0 14px 40px rgba(0,0,0,.28);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);
    text-decoration:none
}
.floating-whatsapp:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 18px 46px rgba(0,0,0,.36)
}
.floating-whatsapp svg{
    width:30px;
    height:30px
}
 .home-enquiry{
    background:linear-gradient(180deg,var(--c-paper),var(--c-cream))
}
.home-enquiry-direct{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:28px
}
.home-enquiry-direct a{
    text-decoration:none;
    font-size:15px;
    font-weight:700
}
.project-form button[disabled]{
    opacity:.55;
    cursor:wait
}
.form-status.is-success{
    color:#236d3a
}
.form-status.is-error{
    color:#9d2b2b
}
/* Parallax jungle leaves reveal */
 .jungle-reveal{
    height:110svh;
    min-height:760px;
    position:relative;
    overflow:hidden;
    background:#0a0b09;
    color:#f7f2e8;
    display:grid;
    place-items:center;
    isolation:isolate
}
.jungle-reveal:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 48%,rgba(194,171,128,.16),transparent 38%),linear-gradient(180deg,#07100a,#11110d);
    z-index:-2
}
.jungle-center{
    text-align:center;
    max-width:980px;
    position:relative;
    z-index:4
}
.jungle-center .display{
    font-size:clamp(70px,10vw,150px);
    line-height:.82
}
.jungle-center .lead{
    max-width:700px;
    margin:24px auto 0;
    color:rgba(255,255,255,.7)
}
.jungle-leaf{
    position:absolute;
    z-index:3;
    top:-5%;
    width:min(34vw,430px);
    height:110%;
    filter:drop-shadow(0 30px 45px rgba(0,0,0,.32));
    will-change:transform
}
.jungle-leaf svg{
    width:100%;
    height:100%;
    overflow:visible
}
.jungle-leaf path{
    fill:#1b3928;
    stroke:#315b43;
    stroke-width:2
}
.jungle-leaf-a{
    left:-2%;
    transform-origin:left center
}
.jungle-leaf-b{
    right:-2%;
    transform-origin:right center
}
.jungle-small-leaves{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none
}
.jungle-small-leaves i{
    position:absolute;
    width:46px;
    height:90px;
    border-radius:90% 5% 90% 5%;
    background:#274d37;
    opacity:.55;
    transform:rotate(35deg)
}
.jungle-small-leaves i:nth-child(1){
    left:18%;
    top:18%
}
.jungle-small-leaves i:nth-child(2){
    left:29%;
    bottom:17%;
    transform:rotate(120deg) scale(.7)
}
.jungle-small-leaves i:nth-child(3){
    right:20%;
    top:16%;
    transform:rotate(-30deg) scale(.8)
}
.jungle-small-leaves i:nth-child(4){
    right:30%;
    bottom:14%;
    transform:rotate(-110deg) scale(.65)
}
.jungle-small-leaves i:nth-child(5){
    left:46%;
    top:12%;
    transform:rotate(15deg) scale(.45)
}
.jungle-small-leaves i:nth-child(6){
    right:46%;
    bottom:8%;
    transform:rotate(195deg) scale(.45)
}
/* Interactive canvas particles */
 .canvas-particle-section{
    min-height:100svh;
    position:relative;
    background:#0c0c0c;
    color:#fff;
    overflow:hidden;
    display:grid;
    align-items:center
}
.canvas-particle-section canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1
}
.canvas-particle-source{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none
}
.canvas-particle-section:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.08) 70%)
}
.canvas-particle-copy{
    position:relative;
    z-index:3;
    max-width:780px;
    margin-left:0
}
.canvas-particle-copy .headline{
    max-width:900px
}
.canvas-particle-copy .lead{
    max-width:630px;
    color:rgba(255,255,255,.72)
}
/* Interactive 3D photo cube */
 .photo-cube-section{
    overflow:hidden;
    background:var(--c-cream)
}
.cube-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:8vw;
    align-items:center
}
.photo-cube-stage{
    height:600px;
    display:grid;
    place-items:center;
    perspective:1100px;
    touch-action:none;
    cursor:grab
}
.photo-cube-stage:active{
    cursor:grabbing
}
.photo-cube{
    --cube:280px;
    position:relative;
    width:var(--cube);
    height:var(--cube);
    transform-style:preserve-3d;
    will-change:transform
}
.cube-face{
    position:absolute;
    inset:0;
    border:1px solid rgba(255,255,255,.35);
    overflow:hidden;
    backface-visibility:hidden;
    box-shadow:0 18px 55px rgba(0,0,0,.14)
}
.cube-face img{
    width:100%;
    height:100%;
    object-fit:cover
}
.cube-face-front{
    transform:translateZ(calc(var(--cube)/2))
}
.cube-face-back{
    transform:rotateY(180deg) translateZ(calc(var(--cube)/2))
}
.cube-face-right{
    transform:rotateY(90deg) translateZ(calc(var(--cube)/2))
}
.cube-face-left{
    transform:rotateY(-90deg) translateZ(calc(var(--cube)/2))
}
.cube-face-top{
    transform:rotateX(90deg) translateZ(calc(var(--cube)/2))
}
.cube-face-bottom{
    transform:rotateX(-90deg) translateZ(calc(var(--cube)/2))
}
/* Draggable 3D image ring */
 .image-ring-section{
    background:#0a0a0a;
    color:#fff;
    overflow:hidden
}
.ring-copy{
    max-width:820px
}
.ring-copy .lead{
    color:rgba(255,255,255,.68)
}
.image-ring-stage{
    height:760px;
    position:relative;
    perspective:1300px;
    touch-action:none;
    cursor:grab
}
.image-ring-stage:active{
    cursor:grabbing
}
.image-ring{
    position:absolute;
    left:50%;
    top:50%;
    width:1px;
    height:1px;
    transform-style:preserve-3d;
    will-change:transform
}
.ring-card{
    position:absolute;
    left:-175px;
    top:-235px;
    width:350px;
    height:470px;
    overflow:hidden;
    background:#111;
    box-shadow:0 20px 70px rgba(0,0,0,.35);
    backface-visibility:hidden
}
.ring-image{
    position:absolute;
    inset:-8%;
    background-size:cover;
    background-position:center;
    will-change:background-position,transform
}
.ring-card span{
    position:absolute;
    left:18px;
    bottom:16px;
    padding:7px 10px;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
    font-size:9px;
    letter-spacing:.14em;
    color:#fff
}
/* Smooth 3D scroll-driven reveal */
 .velocity-gallery{
    background:var(--c-paper);
    overflow:hidden
}
.velocity-head{
    max-width:900px;
    margin-bottom:70px
}
.velocity-list{
    width:min(1320px,calc(100% - 64px));
    margin:auto;
    display:grid;
    gap:80px
}
.velocity-card{
    position:relative;
    width:min(980px,86vw);
    height:min(68vh,720px);
    margin:0 auto;
    transform-style:preserve-3d;
    perspective:1100px;
    will-change:transform;
    overflow:hidden;
    background:#111
}
.velocity-card:nth-child(even){
    margin-left:auto;
    margin-right:4vw
}
.velocity-card:nth-child(odd){
    margin-left:4vw;
    margin-right:auto
}
.velocity-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.04);
    will-change:transform
}
.velocity-card figcaption{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    color:#fff;
    text-shadow:0 2px 15px rgba(0,0,0,.4)
}
.velocity-card figcaption span{
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase
}
.velocity-card figcaption b{
    font-size:clamp(34px,5vw,70px);
    letter-spacing:-.05em
}
/* Infinite horizontal strip */
 .move-strip-section{
    background:#111;
    color:#fff;
    overflow:hidden
}
.move-strip{
    margin-top:46px;
    overflow:hidden;
    perspective:1200px
}
.move-track{
    display:flex;
    width:max-content;
    gap:20px;
    padding:20px 0 50px;
    will-change:transform
}
.move-card{
    width:340px;
    height:440px;
    position:relative;
    flex:0 0 auto;
    transform-style:preserve-3d
}
.move-card img{
    width:100%;
    height:100%;
    object-fit:cover
}
.move-card span{
    position:absolute;
    left:14px;
    bottom:14px;
    background:rgba(0,0,0,.5);
    color:#fff;
    padding:8px 11px;
    font-size:9px;
    letter-spacing:.13em
}
/* Hero variable-font / split-wipe refinement */
 .hero-title{
    font-variation-settings:'wght' 650;
    transform-origin:left center;
    will-change:transform,font-variation-settings,letter-spacing
}
.hero-slide-bg{
    overflow:hidden
}
.hero-slide-bg:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.08),transparent);
    pointer-events:none
}
 @media(max-width:980px){
    .cube-layout{
        grid-template-columns:1fr
    }
    .photo-cube-stage{
        height:500px
    }
    .image-ring-stage{
        height:650px
    }
    .ring-card{
        width:300px;
        height:410px;
        left:-150px;
        top:-205px
    }
    .jungle-reveal{
        min-height:700px
    }
    .jungle-leaf{
        width:46vw
    }
    .velocity-list{
        width:calc(100% - 36px)
    }
    .velocity-card{
        width:94%;
        height:56vh;
        margin-left:auto!important;
        margin-right:auto!important
    }
}
 @media(max-width:640px){
    .floating-whatsapp{
        right:16px;
        bottom:16px;
        width:54px;
        height:54px
    }
    .jungle-reveal{
        height:88svh;
        min-height:640px
    }
    .jungle-center .display{
        font-size:clamp(58px,17vw,90px)
    }
    .jungle-leaf{
        width:62vw;
        opacity:.88
    }
    .canvas-particle-section{
        min-height:78svh
    }
    .photo-cube-stage{
        height:430px
    }
    .photo-cube{
        --cube:220px
    }
    .image-ring-stage{
        height:560px
    }
    .ring-card{
        width:230px;
        height:320px;
        left:-115px;
        top:-160px
    }
    .velocity-list{
        gap:42px
    }
    .velocity-card{
        height:52vh;
        min-height:420px
    }
    .move-card{
        width:260px;
        height:340px
    }
    .home-enquiry .contact-grid{
        gap:48px
    }
}
 @media(prefers-reduced-motion:reduce){
    .jungle-leaf,.jungle-small-leaves i,.photo-cube,.image-ring,.move-track,.velocity-card{
        transform:none!important
    }
}
 \n\n
/* ===== HEADING SIZE REFINEMENT ===== */
\n.display{
    font-size:clamp(48px,6.2vw,96px)!important;
    line-height:.9!important;
    letter-spacing:-.045em!important
}
\n.headline{
    font-size:clamp(36px,4.4vw,64px)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important
}
\n.hero-copy .display,.jungle-center .display{
    font-size:clamp(50px,6.6vw,100px)!important
}
\n.horizontal-intro h2,.particle-copy h2,.service-stack-card h2{
    font-size:clamp(40px,5vw,72px)!important;
    line-height:.95!important;
    letter-spacing:-.04em!important
}
\n.cta-band h2,.manifesto h2{
    font-size:clamp(42px,5.5vw,78px)!important;
    line-height:.94!important;
    letter-spacing:-.04em!important
}
\n.stack-card h3{
    font-size:clamp(32px,3.8vw,54px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important
}
\n.footer-big h2{
    font-size:clamp(36px,4.2vw,60px)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important
}
\n.project-panel h2,.zoom-detail h2,.carousel-card h2,.blog-card h2,.service-card h2,.gallery-detail h2{
    font-size:clamp(26px,2.8vw,42px)!important;
    line-height:1.05!important
}
\n@media(max-width:900px){
    \n .display,.hero-copy .display,.jungle-center .display{
        font-size:clamp(44px,10vw,72px)!important
    }
    \n .headline,.horizontal-intro h2,.particle-copy h2,.service-stack-card h2,.cta-band h2,.manifesto h2{
        font-size:clamp(34px,7vw,56px)!important
    }
    \n
}
\n@media(max-width:640px){
    \n .display,.hero-copy .display,.jungle-center .display{
        font-size:clamp(38px,11vw,58px)!important;
        line-height:.96!important
    }
    \n .headline,.horizontal-intro h2,.particle-copy h2,.service-stack-card h2,.cta-band h2,.manifesto h2{
        font-size:clamp(30px,8.5vw,46px)!important;
        line-height:1!important
    }
    \n .stack-card h3{
        font-size:clamp(28px,8vw,40px)!important
    }
    \n .footer-big h2{
        font-size:clamp(30px,8vw,44px)!important
    }
    \n
}
\n 
/* ========================================================= EFFECT-ONLY REVISION Active animation systems: ScrollTrigger Slider, Flip, Seamless 3D Carousel, Shatter, Smooth 3D Reveal, 3D Ring, 3D Photo Cube. ========================================================= */
 body{
    overflow-x:hidden
}
 #smooth-wrapper,#smooth-content{
    display:contents
}
 .page-transition,.cursor-dot,.cursor-ring,.touch-grid{
    display:none!important
}
/* ScrollTrigger homepage slider */
 .scroll-slider{
    position:relative;
    height:300svh;
    background:#050505
}
 .scroll-slider-stage{
    position:sticky;
    top:0;
    height:100svh;
    min-height:620px;
    overflow:hidden;
    background:#050505
}
 .scroll-slider-slides,.scroll-slide,.scroll-slide-media,.scroll-slide-shade{
    position:absolute;
    inset:0
}
 .scroll-slide{
    overflow:hidden;
    will-change:clip-path,opacity
}
 .scroll-slide-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    will-change:transform
}
 .scroll-slide-shade{
    background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.12) 75%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 52%)
}
 .scroll-slide-copy{
    position:absolute;
    left:50%;
    bottom:clamp(92px,12vh,150px);
    transform:translateX(-50%);
    z-index:3;
    color:#fff
}
 .scroll-slide-copy .display{
    max-width:880px;
    font-size:clamp(48px,6vw,92px)!important;
    line-height:.91!important
}
 .scroll-slide-copy .lead{
    max-width:650px;
    color:rgba(255,255,255,.82)
}
 .scroll-slider-ui{
    position:absolute!important;
    left:50%;
    bottom:34px;
    transform:translateX(-50%);
    z-index:20;
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:18px;
    color:#fff
}
 .scroll-slider-progress{
    height:1px;
    background:rgba(255,255,255,.28);
    overflow:hidden
}
.scroll-slider-progress span{
    display:block;
    width:100%;
    height:100%;
    background:#fff;
    transform:scaleX(.333);
    transform-origin:left center
}
 .scroll-slider-count{
    display:flex;
    gap:8px;
    font-size:12px;
    letter-spacing:.14em
}
.scroll-slider-count i{
    opacity:.4;
    font-style:normal
}
.scroll-slider-hint{
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:.16em;
    opacity:.6
}
/* General ScrollTrigger reveal */
 .effect-reveal{
    will-change:transform,opacity
}
/* Services are layout-only;
 motion is ScrollTrigger reveal */
 .service-grid-section{
    padding:clamp(70px,9vw,130px) 0
}
.service-grid-section .service-stack-wrap,.service-grid-section .stack-wrap{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px!important
}
.service-grid-card{
    position:relative!important;
    top:auto!important;
    min-height:360px!important;
    border:1px solid rgba(17,17,17,.12);
    background:#fff;
    padding:clamp(28px,4vw,54px)!important;
    transform:none!important;
    filter:none!important
}
.service-grid-card h2{
    font-size:clamp(34px,4vw,58px)!important;
    line-height:.98!important
}
/* Flip gallery */
 .flip-gallery-section{
    padding:clamp(80px,5vw,140px) 0;
    /* background:#080808; */
    color:#f3f3f0
}
.flip-gallery-head{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:30px;
    align-items:end;
    margin-bottom:42px
}
.flip-gallery-head .eyebrow{
    grid-column:1/-1
}
.flip-gallery-head .lead{
    color:#171411;
}
.flip-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px
}
.flip-card{
    position:relative;
    display:block;
    border:0;
    padding:0;
    background:#111;
    aspect-ratio:4/3;
    overflow:hidden;
    cursor:pointer;
    color:#fff
}
.flip-card:nth-child(4n+1),.flip-card:nth-child(4n){
    aspect-ratio:4/5
}
.flip-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease
}
.flip-card:hover img{
    transform:scale(1.025)
}
.flip-card>span{
    position:absolute;
    left:14px;
    bottom:12px;
    font-size:10px;
    letter-spacing:.14em
}
.flip-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(6,6,6,.96);
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);
    gap:28px;
    padding:clamp(18px,3vw,48px);
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
.flip-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
.flip-overlay-media{
    min-height:0;
    display:grid;
    place-items:center
}
.flip-overlay-media .flip-card{
    width:100%;
    height:100%;
    aspect-ratio:auto
}
.flip-overlay-media .flip-card img{
    transform:none!important
}
.flip-overlay-copy{
    align-self:end;
    color:#fff;
    padding:25px 0
}
.flip-overlay-copy>span{
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    opacity:.6
}
.flip-overlay-copy h3{
    font-size:clamp(36px,5vw,70px);
    line-height:.95;
    margin:15px 0
}
.flip-close{
    position:absolute;
    top:20px;
    right:20px;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:#111;
    color:#fff;
    font-size:28px;
    z-index:2
}
.flip-open{
    overflow:hidden
}
/* 3D ring */
 .image-ring-section{
    overflow:hidden;
    background:#050505;
    color:#fff
}
.image-ring-stage{
    height:clamp(480px,68vw,760px);
    position:relative;
    perspective:1400px;
    touch-action:none;
    outline:none
}
.image-ring{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    display:grid;
    place-items:center;
    will-change:transform
}
.ring-card{
    position:absolute;
    width:clamp(180px,23vw,330px);
    aspect-ratio:4/5;
    transform-style:preserve-3d;
    backface-visibility:hidden
}
.ring-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:50% 50%;
    border-radius:2px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    will-change:background-position
}
.ring-card>span{
    position:absolute;
    left:12px;
    bottom:10px;
    color:#fff;
    font-size:10px;
    letter-spacing:.12em;
    text-shadow:0 2px 10px #000
}
/* Smooth 3D reveal */
 .velocity-gallery{
    perspective:1300px;
    overflow:hidden
}
.velocity-list{
    width:min(1120px,calc(100% - 32px));
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(30px,7vw,100px) 18px;
    padding-bottom:100px
}
.velocity-card{
    margin:0;
    transform-style:preserve-3d;
    will-change:transform,opacity
}
.velocity-card:nth-child(even){
    margin-top:120px
}
.velocity-card img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    will-change:transform
}
.velocity-card figcaption{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-top:10px;
    font-size:11px
}
.velocity-card figcaption span{
    opacity:.55
}
.velocity-card figcaption b{
    font-weight:600
}
/* Photo cube */
 .photo-cube-section{
    overflow:hidden
}
.photo-cube-stage{
    width:min(520px,78vw);
    aspect-ratio:1;
    margin-inline:auto;
    perspective:1200px;
    display:grid;
    place-items:center;
    touch-action:none;
    outline:none
}
.photo-cube{
    position:relative;
    width:min(300px,52vw);
    height:min(300px,52vw);
    transform-style:preserve-3d;
    will-change:transform
}
.cube-face{
    position:absolute;
    inset:0;
    overflow:hidden;
    backface-visibility:hidden;
    background:#111
}
.cube-face img{
    width:118%;
    height:118%;
    object-fit:cover;
    position:absolute;
    left:-9%;
    top:-9%;
    will-change:transform
}
.cube-face-front{
    transform:translateZ(calc(min(300px,52vw)/2))
}
.cube-face-back{
    transform:rotateY(180deg) translateZ(calc(min(300px,52vw)/2))
}
.cube-face-right{
    transform:rotateY(90deg) translateZ(calc(min(300px,52vw)/2))
}
.cube-face-left{
    transform:rotateY(-90deg) translateZ(calc(min(300px,52vw)/2))
}
.cube-face-top{
    transform:rotateX(90deg) translateZ(calc(min(300px,52vw)/2))
}
.cube-face-bottom{
    transform:rotateX(-90deg) translateZ(calc(min(300px,52vw)/2))
}
/* Shattering gallery */
 .shatter-stage{
    position:relative;
    overflow:hidden;
    min-height:min(78svh,760px);
    background:#090909
}
.shatter-base{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.shatter-canvas{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    z-index:2;
    pointer-events:none
}
.shatter-copy,.shatter-controls{
    z-index:4
}
.shatter-copy{
    position:absolute;
    left:max(20px,5vw);
    bottom:max(75px,8vw);
    color:#fff;
    max-width:650px
}
.shatter-copy h2{
    font-size:clamp(42px,6vw,84px)!important;
    line-height:.92!important
}
.shatter-controls{
    position:absolute;
    right:max(20px,4vw);
    bottom:max(20px,4vw);
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff
}
.shatter-controls button{
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(0,0,0,.35);
    color:#fff;
    border-radius:50%
}
/* Seamless infinite 3D carousel */
 .infinite-carousel-section{
    overflow:hidden;
    background:#c0bdb7;
    color:#0a0a0a;
    padding:clamp(80px,3vw,140px) 0
}
.infinite-carousel{
    position:relative;
    height:clamp(390px,55vw,620px);
    perspective:1200px;
    touch-action:pan-y;
    outline:none;
    cursor:grab
}
.infinite-carousel:active{
    cursor:grabbing
}
.carousel-card{
    position:absolute;
    left:50%;
    top:50%;
    width:clamp(190px,25vw,360px);
    aspect-ratio:4/5;
    margin-left:calc(clamp(190px,25vw,360px)/-2);
    margin-top:calc(clamp(190px,25vw,360px)*-0.625);
    transform-style:preserve-3d;
    will-change:transform,opacity;
    background:#111
}
.carousel-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.carousel-card span{
    position:absolute;
    left:14px;
    bottom:12px;
    color:#fff;
    font-size:10px;
    letter-spacing:.12em;
    text-shadow:0 2px 12px #000
}
 @media(max-width:900px){
     .scroll-slide-copy{
        bottom:100px
    }
    .scroll-slide-copy .display{
        font-size:clamp(44px,10vw,70px)!important
    }
     .flip-gallery-head{
        grid-template-columns:1fr
    }
    .flip-gallery-head .eyebrow{
        grid-column:auto
    }
    .flip-grid{
        grid-template-columns:repeat(2,1fr)
    }
     .flip-overlay{
        grid-template-columns:1fr;
        grid-template-rows:minmax(0,1fr) auto
    }
    .flip-overlay-copy{
        padding:0 0 10px
    }
     .service-grid-section .service-stack-wrap,.service-grid-section .stack-wrap{
        grid-template-columns:1fr
    }
     .velocity-list{
        gap:60px 12px
    }
    .velocity-card:nth-child(even){
        margin-top:70px
    }
}
 @media(max-width:640px){
     .scroll-slider{
        height:285svh
    }
    .scroll-slider-stage{
        min-height:560px
    }
    .scroll-slide-copy{
        bottom:105px
    }
    .scroll-slide-copy .display{
        font-size:clamp(38px,12vw,56px)!important
    }
    .scroll-slide-copy .lead{
        font-size:13px;
        max-width:92%
    }
    .scroll-slider-ui{
        bottom:20px;
        grid-template-columns:1fr auto;
        width:calc(100% - 28px)
    }
    .scroll-slider-hint{
        display:none
    }
     .flip-grid{
        grid-template-columns:1fr
    }
    .flip-card,.flip-card:nth-child(n){
        aspect-ratio:4/3
    }
    .flip-overlay{
        padding:12px
    }
    .flip-overlay-copy h3{
        font-size:38px
    }
     .image-ring-stage{
        height:500px
    }
    .ring-card{
        width:160px
    }
     .velocity-list{
        grid-template-columns:1fr;
        width:calc(100% - 28px);
        gap:24px
    }
    .velocity-card:nth-child(even){
        margin-top:0
    }
    .velocity-card img{
        aspect-ratio:4/3
    }
     .cube-layout{
        grid-template-columns:1fr!important
    }
    .photo-cube-stage{
        width:88vw;
        margin-top:30px
    }
    .photo-cube{
        width:240px;
        height:240px
    }
    .cube-face-front{
        transform:translateZ(120px)
    }
    .cube-face-back{
        transform:rotateY(180deg) translateZ(120px)
    }
    .cube-face-right{
        transform:rotateY(90deg) translateZ(120px)
    }
    .cube-face-left{
        transform:rotateY(-90deg) translateZ(120px)
    }
    .cube-face-top{
        transform:rotateX(90deg) translateZ(120px)
    }
    .cube-face-bottom{
        transform:rotateX(-90deg) translateZ(120px)
    }
     .shatter-stage{
        min-height:560px
    }
    .shatter-copy{
        left:18px;
        right:18px;
        bottom:95px
    }
    .shatter-copy h2{
        font-size:clamp(38px,11vw,52px)!important
    }
    .shatter-controls{
        left:18px;
        right:auto;
        bottom:24px
    }
     .infinite-carousel{
        height:440px
    }
    .carousel-card{
        width:190px;
        margin-left:-95px;
        margin-top:-119px
    }
}
 @media(prefers-reduced-motion:reduce){
    .effect-reveal{
        opacity:1!important;
        transform:none!important
    }
    .scroll-slider{
        height:100svh
    }
    .scroll-slide:not(:first-child){
        display:none!important
    }
    .ring-image,.velocity-card,.carousel-card,.photo-cube{
        transition:none!important
    }
}
 \n
/* Stability patches for responsive 3D components */
\n.image-ring{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:1px!important;
    height:1px!important;
    display:block!important
}
\n.ring-card{
    left:0!important;
    top:0!important;
    translate:-50% -50%;
    transform-origin:center center!important
}
\n.photo-cube{
    --cube-size:min(300px,52vw);
    --cube-depth:calc(var(--cube-size) / 2);
    width:var(--cube-size)!important;
    height:var(--cube-size)!important
}
\n.cube-face-front{
    transform:translateZ(var(--cube-depth))!important
}
.cube-face-back{
    transform:rotateY(180deg) translateZ(var(--cube-depth))!important
}
.cube-face-right{
    transform:rotateY(90deg) translateZ(var(--cube-depth))!important
}
.cube-face-left{
    transform:rotateY(-90deg) translateZ(var(--cube-depth))!important
}
.cube-face-top{
    transform:rotateX(90deg) translateZ(var(--cube-depth))!important
}
.cube-face-bottom{
    transform:rotateX(-90deg) translateZ(var(--cube-depth))!important
}
\n.carousel-card{
    left:50%!important;
    top:50%!important;
    translate:-50% -50%;
    margin:0!important
}
.carousel-drag-proxy{
    position:absolute;
    width:1px;
    height:1px;
    left:50%;
    top:50%;
    pointer-events:none;
    opacity:0
}
\n@media(max-width:640px){
    .photo-cube{
        --cube-size:240px
    }
    .ring-card{
        width:160px!important;
        aspect-ratio:4/5;
        height:auto!important
    }
    .carousel-card{
        width:190px!important
    }
}
\n 
/* ========================================================= CLIENT REVISION 2026-09-26 ========================================================= */
/* Header logo + portfolio dropdown */
 .site-header{
    background:#242019;
    color:#fff;
    mix-blend-mode:normal;
    border-bottom:1px solid rgba(255,255,255,.13)
}
 .site-header.is-scrolled{
    background:rgba(36,32,25,.96)
}
 .brand-logo{
    width:190px;
    max-width:24vw;
    display:flex;
    align-items:center
}
 .brand-logo img{
    width:100%;
    height:auto;
    max-height:58px;
    object-fit:contain;
    filter:brightness(0) invert(1);
    opacity:.96
}
 .nav-portfolio{
    position:relative;
    list-style:none
}
 .nav-portfolio-row{
    display:flex;
    align-items:center;
    gap:5px
}
 .portfolio-menu-toggle{
    width:24px;
    height:24px;
    border:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
    font-size:17px;
    line-height:1;
    padding:0;
    transition:transform .25s ease
}
 .nav-portfolio.is-open .portfolio-menu-toggle{
    transform:rotate(180deg)
}
 .portfolio-dropdown{
    position:absolute;
    left:50%;
    top:calc(100% + 19px);
    transform:translate(-50%,12px);
    width:300px;
    max-height:min(68vh,560px);
    overflow:auto;
    padding:12px;
    background:#242019;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
    display:grid;
    grid-template-columns:1fr;
    z-index:1500
}
 .portfolio-dropdown a{
    display:block;
    padding:10px 12px!important;
    font-size:10px!important;
    letter-spacing:.08em!important;
    text-transform:none!important;
    border-bottom:1px solid rgba(255,255,255,.08)
}
 .portfolio-dropdown a:last-child{
    border-bottom:0
}
 .portfolio-dropdown a:after{
    display:none!important
}
 .portfolio-dropdown a:hover{
    background:rgba(255,255,255,.08)
}
 .nav-portfolio:hover .portfolio-dropdown,.nav-portfolio:focus-within .portfolio-dropdown,.nav-portfolio.is-open .portfolio-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0)
}
/* Homepage centered form only */
 .home-enquiry-centered{
    background:#fff2cf;
    padding:100px 0
}
 .form-only-wrap{
    display:flex;
    justify-content:center
}
 .project-form-centered{
    width:min(900px,100%);
    background:#fff8e6;
    border:1px solid rgba(23,20,17,.14);
    padding:clamp(26px,5vw,60px);
    box-shadow:0 20px 60px rgba(88,60,31,.08)
}
 .form-only-head{
    grid-column:1/-1;
    text-align:center;
    margin-bottom:10px
}
 .form-only-head .eyebrow{
    color:#8c6848
}
 .form-only-head h2{
    margin:0;
    font-size:clamp(38px,5vw,68px);
    line-height:.96;
    letter-spacing:-.045em;
    font-weight:600
}
 .form-submit-center{
    text-align:center
}
.form-submit-center .btn{
    min-width:260px
}
 .home-enquiry-centered .project-form{
    grid-template-columns:repeat(2,minmax(0,1fr))
}
/* New Services layout */
 .services-hero-new{
    padding:calc(var(--header) + 90px) 0 100px;
    background:#f5eddc
}
 .services-hero-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:8vw;
    align-items:end
}
 .services-hero-new h1{
    font-size:clamp(54px,7vw,104px);
    line-height:.88;
    letter-spacing:-.055em;
    margin:0;
    max-width:930px;
    font-weight:600
}
 .services-hero-copy{
    font-size:clamp(17px,1.7vw,24px);
    line-height:1.6;
    color:#534a41
}
 .services-showcase-new{
    background:#f8f2e7
}
 .service-feature{
    min-height:78vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid rgba(23,20,17,.13)
}
 .service-feature:last-child{
    border-bottom:1px solid rgba(23,20,17,.13)
}
 .service-feature-copy{
    padding:clamp(42px,7vw,100px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative
}
 .service-feature-no{
    position:absolute;
    top:38px;
    right:38px;
    font-size:11px;
    letter-spacing:.18em;
    color:#8e745f
}
 .service-feature-copy h2{
    font-size:clamp(40px,5.5vw,78px);
    line-height:.92;
    letter-spacing:-.045em;
    margin:10px 0 28px;
    max-width:740px
}
 .service-feature-copy p{
    max-width:620px;
    font-size:16px;
    line-height:1.85;
    color:#51483f
}
 .service-feature-media{
    min-height:600px;
    overflow:hidden
}
 .service-feature-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease)
}
 .service-feature:hover .service-feature-media img{
    transform:scale(1.025)
}
 .service-cta-new{
    padding:110px 0;
    background:#2b251e;
    color:#fff
}
 .service-cta-new h2{
    font-size:clamp(44px,6vw,82px);
    max-width:900px;
    line-height:.94;
    letter-spacing:-.045em;
    margin:0 0 34px
}
/* Project index + project pages */
 .portfolio-project-index{
    background:#f5eddc;
    border-bottom:1px solid var(--c-line)
}
 .project-name-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--c-line);
    border-left:1px solid var(--c-line);
    margin-top:20px
}
 .project-name-grid a{
    padding:18px 16px;
    border-right:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    font-size:13px;
    transition:.25s
}
 .project-name-grid a:hover{
    background:#242019;
    color:#fff
}
 .project-hero-simple{
    padding-top:var(--header);
    background:#f5eddc
}
 .project-hero-copy{
    padding-top:90px;
    padding-bottom:70px
}
 .project-hero-copy h1{
    font-size:clamp(54px,5vw,118px);
    line-height:.86;
    letter-spacing:-.06em;
    margin:0 0 26px
}
 .project-hero-copy p{
    font-size:clamp(16px,1.5vw,15px);
    line-height:1.7;
    max-width:760px;
    color:#554b41
}
 .project-hero-image{
    height:min(72vh,820px);
    overflow:hidden;
    margin:0 36px
}
 .project-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover
}
 .project-description{
    background:#fbf8f0
}
/* Pinterest-style masonry + lightbox */
 .masonry-section{
    background:#fbf8f0
}
 .masonry-head{
    margin-bottom:42px
}
.masonry-head .lead{
    color:#6b6259
}
 .masonry-gallery{
    columns:3 300px;
    column-gap:16px
}
 .masonry-item{
    width:100%;
    display:block;
    border:0;
    padding:0;
    margin:0 0 16px;
    background:#ddd;
    cursor:zoom-in;
    overflow:hidden;
    break-inside:avoid;
    position:relative
}
 .masonry-item:nth-child(4n+1) img{
    aspect-ratio:4/5
}
.masonry-item:nth-child(4n+2) img{
    aspect-ratio:1/1
}
.masonry-item:nth-child(4n+3) img{
    aspect-ratio:3/4
}
.masonry-item:nth-child(4n) img{
    aspect-ratio:16/10
}
 .masonry-item img{
    width:100%;
    height:auto;
    object-fit:cover;
    display:block;
    transition:transform .6s var(--ease),filter .35s
}
 .masonry-item:hover img{
    transform:scale(1.025);
    filter:brightness(.86)
}
 .gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(13,11,9,.96);
    display:grid;
    place-items:center;
    padding:32px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s
}
 .gallery-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
 .gallery-lightbox img{
    max-width:min(92vw,1500px);
    max-height:86vh;
    object-fit:contain;
    box-shadow:0 25px 80px rgba(0,0,0,.45)
}
 .gallery-lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:#1c1915;
    color:#fff;
    font-size:26px;
    cursor:pointer
}
 .lightbox-open{
    overflow:hidden
}
/* Blog */
 .blog-read{
    display:inline-block;
    margin-top:14px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    border-bottom:1px solid
}
 .blog-article{
    padding-top:var(--header);
    background:#fbf8f0
}
 .blog-article-hero{
    padding-top:80px
}
 .blog-article-hero .container{
    padding-bottom:60px
}
 .blog-article-hero h1{
    font-size:clamp(48px,4vw,96px);
    line-height:.9;
    letter-spacing:-.055em;
    margin:0;
    max-width:1050px
}
 .blog-article-hero>img{
    width:calc(100% - 72px);
    height:min(68vh,760px);
    object-fit:cover;
    margin:0 auto;
    display:block
}
 .blog-article-body{
    max-width:820px;
    padding-top:80px;
    padding-bottom:110px;
    font-family:var(--font-family-primary)
}
 .blog-article-body p{
    font-size:17px;
    line-height:1.9;
    color:#4d463f
}
 .blog-article-body .blog-article-lead{
    font-size:clamp(22px,2.4vw,30px);
    color:#171411
}
 .blog-article-body h2{
    font-size:clamp(32px,2vw,50px);
    line-height:1;
    margin:56px 0 20px
}
/* Contact map */
 .contact-map-section{
    background:#f5eddc;
    padding-top:70px
}
 .contact-map-head{
    max-width:800px;
    margin-bottom:36px
}
 .contact-map-frame{
    width:100%;
    height:min(65vh,640px);
    border:1px solid var(--c-line);
    overflow:hidden;
    background:#ddd
}
 .contact-map-frame iframe{
    width:100%;
    height:100%;
    border:0
}
/* 360 cube visual polish */
 .photo-cube-stage{
    cursor:grab
}
.photo-cube-stage:active{
    cursor:grabbing
}
 .photo-cube{
    transform-style:preserve-3d!important
}
 .cube-face{
    backface-visibility:hidden!important
}
/* Reference-style footer */
 .footer-ref{
    background:#fff9db!important;
    color:#171411!important;
    padding:82px 0 26px!important;
    border-top:1px solid rgba(23,20,17,.12)
}
 .footer-ref-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
}
 .footer-logo img{
    width:min(320px,65vw);
    height:auto;
    opacity:.75;
    margin-bottom:28px
}
 .footer-find{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:6px
}
 .footer-find span{
    font-size:clamp(28px,4vw,46px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:#cc9660
}
 .footer-find i{
    display:block;
    width:68px;
    height:3px;
    background:#2475d1;
    position:relative
}
 .footer-find i:before{
    content:'•••';
    position:absolute;
    right:calc(100% + 4px);
    top:-9px;
    letter-spacing:3px;
    color:#2475d1;
    font-style:normal;
    font-size:14px
}
 .footer-socials{
    display:flex;
    gap:18px;
    margin:58px 0 42px
}
 .footer-socials a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid rgba(23,20,17,.18);
    font-weight:700;
    font-size:12px;
    transition:.25s
}
 .footer-socials a:hover{
    background:#242019;
    color:#fff;
    transform:translateY(-3px)
}
 .footer-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:26px 34px;
    font-size:13px;
    font-weight:650;
    margin-bottom:70px
}
 .footer-nav a{
    position:relative
}
.footer-nav a:after{
    content:'';
    position:absolute;
    left:0;
    right:100%;
    bottom:-5px;
    height:1px;
    background:#171411;
    transition:.25s
}
.footer-nav a:hover:after{
    right:0
}
 .footer-meta{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:30px;
    text-align:left;
    border-top:1px solid rgba(23,20,17,.13);
    padding:30px 0 0;
    font-size:12px;
    font-weight:600
}
 .footer-meta span:last-child{
    text-align:right
}
/* Keep headings controlled */
 .display{
    font-size:clamp(52px,4vw,105px)!important;
    line-height:.9!important
}
.headline{
    font-size:clamp(38px,5vw,60px)!important;
    line-height:.96!important
}
 @media(max-width:980px){
     .brand-logo{
        width:165px;
        max-width:42vw
    }
    .nav-cta{
        display:none
    }
     .nav-links{
        gap:0
    }
     .services-hero-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .service-feature{
        grid-template-columns:1fr;
        min-height:0
    }
    .service-feature-media{
        min-height:52vw;
        order:1
    }
    .service-feature-copy{
        order:2
    }
    .service-feature-image-right .service-feature-media{
        order:1
    }
    .service-feature-image-right .service-feature-copy{
        order:2
    }
     .project-name-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
 @media(max-width:760px){
     .site-header{
        height:78px
    }
    .brand-logo{
        width:150px
    }
    .menu-toggle{
        display:block;
        margin-left:auto
    }
    .site-header nav{
        position:fixed;
        inset:78px 0 0;
        background:#242019;
        padding:25px;
        transform:translateX(100%);
        transition:.35s var(--ease);
        overflow-y:auto
    }
    .site-header nav.is-open{
        transform:translateX(0)
    }
    .nav-links{
        flex-direction:column;
        align-items:stretch
    }
    .nav-links>li{
        border-bottom:1px solid rgba(255,255,255,.12);
        padding:4px 0
    }
    .nav-links a{
        display:block;
        padding:14px 0;
        font-size:13px
    }
    .nav-portfolio-row{
        justify-content:space-between
    }
    .portfolio-menu-toggle{
        width:44px;
        height:44px
    }
    .portfolio-dropdown{
        position:static;
        transform:none!important;
        width:100%;
        max-height:0;
        padding:0 0 0 14px;
        border:0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        pointer-events:none;
        overflow:hidden;
        transition:max-height .35s ease;
        background:transparent
    }
    .nav-portfolio.is-open .portfolio-dropdown{
        max-height:720px;
        pointer-events:auto;
        padding-bottom:12px
    }
    .portfolio-dropdown a{
        padding:9px 0!important;
        font-size:11px!important
    }
     .home-enquiry-centered{
        padding:68px 0
    }
    .home-enquiry-centered .project-form{
        grid-template-columns:1fr
    }
    .project-form-centered{
        padding:24px 18px
    }
    .form-only-head h2{
        font-size:40px
    }
    .form-submit-center .btn{
        width:100%;
        min-width:0
    }
     .services-hero-new{
        padding:130px 0 60px
    }
    .services-hero-new h1{
        font-size:clamp(44px,13vw,66px)
    }
    .service-feature-media{
        min-height:68vw
    }
    .service-feature-copy{
        padding:38px 22px
    }
    .service-feature-no{
        top:24px;
        right:20px
    }
    .service-feature-copy h2{
        font-size:clamp(34px,10vw,50px)
    }
     .project-name-grid{
        grid-template-columns:1fr
    }
    .project-hero-image{
        margin:0 14px;
        height:56vh
    }
    .project-hero-copy{
        padding-top:70px
    }
    .project-hero-copy h1{
        font-size:clamp(46px,14vw,70px)
    }
     .masonry-gallery{
        columns:1
    }
    .masonry-item img,.masonry-item:nth-child(n) img{
        aspect-ratio:auto;
        max-height:none
    }
    .gallery-lightbox{
        padding:12px
    }
    .gallery-lightbox-close{
        top:12px;
        right:12px
    }
     .blog-article-hero>img{
        width:calc(100% - 28px);
        height:50vh
    }
    .blog-article-body{
        padding-top:50px;
        padding-bottom:70px
    }
    .blog-article-body p{
        font-size:15px
    }
     .contact-map-frame{
        height:55vh
    }
     .footer-ref{
        padding-top:58px!important
    }
    .footer-socials{
        margin:38px 0 30px
    }
    .footer-nav{
        gap:18px 22px;
        margin-bottom:42px
    }
    .footer-meta{
        flex-direction:column;
        text-align:center;
        gap:8px
    }
    .footer-meta span:last-child{
        text-align:center
    }
}
/* ========================================================== CLIENT REVISION V2 Sleek typography + mega menu + clean services + cube repair ========================================================== */
 :root{
     --font-family-primary:"Manrope","Helvetica Neue",Arial,sans-serif;
}
 html, body, button, input, select, textarea{
     font-family:var(--font-family-primary)!important;
}
 body{
     font-weight:400;
     letter-spacing:-.012em;
}
 h1,h2,h3,h4,h5,h6, .display,.headline{
     font-family:var(--font-family-primary)!important;
     font-weight:500!important;
     letter-spacing:-.045em!important;
}
 .eyebrow, .nav-links a, .nav-cta, .footer-nav a{
     font-family:var(--font-family-primary)!important;
     font-weight:600!important;
     letter-spacing:.11em;
}
/* Header hover */
 .nav-links > li > a, .nav-portfolio-row > a{
     transition:color .25s ease, opacity .25s ease, transform .25s ease;
}
 .nav-links > li > a:hover, .nav-portfolio-row > a:hover{
     color:#d7aa6c!important;
     transform:translateY(-1px);
}
/* ========================================================== PORTFOLIO MEGA MENU ========================================================== */
 .nav-portfolio{
     position:relative;
}
 .portfolio-mega{
     position:absolute!important;
     top:calc(100% + 22px)!important;
     left:50%!important;
     width:min(820px,calc(100vw - 64px))!important;
     max-height:none!important;
     overflow:visible!important;
     padding:22px!important;
     transform:translate(-50%,14px)!important;
     background:#211d17!important;
     border:1px solid rgba(255,255,255,.14)!important;
     box-shadow:0 28px 80px rgba(0,0,0,.36)!important;
     opacity:0!important;
     visibility:hidden!important;
     pointer-events:none!important;
     display:block!important;
     z-index:2200!important;
     transition:opacity .25s ease,transform .25s ease,visibility .25s ease!important;
}
 .nav-portfolio:hover .portfolio-mega, .nav-portfolio:focus-within .portfolio-mega, .nav-portfolio.is-open .portfolio-mega{
     opacity:1!important;
     visibility:visible!important;
     pointer-events:auto!important;
     transform:translate(-50%,0)!important;
}
 .portfolio-mega-head{
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:24px;
     padding:4px 4px 18px;
     margin-bottom:8px;
     border-bottom:1px solid rgba(255,255,255,.12);
}
 .portfolio-mega-head > div{
     display:grid;
     gap:4px;
}
 .portfolio-mega-eyebrow{
     color:#b8aa98;
     font-size:9px;
     text-transform:uppercase;
     letter-spacing:.18em;
}
 .portfolio-mega-head strong{
     color:#fff;
     font-size:22px;
     font-weight:500;
     letter-spacing:-.03em;
}
 .portfolio-view-all{
     color:#d7aa6c!important;
     font-size:10px!important;
     text-transform:uppercase!important;
     letter-spacing:.12em!important;
     padding:0!important;
     white-space:nowrap;
}
 .portfolio-mega-grid{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
}
 .portfolio-mega .mega-project-link{
     display:grid!important;
     grid-template-columns:28px 1fr 18px;
     align-items:center;
     gap:10px;
     min-height:58px;
     padding:12px 13px!important;
     border-right:1px solid rgba(255,255,255,.08);
     border-bottom:1px solid rgba(255,255,255,.08)!important;
     color:#f5efe4!important;
     text-transform:none!important;
     letter-spacing:0!important;
     transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
 .portfolio-mega .mega-project-link:nth-child(3n){
     border-right:0;
}
 .portfolio-mega .mega-project-link span{
     color:#8b8174;
     font-size:9px;
     letter-spacing:.12em;
}
 .portfolio-mega .mega-project-link strong{
     font-size:12px;
     font-weight:500;
     line-height:1.25;
}
 .portfolio-mega .mega-project-link i{
     opacity:0;
     transform:translate(-5px,5px);
     font-style:normal;
     color:#d7aa6c;
     transition:.25s ease;
}
 .portfolio-mega .mega-project-link:hover{
     background:#30291f!important;
     transform:translateY(-1px);
}
 .portfolio-mega .mega-project-link:hover i{
     opacity:1;
     transform:none;
}
/* ========================================================== SERVICES: text-led editorial layout ========================================================== */
 .services-editorial-page{
     background:#fff7dd;
     color:#17120e;
     padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,140px);
}
 .services-editorial-inner{
     max-width:1240px;
}
 .services-editorial-intro{
     max-width:1050px;
     padding-bottom:clamp(52px,6vw,86px);
     border-bottom:1px solid rgba(23,18,14,.18);
}
 .services-editorial-intro .eyebrow{
     display:block;
     margin-bottom:22px;
     color:#9f7243;
}
 .services-editorial-intro h1{
     max-width:920px;
     margin:0 0 30px;
     font-size:clamp(44px,5vw,72px);
     line-height:.98;
}
 .services-editorial-intro p{
     max-width:1120px;
     margin:0;
     font-size:clamp(16px,1.35vw,20px);
     line-height:1.8;
}
 .services-editorial-list{
     display:grid;
}
 .service-editorial-block{
     position:relative;
     display:grid;
     grid-template-columns:70px minmax(0,1fr);
     gap:28px;
     padding:clamp(42px,5vw,70px) 0;
     border-bottom:1px solid rgba(23,18,14,.16);
     transition:padding-left .35s ease,background .35s ease;
}
 .service-editorial-block::before{
     content:"";
     position:absolute;
     inset:0 -24px;
     background:rgba(126,82,50,0);
     pointer-events:none;
     z-index:0;
     transition:background .35s ease;
}
 .service-editorial-block:hover{
     padding-left:18px;
}
 .service-editorial-block:hover::before{
     background:rgba(126,82,50,.045);
}
 .service-editorial-block > *{
     position:relative;
     z-index:1;
}
 .service-editorial-no{
     padding-top:8px;
     color:#a2774e;
     font-size:10px;
     font-weight:600;
     letter-spacing:.16em;
}
 .service-editorial-block h2{
     margin:0 0 18px;
     font-size:clamp(28px,3vw,42px);
     line-height:1.05;
}
 .service-editorial-block p{
     max-width:1050px;
     margin:0;
     font-size:clamp(15px,1.3vw,18px);
     line-height:1.82;
}
 .services-editorial-cta{
     display:flex;
     justify-content:space-between;
     align-items:center;
     gap:28px;
     padding-top:50px;
}
 .services-editorial-cta span{
     font-size:clamp(22px,2.5vw,34px);
     font-weight:500;
}
/* ========================================================== PROPER 3D PHOTO CUBE ========================================================== */
 .photo-cube-section{
     overflow:visible!important;
}
 .photo-cube-stage{
     --cube-size:clamp(220px,24vw,310px);
     width:min(580px,100%)!important;
     height:clamp(430px,48vw,600px)!important;
     display:grid!important;
     place-items:center!important;
     perspective:1100px!important;
     perspective-origin:50% 50%!important;
     overflow:visible!important;
     touch-action:none!important;
     cursor:grab!important;
}
 .photo-cube-stage:active{
     cursor:grabbing!important;
}
 .photo-cube{
     --cube-depth:calc(var(--cube-size) / 2);
     position:relative!important;
     width:var(--cube-size)!important;
     height:var(--cube-size)!important;
     transform-style:preserve-3d!important;
     transform-origin:50% 50%!important;
     will-change:transform!important;
}
 .photo-cube .cube-face{
     position:absolute!important;
     inset:0!important;
     width:100%!important;
     height:100%!important;
     overflow:hidden!important;
     background:#17130f!important;
     border:1px solid rgba(255,255,255,.2)!important;
     backface-visibility:hidden!important;
     -webkit-backface-visibility:hidden!important;
     transform-style:preserve-3d!important;
     box-shadow:none!important;
}
 .photo-cube .cube-face img{
     position:absolute!important;
     inset:0!important;
     width:100%!important;
     height:100%!important;
     object-fit:cover!important;
     display:block!important;
}
 .photo-cube .cube-face-front{
     transform:translateZ(var(--cube-depth))!important;
}
 .photo-cube .cube-face-back{
     transform:rotateY(180deg) translateZ(var(--cube-depth))!important;
}
 .photo-cube .cube-face-right{
     transform:rotateY(90deg) translateZ(var(--cube-depth))!important;
}
 .photo-cube .cube-face-left{
     transform:rotateY(-90deg) translateZ(var(--cube-depth))!important;
}
 .photo-cube .cube-face-top{
     transform:rotateX(90deg) translateZ(var(--cube-depth))!important;
}
 .photo-cube .cube-face-bottom{
     transform:rotateX(-90deg) translateZ(var(--cube-depth))!important;
}
/* ========================================================== GLOBAL MOUSE HOVER POLISH ========================================================== */
 .hover-surface{
     position:relative;
     isolation:isolate;
     overflow:hidden;
     transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
 .hover-surface::after{
     content:"";
     position:absolute;
     inset:-1px;
     z-index:-1;
     pointer-events:none;
     background:radial-gradient( 280px circle at var(--hover-x,50%) var(--hover-y,50%), rgba(215,170,108,.14), transparent 60% );
     opacity:0;
     transition:opacity .3s ease;
}
 .hover-surface:hover::after{
     opacity:1;
}
 .hover-surface:hover{
     transform:translateY(-3px);
}
/* Footer after removing the footer logo */
 .footer-ref-inner{
     gap:22px;
}
 .footer-find{
     margin-top:0!important;
}
/* ========================================================== RESPONSIVE ========================================================== */
 @media(max-width:980px){
     .portfolio-mega{
         left:auto!important;
         right:0!important;
         width:min(720px,calc(100vw - 32px))!important;
         transform:translate(0,14px)!important;
    }
     .nav-portfolio:hover .portfolio-mega, .nav-portfolio:focus-within .portfolio-mega, .nav-portfolio.is-open .portfolio-mega{
         transform:translate(0,0)!important;
    }
     .portfolio-mega-grid{
         grid-template-columns:repeat(2,minmax(0,1fr));
    }
     .portfolio-mega .mega-project-link:nth-child(3n){
         border-right:1px solid rgba(255,255,255,.08);
    }
     .portfolio-mega .mega-project-link:nth-child(2n){
         border-right:0;
    }
}
 @media(max-width:760px){
     .portfolio-mega{
         position:static!important;
         width:100%!important;
         max-height:0!important;
         padding:0!important;
         transform:none!important;
         background:transparent!important;
         border:0!important;
         box-shadow:none!important;
         opacity:1!important;
         visibility:visible!important;
         overflow:hidden!important;
    }
     .nav-portfolio.is-open .portfolio-mega{
         max-height:1100px!important;
         padding:12px 0 6px!important;
    }
     .portfolio-mega-head{
         display:none;
    }
     .portfolio-mega-grid{
         grid-template-columns:1fr;
    }
     .portfolio-mega .mega-project-link{
         min-height:44px;
         padding:9px 4px!important;
         border-right:0!important;
    }
     .services-editorial-page{
         padding:56px 0 76px;
    }
     .services-editorial-intro h1{
         font-size:clamp(38px,11vw,54px);
    }
     .services-editorial-intro p{
         font-size:15px;
         line-height:1.75;
    }
     .service-editorial-block{
         grid-template-columns:36px 1fr;
         gap:14px;
         padding:36px 0;
    }
     .service-editorial-block:hover{
         padding-left:0;
    }
     .service-editorial-block::before{
         display:none;
    }
     .service-editorial-block h2{
         font-size:30px;
    }
     .service-editorial-block p{
         font-size:14px;
         line-height:1.72;
    }
     .services-editorial-cta{
         align-items:flex-start;
         flex-direction:column;
    }
     .photo-cube-stage{
         --cube-size:min(220px,58vw);
         width:100%!important;
         height:360px!important;
         margin-top:18px;
    }
}
 
.service-editorial-subheading {
    font-family: inherit;
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.12em;
    /* text-transform: uppercase; */
    color: #a58b73;
    margin: 14px 0 22px;
}

@media (max-width: 768px) {
    .service-editorial-subheading {
        font-size: 12px;
        letter-spacing: 0.08em;
        line-height: 1.7;
        margin: 12px 0 18px;
    }
}


/* === RESPONSIVE REPAIR 2026: scoped to pre-existing layout trouble spots. === */
/* Let grid/flex children shrink instead of pushing the viewport wider. */
.cube-layout > *, .intro-grid > *, .service-feature > *,
.services-hero-grid > *, .project-grid > *, .service-editorial-block > * {
  min-width: 0;
}
/* Prevent decorative service block hover background from increasing page width. */
.services-editorial-page { overflow-x: clip; }
/* Keep text, long names and address links inside cards on small screens. */
.service-editorial-block h2, .project-directory-head h2,
.portfolio-directory-item strong, .footer-meta, .footer-nav {
  overflow-wrap: anywhere;
}
@media (max-width: 980px) {
  /* Preserve a readable mobile/tablet menu and safe dropdown width. */
  .site-header nav { max-width: 100vw; }
  .portfolio-mega { max-width: calc(100vw - 36px) !important; }
}
@media (max-width: 760px) {
  .site-header nav { overscroll-behavior: contain; }
  .cube-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .cube-layout .cube-copy { min-width: 0 !important; width: 100%; max-width: 100%; }
  .cube-layout .photo-cube-stage { min-width: 0 !important; max-width: 100%; }
  .services-editorial-intro, .service-editorial-block, .services-editorial-cta { min-width: 0; }
  .portfolio-mega .portfolio-mega-grid { min-width: 0; }
  .portfolio-directory-grid { min-width: 0; }
}
@media (max-width: 400px) {
  .cube-layout .cube-copy { width: 100%; }
  .cube-layout .photo-cube-stage { --cube-size: min(185px, 55vw); }
  .service-editorial-block { grid-template-columns: 25px minmax(0,1fr); gap: 10px; }
  .service-editorial-block h2 { font-size: clamp(25px, 8vw, 30px); }
  .portfolio-mega .mega-project-link strong { overflow-wrap: anywhere; }
}