/* Al Adwaar — site styles
   Layout: an architectural drawing sheet. Ivory ground, hairline rules, numbering only where content is a real sequence.
   Espresso carries the technical story and conversion moments; black is reserved for the classical showcase and footer.
   Breakpoints: 600 (large phone), 768 (tablet portrait), 1024 (tablet landscape / small laptop), 1200 (desktop nav). */
:root{
  --ivory:#F3F0E9; --stone:#E9E4DA; --charcoal:#292826; --mute:#67615A;
  --espresso:#352B26; --espresso-2:#4A3D35; --sand:#C9BBAA; --black:#080808;
  --line:rgba(41,40,38,.16); --line-dark:rgba(243,240,233,.16); --glow:#E8C48F;
  --f-sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-ar:"IBM Plex Sans Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
  --t-xs:.72rem; --t-sm:.84rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:clamp(1.32rem,1.08rem + 1vw,1.9rem);
  --t-xl:clamp(1.7rem,1.15rem + 2.2vw,3.1rem);
  --t-xxl:clamp(2.1rem,1.2rem + 4vw,5rem);
  --gut:max(20px, env(safe-area-inset-left, 0px));
  --gut-r:max(20px, env(safe-area-inset-right, 0px));
  --max:1360px; --hdr:72px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (min-width:768px){:root{--gut:max(32px, env(safe-area-inset-left, 0px));--gut-r:max(32px, env(safe-area-inset-right, 0px))}}
@media (min-width:1024px){:root{--gut:max(40px, env(safe-area-inset-left, 0px));--gut-r:max(40px, env(safe-area-inset-right, 0px));--hdr:84px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--ivory);color:var(--charcoal);font-family:var(--f-sans);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
@supports (overflow:clip){body{overflow-x:clip}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ivory)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--espresso);outline-offset:3px}
.dark :focus-visible,.classical :focus-visible,.ftr :focus-visible{outline-color:var(--ivory)}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.025em;line-height:1.14;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.narrow{max-width:860px}
.label{font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.dark .label,.classical .label{color:var(--sand)}
.ar{font-family:var(--f-ar);direction:rtl;letter-spacing:0}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:100;background:var(--espresso);color:var(--ivory);padding:10px 16px;text-decoration:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.85em 1.4em;font:500 var(--t-sm)/1.2 var(--f-sans);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);text-align:center}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-solid{background:var(--espresso);color:var(--ivory)}
.btn-solid:hover{background:var(--charcoal)}
.btn-line{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
.btn-line:hover{background:var(--charcoal);color:var(--ivory)}
.dark .btn-solid,.classical .btn-solid{background:var(--ivory);color:var(--espresso)}
.dark .btn-solid:hover{background:var(--stone)}
.dark .btn-line,.classical .btn-line{border-color:var(--sand);color:var(--ivory)}
.dark .btn-line:hover{background:var(--ivory);color:var(--espresso)}
.arrow{display:inline-block;transition:transform .35s var(--ease)}
a:hover .arrow,button:hover .arrow{transform:translateX(4px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:420px){.ctas .btn{flex:1 1 100%}}
.tlink{font-size:var(--t-sm);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ivory);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr)}
.logo{display:block;width:240px;flex:none;line-height:0}
.logo img{width:100%;height:auto}
@media (min-width:1200px){.logo img{transform:translateY(7px)}}
.nav{display:none;align-items:center;gap:28px}
.nav>a:not(.btn),.nav .dd>button{font:500 var(--t-sm)/1 var(--f-sans);text-decoration:none;position:relative;padding:8px 0;background:none;border:0;color:inherit;cursor:pointer}
.nav>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav>a:not(.btn):hover::after,.nav>a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 14px);left:-24px;width:min(640px,80vw);background:var(--ivory);border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel .label{grid-column:span 1;margin:6px 0 4px}
.dd-panel a{font-size:var(--t-sm);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.dd-panel a:hover{color:var(--mute)}
.lang{font-family:var(--f-ar);font-size:.95rem;color:var(--mute);padding-left:22px;border-left:1px solid var(--line);text-decoration:none}
.menu-btn{display:flex;flex-direction:column;justify-content:center;width:48px;height:48px;background:none;border:0;padding:12px;margin-right:-12px;cursor:pointer;color:var(--charcoal)}
.menu-btn span{display:block;width:24px;height:1.5px;background:currentColor;margin:3.5px 0;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.mnav{position:fixed;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0;background:var(--ivory);padding:12px var(--gut-r) calc(32px + env(safe-area-inset-bottom,0px)) var(--gut);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease),visibility .3s;z-index:49}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav>a,.mnav summary{display:block;font-size:1.6rem;font-weight:300;letter-spacing:-.02em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav details a{display:block;padding:11px 0 11px 16px;font-size:1rem;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:24px;width:100%;font-size:1rem}
@media (min-width:768px){.mnav{padding-left:calc(var(--gut) + 8%);padding-right:calc(var(--gut-r) + 8%)}}
@media (min-width:1200px){.nav{display:flex}.menu-btn,.mnav{display:none}}

/* breadcrumbs */
.crumbs{font-size:var(--t-xs);letter-spacing:.06em;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:24px 0 0}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* home hero: copy on the left, espresso panel with the drawn brand A on the right */
.hero{padding-top:clamp(24px,3vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.hero-grid{grid-template-columns:minmax(0,7.3fr) minmax(0,4.7fr);gap:clamp(36px,3.6vw,64px);align-items:stretch}}
.hero-copy{display:grid;gap:26px;align-content:center;min-width:0;padding-block:8px}
.hero h1{font-size:clamp(2.15rem,1.05rem + 3.3vw,4rem);font-weight:300;letter-spacing:-.032em;line-height:1.04}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.17em;margin-bottom:-.13em}
.hero h1 .ln:last-child{margin-bottom:0}
.hero h1 .ln>span{display:block}
.hero h1 b{font-weight:500}
.hero-lead{color:var(--mute);max-width:50ch;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.6}
.hero-ar{font-size:1rem;color:var(--mute);justify-self:start;text-align:left}
.hero-panel{position:relative;overflow:hidden;isolation:isolate;background:var(--espresso);color:var(--ivory);padding:clamp(24px,2.6vw,40px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(16px,2vw,28px);min-width:0}
.hero-panel .label{color:var(--sand)}
.hero-panel .a-draw{align-self:center;justify-self:end;width:min(100%,430px);margin-right:-14%}
.hp-creds{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.hp-creds div{display:grid;gap:2px;align-content:start;padding:13px 0;border-top:1px solid var(--line-dark)}
.hp-creds dt{font-size:var(--t-md);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.hp-creds dd{margin:0;font-size:var(--t-sm);color:var(--sand);line-height:1.45}
@media (max-width:1023px){
  .hero-panel{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto auto}
  .hero-panel .label{grid-column:1;grid-row:1;align-self:start}
  .hero-panel .a-draw{grid-column:2;grid-row:1;width:100%;max-width:300px;margin-right:-18%}
  .hp-creds{grid-column:1/-1;grid-row:2}
}

/* the brand A, drawn like a construction drawing */
.a-draw{pointer-events:none}
.a-draw svg{width:100%;height:auto;display:block;overflow:visible}
.a-draw .a-fill{fill:var(--espresso-2)}
.a-draw .a-line{fill:none;stroke:var(--sand);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.75}
.a-draw .dim{fill:none;stroke:var(--sand);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5}
.a-draw text{fill:var(--sand);opacity:.75;font:500 7px var(--f-sans);letter-spacing:.16em}
.a-draw.light .a-fill{fill:var(--stone)}
.a-draw.light .a-line,.a-draw.light .dim{stroke:var(--mute)}
.a-draw.light text{fill:var(--mute)}
@media (prefers-reduced-motion:no-preference){
  .a-draw .a-line{stroke-dasharray:1;stroke-dashoffset:1;animation:aDraw 2.4s .25s cubic-bezier(.65,0,.35,1) forwards}
  .a-draw .dim{stroke-dasharray:1;stroke-dashoffset:1;animation:aDraw 1.4s 1.3s cubic-bezier(.65,0,.35,1) forwards}
  .a-draw .a-fill{opacity:0;animation:aFill 1.6s 1.5s ease forwards}
  .a-draw text{opacity:0;animation:aText .8s 2.1s ease forwards}
}
@keyframes aDraw{to{stroke-dashoffset:0}}
@keyframes aFill{to{opacity:1}}
@keyframes aText{to{opacity:.75}}

/* A watermark, as on the business card and hoarding */
.has-wm{position:relative;overflow:hidden;isolation:isolate}
.has-wm>.wrap,.has-wm>div:not(.a-wm){position:relative;z-index:1}
.a-wm{position:absolute;z-index:0;pointer-events:none;width:clamp(240px,34vw,560px);height:auto}
.a-wm path{fill:var(--espresso-2)}
.ftr .a-wm path,.classical .a-wm path{fill:#161514}
.a-wm.on-light path{fill:var(--stone)}
.a-wm.br{right:-5%;bottom:-16%}
.a-wm.tr{right:-5%;top:-14%}
.a-wm.bl{left:-7%;bottom:-16%}
@media (max-width:767px){.a-wm{width:62vw;opacity:.8}}

.hero-fig{margin:clamp(36px,5vw,72px) 0 0;position:relative;overflow:hidden;background:var(--stone);aspect-ratio:16/6.2;max-width:100%}
@media (max-width:1023px){.hero-fig{aspect-ratio:16/8}}
@media (max-width:599px){.hero-fig{aspect-ratio:4/3.7}}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-fig figcaption{position:absolute;left:var(--gut);bottom:16px;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
@media (min-width:768px){.creds{grid-template-columns:repeat(4,minmax(0,1fr))}}
.creds div{padding:20px 12px 20px 0;border-top:1px solid var(--line);display:grid;gap:4px;align-content:start}
@media (min-width:768px){.creds div{border-top:0;padding:28px 20px 28px 0}.creds div+div{padding-left:20px;border-left:1px solid var(--line)}}
.creds strong{font-size:var(--t-md);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.creds span{font-size:var(--t-sm);color:var(--mute);line-height:1.45}

/* statement */
.statement{padding-block:clamp(64px,8vw,128px)}
.split{display:grid;gap:28px}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:64px}}
.st-grid{display:grid;gap:36px;align-items:center}
@media (min-width:768px){.st-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,4vw,64px)}}
.st-fig{margin:0;max-width:100%}
.st-fig .im{aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.st-fig img{width:100%;height:100%;object-fit:cover}
.st-fig figcaption{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:12px}
@media (max-width:767px){.st-fig .im{aspect-ratio:4/3}}
.statement p.big{font-size:var(--t-lg);font-weight:300;line-height:1.3;letter-spacing:-.02em;max-width:32ch}
.statement p.big em{font-style:normal;font-weight:500}

/* layers */
.dark{background:var(--espresso);color:var(--ivory)}
.layers{position:relative;overflow:hidden}
.layers .wrap{display:grid;gap:40px;padding-block:clamp(72px,9vw,120px)}
@media (min-width:1024px){.layers .wrap{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:56px;align-items:center}}
.layers h2{font-size:var(--t-xl);font-weight:300}
.layers .intro{color:var(--sand);margin-top:16px;max-width:42ch}
.steps{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line-dark)}
.steps li{border-bottom:1px solid var(--line-dark);padding:16px 0;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;transition:opacity .4s}
.steps .n{font-size:var(--t-xs);letter-spacing:.12em;color:var(--sand);padding-top:5px}
.steps h3{font-size:var(--t-md);font-weight:500;letter-spacing:-.01em}
.steps p{grid-column:2;font-size:var(--t-sm);color:var(--sand);max-width:46ch}
.steps a{grid-column:2;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-top:4px;color:var(--ivory)}
.js-pin .layers .wrap{min-height:100vh;min-height:100svh;padding-block:48px;align-content:center}
.js-pin .steps li{opacity:.38;padding:12px 0}
.js-pin .steps li p,.js-pin .steps li a{display:none}
.js-pin .steps li.on{opacity:1}
.js-pin .steps li.on p,.js-pin .steps li.on a{display:block}
.drawing{width:100%;max-width:100%}
.drawing svg{width:100%;height:auto;display:block;overflow:visible}
.drawing .ln{fill:none;stroke:var(--ivory);stroke-width:1.4;stroke-linecap:square;vector-effect:non-scaling-stroke}
.drawing .thin{stroke-width:.8;opacity:.6}
.drawing .dash{stroke-dasharray:4 5}
.drawing .lbl{fill:var(--sand);font:500 12px var(--f-sans);letter-spacing:.08em;text-transform:uppercase}
.drawing .lbl-ln{stroke:var(--sand);stroke-width:.8;fill:none;vector-effect:non-scaling-stroke}
.drawing .hatch{fill:url(#hatch)}
/* phones and tablets: labels are hidden, so crop the drawing to its own width (x 20–700 of 980) and centre it full size */
@media (max-width:1023px){.drawing .lbls{display:none}.drawing{max-width:640px;margin-inline:auto;overflow:hidden;direction:ltr}.drawing svg{width:144.12%;max-width:none;margin-left:-2.94%}}
.watermark{position:absolute;right:-4vw;bottom:-6vw;width:38vw;max-width:560px;pointer-events:none;opacity:.6}
@media (max-width:1023px){.watermark{display:none}}

/* section heads */
.sec{padding-block:clamp(64px,8vw,124px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,72px)}
@media (min-width:1024px){.sec-head{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:64px;align-items:start}.sec-head>.label{padding-top:14px}}
.sec-head h2{font-size:var(--t-xl);font-weight:300;max-width:20ch}
.sec-head p{color:var(--mute);max-width:56ch;margin-top:16px}
.dark .sec-head p,.classical .sec-head p{color:var(--sand)}

/* services list (home + hub) */
.svc-grid{display:grid;gap:48px}
@media (min-width:1024px){.svc-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}}
.svc-group+.svc-group{margin-top:48px}
.svc-group>.label{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--charcoal)}
.svc-list{list-style:none;margin:0;padding:0}
.svc{border-bottom:1px solid var(--line)}
.svc>button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:20px 0;cursor:pointer;align-items:center;min-height:48px}
.svc>button:focus-visible{outline:2px solid var(--espresso);outline-offset:4px}
.svc .nm{font-size:clamp(1.1rem,.95rem + .6vw,1.5rem);letter-spacing:-.02em;line-height:1.2;transition:transform .45s var(--ease)}

.svc .tg{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.svc .pnl{display:grid;gap:12px;padding-bottom:22px}
.svc .pnl p{color:var(--mute);font-size:var(--t-sm);max-width:56ch}
.svc .act{display:flex;gap:18px;flex-wrap:wrap}
.svc.on .nm{transform:translateX(10px)}
@media (hover:hover){.svc>button:hover .nm{transform:translateX(10px)}}
.svc .mthumb{aspect-ratio:16/10;overflow:hidden;background:var(--stone);max-width:100%}
.svc .mthumb img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.svc .mthumb{display:none}}
.svc-view{position:sticky;top:calc(var(--hdr) + 32px);display:none}
@media (min-width:1024px){.svc-view{display:block}}
.svc-view .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone);max-width:100%}
.svc-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.svc-view img.on{opacity:1;transform:none}
.svc-view .cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:var(--t-sm);color:var(--mute)}

