/* home-v17.css (Home v17, 2026-11-07): screen 2 two-lane store build (.tt) and the client storefront street (.ls). */

/* ---------- 2 TWO TRACKS ---------- */
.tt{position:relative;background:#f6f3ec;background-image:linear-gradient(rgba(185,162,116,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(185,162,116,.12) 1px,transparent 1px);background-size:32px 32px;color:var(--ink)}
.tt-stage{padding:clamp(44px,7vh,80px) 0}
.tt.js{height:280vh}
.tt.js .tt-stage{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));min-height:540px;padding:clamp(14px,2.4vh,30px) 0;display:flex;align-items:center;overflow:hidden;box-sizing:border-box}
.tt-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,1.4vh,14px)}
.tt-h{font-size:clamp(1.6rem,3.2vw,2.6rem);margin:0}
.tt-hint{margin:0;font-size:.86rem;color:var(--mute)}
.tt-grid{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(150px,200px);gap:clamp(14px,2vw,32px);align-items:center;width:min(1120px,100%)}
.tt-lane{position:relative;display:flex;flex-direction:column;gap:10px}
.tt-lt{margin:0;font:800 .74rem Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.tt-lane.s .tt-lt{color:var(--acc)}.tt-lane.w .tt-lt{color:var(--acc2)}
.tt-chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tt-chips button{width:100%;min-height:44px;font:700 .9rem Montserrat,sans-serif;padding:10px 14px;border-radius:999px;border:1.5px solid #d9cfbd;background:#fff;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .2s}
.tt-chips button::before{content:"";width:8px;height:8px;border-radius:50%;background:#d9cfbd;transition:background .25s}
.tt-lane.s button{--c:var(--acc)}.tt-lane.w button{--c:var(--acc2)}
.tt-chips button.done,.tt:not(.js) .tt-chips button{border-color:var(--c);color:var(--c)}
.tt-chips button.done::before,.tt:not(.js) .tt-chips button::before{background:var(--c)}
.tt-chips button.on,.tt-chips button.pv,.tt-chips button[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 8px 20px -10px var(--c)}
.tt-chips button.on::before,.tt-chips button.pv::before,.tt-chips button[aria-pressed=true]::before{background:#fff}
.tt-chips button:hover{transform:translateY(-1px)}
.tt-chips button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tt-bar{position:absolute;top:34px;bottom:4px;width:3px;border-radius:3px;background:#e4dccd;overflow:hidden}
.tt-lane.s .tt-bar{right:-12px}.tt-lane.w .tt-bar{left:-12px}
.tt-bar i,.tt-rl i{position:absolute;inset:0;transform-origin:0 0;transition:transform .3s}
.tt-lane.s .tt-bar i,.tt-rl.s i{background:var(--acc)}.tt-lane.w .tt-bar i,.tt-rl.w i{background:var(--acc2)}
.tt-rl.w i{transform-origin:100% 0}
.tt.js .tt-bar i{transform:scaleY(0)}.tt.js .tt-rl i{transform:scaleX(0)}
.tt-fig{position:relative;margin:0;min-width:0}
.tt-svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--hh) - 250px);min-height:220px}
.tt-gnd{stroke:#b9a274;stroke-width:2}
.tt-p{transition:opacity .5s,filter .5s,transform .5s;transform-box:fill-box}
.tt.js .tt-p{opacity:.1;filter:grayscale(1)}
.tt.js .tt-p.b{opacity:1;filter:none}
.tt-p.dim{opacity:.18!important;filter:grayscale(1)!important}
.tt-p.hl{opacity:1!important;filter:drop-shadow(0 0 6px rgba(230,0,126,.55))!important}
.tt-p.hl[data-l=w]{filter:drop-shadow(0 0 6px rgba(31,111,235,.6))!important}
.tt-warm{opacity:.85;transition:opacity .8s}
.tt.js:not(.lit) .tt-warm,.tt.spotting .tt-warm{opacity:0}
.tt-cone{opacity:.5}.tt.js:not(.lit) .tt-cone{opacity:0}
.tt-box{filter:drop-shadow(0 0 6px #fff1c8)}.tt.js:not(.lit) .tt-box{fill:#efe6d2;filter:none}
.tt-sheen{opacity:.55}
.tt-air path{stroke-dasharray:5 6;animation:ttair 1.6s linear infinite}
@keyframes ttair{to{stroke-dashoffset:-22}}
.tt.spotting .tt-shut{opacity:0}
.tt:not(.js) .tt-shut{display:none}
.tt-stamp{position:absolute;left:50%;bottom:12%;margin:0;transform:translate(-50%,0) scale(1);white-space:nowrap;font:800 clamp(.9rem,1.6vw,1.2rem)/1.1 Montserrat,sans-serif;color:#fff;background:var(--acc);padding:11px 18px;border-radius:10px;box-shadow:0 14px 34px -10px rgba(230,0,126,.7);transition:opacity .4s,transform .4s;pointer-events:none}
.tt.spotting .tt-chips button.on:not(.pv):not([aria-pressed=true]){background:#fff;color:var(--c);box-shadow:none}.tt.spotting .tt-chips button.on:not(.pv)::before{background:var(--c)}
.tt.js:not(.open) .tt-stamp,.tt.spotting .tt-stamp{opacity:0;transform:translate(-50%,0) scale(1.12) rotate(-3deg)}
.tt-rail{display:flex;align-items:center;gap:10px;width:min(560px,100%)}
.tt-rl{position:relative;flex:1;height:3px;border-radius:3px;background:#e4dccd;overflow:hidden}
.tt-open{font:800 .78rem Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px;border:1.5px solid #cdbf9f;color:#8d7a52;background:#fff;transition:all .4s}
.tt:not(.js) .tt-open,.tt.open .tt-open{background:linear-gradient(135deg,#E3D3AE,#C9B58A);border-color:#b9a274;color:#3a3020;box-shadow:0 0 0 6px rgba(201,181,138,.25)}
.tt-cap{margin:0;min-height:1.5em;font-size:.95rem;color:var(--ink2);font-weight:500}
.tt-cta{margin:0}
.tt-in .tt-cta .btn{padding:13px 24px}
@media(max-width:860px){
 .tt-grid{grid-template-columns:1fr 1fr;grid-template-areas:"f f" "s w";gap:12px 10px}
 .tt-fig{grid-area:f}.tt-lane.s{grid-area:s}.tt-lane.w{grid-area:w}
 .tt-bar{display:none}
 .tt-chips{display:grid;grid-template-columns:1fr;gap:6px}
 .tt-chips button{min-height:38px;padding:6px 10px;font-size:.8rem}
 .tt-lane{gap:6px}
 .tt-svg{max-height:calc(100svh - var(--hh) - 430px);min-height:180px}
 .tt-hint{font-size:.78rem}
 .tt-rail{order:-1}
}
@media(max-width:860px){.tt-in{gap:8px}.tt-grid{order:1}.tt-rail{order:2}.tt-cap{order:3;font-size:.86rem}.tt-cta{order:4}}
@media(max-width:400px){.tt-chips button{font-size:.76rem}.tt-stamp{font-size:.85rem;padding:8px 12px}.tt-hint{display:none}}
@media(prefers-reduced-motion:reduce){.tt-air path{animation:none}.tt-p,.tt-chips button,.tt-stamp{transition:none}}

/* ---------- 4 CLIENT STOREFRONT STREET ---------- */
.ls{position:relative;overflow:hidden;margin-top:10px;border-radius:var(--r);background:
 radial-gradient(ellipse 60% 40% at 50% 0,rgba(255,236,200,.10),transparent 70%),
 linear-gradient(180deg,#141519 0,#1b1c21 14%,#22232a 14.4%,#26272e 76%,#3a3b42 76.2%,#2b2c32 84%,#1c1d22 100%)}
.ls::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;background:radial-gradient(circle at 50% 70%,rgba(255,240,210,.9) 0 2px,transparent 3px) 0 0/120px 100% repeat-x;opacity:.7}
.ls-track{position:relative;z-index:1;display:flex;align-items:flex-end;width:max-content;padding:54px 0 46px;animation:lsgo 120s linear infinite;will-change:transform}
.ls:hover .ls-track,.ls:focus-within .ls-track,.ls.paused .ls-track{animation-play-state:paused}
@keyframes lsgo{to{transform:translateX(-50%)}}
.ls-s{--fa:#F2EBDD;--tr:#C9B58A;flex:none;width:calc(var(--w)*1px);margin:0 9px;display:flex;flex-direction:column;position:relative;padding:0 10px;background:linear-gradient(90deg,#3b3d45,#4a4c55 50%,#3b3d45) top/100% 100% no-repeat;border-radius:3px 3px 0 0}
.ls-s::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-38px;height:38px;background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(255,214,150,.28),transparent 70%);pointer-events:none}
.ls-fa{height:84px;margin:0 -10px;display:grid;place-items:center;padding:8px 14px;box-sizing:border-box;position:relative;
 background:radial-gradient(ellipse 70% 90% at 50% -10%,rgba(255,255,255,.55),transparent 65%),var(--fa);
 border-top:4px solid var(--tr);border-bottom:5px solid var(--tr);box-shadow:inset 0 -10px 18px -12px rgba(0,0,0,.35),0 6px 14px -6px rgba(0,0,0,.6)}
.ls-fa img{display:block;height:calc(var(--lh)*1px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18)) drop-shadow(0 3px 3px rgba(0,0,0,.14))}
.ls-s.d .ls-fa{background:radial-gradient(ellipse 70% 100% at 50% 50%,rgba(255,255,255,.10),transparent 70%),var(--fa)}
.ls-s.d .ls-fa img{filter:drop-shadow(0 0 5px rgba(255,255,255,.22)) drop-shadow(0 0 14px rgba(255,236,200,.18))}
.ls-fr{height:156px;display:grid;grid-template-columns:1fr .78fr 1fr;gap:5px;padding:6px 0 0;background:var(--tr);background:linear-gradient(90deg,#b9a274,#d9c79f 50%,#b9a274)}
.ls-s.v1 .ls-fr{grid-template-columns:.78fr 1fr 1fr}.ls-s.v2 .ls-fr{grid-template-columns:1fr 1fr .78fr}
.ls-s.v3 .ls-fr{grid-template-columns:1fr .6fr .6fr 1fr}
.ls-fr i{position:relative;overflow:hidden;background:
 linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 31%,rgba(255,255,255,.06) 42%,transparent 43%),
 repeating-linear-gradient(180deg,transparent 0 34px,rgba(140,96,52,.55) 34px 37px),
 radial-gradient(ellipse 90% 70% at 50% 15%,#fff3d9 0,#ffd9a0 45%,#d9a466 100%)}
.ls-fr i.dr{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 31%,transparent 40%),radial-gradient(ellipse 100% 80% at 50% 10%,#fff6e4,#f2d3a2 60%,#caa070)}
.ls-fr i.dr::after{content:"";position:absolute;top:44%;right:8px;width:4px;height:30px;border-radius:2px;background:#8d7a52}
.ls-fr i:not(.dr)::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:24px;background:#f4ead8;border-radius:2px 2px 0 0;box-shadow:0 -12px 0 -6px #2f323b,inset 0 3px 0 #c9b58a}
.ls-s.v3 .ls-fr i.dr::after{right:auto;left:6px}
/* window dressing varies: mannequins (v1, v3), a bag/box display (v2) */
.ls-s.v1 .ls-fr i:first-child::before,.ls-s.v3 .ls-fr i:last-child::before,.ls-s.v1 .ls-fr i:last-child::before{content:"";position:absolute;left:50%;bottom:24px;width:22px;height:74px;margin-left:-11px;background:radial-gradient(circle at 50% 8px,#3b3e47 7px,transparent 7.6px),linear-gradient(#3b3e47,#3b3e47) 50% 17px/18px 36px no-repeat,linear-gradient(#3b3e47,#3b3e47) 50% 100%/4px 22px no-repeat;opacity:.85}
.ls-s.v2 .ls-fr i:first-child::before,.ls-s.v0 .ls-fr i:last-child::before{content:"";position:absolute;left:50%;bottom:24px;width:40px;height:22px;margin-left:-20px;background:linear-gradient(90deg,#E6007E 0 30%,transparent 30% 36%,#1f6feb 36% 64%,transparent 64% 70%,#c9b58a 70%);border-radius:2px 2px 0 0;opacity:.8}
.ls-st{height:7px;margin:0 -10px;background:#8e8f96}
.ls-tm{margin:12px 0 0;font-size:.78rem;color:rgba(255,255,255,.55)}
@media(max-width:700px){
 .ls-track{animation-duration:95s;padding:40px 0 36px}
 .ls-s{width:calc(var(--w)*.8px);margin:0 7px;padding:0 8px}
 .ls-fa{height:66px;margin:0 -8px;padding:6px 10px}
 .ls-fa img{height:max(28px,calc(var(--lh)*.78px))}
 .ls-fr{height:116px}
 .ls-fr i{background-size:auto,auto 28px,auto}
 .ls-st{margin:0 -8px}
}
@media(prefers-reduced-motion:reduce){
 .ls-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:28px;padding:36px 10px}
 .ls-s[aria-hidden=true]{display:none}
 .ls-fr{height:96px}.ls-fr i::before{display:none}
}

/* ---------- v18 (Om 2026-11-07 12:22): hero H1 "GC ➔ Fit-outs ➔ Signage" ---------- */
/* ➔ (U+2794) is not in Montserrat: a 620-byte subset of DejaVu Sans Bold (fonts/riq-arrow.woff2, U+2794 only) draws it the same on every OS. */
@font-face{font-family:RiqArrow;src:url(../fonts/riq-arrow.woff2) format("woff2");unicode-range:U+2794;font-display:swap}
.hv-hero h1{max-width:24ch}
.hv-ar{font-family:RiqArrow,"Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;font-weight:400;color:#ff4fa8;font-size:.74em;-webkit-text-stroke:.035em currentColor;display:inline-block;vertical-align:.08em;margin:0 .06em}
.hv-ar .w{vertical-align:baseline}
.hv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- v18 (Om 2026-11-07 12:22): street = equal storefronts, clear gaps with a mall pillar, logos in one bounding box ---------- */
/* Every storefront 240 px wide (184 px phone). Gap 34 px (20 px phone) holds a champagne-and-stone pillar on a plinth.
   Logo box on the fascia: max 176 x 56 px desktop, 140 x 44 px phone. --lh per logo is an equal-area optical size
   (50 px * aspect^-0.45, nudged for ink density, clamped to the box), so wide wordmarks and square badges carry equal weight. */
.ls-s{width:240px;margin:0 17px}
.ls-s::before{content:"";position:absolute;top:-30px;bottom:-12px;left:-23px;width:12px;border-radius:2px 2px 0 0;pointer-events:none;
 background:linear-gradient(180deg,#d9c79f 0 6px,#8f7c55 6px 8px,transparent 8px),linear-gradient(180deg,transparent calc(100% - 14px),#6f7078 calc(100% - 14px)),
 linear-gradient(90deg,#3d3f47,#5b5d66 45%,#474951 70%,#34363d);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ls-s::after{left:0;right:0}
.ls-fa{padding:14px 32px}
.ls-fa img{height:calc(var(--lh)*1px);width:auto;max-width:176px;max-height:56px}
@media(max-width:700px){
 .ls-s{width:184px;margin:0 10px}
 .ls-s::before{left:-14px;width:8px;top:-22px;bottom:-10px}
 .ls-fa{padding:11px 22px}
 .ls-fa img{height:calc(var(--lh)*.78px);max-width:140px;max-height:44px}
}
.hv-g{white-space:nowrap}