
/* V8 MOBILE REFINEMENT: Original architecture, typography and desktop appearance retained. */
.mobile-brand-word{display:none}
html,body{width:100%;max-width:100%;overflow-x:clip}
body{min-width:0}
main, main>section,.site-footer,.closing-invitation{max-width:100%;min-width:0}
img{image-rendering:auto}
.nav-trigger>.menu-label{display:none}
/* Mobile images should not be artificially enlarged with large zoom animations. */
@media(max-width:1000px){
 .slide-photo,.bdt-slideshow-item.active .slide-photo{transform:none;transition:none}
 .divided-header{position:relative;display:grid;grid-template-columns:1fr auto;gap:0;min-width:0}
 .divided-header>.qodef-header-logo-link{grid-column:1;grid-row:1;justify-self:start}
 .divided-header>.header-right{grid-column:2;grid-row:1;justify-self:end}
 .mobile-brand-word{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display,'Antonio',sans-serif);font-size:clamp(15px,2.1vw,21px);line-height:1;letter-spacing:.035em;white-space:nowrap;font-weight:650;pointer-events:none}
 .nav-trigger{width:auto;min-width:92px;height:44px;display:grid;grid-template-columns:auto 29px;grid-template-rows:1fr 1fr;column-gap:9px;row-gap:0;align-items:center;justify-items:end;padding:7px 0;color:inherit}
 .nav-trigger>.menu-label{display:block;background:none!important;width:auto!important;height:auto!important;grid-column:1;grid-row:1/3;font:700 11px var(--body,'Noto Sans',sans-serif);letter-spacing:.08em;line-height:1.3;transform:none!important}
 .nav-trigger>span:not(.menu-label){grid-column:2;height:2px;background:currentColor;width:28px;display:block;transition:transform .2s,width .2s}
 .nav-trigger>span:nth-child(2){grid-row:1;align-self:end;margin-bottom:4px}
 .nav-trigger>span:nth-child(3){grid-row:2;align-self:start;margin-top:4px;width:28px}
 .nav-trigger[aria-expanded=true]>span:nth-child(2){transform:translateY(5px) rotate(45deg)}
 .nav-trigger[aria-expanded=true]>span:nth-child(3){transform:translateY(-5px) rotate(-45deg);width:28px}
 .site-drawer{right:0;left:auto;max-width:100vw;overflow-x:hidden}
 .header-right .phone-link{display:none}
 .site-header,.divided-header{max-width:100vw}
}
@media(max-width:700px){
 :root{--mobile-pad:20px}
 .site-header{height:72px}
 .site-drawer{top:72px;height:calc(100dvh - 72px);padding:15px 22px 90px;overscroll-behavior:contain}
 .drawer-main{padding:10px 0 17px;gap:0}
 .drawer-main a{font-size:23px;padding:8px 0;line-height:1.25}
 .divided-header{height:72px;padding:0 19px}
 .qodef-header-logo-link.brand-real{width:80px;height:65px}
 .qodef-header-logo-link.brand-real img{width:80px;height:63px;object-fit:contain}
 .mobile-brand-word{font-size:clamp(13px,3.8vw,17px);font-weight:650}
 .nav-trigger{min-width:78px;column-gap:6px}
 .nav-trigger>.menu-label{font-size:10px}
 .nav-trigger>span:not(.menu-label){width:24px!important}
 .section-pad{padding:45px var(--mobile-pad)}
 .mini-caps,.editorial-kicker{font-size:9px;letter-spacing:.13em;line-height:1.5}
 p{overflow-wrap:break-word}
 h1,h2,h3,h4{overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%;line-height:1.1}
 h2{font-size:clamp(40px,10vw,54px)}
 h3{font-size:clamp(28px,7.8vw,40px)}
 .line-button{min-height:43px;padding:10px 17px;font-size:10px;letter-spacing:.04em;max-width:100%;white-space:normal}
 .text-underline{font-size:10px;letter-spacing:.06em}
 .thin-copy{line-height:1.7;font-size:13px}
 /* Hero takes the user to the relevant service quickly without huge vertical scroll */
 .hero-camden{min-height:0;height:min(690px,86svh);max-height:720px}
 .hero-centre{padding:91px 26px 82px}
 .hero-centre h1{font-size:clamp(45px,12.2vw,59px);line-height:1.02;letter-spacing:0;margin:0 0 18px;max-width:100%}
 .hero-sup{font-size:9px;letter-spacing:.12em;margin:0 0 18px}
 .hero-description{font-size:12px;line-height:1.65;max-width:300px;margin:0 0 13px}
 .hero-mark,.hero-phone{bottom:78px;font-size:8px}
 .slider-progress{left:17px;top:auto;bottom:155px;gap:8px}
 .progress-track{height:40px}
 .slide-index{right:14px;top:auto;bottom:150px;gap:8px}
 .slide-choice{font-size:9px}
 .hendon-split{display:flex;flex-direction:column-reverse;padding:42px var(--mobile-pad);min-height:0;gap:0}
 .stacked-images{height:240px;width:100%;margin:0 0 20px}
 .outline-frame{top:0;left:0;width:72%;height:83%}
 .stacked-major{height:90%;left:4%;width:71%}
 .stacked-minor{height:48%;border:4px solid var(--cream);bottom:0;width:42%}
 .split-text{padding:0}
 .split-text h2{font-size:clamp(40px,10vw,57px);margin:10px 0 12px;line-height:1.1}
 .split-text .text-underline{margin-top:15px}
 .florz-collection{padding:46px 0 0}
 .collection-head{display:block;padding:0 var(--mobile-pad) 22px}
 .collection-head h2{font-size:clamp(41px,10.5vw,57px);margin:5px 0 10px;line-height:1.1}
 .collection-head>p{font-size:12px;line-height:1.65;padding:0}
 .flooring-grid{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:0 20px 14px}
 .flooring-tile{height:246px;min-width:0;flex:0 0 min(67vw,250px);scroll-snap-align:start;border:none!important}
 .tile-title{bottom:14px;left:13px;right:10px}
 .tile-title h3,.tile-lvt .tile-title h3{font-size:clamp(28px,8vw,39px);margin:4px 0 7px;line-height:1.02}
 .tile-count,.tile-under{font-size:8px;letter-spacing:.07em}
 .full-bleed-statement{display:flex;flex-direction:column;height:auto}
 .statement-image{height:215px}
 .statement-text{padding:35px 22px 44px}
 .statement-text h2{font-size:clamp(40px,10vw,55px);margin:12px 0}
 .statement-text p:not(.mini-caps){font-size:12px;line-height:1.65}
 .statement-text .line-button{margin-top:18px}
 .process-panel{padding:47px var(--mobile-pad)}
 .process-panel h2{font-size:clamp(41px,10vw,53px);margin:6px 0 19px}
 .numbered-process{display:grid;gap:10px;margin:0 0 19px}
 .numbered-process>div{padding:12px 0 0;display:grid;grid-template-columns:32px 1fr;align-items:baseline;gap:0 8px}
 .numbered-process>div strong{grid-column:1;grid-row:1/3;font-size:17px}
 .numbered-process>div h3{grid-column:2;grid-row:1;font-size:27px}
 .numbered-process>div p{grid-column:2;grid-row:2;font-size:12px;line-height:1.5;margin:2px 0 0}
 .florz-work.section-pad{padding:47px 0 45px}
 .florz-work .work-head{padding:0 var(--mobile-pad);margin:0 0 16px}
 .work-head h2{font-size:clamp(42px,11vw,59px);line-height:1.1;margin:7px 0 14px}
 .work-diptych{display:flex;gap:12px;padding:0 20px 13px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .work-diptych>a:first-child,.work-diptych>a:nth-child(2),.work-diptych>a{height:243px;margin:0;min-width:0;flex:0 0 min(76vw,295px);scroll-snap-align:start}
 .work-diptych a>span{bottom:13px;left:13px;font-size:9px}
 .hendon-areas{padding:47px 20px}
 .hendon-areas h2{font-size:clamp(42px,11vw,58px);line-height:1.1;margin:12px 0}
 .hendon-areas p{font-size:12px;line-height:1.6}
 .closing-invitation{padding:50px 20px 55px}
 .closing-invitation h2{font-size:clamp(46px,12vw,64px);line-height:1.1;margin:10px 0 12px}
 .closing-invitation p:not(.mini-caps){font-size:12px;line-height:1.6}
 .site-footer{padding:36px 20px 78px}
 .footer-main{gap:20px 12px}
 .footer-main>div:first-child{margin:0}
 .footer-logo.brand-real-footer{width:115px;height:80px}
 .footer-main p,.footer-main a{font-size:11px;line-height:1.6}
 .footer-main .mini-caps{font-size:9px}
 .footer-bottom{margin-top:24px;font-size:10px}
 /* Compact inner pages */
 .editorial-title-section{min-height:0;padding:115px 20px 49px}
 .editorial-title-section h1{font-size:clamp(45px,11.5vw,63px);line-height:1.08;letter-spacing:0;margin:13px 0;max-width:100%}
 .editorial-title-section:after{font-size:80px;right:7px;bottom:8px;opacity:.12}
 .hero-sub,.image-title{min-height:350px;height:390px}
 .hero-sub-text{padding:118px 22px 37px;max-width:100%}
 .hero-sub-text h1{font-size:clamp(45px,11.2vw,59px);line-height:1.08;letter-spacing:0;margin:14px 0}
 .hero-sub-text>p:last-child{font-size:12px;line-height:1.65;max-width:330px}
 .material-hero{min-height:0}
 .material-hero-text{padding:104px 20px 32px}
 .material-hero-text h1{font-size:clamp(46px,12vw,65px);line-height:1.05;margin:13px 0}
 .material-sub{font-size:17px;line-height:1.55}
 .material-hero-actions{margin-top:17px;gap:11px}
 .material-hero-photo{height:210px;min-height:210px}
 .material-editorial{padding:45px 20px}
 .material-editorial>div{margin:12px 0 0}
 .material-editorial h2{font-size:clamp(40px,10vw,54px);line-height:1.09;margin-bottom:12px}
 .material-editorial p:not(.mini-caps){font-size:12px;line-height:1.6}
 .material-detail{min-height:0}
 .detail-photo{height:220px}
 .considerations{padding:45px 20px}
 .next-material{padding:36px 20px}
 .room-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap;gap:16px;padding-bottom:2px}
 .room-tabs button{white-space:nowrap;flex:0 0 auto;min-height:37px;font-size:10px}
 .room-stage{height:310px}
 .room-description{width:90%;padding:13px;max-width:300px}
 .room-description h3{font-size:29px;line-height:1.1;margin:4px 0}
 .room-description p{font-size:11px;line-height:1.5;margin-bottom:7px}
 .room-description .text-underline{font-size:9px}
 .image-title h1{font-size:clamp(45px,11vw,60px)}
 .fitting-intro{padding:45px 20px}
 .fitting-intro h2{font-size:clamp(40px,10vw,55px)}
 .service-lines{padding:45px 20px}
 .ser-lines>div{font-size:24px;gap:10px;padding:9px 0}
 .ser-lines span{width:28px}
 .big-step{min-height:0}
 .step-left{padding:32px 20px}
 .step-left>span{font-size:45px;line-height:1}
 .step-left h2{font-size:clamp(38px,10vw,52px);line-height:1.1;margin:8px 0}
 .step-left p{font-size:12px;line-height:1.7}
 .step-photo{height:185px}
 .about-statement{padding:45px 20px}
 .large-numeral{font-size:91px;line-height:1;margin:12px 0}
 .about-statement>div:last-child{margin:18px 0 0}
 .about-statement h2{font-size:clamp(40px,10vw,52px);line-height:1.1}
 .authentic-band{min-height:0}
 .authentic-band .authentic-photo{height:205px;min-height:205px}
 .authentic-band .authentic-copy{padding:32px 20px}
 .authentic-band h2{font-size:clamp(40px,10vw,54px);margin:9px 0}
 .authentic-band p:not(.mini-caps){font-size:12px;line-height:1.65;margin-bottom:16px}
 .areas-wrap{padding:45px 20px}
 .areas-copy h2{font-size:clamp(40px,10vw,52px)}
 .areas-list{margin-top:25px}
 .areas-list strong{font-size:28px}
 .contact-layout{padding:45px 20px}
 .contact-data h2{font-size:clamp(42px,10vw,54px)}
 .contact-form{margin:28px 0 0;padding:25px 19px;min-width:0;width:100%}
 .contact-form form,.contact-layout,.contact-form input,.contact-form select,.contact-form textarea{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
 .field-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 /* Booking form: stable mobile flow, no sideways movement or keyboard auto-zoom */
 .booking-intro{display:block;height:auto;min-height:0}
 .booking-title{padding:108px 20px 28px}
 .booking-title h1{font-size:clamp(43px,11vw,58px);line-height:1.07;letter-spacing:0;margin:12px 0 10px}
 .booking-title p:last-child{font-size:12px;line-height:1.65}
 .booking-photo{height:175px;width:100%}
 .booking-form-section{display:flex;flex-direction:column;min-height:0;width:100%;max-width:100%}
 .booking-form{order:0;padding:29px 20px 38px;min-width:0;max-width:100%;width:100%}
 .booking-aside{order:1;padding:29px 20px 34px}
 .booking-aside h2{font-size:clamp(40px,10vw,55px);margin:10px 0}
 .booking-aside>p:not(.mini-caps){font-size:12px;line-height:1.65}
 .booking-notes{margin-top:16px;padding-top:16px;gap:8px}
 .booking-notes span{font-size:9px}
 .booking-progress{gap:12px;max-width:100%}
 .booking-progress>span{font-size:11px}
 #booking-wizard,.wizard-step{max-width:100%;width:100%;min-width:0;box-sizing:border-box}
 .wizard-step{margin:17px 0 0;position:relative}
 .wizard-step legend{float:none;display:block;max-width:100%;width:100%;font-family:var(--display);font-size:clamp(36px,9.5vw,48px);line-height:1.13;letter-spacing:0;margin-bottom:16px;white-space:normal}
 .wizard-step label{display:block;width:100%;max-width:100%;min-width:0;clear:both}
 .wizard-step input,.wizard-step select,.wizard-step textarea,.contact-form input,.contact-form select,.contact-form textarea{box-sizing:border-box;width:100%!important;min-width:0;max-width:100%;font-size:16px!important;-webkit-text-size-adjust:100%;border-radius:0}
 .wizard-actions{gap:12px;min-width:0;max-width:100%;flex-wrap:wrap}
 .wizard-actions button{max-width:100%;white-space:normal}
 .form-fine{font-size:11px;line-height:1.5}
 .mobile-contact{height:55px;min-width:0}
 .mobile-contact a{font-size:10px;letter-spacing:.03em}
 /* Installations swipe horizontally rather than vertically */
 .gallery-section{padding:45px 0}
 .gallery-section .gallery-heading{padding:0 20px;margin:0 0 14px}
 .gallery-section .gallery-heading h2{font-size:clamp(43px,10vw,55px)}
 .flooring-gallery-widget{width:100%;max-width:100%;min-width:0}
 .flooring-gallery-widget .gallery-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:13px;padding:8px 20px 10px;margin:0 0 10px;scrollbar-width:thin}
 .flooring-gallery-widget .gallery-tabs button{white-space:nowrap;flex:0 0 auto;font-size:10px}
 .flooring-gallery-widget .project-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;padding:0 20px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;align-items:stretch}
 .flooring-gallery-widget .project-tile{margin:0;flex:0 0 min(75vw,310px);width:min(75vw,310px);min-width:0;scroll-snap-align:start;grid-column:auto!important}
 .flooring-gallery-widget .project-tile>img,.flooring-gallery-widget .project-tile:nth-child(3n)>img{height:240px;max-height:none;object-fit:cover}
 .flooring-gallery-widget .project-tile figcaption{padding:11px 0 0;gap:8px;grid-template-columns:22px 1fr}
 .flooring-gallery-widget .project-tile figcaption strong{font-size:24px;line-height:1.14}
 .flooring-gallery-widget .project-tile figcaption small{font-size:9px}
 .flooring-gallery-widget .project-tile[hidden]{display:none!important}
 .swipe-hint{font:700 10px var(--body);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:7px 20px 0}
}
@media(min-width:701px) and (max-width:1000px){
 .mobile-brand-word{font-size:19px}
 .site-header{height:86px}
 .divided-header{height:86px}
 .flooring-tile{height:350px}
 .booking-form{padding:7%}
 .booking-title h1{font-size:clamp(52px,7vw,80px)}
}
@media(min-width:701px){.swipe-hint{display:none}}
@media(max-width:700px){
 .slide-index{display:flex;flex-direction:row;align-items:center;gap:8px;right:15px;left:auto;top:auto;bottom:160px;width:auto;max-width:105px}
 .slide-choice{display:block;min-width:15px;width:15px;padding:0;font-size:10px}
}
@media(max-width:700px){
 .numbered-process{grid-template-columns:minmax(0,1fr)}
 .booking-title h1{font-size:clamp(39px,10.2vw,51px)}
 .slide-index{right:15px;max-width:96px;width:96px;justify-content:space-between;gap:0}
 .slide-choice{flex:0 0 16px;min-width:16px;width:16px}
 .mobile-contact{padding-bottom:env(safe-area-inset-bottom,0);height:calc(55px + env(safe-area-inset-bottom,0px))}
 .site-footer{padding-bottom:calc(81px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:calc(85px + env(safe-area-inset-bottom,0px))}
 #booking-wizard input:focus,#booking-wizard select:focus,.contact-form input:focus,.contact-form textarea:focus{scroll-margin-bottom:100px}
}
/* Keep the hero's numeric slide controls completely within the screen. */
@media(max-width:700px){
 .slide-index{transform:none!important;right:18px;left:auto;top:auto;bottom:155px}
}
/* Shorter desktop sections without altering the established design language. */
@media(min-width:1001px){
 .hero-camden{min-height:680px;height:90svh;max-height:920px}
 .section-pad{padding-top:clamp(74px,7vw,116px);padding-bottom:clamp(74px,7vw,116px)}
 .hendon-split{min-height:640px}
 .florz-collection{padding-top:clamp(75px,7vw,105px)}
 .flooring-tile{height:clamp(390px,37vw,580px)}
 .full-bleed-statement{height:630px}
 .process-panel{padding-top:80px;padding-bottom:80px}
 .work-diptych>a:first-child{height:530px}
 .work-diptych>a:nth-child(2){height:430px;margin-top:75px}
 .closing-invitation{padding-top:96px;padding-bottom:95px}
 .site-footer{padding-top:60px}
}
/* Keep navigation and the booking CTA accessible without obscuring form content. */
@media(max-width:1000px){
 .site-header{position:fixed;top:0;left:0;right:0;background:rgba(240,234,225,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:box-shadow .2s}
 .site-header.on-dark{background:rgba(24,18,15,.94)}
 .site-header.header-scrolled{box-shadow:0 2px 18px rgba(0,0,0,.12)}
 html{scroll-padding-top:90px}
}