/* classical */
.classical{background:var(--black);color:var(--ivory);overflow:hidden}
.cl-head{display:grid;gap:24px}
@media (min-width:1024px){.cl-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}}
.cl-head h2{font-size:var(--t-xl);font-weight:300;max-width:16ch}
.cl-head p{color:var(--sand);max-width:50ch}
.cl-main{margin:clamp(36px,5vw,72px) 0 0;position:relative;overflow:hidden;aspect-ratio:16/7;max-width:100%;background:#151413}
@media (max-width:599px){.cl-main{aspect-ratio:4/3}}
.cl-main img{width:100%;height:100%;object-fit:cover}
.cl-row{display:grid;gap:16px;margin-top:16px}
@media (min-width:768px){.cl-row{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}}
.cl-row figure{margin:0;overflow:hidden;max-width:100%}
.cl-row .im{overflow:hidden;aspect-ratio:4/3.2}
.cl-row img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.cl-row figure:hover img{transform:scale(1.04)}
.cl-row figcaption,.cl-cap{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-top:12px}
.points{display:grid;margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-dark)}
@media (min-width:600px){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.points{grid-template-columns:repeat(4,minmax(0,1fr))}}
.points div{padding:20px 24px 20px 0;display:grid;gap:6px;align-content:start;border-bottom:1px solid var(--line-dark)}
@media (min-width:1024px){.points div{border-bottom:0}}
.points strong{font-weight:500}
.points span{font-size:var(--t-sm);color:var(--sand)}

