/* A cinematic, scroll-directed portfolio for The Wolf Design. */
html{scroll-behavior:smooth;scroll-padding-top:105px}body{background:#080808}body.immersive-home header{position:fixed;height:88px;z-index:50;background:linear-gradient(#080808c9,transparent);transition:background .3s}.immersive-home.past-hero header{background:#080808ed;border-bottom:1px solid #ffffff20;backdrop-filter:blur(18px)}
.cinematic-hero{height:175svh;max-height:none;min-height:900px;overflow:visible;background:#080808;--progress:0;--expand:0;--fade:1}.hero-stage{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 65% 50%,#27241e 0%,#11110f 35%,#080808 75%);isolation:isolate}.hero-backdrop{position:absolute;top:19%;left:4%;font-size:clamp(5rem,16.5vw,20rem);font-weight:800;letter-spacing:-.07em;line-height:1;color:#e9e5dc;white-space:nowrap;opacity:calc(.75 * var(--fade));transform:translateX(calc(var(--progress) * -70px));z-index:0}.hero-orbit{position:absolute;width:70vw;height:70vw;left:29%;top:-15%;border:1px solid #c2ad832b;border-radius:50%;opacity:var(--fade);transform:rotate(-25deg) scaleY(.75)}.hero-orbit:after{content:'';position:absolute;inset:8%;border:1px solid #c2ad831a;border-radius:50%}
.hero-slides{inset:auto;left:calc(45% - var(--expand)*45%);top:calc(20% - var(--expand)*20%);width:calc(46% + var(--expand)*54%);height:calc(64% + var(--expand)*36%);z-index:1;overflow:hidden;box-shadow:0 30px 100px #0007;transform:rotate(calc(-2deg + var(--expand)*2deg));will-change:width,height,top,left}.hero-slide{animation:none;object-position:50% 46%;transition:opacity 1s;transform:scale(calc(1.04 + var(--progress)*.04))}.hero-shade{z-index:2;background:linear-gradient(90deg,#0007,transparent 65%),linear-gradient(0deg,#000a,transparent 40%);opacity:calc(.35 + var(--expand)*.65)}.cinematic-copy{z-index:3;text-align:left;left:5%;right:auto;bottom:20%;width:70%;transform:translateY(calc(var(--progress)*-25px))}.cinematic-copy>p{font-size:14px;letter-spacing:.2em;color:var(--gold);margin-bottom:20px}.cinematic-copy h1{font-size:clamp(3.5rem,7.3vw,8rem);line-height:.91;letter-spacing:-.065em;max-width:850px;text-shadow:0 4px 32px #0008}.cinematic-copy h1 br{display:block}.cinematic-copy a{font-size:14px;letter-spacing:.1em;margin-top:25px;background:#08080870;padding:13px 0;border-bottom:1px solid var(--gold)}.hero-detail{position:absolute;right:6%;bottom:18%;z-index:3;opacity:calc(1 - var(--fade));transform:translateY(calc(var(--fade)*20px));text-align:right;color:#fff}.hero-detail span{font-size:13px;letter-spacing:.13em}.hero-detail p{font:italic 38px/1.15 Georgia,serif;margin-top:15px}.hero-scroll{position:absolute;bottom:90px;left:5%;font-size:12px;letter-spacing:.16em;color:var(--gold);z-index:4;opacity:var(--fade)}.hero-scroll span{margin-left:12px;font-size:22px}.hero-bottom{z-index:4;bottom:23px}.hero-bottom>span{font-size:12px}.hero-dots button{height:44px;width:36px}.hero-bottom>button{height:44px;width:44px;border-radius:50%;background:#08080880}.hero-bottom>button:focus-visible,.work-control:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.work.section{padding:75px 5% 45px;overflow:hidden}.work .work-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(2.5rem,5.7vw,6.3rem);letter-spacing:-.055em;font-weight:500;line-height:.95;max-width:700px}.work .work-heading{border:0;padding:0;align-items:end;margin-bottom:34px}.collection-label{color:var(--gold);font-size:14px}.projects{display:flex;columns:auto;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a18e68 #111;scroll-behavior:smooth;padding-bottom:18px}.projects .project{flex:0 0 calc(42% - 11px);margin:0;scroll-snap-align:start;position:relative}.project-image{height:clamp(330px,45vw,570px);overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease!important}.project:hover .project-image img{transform:scale(1.025)}.project-title,.project:hover .project-title{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding:18px 0 8px}.project-title h3{font-size:18px}.project-title>span{font-size:14px;white-space:nowrap}.work-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0}.work-controls>span{font-size:14px;color:var(--muted)}.work-controls>div{display:flex;gap:10px}.work-control{border:1px solid #ffffff40;color:var(--paper);background:transparent;border-radius:50%;height:48px;width:48px;font-size:22px;cursor:pointer}.work-control:hover{background:#c2ad83;color:#080808}.work-control:disabled{opacity:.25;cursor:default}.portfolio-end{font-size:14px}.portfolio-end p{font-size:14px}
.booking-strip{padding:50px 5%;background:radial-gradient(ellipse at right,#242018,#080808 70%)}.booking-strip h2{font:400 clamp(2rem,4vw,4rem)/1.08 Georgia,serif;letter-spacing:-.035em}.booking-actions .button{border-color:var(--gold);background:#c2ad83;color:#080808}.expertise.section{padding:70px 5%}.expertise .work-heading h2{font:400 clamp(2rem,3.5vw,3.8rem)/1.05 Georgia,serif;letter-spacing:-.03em}.services-grid{grid-template-columns:1.2fr 1fr;gap:6vw}.services-grid article{border-top:1px solid var(--gold);padding-top:28px}.services-grid article:nth-child(2){position:sticky;top:125px;align-self:start}.services-grid h3{font:400 32px/1.2 Georgia,serif}.services-grid .eyebrow,.studio-visit .eyebrow{font-size:14px}.services-grid summary,.services-grid .button,.price-calculator label,.calculator-top p,.calculator-note,.price-result span,.bank-transfer dt,.bank-transfer-top p,.bank-transfer-top span,.bank-transfer .cliq-instructions,.copy-status,.pricing-list s{font-size:14px!important}.price-calculator{background:linear-gradient(125deg,#191711,#0c0c0c);border-color:#c2ad8355}.price-result strong{font-size:38px}.studio-visit{padding:60px 5%}.studio-visit h2{font-size:clamp(2rem,3.8vw,4rem)}.footer-top>a{font-size:clamp(2rem,7vw,7rem);letter-spacing:-.05em}.footer-bottom{font-size:14px}
[data-reveal]{transition:opacity .7s ease,transform .7s ease}.motion-ready [data-reveal]:not(.revealed){opacity:0;transform:translateY(28px)}
@media(max-width:800px){.immersive-home header{height:82px;padding:0 16px;grid-template-columns:32px 1fr 62px}.immersive-home .brand>span{font-size:15px}.immersive-home .brand small{font-size:8px}.immersive-home .brand img{width:28px;height:40px}.immersive-home .header-cta{font-size:14px}.cinematic-hero{height:145svh;min-height:850px}.hero-stage{min-height:560px}.hero-backdrop{top:20%;left:5%;font-size:19vw}.hero-orbit{width:110vw;height:110vw;left:10%;top:12%}.hero-slides{left:calc(25% - var(--expand)*25%);top:calc(27% - var(--expand)*27%);width:calc(68% + var(--expand)*32%);height:calc(49% + var(--expand)*51%)}.cinematic-copy{bottom:19%;left:6%;width:88%}.cinematic-copy h1{font-size:clamp(3rem,12.8vw,6rem);max-width:570px;line-height:.97}.cinematic-copy>p{font-size:12px;letter-spacing:.1em;margin-bottom:15px}.cinematic-copy a{font-size:14px;margin-top:20px}.hero-detail{right:6%;bottom:39%}.hero-detail span{font-size:12px}.hero-detail p{display:none}.hero-scroll{bottom:85px;font-size:12px}.hero-bottom>span{font-size:11px;letter-spacing:.04em}.hero-dots{gap:5px}.hero-dots button{width:22px}.work.section{padding:45px 5% 30px}.work .work-heading h2{font-size:clamp(2.4rem,10vw,4rem)}.work .work-heading{margin-bottom:25px}.collection-label{font-size:12px}.projects{gap:14px}.projects .project{flex-basis:82%}.project-image{height:105vw;max-height:510px}.project-title,.project:hover .project-title{display:block}.project-title h3{font-size:18px}.project-title>span{display:block;font-size:14px}.portfolio-end{flex-direction:column;gap:10px}.booking-strip{padding:35px 5%}.expertise.section{padding:45px 5%}.services-grid{grid-template-columns:1fr;gap:38px}.services-grid article:nth-child(2){position:static}.design-package{max-width:none}.studio-visit{padding:40px 5%}.enquire .form-row label{font-size:14px}.form-price-note,.form-hint{font-size:14px}.enquire input,.enquire select,.enquire textarea{font-size:16px}.pricing-list>div{font-size:14px}.hero-bottom{left:5%;right:5%}}
@media(prefers-reduced-motion:reduce){html,.projects{scroll-behavior:auto}.cinematic-hero{height:100svh;min-height:560px}.hero-slides{will-change:auto}.hero-slide,.project-image img,[data-reveal],.hero-detail{transition:none!important;transform:none!important}.motion-ready [data-reveal]:not(.revealed){opacity:1;transform:none}.hero-scroll{display:none}}