/* gallery strip */
.gallery{padding-top:clamp(80px,10vw,152px);overflow:hidden}
.g-track{display:flex;gap:16px;padding-left:var(--gut);padding-right:var(--gut-r);padding-bottom:clamp(64px,8vw,120px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.g-track::-webkit-scrollbar{display:none}
.js-hscroll .g-track{overflow:visible;width:max-content}
.g-item{--gh:min(62vh,560px);flex:none;width:auto;scroll-snap-align:start;margin:0;cursor:zoom-in}
@media (max-width:767px){.g-item{--gh:min(52vh,400px)}}
@media (orientation:landscape) and (max-height:500px){.g-item{--gh:70vh}}
.g-item .im{overflow:hidden;background:var(--stone);width:auto;max-width:none}
.g-item img{height:var(--gh);width:auto;max-width:none;display:block;transition:transform 1.2s var(--ease)}
.g-item figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:var(--t-sm);width:0;min-width:100%}
.g-item figcaption span:last-child{color:var(--mute)}
.g-end{flex:none;width:min(80vw,420px);display:grid;align-content:end;gap:20px;padding-bottom:40px}
.g-end p{font-size:var(--t-lg);font-weight:300;letter-spacing:-.02em;line-height:1.25}
.g-hint{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:var(--t-sm);margin-bottom:24px}
.g-hint i{display:block;width:40px;height:1px;background:currentColor}

/* audience split */
.aud{display:grid}
@media (min-width:1024px){.aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aud>div{padding-block:clamp(64px,8vw,112px);padding-left:var(--gut);padding-right:var(--gut-r);display:grid;gap:20px;align-content:start}
@media (min-width:1024px){.aud>div:first-child{padding-left:max(var(--gut),calc((100vw - var(--max))/2 + 40px))}.aud>div:last-child{padding-right:max(var(--gut-r),calc((100vw - var(--max))/2 + 40px))}}
.aud .light{background:var(--stone)}
.aud h2{font-size:var(--t-lg);font-weight:400;max-width:22ch}
.aud p{max-width:48ch;color:var(--mute)}
.aud .dark p{color:var(--sand)}
.rlist{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.dark .rlist{border-color:var(--line-dark)}
.rlist li{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.dark .rlist li{border-color:var(--line-dark)}
.aud .ctas{margin-top:8px}

/* process */
.proc-wrap{position:relative}
.proc{list-style:none;margin:0;padding:0;display:grid}
@media (min-width:1024px){.proc{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1023px){.proc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}}
.proc li{position:relative;padding:28px 24px 0 0;display:grid;gap:10px;align-content:start}
@media (max-width:1023px){.proc li{padding:22px 0 22px 32px;border-left:1px solid var(--line);margin-left:5px}}
.proc li::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--ivory);border:1px solid var(--charcoal)}
@media (max-width:1023px){.proc li::before{left:-5px;top:28px}}
.proc-rail,.proc-line{position:absolute;left:0;right:0;top:0;height:1px}
.proc-rail{background:var(--line)}
.proc-line{background:var(--charcoal);transform-origin:left}
@media (max-width:1023px){.proc-rail,.proc-line{display:none}}
.proc .n{font-size:var(--t-xs);letter-spacing:.12em;color:var(--mute)}
.proc h3{font-size:var(--t-md);font-weight:500;letter-spacing:-.01em}
.proc p{font-size:var(--t-sm);color:var(--mute);max-width:32ch}

/* faq */
.faq-list{border-top:1px solid var(--charcoal)}
.dark .faq-list{border-color:var(--sand)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:20px;padding:22px 0;font-size:var(--t-md);letter-spacing:-.01em;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{position:relative;width:16px;height:16px;margin-top:6px}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.faq-list summary i::after{transform:rotate(90deg)}
.faq-list details[open] summary i::after{transform:rotate(0)}
.faq-list .ans{padding:0 0 26px;color:var(--mute);max-width:70ch;display:grid;gap:12px}

/* contact + form */
.contact-grid{display:grid;gap:56px}
@media (min-width:1024px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}}
.contact h2{font-size:var(--t-xl);font-weight:300;max-width:13ch}
.contact .lead{color:var(--sand);margin-top:20px;max-width:42ch}
.direct{display:grid;margin-top:36px;border-top:1px solid var(--line-dark)}
.direct>*{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line-dark);text-decoration:none}
.direct span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.direct strong{font-weight:500;font-size:var(--t-md)}
form.q{display:grid;gap:22px;align-content:start}
.row2{display:grid;gap:22px}
@media (min-width:600px){.row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fld{display:grid;gap:8px;min-width:0}
.fld label,.fld legend{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sand);padding:0}
.fld input,.fld select,.fld textarea{font:400 16px var(--f-sans);color:var(--ivory);background:transparent;border:0;border-bottom:1px solid var(--sand);padding:12px 0;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--sand) 50%),linear-gradient(135deg,var(--sand) 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{color:var(--charcoal);background:var(--ivory)}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ivory)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(201,187,170,.65)}
fieldset.fld{border:0;margin:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;position:relative;margin-top:6px}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips label{font-size:var(--t-sm);letter-spacing:0;text-transform:none;color:var(--ivory);border:1px solid var(--espresso-2);padding:10px 14px;cursor:pointer;transition:background .25s,border-color .25s;min-height:44px;display:inline-flex;align-items:center}
.chips input:checked+label{background:var(--ivory);color:var(--espresso);border-color:var(--ivory)}
.chips input:focus-visible+label{outline:2px solid var(--ivory);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:6px}
.form-foot small{color:var(--sand);font-size:var(--t-xs);max-width:36ch}
.err{color:#F2B8A0;font-size:var(--t-xs);min-height:1em}
.sent{border:1px solid var(--espresso-2);padding:28px;display:grid;gap:12px}
.sent strong{font-size:var(--t-md);font-weight:500}
.sent p{color:var(--sand);font-size:var(--t-sm)}

/* inner page hero */
.phero{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,104px)}
.phero-grid{display:grid;gap:36px;margin-top:clamp(28px,4vw,56px)}
@media (min-width:1024px){.phero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}}
.phero h1{font-size:var(--t-xl);font-weight:300;letter-spacing:-.035em;max-width:18ch}
.phero .lead{font-size:var(--t-md);line-height:1.5;color:var(--charcoal);max-width:52ch;margin-top:22px}
.phero .sub{color:var(--mute);max-width:52ch;margin-top:14px}
.phero .ctas{margin-top:30px}
.phero-fig{margin:clamp(40px,5vw,72px) 0 0;overflow:hidden;background:var(--stone);aspect-ratio:21/9;max-width:100%}
@media (max-width:1023px){.phero-fig{aspect-ratio:16/10}}
.phero-fig img{width:100%;height:100%;object-fit:cover}
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--charcoal);margin:0}
@media (min-width:600px) and (max-width:1023px){.glance{grid-template-columns:repeat(4,minmax(0,1fr))}}
.glance div{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px;align-content:start}
.glance dt{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.glance dd{margin:0;font-size:var(--t-sm);font-weight:500;line-height:1.4}

/* content blocks */
.block{padding-block:clamp(56px,6.5vw,100px)}
.block+.block{padding-top:0}
.scope{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--charcoal)}
@media (min-width:768px){.scope{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
.scope li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.scope strong{font-weight:500;font-size:var(--t-base)}
.scope span{color:var(--mute);font-size:var(--t-sm)}
.dark .scope{border-color:var(--sand)}
.dark .scope li{border-color:var(--line-dark)}
.dark .scope span{color:var(--sand)}
.nsteps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-dark)}
@media (min-width:768px){.nsteps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1024px){.nsteps.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nsteps li{padding:20px 0;border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 10px}
.nsteps .n{font-size:var(--t-xs);letter-spacing:.12em;color:var(--sand);padding-top:4px}
.nsteps strong{font-weight:500}
.nsteps p{grid-column:2;font-size:var(--t-sm);color:var(--sand)}
.body-grid{display:grid;gap:40px}
@media (min-width:1024px){.body-grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:64px}}
.prose{max-width:70ch;min-width:0}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:var(--t-lg);font-weight:400;margin-top:2.2em}
.prose>:first-child{margin-top:0}
.prose h3{font-size:var(--t-md);font-weight:500;margin-top:1.8em;letter-spacing:-.01em}
.prose p,.prose li{color:#3d3a36}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.45em}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px}
.prose strong{font-weight:600;color:var(--charcoal)}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:2px solid var(--espresso);font-size:var(--t-md);color:var(--charcoal)}
.tbl{overflow-x:auto;margin-top:1.4em;border-top:1px solid var(--charcoal);-webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm)}
.tbl th,.tbl td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:600}
.callout{background:var(--stone);padding:24px 26px;display:grid;gap:10px}
.callout .label{color:var(--espresso)}
.callout ul{margin:0;padding-left:1.1em}
.callout li{color:var(--charcoal)}
.related{display:grid;border-top:1px solid var(--charcoal)}
@media (min-width:768px){.related{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1024px){.related.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.related a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:var(--t-md);letter-spacing:-.01em}
.related a span:last-child{color:var(--mute)}
.related a:hover .arrow{transform:translateX(4px)}
.strip{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.strip figure{margin:0;max-width:100%}
.strip .im{aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.strip figure:hover img{transform:scale(1.035)}
.strip figcaption{font-size:var(--t-sm);color:var(--mute);margin-top:10px}
@media (max-width:599px){.strip figure:nth-child(3){display:none}}
.cta-band .wrap{padding-block:clamp(64px,8vw,112px);display:grid;gap:28px}
@media (min-width:1024px){.cta-band .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:64px}}
.cta-band h2{font-size:var(--t-xl);font-weight:300;max-width:16ch}
.cta-band p{color:var(--sand);margin-top:16px;max-width:46ch}
.cta-band .ctas{justify-content:flex-start}
@media (min-width:1024px){.cta-band .ctas{justify-content:flex-end}}

/* services hub cards: ruled rows, not boxes */
.hub{display:grid;border-top:1px solid var(--charcoal)}
.hub a{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 32px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}
@media (min-width:768px){.hub a{grid-template-columns:200px minmax(0,1fr) auto}}
.hub .im{aspect-ratio:4/3;overflow:hidden;background:var(--stone);max-width:100%}
@media (max-width:767px){.hub .im{aspect-ratio:16/9}}
.hub img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.hub a:hover img{transform:scale(1.05)}
.hub h3{font-size:clamp(1.3rem,1.05rem + 1vw,2rem);letter-spacing:-.02em}
.hub p{color:var(--mute);font-size:var(--t-sm);margin-top:8px;max-width:60ch}
.hub .go{font-size:var(--t-sm);font-weight:500;white-space:nowrap}

/* blog */
.posts{display:grid;border-top:1px solid var(--charcoal)}
.post{display:grid;gap:18px 40px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
@media (min-width:768px){.post{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center}}
.post .im{aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.post img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover img{transform:scale(1.04)}
.post h2{font-size:clamp(1.35rem,1.05rem + 1.1vw,2.1rem);letter-spacing:-.02em;margin-top:10px}
.post p{color:var(--mute);margin-top:10px;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.art-head{padding-block:clamp(28px,4vw,56px) 0}
.art-head h1{font-size:var(--t-xl);font-weight:300;letter-spacing:-.035em;max-width:22ch;margin-top:22px}
.art-head .lead{font-size:var(--t-md);color:var(--mute);max-width:56ch;margin-top:20px;line-height:1.5}
.art-fig{margin:clamp(32px,4vw,56px) 0 0;aspect-ratio:21/9;overflow:hidden;background:var(--stone);max-width:100%}
@media (max-width:767px){.art-fig{aspect-ratio:16/10}}
.art-fig img{width:100%;height:100%;object-fit:cover}
.art-side{display:grid;gap:24px;align-content:start}
@media (min-width:1024px){.art-side{position:sticky;top:calc(var(--hdr) + 32px)}}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.toc a{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--mute)}
.toc a:hover{color:var(--charcoal)}
@media (max-width:1023px){.art-side .toc-wrap{display:none}}
.svc-cta{border:1px solid var(--line);padding:22px;display:grid;gap:12px}
.svc-cta p{font-size:var(--t-sm);color:var(--mute)}

/* work page */
.filters{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:28px;padding-bottom:4px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;font:500 var(--t-sm) var(--f-sans);color:var(--charcoal);background:transparent;border:1px solid var(--line);padding:10px 16px;min-height:44px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filters button[aria-pressed="true"]{background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.wgrid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
@media (min-width:1024px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.wgrid{grid-template-columns:minmax(0,1fr)}}
.wgrid figure{margin:0;cursor:zoom-in;max-width:100%;display:flex;flex-direction:column}
.wgrid figure.big{grid-column:span 2}
.wgrid .im{aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.wgrid figure.big .im{aspect-ratio:16/9}
@media (max-width:420px){.wgrid figure.big{grid-column:auto}.wgrid figure.big .im{aspect-ratio:4/3}}
.wgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
@media (hover:hover){.wgrid figure:hover img{transform:scale(1.035)}}
/* on wide screens a large tile covers two columns and two rows, so the single tiles beside it line up with no gaps */
@media (min-width:1024px){
  .wgrid figure.big{grid-row:span 2}
  .wgrid figure.big .im{aspect-ratio:auto;flex:1 1 auto;min-height:320px;position:relative}
  .wgrid figure.big .im img{position:absolute;inset:0}
}
.wgrid figcaption{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-sm);margin-top:10px}
.wgrid figcaption span:last-child{color:var(--mute)}

/* team table (about) */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-dark)}
@media (min-width:768px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.team div{padding:20px 16px 20px 0;border-bottom:1px solid var(--line-dark);display:grid;gap:4px}
.team strong{font-size:var(--t-lg);font-weight:300;font-variant-numeric:tabular-nums;line-height:1}
.team span{font-size:var(--t-sm);color:var(--sand)}

/* footer */
.ftr{background:var(--black);color:var(--ivory)}
.ftr .wrap{padding-block:72px 40px;display:grid;gap:48px}
.ftr .top{display:grid;gap:36px}
@media (min-width:600px){.ftr .top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ftr .top{grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:32px}}
.ftr .flogo{width:240px}
.ftr .tag{color:var(--sand);margin-top:20px;font-size:var(--t-sm);max-width:34ch}
.ftr h3{font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:var(--t-sm)}
.ftr a{text-decoration:none}
.ftr a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:var(--t-xs);color:var(--sand);letter-spacing:.06em}

/* mobile quick bar */
.mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--espresso);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border-top:1px solid var(--espresso-2);transform:translateY(110%);transition:transform .45s var(--ease)}
.mbar.show{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;color:var(--ivory);text-decoration:none;font-size:var(--t-sm);font-weight:500}
.mbar a+a{border-left:1px solid var(--espresso-2)}
.mbar a:last-child{background:var(--ivory);color:var(--espresso)}
.mbar svg{width:18px;height:18px}
@media (max-width:1023px){.ftr .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}
@media (min-width:1024px){.mbar{display:none}}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0}
dialog.lb::backdrop{background:rgba(20,16,14,.88)}
.lb-in{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:clamp(56px,9vh,110px) max(64px,10vw)}
.lb-in img{max-height:min(74vh,900px);max-width:min(100%,1180px);object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.45);border:6px solid var(--ivory)}
@media (max-width:767px){.lb-in{padding:72px 14px}.lb-in img{max-height:68vh;border-width:4px}}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));background:none;border:1px solid var(--sand);color:var(--ivory);font:500 var(--t-sm) var(--f-sans);padding:12px 18px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(8,8,8,.5);border:1px solid var(--espresso-2);color:var(--ivory);font-size:20px;cursor:pointer}
.lb-prev{left:calc(10px + env(safe-area-inset-left,0px))}.lb-next{right:calc(10px + env(safe-area-inset-right,0px))}
.lb-cap{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--sand);font-size:var(--t-sm)}

.e404{padding-block:clamp(96px,14vw,200px)}
.e404 h1{font-size:var(--t-xxl);font-weight:300}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* motion helpers */
.hdr{transition:border-color .3s,transform .45s var(--ease)}
.hdr.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .2em;margin:-.04em 0 -.2em}
.wd>span{display:inline-block;will-change:transform}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(18px,3vw,32px)}
.mq-track{display:flex;align-items:center;gap:clamp(24px,3vw,48px);white-space:nowrap;width:max-content;font-size:clamp(1.9rem,1.1rem + 3.8vw,5rem);font-weight:300;letter-spacing:-.04em;line-height:1;will-change:transform}
.mq-track a{text-decoration:none;transition:color .3s}
.mq-track a:hover{color:var(--mute)}
.mq-track i{display:block;flex:none;width:.16em;height:.16em;border:1px solid currentColor;transform:rotate(45deg)}
.dark .marquee{border-color:var(--line-dark)}
.dark .crumbs{color:var(--sand)}

/* phone header: logo centred at the 240px brand minimum, WhatsApp left, menu right */
.hdr-wa{display:none}
@media (max-width:767px){
  .hdr .wrap{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:0;padding-left:max(14px, env(safe-area-inset-left,0px));padding-right:max(14px, env(safe-area-inset-right,0px))}
  .hdr-wa{display:flex;align-items:center;justify-content:center;width:44px;height:48px;color:var(--charcoal)}
  .hdr-wa svg{width:22px;height:22px}
  .logo{justify-self:center;width:min(240px,100%)}
  .menu-btn{justify-self:center;width:44px;margin:0;padding:10px}
}

/* inner page hero: drawn A above the at-a-glance table fills the right column */
.phero-side{display:grid;gap:clamp(20px,2.4vw,36px);align-content:end;min-width:0}
.phero-side .a-draw{width:min(78%,420px);justify-self:end;margin-right:-2%}
@media (max-width:1023px){.phero-side .a-draw{display:none}}

/* three-column body: label | text | image + contact card */
@media (min-width:1024px){.body-grid.three{grid-template-columns:minmax(0,2.4fr) minmax(0,6.2fr) minmax(0,3.4fr);gap:clamp(36px,4vw,64px)}}
.side-col{display:grid;gap:20px;align-content:start;min-width:0}
@media (min-width:1024px){.side-col{position:sticky;top:calc(var(--hdr) + 28px)}}
@media (min-width:600px) and (max-width:1023px){.side-col{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.aside-fig{margin:0;max-width:100%}
.aside-fig .im{aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.aside-fig img{width:100%;height:100%;object-fit:cover}
.aside-fig figcaption{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:10px}
@media (max-width:599px){.aside-fig .im{aspect-ratio:16/10}}

/* FAQ: sticky side column with the drawn A */
.faq-grid{display:grid;gap:36px}
@media (min-width:1024px){.faq-grid{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(40px,5vw,80px);align-items:start}}
.faq-side{display:grid;gap:18px;align-content:start}
@media (min-width:1024px){.faq-side{position:sticky;top:calc(var(--hdr) + 28px)}}
.faq-side h2{font-size:var(--t-xl);font-weight:300;max-width:14ch}
.faq-side>p:not(.label){color:var(--mute);max-width:38ch}
.faq-side .a-draw{width:min(82%,340px);margin-top:20px}
@media (max-width:1023px){.faq-side .a-draw{display:none}}

/* image cards (insights on home) */
.cards3{display:grid;gap:28px 20px}
@media (min-width:600px){.cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:grid;gap:12px;align-content:start;text-decoration:none;min-width:0}
.card .im{aspect-ratio:16/11;overflow:hidden;background:var(--stone)}
.card img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);letter-spacing:-.015em;line-height:1.25}
.card:hover h3{color:var(--mute)}

/* client logos: a continuous strip */
.clients{padding-block:clamp(36px,4.5vw,64px);border-bottom:1px solid var(--line);overflow:hidden}
.clients-head{margin-bottom:clamp(20px,2.5vw,32px)}
.cl-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cl-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;list-style:none;margin:0;padding:0 clamp(24px,3vw,48px);animation:clRoll var(--cl-dur,48s) linear infinite}
.cl-track li{flex:none;display:flex;align-items:center;justify-content:center;min-height:clamp(56px,6vw,84px)}
.cl-track img{width:calc(var(--w) * 1px * var(--cl-s,1));height:auto;max-width:none;opacity:.82;transition:opacity .4s}
.cl-track li:hover img{opacity:1}
@media (max-width:767px){.cl-track{--cl-s:.72}}
.cl-marquee:hover .cl-track{animation-play-state:paused}
@keyframes clRoll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cl-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:28px}.cl-track li[aria-hidden]{display:none}.cl-marquee{-webkit-mask-image:none;mask-image:none}}
@media (max-width:599px){.hide-sm{display:none}}
@media (min-width:1024px){.cl-track{--cl-s:1.15}}


/* C: gypsum plaster finish on every ivory surface (soft variation + fine grain) */
body{background-color:var(--ivory);background-image:url("../img/plaster-soft.webp"),url("../img/plaster-grain.webp");background-size:1200px 1200px,256px 256px;background-repeat:repeat}
.hdr{background:rgba(243,240,233,.72);-webkit-backdrop-filter:saturate(1.1) blur(12px);backdrop-filter:saturate(1.1) blur(12px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr{background:var(--ivory)}}
.aud .light,.callout{background-image:url("../img/plaster-grain.webp");background-size:256px 256px}

/* warm cove light washing across the hero, and B: the ceiling section drawing in its lower empty area */
.hero{padding-top:0}
.hero-top{position:relative;isolation:isolate;padding-top:clamp(24px,3vw,48px)}
.hero-top>.wrap{position:relative;z-index:1}
.hero-top::before{content:"";position:absolute;inset:-120px 0 0 0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 8% 0%,rgba(255,252,246,.9),rgba(255,252,246,0) 70%),radial-gradient(ellipse 50% 60% at 100% 100%,rgba(53,43,38,.05),transparent 70%)}
.hero-art{position:absolute;inset:0 0 -40px 0;z-index:0;pointer-events:none;background:url("../assets/ceiling-section.svg") no-repeat left max(0px,calc((100vw - var(--max))/2 - 24px)) bottom 0/auto 118%;opacity:.22;-webkit-mask-image:radial-gradient(170px 360px at calc(50% + 80px) 56%,#000 30%,transparent 100%),radial-gradient(760px 190px at calc(50% - 280px) 100%,#000 25%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 110px),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));mask-image:radial-gradient(170px 360px at calc(50% + 80px) 56%,#000 30%,transparent 100%),radial-gradient(760px 190px at calc(50% - 280px) 100%,#000 25%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 110px),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14))}
@media (max-width:1023px){.hero-art{background-size:auto 92%;background-position:right -120px bottom 0;opacity:.16;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 40%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 40%,#000 100%)}}
@media (max-width:599px){.hero-art{background-size:auto 70%;background-position:left -40px bottom 0;opacity:.13}}
@media (prefers-reduced-motion:no-preference){.hero-art{animation:artIn 2.4s .5s ease both}}
@keyframes artIn{from{opacity:0;transform:translateY(18px)}to{transform:none}}

.phero{position:relative;isolation:isolate}
.phero-grid{position:relative}
.phero-grid::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-3%;right:-6%;top:-56px;bottom:-72px;background:url("../assets/ceiling-section.svg") no-repeat left bottom/auto 128%;opacity:.2;-webkit-mask-image:radial-gradient(11% 46% at 54% 44%,#000 30%,transparent 100%),radial-gradient(45% 22% at 28% 100%,#000 25%,transparent 100%),linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13));mask-image:radial-gradient(11% 46% at 54% 44%,#000 30%,transparent 100%),radial-gradient(45% 22% at 28% 100%,#000 25%,transparent 100%),linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13))}
@media (max-width:1023px){.phero-grid::before{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.1) 45%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.1) 45%,#000 100%)}}
@media (max-width:767px){.phero-grid::before{background-size:auto 70%;opacity:.12}}

/* ================= Arabic (RTL) =================
   Physical left/right rules mirrored; Arabic type set with IBM Plex Sans Arabic, no tracking, no all-caps, taller lines. */
[lang=ar]{--f-sans:"IBM Plex Sans Arabic","Manrope","Geeza Pro","Segoe UI",Tahoma,sans-serif}
[lang=ar] body{line-height:1.75;font-size:1.0625rem}
[lang=ar] :not(text):not([lang=en]){letter-spacing:0!important}
[lang=ar] .label,[lang=ar] .glance dt,[lang=ar] .fld label,[lang=ar] .fld legend,[lang=ar] .ftr h3,[lang=ar] .svc .tg,[lang=ar] .steps a,[lang=ar] .direct span,[lang=ar] .st-fig figcaption,[lang=ar] .aside-fig figcaption,[lang=ar] .hero-fig figcaption,[lang=ar] .cl-row figcaption,[lang=ar] .cl-cap,[lang=ar] .meta{text-transform:none;font-size:.8125rem}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4{line-height:1.42}
[lang=ar] .hero h1{font-weight:400;line-height:1.36;font-size:clamp(1.95rem,1rem + 2.8vw,3.5rem)}
[lang=ar] .hero h1 .ln{padding-block:.06em .2em;margin-bottom:-.18em}
[lang=ar] .hero h1 b{font-weight:600}
[lang=ar] .phero h1,[lang=ar] .art-head h1{font-weight:400;line-height:1.4}
[lang=ar] .statement p.big,[lang=ar] .g-end p{line-height:1.6;font-weight:400}
[lang=ar] .mq-track{font-weight:400;line-height:1.5}
[lang=ar] .mnav>a,[lang=ar] .mnav summary{font-weight:400}
[lang=ar] .fld input,[lang=ar] .fld select,[lang=ar] .fld textarea{font-family:var(--f-sans)}
[lang=ar] .prose{line-height:1.85}
[lang=ar] .hp-creds dt,[lang=ar] .creds strong{line-height:1.5}
[lang=ar] .lang{font-family:var(--f-sans)}
.hero-ar[lang=en]{font-family:"Manrope",sans-serif;letter-spacing:.02em}

[dir=rtl] .skip{left:auto;right:var(--gut)}
[dir=rtl] a:hover .arrow,[dir=rtl] button:hover .arrow,[dir=rtl] .related a:hover .arrow{transform:translateX(-4px)}
[dir=rtl] .nav>a:not(.btn)::after{transform-origin:right}
[dir=rtl] .dd-panel{left:-24px;right:auto}
[dir=rtl] .lang{padding-left:0;border-left:0;padding-right:22px;border-right:1px solid var(--line)}
[dir=rtl] .menu-btn{margin-right:0;margin-left:-12px}
[dir=rtl] .crumbs li+li::before{margin-right:0;margin-left:6px}
[dir=rtl] .hero-panel .a-draw{margin-right:0;margin-left:-14%}
@media (max-width:1023px){[dir=rtl] .hero-panel .a-draw{margin-left:-18%}}
[dir=rtl] .phero-side .a-draw{margin-right:0;margin-left:-2%}
[dir=rtl] .a-wm.br{right:auto;left:-5%}
[dir=rtl] .a-wm.tr{right:auto;left:-5%}
[dir=rtl] .a-wm.bl{left:auto;right:-7%}
[dir=rtl] .watermark{right:auto;left:-4vw}
[dir=rtl] .hero-fig figcaption{left:auto;right:var(--gut)}
@media (min-width:768px){[dir=rtl] .creds div{padding:28px 0 28px 20px}[dir=rtl] .creds div+div{padding-left:0;border-left:0;padding-right:20px;border-right:1px solid var(--line)}}
[dir=rtl] .svc.on .nm,[dir=rtl] .svc>button:hover .nm{transform:translateX(-10px)}
@media (min-width:1024px){
  [dir=rtl] .aud>div:first-child{padding-left:var(--gut);padding-right:max(var(--gut-r),calc((100vw - var(--max))/2 + 40px))}
  [dir=rtl] .aud>div:last-child{padding-right:var(--gut-r);padding-left:max(var(--gut),calc((100vw - var(--max))/2 + 40px))}
  [dir=rtl] .proc li{padding:28px 0 0 24px}
}
@media (max-width:1023px){
  [dir=rtl] .proc li{padding:22px 32px 22px 0;border-left:0;margin-left:0;border-right:1px solid var(--line);margin-right:5px}
  [dir=rtl] .proc li::before{left:auto;right:-5px}
}
[dir=rtl] .proc li::before{left:auto;right:0}
[dir=rtl] .proc-line{transform-origin:right}
[dir=rtl] .fld select{background-position:10px 55%,15px 55%;padding-left:24px}
[dir=rtl] .prose ul,[dir=rtl] .prose ol{padding-left:0;padding-right:1.2em}
[dir=rtl] .callout ul{padding-left:0;padding-right:1.1em}
[dir=rtl] .prose blockquote{padding-left:0;border-left:0;padding-right:20px;border-right:2px solid var(--espresso)}
[dir=rtl] .tbl th,[dir=rtl] .tbl td{text-align:right;padding:12px 0 12px 16px}
[dir=rtl] .mbar a+a{border-left:0;border-right:1px solid var(--espresso-2)}
[dir=rtl] .lb-prev{left:auto;right:calc(10px + env(safe-area-inset-right,0px))}
[dir=rtl] .lb-next{right:auto;left:calc(10px + env(safe-area-inset-left,0px))}
[dir=rtl] .g-track{scroll-padding-left:0;scroll-padding-right:var(--gut-r)}
/* tickers keep running left; their words stay Arabic */
[dir=rtl] .marquee,[dir=rtl] .cl-marquee,[dir=rtl] .mq-track,[dir=rtl] .cl-track{direction:ltr}
[dir=rtl] .mq-track>*{direction:rtl}
/* light wash and ceiling drawing, mirrored to sit beside the right-aligned copy */
[dir=rtl] .hero-top::before{background:radial-gradient(ellipse 60% 70% at 92% 0%,rgba(255,252,246,.9),rgba(255,252,246,0) 70%),radial-gradient(ellipse 50% 60% at 0% 100%,rgba(53,43,38,.05),transparent 70%)}
[dir=rtl] .hero-art{background-image:url("../assets/ceiling-section-rtl.svg");background-position:right max(0px,calc((100vw - var(--max))/2 - 24px)) bottom 0;-webkit-mask-image:radial-gradient(170px 360px at calc(50% - 80px) 56%,#000 30%,transparent 100%),radial-gradient(760px 190px at calc(50% + 280px) 100%,#000 25%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 110px),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));mask-image:radial-gradient(170px 360px at calc(50% - 80px) 56%,#000 30%,transparent 100%),radial-gradient(760px 190px at calc(50% + 280px) 100%,#000 25%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 110px),linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14))}
@media (max-width:1023px){[dir=rtl] .hero-art{background-position:left -120px bottom 0;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 40%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 40%,#000 100%)}}
@media (max-width:599px){[dir=rtl] .hero-art{background-position:right -40px bottom 0}}
[dir=rtl] .phero-grid::before{left:-6%;right:-3%;background-image:url("../assets/ceiling-section-rtl.svg");background-position:right bottom;-webkit-mask-image:radial-gradient(11% 46% at 46% 44%,#000 30%,transparent 100%),radial-gradient(45% 22% at 72% 100%,#000 25%,transparent 100%),linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13));mask-image:radial-gradient(11% 46% at 46% 44%,#000 30%,transparent 100%),radial-gradient(45% 22% at 72% 100%,#000 25%,transparent 100%),linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13))}
@media (max-width:1023px){[dir=rtl] .phero-grid::before{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.1) 45%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.1) 45%,#000 100%)}}
[dir=rtl] .hero-ar{text-align:right;font-size:.9375rem}
.phero,.hero-top{overflow-x:clip}

/* Our Work: enquiry tile fills whatever is left of the last row */
.wtile{grid-column:1/-1;background:var(--espresso);color:var(--ivory);padding:clamp(22px,2.6vw,40px);display:grid;align-content:end;gap:14px;min-width:0}
.wtile .wt-h{font-size:var(--t-lg);font-weight:300;line-height:1.2;max-width:22ch}
.wtile p:not(.label):not(.wt-h){color:var(--sand);font-size:var(--t-sm);max-width:44ch}
.wtile .ctas{margin-top:6px}
.wtile.s1{align-content:end}
.wtile.s1 p:not(.label):not(.wt-h),.wtile.s1 .btn-line{display:none}
.wtile.s1 .wt-h{font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}

/* "Built in layers": shown first as black ink on ivory, then fades (a timed colour change, not scroll-linked) into the original espresso sheet.
   The .pre class is added by script only when motion is allowed; without it the section is the espresso original. */
.layers,.layers .label,.layers .intro,.layers .steps .n,.layers .steps p,.layers .steps a,.layers .steps,.layers .steps li{transition:background-color 1.6s ease,color 1.6s ease,border-color 1.6s ease}
.layers .drawing .ln,.layers .drawing .lbl,.layers .drawing .lbl-ln{transition:stroke 1.6s ease,fill 1.6s ease}
.layers .watermark{transition:opacity 1.6s ease}
.layers.pre{background:var(--ivory);color:var(--charcoal)}
.layers.pre .label,.layers.pre .intro,.layers.pre .steps .n,.layers.pre .steps p{color:var(--mute)}
.layers.pre .steps a{color:var(--charcoal)}
.layers.pre .steps,.layers.pre .steps li{border-color:var(--line)}
.layers.pre .drawing .ln{stroke:var(--charcoal)}
.layers.pre .drawing .lbl{fill:var(--mute)}
.layers.pre .drawing .lbl-ln{stroke:var(--mute)}
.layers.pre .watermark{opacity:0}
}
[lang=ar] .lead{line-height:1.75}

/* phones only: the first screen is one full-bleed picture of the work with just the headline over it.
   The lead text and buttons step aside (the quick bar at the bottom carries WhatsApp, Call and Send an enquiry),
   and the separate hero picture is hidden because it is now the background. Tablet and desktop are unchanged. */
.hero-bg{display:none}
@media (max-width:767px){
  .hero-top{padding-top:0}
  .hero-art{display:none}
  .hero-top::before{display:none}
  .hero-copy{position:relative;isolation:isolate;overflow:hidden;align-content:end;gap:14px;
    min-height:calc(100svh - var(--hdr) - env(safe-area-inset-top,0px));
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));
    padding:0 var(--gut-r) calc(96px + env(safe-area-inset-bottom,0px)) var(--gut);color:var(--ivory)}
  .hero-bg{display:block;position:absolute;inset:0;z-index:-1;background:var(--espresso)}
  .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.28) 0%,rgba(8,8,8,.08) 30%,rgba(35,28,25,.62) 62%,rgba(35,28,25,.94) 100%)}
  .hero-copy .label{color:var(--sand)}
  .hero h1{color:var(--ivory);text-shadow:0 1px 24px rgba(0,0,0,.25)}
  .hero-copy .hero-lead,.hero-copy .ctas,.hero-copy .hero-ar{display:none}
  .hero-grid{gap:0}
  .hero-panel{margin-top:24px}
  .hero-fig{display:none}
  .mbar{transform:none}
}

/* =====================  PHONE LAYOUT  (≤767px only — tablet and laptop untouched)  =====================
   Fewer words, more pictures: long lists become swipeable picture cards, secondary paragraphs step aside. */
.svc-rails{display:none}
@media (max-width:767px){
  /* hero picture */
  .hero-bg img{object-position:42% 50%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(8,8,8,.3) 0%,rgba(8,8,8,.04) 26%,rgba(35,28,25,.18) 50%,rgba(35,28,25,.74) 76%,rgba(35,28,25,.94) 100%)}

  /* swipe rails */
  .rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 76%;scroll-snap-align:start;min-width:0}

  /* section headings: tighter, one line of intro at most */
  .sec{padding-block:56px}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:clamp(1.75rem,1.3rem + 2.4vw,2.1rem)}

  /* about statement: picture first, smaller type, one button */
  .statement{padding-block:48px}
  .st-grid{gap:24px}
  .st-fig{order:-1}
  .statement p.big{font-size:1.45rem;line-height:1.32}
  .statement .ctas .btn+.btn{display:none}

  /* built in layers: drawing near the top, steps as short titles with their links */
  .layers .wrap{padding-block:56px;gap:28px}
  .layers .intro{display:none}
  .layers .steps p{display:none}
  .layers .steps li{padding:12px 0}

  /* services: picture cards to swipe through */
  #services .sec-head p{display:none}
  .svc-grid{display:none}
  .svc-rails{display:block}
  .rail-label{display:flex;justify-content:space-between;margin:28px 0 14px}
  .rail-label:first-child{margin-top:0}
  .svc-card{display:grid;gap:8px;text-decoration:none;color:var(--charcoal)}
  .svc-card .im{aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
  .svc-card img{width:100%;height:100%;object-fit:cover}
  .svc-card .nm{font-size:1.15rem;line-height:1.3;margin-top:4px}
  .svc-card .tg{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

  /* classical: shorter text, pictures to swipe, points as a compact grid */
  .cl-head p{display:none}
  .cl-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .cl-row::-webkit-scrollbar{display:none}
  .cl-row figure{flex:0 0 76%;scroll-snap-align:start}
  .points{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .points div{padding:14px 12px 14px 0}
  .points span{display:none}

  /* who we work with: heading, short list, button */
  .aud>div{padding-block:48px;gap:16px}
  .aud p{display:none}

  /* process and service steps: swipe cards */
  .proc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .proc::-webkit-scrollbar{display:none}
  .proc li{flex:0 0 72%;scroll-snap-align:start;border:1px solid var(--line);margin:0;padding:20px}
  [dir=rtl] .proc li{border:1px solid var(--line);margin:0;padding:20px}
  .proc li::before{display:none}
  .nsteps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:0;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .nsteps::-webkit-scrollbar{display:none}
  .nsteps li{flex:0 0 72%;scroll-snap-align:start;border:1px solid var(--line-dark);padding:18px}

  /* related designs and guides: swipe */
  .strip,.cards3{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .strip::-webkit-scrollbar,.cards3::-webkit-scrollbar{display:none}
  .strip figure,.cards3 .card{flex:0 0 76%;scroll-snap-align:start}
  .strip figure:nth-child(3){display:block}
  .strip .sec-head p{display:none}

  /* FAQ: no side paragraph */
  .faq-side>p:not(.label){display:none}

  /* footer: logo, then company and contact side by side (services are one tap away in the menu) */
  .ftr .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .ftr .top>div:first-child{grid-column:1/-1}
  .ftr .top>div:nth-child(2),.ftr .top>div:nth-child(3){display:none}

  /* inner pages: one short intro line, compact facts */
  .phero .sub{display:none}
  .glance div{padding:10px 10px 10px 0}

  /* scope / offer lists: titles only, two to a row */
  .scope{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .scope li{padding:14px 0;align-content:start}
  .scope li span{display:none}
  .side-col .svc-cta{display:none}

  /* services page: compact rows (thumbnail + name) instead of full-width pictures with paragraphs */
  .hub a{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0}
  .hub .im{aspect-ratio:1/1}
  .hub h3{font-size:1.1rem}
  .hub p,.hub .go{display:none}
}


/* ===== round 2 ===== */
/* Built in layers: a finished room with numbered layers */
.layers .layers-copy{min-width:0}
.layers .hint{font-size:var(--t-sm);opacity:.85}
.layers-fig{margin:0;min-width:0}
.lf-im{position:relative}
.lf-im img{width:100%;height:auto;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;text-decoration:none;z-index:1}
.pin.l{flex-direction:row-reverse;transform:translate(calc(-100% + 15px),-50%)}
.pin.r{transform:translate(-15px,-50%)}
.pin .pn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--espresso);color:var(--ivory);font:500 .8rem var(--f-sans);border:1.5px solid var(--ivory);box-shadow:0 0 0 6px rgba(243,240,233,.28);transition:transform .3s var(--ease),box-shadow .3s}
.pin .pl{background:rgba(243,240,233,.94);color:var(--espresso);font-size:var(--t-sm);font-weight:500;padding:7px 12px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:background .3s,color .3s}
.pin:hover .pn,.pin:focus-visible .pn{transform:scale(1.12);box-shadow:0 0 0 9px rgba(243,240,233,.35)}
.pin:hover .pl,.pin:focus-visible .pl{background:var(--espresso);color:var(--ivory)}
.pin-key{display:none;list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line-dark)}
.pin-key a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-dark);text-decoration:none;color:inherit;font-size:var(--t-sm)}
.pin-key .pn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ivory);color:var(--espresso);font:500 .72rem var(--f-sans)}
.layers-fig figcaption{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-top:12px}
.layers.pre .layers-fig figcaption,.layers.pre .hint{color:var(--mute)}
.layers.pre .pin-key,.layers.pre .pin-key a{border-color:var(--line)}
@media (max-width:1023px){.pin .pl{display:none}.pin,.pin.l,.pin.r{transform:translate(-50%,-50%)}.pin-key{display:block}}
@media (max-width:767px){.layers .intro{display:block}.pin .pn{width:26px;height:26px}}

/* Client words */
.quotes{display:grid;gap:36px}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.quote{margin:0;padding-top:24px;border-top:1px solid var(--sand);display:grid;gap:18px;align-content:start}
.quote blockquote{margin:0}
.quote p{font-size:clamp(1.12rem,.98rem + .55vw,1.4rem);font-weight:300;line-height:1.5;color:var(--charcoal)}
.quote figcaption{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:767px){
  .quotes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));padding:0 var(--gut-r) 4px var(--gut);scroll-padding-inline:var(--gut)}
  .quotes::-webkit-scrollbar{display:none}
  .quote{flex:0 0 84%;scroll-snap-align:start}
}

/* who we work with: picture + residential & commercial */
.aud-one .aud-img{padding:0!important;position:relative;overflow:hidden;min-height:340px;background:var(--stone)}
.aud-one .aud-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.aud-one .aud-img{min-height:0;aspect-ratio:4/3}}
@media (min-width:1024px){[dir=rtl] .aud-one>div.light{padding-left:max(var(--gut),calc((100vw - var(--max))/2 + 40px));padding-right:var(--gut-r)}}
.aud-one>div.light{padding-right:max(var(--gut-r),calc((100vw - var(--max))/2 + 40px))}
@media (max-width:1023px){.aud-one>div.light{padding-right:var(--gut-r)}}

/* process: each box turns espresso when the line reaches it */
.proc li::before{transition:background .45s ease,border-color .45s ease}
.proc li.hit::before{background:var(--espresso);border-color:var(--espresso)}

/* Our Work: straight to the pictures */
.phero-compact{padding-bottom:20px}
.phero-compact h1{font-size:var(--t-lg);font-weight:400;max-width:none;margin-top:16px}
[dir=ltr] .nav .dd:first-child .dd-panel{left:auto;right:-24px}
.hpot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}