/* Look T · "Keys" (estate agents, letting agents, holiday rentals). An agent's office front: the hanging sign, the
   homes in the window, the key board behind the desk. Font: Onest (OFL, public/fonts, claimed for look T).
   Every class starts with t- (stylesheets are global; g- belongs to the gallery library). */
@font-face{font-family:"T Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"T Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Reference palette "bord" (design.ts palettes override these tokens): a quiet light grey page, navy, one orange */
:root{--bg:#f2f3f5;--paper:#ffffff;--ink:#111c3a;--mute:#4a5468;--line:#d6dae2;--sign:#e2825a;--onsign:#111c3a;
--deep:#111c3a;--ondeep:#ffffff;--dmute:#afb9d2;--acc:#32519e;--onacc:#ffffff;--tag:#efe5c8;--ontag:#111c3a;
--t-r1:#dce6f6;--t-r2:#fbe2cf;--t-r3:#d3eee4;--t-r4:#eceef2;--rail:#4a5677;--chain:#111c3a;
--t-max:1240px;--t-pad:clamp(16px,4vw,48px);--t-edge:clamp(18px,4vw,60px);--t-railh:76px;--t-gut:max(var(--t-edge),calc((100vw - var(--t-max)) / 2 + var(--t-pad)));--t-cut:14px;
--m-accent:var(--sign)}
@media(max-width:940px){:root{--t-railh:64px}}
html{scroll-padding-top:calc(var(--t-railh) + 12px);-webkit-text-size-adjust:100%}
body.t-body{--fd:"T Onest",system-ui,sans-serif;--ft:"T Onest",system-ui,sans-serif;--hw:800;--hk:-.035em;--hl:.98;--hz:1;
margin:0;background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.6 var(--ft);-webkit-font-smoothing:antialiased}
body.t-f-quiet{--hw:540;--hk:-.025em;--hl:1.04;--hz:1.06}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fd);font-weight:var(--hw);letter-spacing:var(--hk);line-height:var(--hl);margin:0;text-wrap:balance}
h1,h2,h3,h4,summary,b,.t-btn,.nf .btn{overflow-wrap:anywhere;min-width:0}
h3{font-weight:max(600,calc(var(--hw) - 100));letter-spacing:-.01em;line-height:1.2}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:where(.t-body) a{color:var(--acc);text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.t-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.t-wrap{max-width:var(--t-max);margin:0 auto;padding:0 var(--t-pad)}
.t-sec{padding:calc(clamp(64px,8vw,112px)*var(--tune-space,1)) 0}
.t-sec+.t-sec{padding-top:0}
.t-head{display:flex;justify-content:space-between;align-items:last baseline;gap:16px 40px;margin-bottom:calc(clamp(28px,3.4vw,44px)*var(--tune-space,1));flex-wrap:wrap}
.t-head h2,.t-kb-head h2,.t-ct-info h2,.t-area-txt h2,.t-rates h2{font-size:calc(calc(clamp(32px,4.2vw,54px) * var(--hz))*var(--tune-size,1))}
.t-head p{max-width:44ch;color:var(--mute)}

/* buttons and the phone: one deep button, the phone beside it as big text */
.t-btn,.nf .btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border:0;border-radius:calc(4px*var(--tune-radius,1));background:var(--btn,var(--deep));color:var(--onbtn,var(--ondeep));font:600 calc(17px*var(--tune-size,1))/1.1 var(--ft);text-decoration:none;cursor:pointer}
.t-btn:hover,.nf .btn:hover{background:color-mix(in srgb,var(--btn,var(--deep)) 86%,var(--onbtn,var(--ondeep)))}
.t-tel{display:inline-flex;align-items:center;min-height:54px;color:inherit;font:700 20px/1.1 var(--ft);letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;white-space:nowrap}
.t-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;margin-top:28px}

/* ---------- the key tag ----------
   A manila tag with its top corners cut and a punched hole with a metal ring. It is kept for the two things an agent
   really tags: the nav (keys on hooks) and a home's status. --hole = what shows through the hole. */
.t-tag{--drop:0px;position:relative;isolation:isolate;color:var(--ontag);padding:calc(var(--drop) + 36px) 24px 24px}
.t-tag::after{content:"";position:absolute;inset:var(--drop) 0 0 0;z-index:-1;background:var(--tag);border-radius:0 0 calc(8px*var(--tune-radius,1)) calc(8px*var(--tune-radius,1));clip-path:polygon(var(--t-cut) 0,calc(100% - var(--t-cut)) 0,100% var(--t-cut),100% 100%,0 100%,0 var(--t-cut))}
.t-tag::before{content:"";position:absolute;z-index:1;top:calc(var(--drop) + 12px);left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--hole,var(--bg));box-shadow:0 0 0 3px color-mix(in srgb,var(--ontag) 24%,var(--tag))}

/* ---------- the key rail (nav): the agency's name, the key tags on hooks, the phone ----------
   A deep bar under the photo or page head, the bottom edge of the home page's first screen; it sticks to the top once
   you scroll past. The beam is a line near its top; each tag hangs from it on a short string. Phones: the name and
   one "Menu" tag, whose list drops in under the top of the screen wherever the rail is. */
.t-rail{position:sticky;top:0;z-index:40;background:var(--deep);color:var(--ondeep);--hole:var(--deep)}
.t-rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:3px;background:var(--rail)}
.t-rail-in{position:relative;padding:0 var(--t-gut);height:var(--t-railh);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px}
.t-brand{display:flex;align-items:center;gap:12px;min-width:0;margin-top:12px;color:inherit;font:700 calc(19px*var(--tune-size,1))/24px var(--fd);letter-spacing:-.01em;text-decoration:none}
.t-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-eye{flex:none;width:20px;height:20px;border-radius:50%;border:4px solid var(--sign)}
.t-keys{display:flex;align-self:start;gap:10px}
.t-keys li{position:relative;padding-top:18px}
.t-keys li::before,.t-menu::before{content:"";position:absolute;top:12px;left:50%;width:2px;height:14px;margin-left:-1px;background:var(--rail)}
.t-key{position:relative;isolation:isolate;display:block;padding:20px 16px 8px;color:var(--ontag);font:600 15px/20px var(--ft);text-decoration:none;white-space:nowrap;transform-origin:50% 0;cursor:pointer}
.t-key::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tag);border-radius:0 0 calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1));--c:9px;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%,0 var(--c))}
.t-key::before{content:"";position:absolute;z-index:1;top:7px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 2px color-mix(in srgb,var(--ontag) 24%,var(--tag))}
.t-key[aria-current]{color:var(--onsign)}.t-key[aria-current]::after{background:var(--sign)}
.t-key:hover{color:var(--ontag)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.t-key{transition:transform .5s cubic-bezier(.3,1,.5,1)}.t-keys li:hover .t-key{transform:rotate(0deg)}}
.t-rail-end{justify-self:end;display:flex;align-items:center;gap:22px;margin-top:12px;font-size:calc(15px*var(--tune-size,1));line-height:22px}
.t-rail-tel{color:var(--ondeep);font-weight:600;text-decoration:none;white-space:nowrap}.t-rail-tel:hover{text-decoration:underline}
.t-rail .langs{margin:0}.t-rail .langs a{color:var(--ondeep)}
.t-menu{display:none;position:relative;align-self:start;justify-self:end;padding-top:18px}
.t-menu summary{list-style:none;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.t-menu summary::-webkit-details-marker{display:none}
/* fixed under the top of the screen: in view both when the rail sits at the bottom of the first screen and when it
   sticks to the top (the rail has no transform, so the viewport is the containing block) */
.t-menu-p{position:fixed;left:0;right:0;top:var(--t-railh);max-height:calc(100svh - 2 * var(--t-railh));overflow:auto;background:var(--deep);padding:8px var(--t-edge) 22px;box-shadow:0 30px 60px -30px rgb(0 0 0 / .6)}
.t-menu-p ul a{display:block;padding:12px 0;color:var(--ondeep);font:600 calc(22px*var(--tune-size,1))/1.25 var(--fd);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ondeep) 16%,transparent)}
.t-menu-p ul a[aria-current]{text-decoration:underline;text-decoration-color:var(--sign);text-decoration-thickness:3px}
.t-menu-p .langs{margin:16px 0 0}.t-menu-p .langs a{color:var(--ondeep)}
@media(max-width:940px){
.t-keys,.t-rail-end{display:none}
.t-rail-in{grid-template-columns:minmax(0,1fr) auto}
.t-menu{display:block}
}

/* ---------- the hanging sign ----------
   A board on two chains: in the home hero it hangs from the beam under the header and says what an agent's board
   says ("For sale" and the phone); the other pages hang their title on a smaller one; the "board" closing one more. */
.t-sign{--chain-l:clamp(36px,6vw,84px);--bw:600px;position:relative;display:flex;justify-content:center}
.t-swing{position:relative;width:min(var(--bw),100%);padding-top:var(--chain-l);transform-origin:50% 0}
.t-chain{position:absolute;top:0;width:4px;height:calc(var(--chain-l) + 6px);margin-left:-2px;border-radius:calc(2px*var(--tune-radius,1));background:repeating-linear-gradient(to bottom,var(--chain) 0 8px,transparent 8px 11px)}
.t-chain::after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:3px solid var(--chain);background:var(--sign)}
.t-ch-l{left:20%}.t-ch-r{left:80%}
.t-board{position:relative;background:var(--sign);color:var(--onsign);border-radius:calc(6px*var(--tune-radius,1));text-align:center;box-shadow:0 26px 50px -26px rgb(0 0 0 / .5)}
.t-band{margin:0;padding:12px 20px;background:var(--deep);color:var(--ondeep);border-radius:calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1)) 0 0;font:700 calc(15px*var(--tune-size,1))/20px var(--fd);letter-spacing:.01em;overflow-wrap:anywhere}
.t-board-in{margin:10px;padding:calc(clamp(26px,3.6vw,44px)*var(--tune-space,1)) clamp(18px,3.4vw,44px);border:2px solid color-mix(in srgb,var(--onsign) 34%,transparent);border-radius:calc(3px*var(--tune-radius,1))}
.t-board h1{font-size:calc(calc(clamp(40px,5vw,68px) * var(--hz))*var(--tune-size,1))}
.t-board h2{font-size:calc(calc(clamp(32px,4vw,52px) * var(--hz))*var(--tune-size,1))}
.t-board-in > p{max-width:34ch;margin:18px auto 0;font-size:calc(clamp(17px,1.4vw,19px)*var(--tune-size,1));line-height:1.5}
.t-board,.t-callout{--btn:var(--deep);--onbtn:var(--ondeep)}
.t-board .t-tel{color:var(--onsign)}

/* ---------- the heroes: a full-bleed photo that fills the first screen down to the key rail ---------- */
.t-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#fff;--chain:#dfe3ea}
.t-hs-ph{position:absolute;inset:0;z-index:-1;overflow:hidden}
.t-hs-ph img{width:100%;height:100%;object-fit:cover}
.t-hs-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(6 10 22 / .24),rgb(6 10 22 / 0) 22%,rgb(6 10 22 / .12) 36%,rgb(6 10 22 / .74)),linear-gradient(90deg,rgb(6 10 22 / .62),rgb(6 10 22 / 0) 66%)}
.t-hero h1{font-size:calc(calc(clamp(50px,7.8vw,116px) * var(--hz))*var(--tune-size,1));line-height:.94;text-shadow:0 2px 30px rgb(0 0 0 / .18)}
.t-hero .t-lede{max-width:44ch;margin-top:clamp(14px,1.8vw,22px);font-size:calc(clamp(17px,1.45vw,21px)*var(--tune-size,1));line-height:1.45;color:#fff;font-weight:500;text-shadow:0 1px 3px rgb(0 0 0 / .55),0 2px 18px rgb(0 0 0 / .5);text-wrap:balance}
.t-hero .t-btn{margin-top:clamp(22px,2.6vw,32px);--btn:#fff;--onbtn:var(--deep)}

/* "sign": the headline bottom-left; the agent's board ("For sale") hangs top-right from the top edge, like a board
   over the door */
.t-hero-sign{height:calc(100svh - var(--t-railh));min-height:520px;max-height:924px;display:flex;flex-direction:column;justify-content:flex-end}
.t-hs-in{width:100%;max-width:none;padding:0 var(--t-gut) calc(clamp(36px,6.4vh,76px)*var(--tune-space,1))}
.t-sign-hero{position:absolute;z-index:2;top:0;right:calc(var(--t-edge) + 4vw);display:block;--bw:clamp(150px,19vw,290px);--chain-l:clamp(40px,9vh,112px)}
.t-sign-hero .t-board-in{margin:8px;padding:clamp(14px,1.9vw,26px) clamp(10px,1.4vw,20px)}
.t-board-in > .t-sg-word{margin:0;max-width:none;font:var(--hw) calc(calc(clamp(30px,4.4vw,64px) * var(--hz))*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--hk)}
/* phones: a smaller board, more photo */
@media(max-width:640px){.t-sign-hero{--bw:136px;--chain-l:44px}}

.t-hero-window .t-hs-ph::after{background:linear-gradient(rgb(6 10 22 / .58),rgb(6 10 22 / .42) 46%,rgb(6 10 22 / .5))}
/* "window": the agent's shop window over the street: the headline centred, three homes behind glass at the bottom,
   standing on the key rail like on a window sill */
.t-hero-window{min-height:calc(min(100svh,1000px) - var(--t-railh));display:flex;flex-direction:column;padding-top:calc(clamp(20px,4vh,48px)*var(--tune-space,1));text-align:center}
.t-hw-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:clamp(12px,2.4vh,32px);padding-bottom:calc(clamp(24px,3.6vh,44px)*var(--tune-space,1))}
.t-hero-window h1{font-size:calc(calc(clamp(46px,min(7.2vw,10.5vh),104px) * var(--hz))*var(--tune-size,1))}
/* short laptop screens: lower photos in the window, so the cards and the rail stay on the first screen */
@media(min-width:961px) and (max-height:820px){.t-win-in .t-mini .t-photo{aspect-ratio:3/1}.t-win-in .t-mini .t-cd-body{padding:12px 18px 14px}.t-hero-window .t-lede{margin-top:10px}.t-hero-window .t-btn{margin-top:18px}}
@media(min-width:961px) and (max-height:780px){.t-win-in .t-mini .t-photo{aspect-ratio:4/1}}
.t-window{position:relative;width:min(100% - 2 * var(--t-edge),var(--t-max));margin:0 auto;padding:clamp(12px,1.6vw,20px);background:color-mix(in srgb,var(--deep) 86%,transparent);border-radius:calc(10px*var(--tune-radius,1)) calc(10px*var(--tune-radius,1)) 0 0;overflow:hidden;--hole:var(--paper);text-align:left}
.t-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .1) 38%,transparent 46%,transparent 62%,rgb(255 255 255 / .06) 66%,transparent 70%)}
.t-win-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);color:var(--ink)}
@media(max-width:960px){.t-win-in{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory}.t-win-in > *{scroll-snap-align:start}}
@media(max-width:640px){.t-win-in{grid-auto-columns:78%}}

/* inner pages: a deep page head, a smaller board hanging from the top edge, the key rail under it */
.t-ph{position:relative;background:var(--deep);color:var(--ondeep);padding:0 var(--t-pad) calc(clamp(44px,5.4vw,72px)*var(--tune-space,1));--chain:#dfe3ea}
.t-ph .t-sign{--bw:640px;--chain-l:clamp(36px,5vw,72px)}
.t-ph .t-board h1{font-size:calc(calc(clamp(36px,4.4vw,56px) * var(--hz))*var(--tune-size,1))}

/* ---------- homes on the board: filter chips and cards that turn to the floor plan ---------- */
.t-homes{--hole:var(--bg)}
.t-filter{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;padding:0;border:0;min-width:0}
.t-filter input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.t-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:600 calc(15px*var(--tune-size,1))/1 var(--ft);cursor:pointer}
.t-chip:hover{border-color:var(--ink)}
.t-filter input:checked + .t-chip{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.t-filter input:focus-visible + .t-chip{outline:3px solid var(--acc);outline-offset:3px}
.t-homes:has(#t-k-sale:checked) .t-card:not([data-k=sale]),.t-homes:has(#t-k-rent:checked) .t-card:not([data-k=rent]),.t-homes:has(#t-k-holiday:checked) .t-card:not([data-k=holiday]){display:none}
.t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
@media(max-width:1080px){.t-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.t-grid{grid-template-columns:minmax(0,1fr)}.t-filter{gap:8px}.t-chip{padding:0 14px;font-size:calc(14px*var(--tune-size,1))}}

.t-card{position:relative;display:grid;perspective:1800px;--hole:var(--paper)}
.t-turn-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.t-card-in{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.15,1)}
.t-face{grid-area:1/1;display:flex;flex-direction:column;min-width:0;background:var(--paper);border-radius:calc(6px*var(--tune-radius,1));backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent),0 22px 40px -30px rgb(10 20 40 / .5)}
.t-back{transform:rotateY(180deg)}
.t-turn-in:checked + .t-card-in{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.t-card-in{transition:none}}
.t-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:calc(6px*var(--tune-radius,1)) calc(6px*var(--tune-radius,1)) 0 0;background:var(--t-r4)}
.t-photo img{width:100%;height:100%;object-fit:cover}
.t-status{position:absolute;top:0;right:18px;--drop:12px;padding:calc(var(--drop) + 22px) 12px 9px;font:700 calc(13px*var(--tune-size,1))/16px var(--ft);background:linear-gradient(var(--deep),var(--deep)) 50% 0/2px calc(var(--drop) + 10px) no-repeat}
.t-status::before{top:calc(var(--drop) + 8px);width:8px;height:8px;margin-left:-4px;box-shadow:0 0 0 2px color-mix(in srgb,var(--ontag) 24%,var(--tag))}
.t-status::after{--t-cut:8px;border-radius:0 0 calc(5px*var(--tune-radius,1)) calc(5px*var(--tune-radius,1))}
.t-cd-body{flex:1;display:flex;flex-direction:column;padding:18px 22px 0}
.t-price{font:var(--hw) calc(calc(26px * var(--hz))*var(--tune-size,1))/1.1 var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t-cd-title{margin-top:10px;font:600 calc(18px*var(--tune-size,1))/1.3 var(--ft);letter-spacing:0}
.t-cd-place{margin-top:2px;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.t-cd-kind::before{content:"";display:inline-block;width:4px;height:4px;margin:0 10px 3px;border-radius:50%;background:currentColor}
.t-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:calc(14px*var(--tune-size,1));line-height:20px}
.t-specs li{display:flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:calc(4px*var(--tune-radius,1))}
.t-specs b{font-weight:700}
.t-specs .t-energy{padding:0;border:0}
.t-e{display:inline-flex;align-items:center;min-height:30px;padding:0 18px 0 10px;color:#111;font:800 calc(14px*var(--tune-size,1))/1 var(--ft);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);border-radius:calc(3px*var(--tune-radius,1)) 0 0 calc(3px*var(--tune-radius,1))}
.t-e-a{background:#50a967}.t-e-b{background:#88be67}.t-e-c{background:#c9d681}.t-e-d{background:#f2e88f}.t-e-e{background:#ebc070}.t-e-f{background:#ea9257}.t-e-g,.t-e-h,.t-e-i,.t-e-j{background:#d77165}
.t-turn{display:flex;align-items:center;gap:10px;margin-top:auto;padding:16px 0 18px;border-top:1px solid var(--line);color:var(--acc);font:600 calc(15px*var(--tune-size,1))/22px var(--ft);cursor:pointer;user-select:none}
.t-cd-body .t-turn{margin-top:18px}
.t-cd-body .t-turn{margin-top:auto}
.t-cd-body .t-specs{margin-bottom:18px}
.t-turn-i{position:relative;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.t-turn-i::after{content:"";position:absolute;right:-5px;top:-1px;border:5px solid transparent;border-top-color:currentColor;transform:rotate(30deg)}
.t-turn:hover{text-decoration:underline;text-underline-offset:.25em}
.t-turn-in:focus-visible + .t-card-in .t-turn{outline:3px solid var(--acc);outline-offset:-3px;border-radius:calc(4px*var(--tune-radius,1))}
.t-back{padding:0 22px}
.t-bk-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 12px;border-bottom:1px solid var(--line);font-size:calc(15px*var(--tune-size,1))}
.t-bk-head span{font-weight:600}
.t-bk-head b{font:var(--hw) calc(22px*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em}
.t-bk-plan{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0}
.t-back .t-turn{margin-top:0}
.t-mini .t-cd-body{padding-bottom:18px}
.t-mini .t-price{font-size:calc(22px * var(--hz));white-space:nowrap}
.t-mini .t-specs,.t-mini .t-cd-kind{display:none}
.t-mini .t-photo{aspect-ratio:2/1}
.t-mini .t-cd-body{padding:16px 20px 18px}
.t-mini .t-cd-title{margin-top:6px;font-size:calc(16px*var(--tune-size,1));text-wrap:balance;overflow-wrap:anywhere}

/* the floor plan: soft room fills, thick walls, doors and windows, names and sizes in the rooms */
.t-plan{display:block;width:100%;height:auto;max-height:300px;font-family:var(--ft)}
.t-pl-in{stroke:var(--ink);stroke-width:3}
.t-pl-out{stroke:var(--ink);stroke-width:7;stroke-linejoin:miter}
.t-pl-deck{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 5}
.t-pl-win{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.t-pl-glass{stroke:var(--ink);stroke-width:1}
.t-pl-gap{stroke:var(--paper);stroke-width:9}
.t-pl-leaf{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.t-pl-arc{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.t-pl-n{font-size:calc(17px*var(--tune-size,1));font-weight:600;fill:var(--ink);text-anchor:middle}
.t-pl-s{font-size:calc(14px*var(--tune-size,1));font-weight:400;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
.t-pl-north{fill:var(--ink)}

/* ---------- services: the key board (reference) and the fee sheet ---------- */
.t-keyboard{background:var(--deep);color:var(--ondeep);border-radius:calc(10px*var(--tune-radius,1));padding:clamp(28px,4.4vw,60px);--hole:var(--deep);--str:var(--rail)}
.t-kb-head{display:flex;justify-content:space-between;align-items:last baseline;gap:16px 40px;flex-wrap:wrap}
.t-kb-head h2{color:var(--ondeep)}
.t-kb-head p{max-width:44ch;color:var(--dmute)}
.t-hooks{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin-top:calc(clamp(32px,4vw,48px)*var(--tune-space,1))}
.t-hooks::before{content:"";position:absolute;left:calc(var(--t-pad) * -.6);right:calc(var(--t-pad) * -.6);top:0;height:4px;border-radius:calc(2px*var(--tune-radius,1));background:var(--rail)}
.t-n1{--n:1}.t-n2{--n:2}.t-n3{--n:3}.t-n4{--n:4}.t-n5{--n:5}
.t-svc-key{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding-top:34px}
.t-svc-key::before{content:"";position:absolute;top:-6px;left:0;width:16px;height:16px;border-radius:50%;border:3px solid var(--dmute);background:var(--deep)}
.t-hooks{grid-auto-rows:auto}
.t-svc-key h3{font-size:calc(23px*var(--tune-size,1))}
.t-svc-key h3 a{color:inherit;text-decoration:none}
.t-svc-key h3 a:hover{text-decoration:underline}
.t-svc-key > p:not(.t-fee){margin:10px 0 22px;color:var(--dmute);font-size:calc(16px*var(--tune-size,1));line-height:1.5}
.t-fee{display:flex;flex-direction:column;gap:2px}
.t-svc-key .t-fee{align-self:start;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--ondeep) 22%,transparent)}
.t-fee span{font-size:calc(14px*var(--tune-size,1));color:var(--dmute)}
.t-fee b{font:var(--hw) calc(21px*var(--tune-size,1))/1.25 var(--fd);letter-spacing:-.01em}
@media(max-width:900px){.t-hooks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media(max-width:560px){.t-hooks{grid-template-columns:minmax(0,1fr)}}

.t-sheet{border-top:3px solid var(--ink)}
.t-sheet li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);gap:8px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.t-sheet h3{font-size:calc(22px*var(--tune-size,1))}.t-sheet h3 a{color:inherit;text-decoration:none}.t-sheet h3 a:hover{text-decoration:underline}
.t-sheet p{color:var(--mute)}
.t-sh-fee{text-align:right;color:var(--ink)!important;font:var(--hw) calc(19px*var(--tune-size,1))/1.3 var(--fd)}
/* on a phone the name takes the width it needs first, the fee wraps (keeping its longest word) to make room */
@media(max-width:720px){.t-sheet li{grid-template-columns:auto minmax(min-content,1fr)}.t-sheet li > p:not(.t-sh-fee){grid-column:1/-1;grid-row:2}}

/* ---------- steps: a real sequence, big plain numerals on a hairline ---------- */
.t-steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:28px}
.t-steps li{padding-top:20px;border-top:1px solid var(--line)}
.t-steps li:last-child{border-top:3px solid var(--sign);padding-top:18px}
.t-step-n{display:block;margin-bottom:22px;font:var(--hw) calc(clamp(56px,6vw,80px)*var(--tune-size,1))/.9 var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.t-steps h3{font-size:calc(21px*var(--tune-size,1))}
.t-steps p{margin-top:8px;max-width:30ch;color:var(--mute);font-size:calc(16px*var(--tune-size,1));text-wrap:pretty}
@media(max-width:900px){.t-steps{grid-template-columns:minmax(0,1fr);gap:0}
.t-steps li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:18px;padding:20px 0 24px}.t-steps li:last-child{padding-top:18px}.t-step-n{grid-row:1/3;margin:0;font-size:calc(56px*var(--tune-size,1))}.t-steps p{max-width:none}}

/* ---------- key figures "strip": big numerals on a hairline ---------- */
.t-strip{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.t-strip > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-top:18px;border-top:1px solid var(--line)}
.t-strip dd{font:var(--hw) calc(clamp(52px,6vw,80px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.t-strip dt{margin-top:12px;font-size:calc(16px*var(--tune-size,1));color:var(--mute)}
@media(max-width:760px){.t-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}

/* ---------- the area ---------- */
.t-area .t-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.t-area-ph{border-radius:calc(6px*var(--tune-radius,1));overflow:hidden;aspect-ratio:4/3}
.t-area-ph img{width:100%;height:100%;object-fit:cover}
.t-area-txt p{margin-top:18px;color:var(--mute)}
.t-area-tag{display:flex;flex-direction:column;gap:2px;margin-top:28px!important;padding-top:16px;border-top:1px solid var(--line)}
.t-area-tag span{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}.t-area-tag b{font-size:calc(20px*var(--tune-size,1));color:var(--ink)}
@media(max-width:860px){.t-area .t-wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- reviews: little boards with a rider for the name, or one quote on the sign colour ---------- */
.t-quotes{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.t-quote{display:flex;flex-direction:column;gap:6px}
.t-rider{padding:10px 18px;background:var(--deep);color:var(--ondeep);border-radius:calc(5px*var(--tune-radius,1));font-weight:600;font-size:calc(15px*var(--tune-size,1));line-height:22px;text-align:center}
.t-quote blockquote{flex:1;padding:26px 26px 28px;background:var(--paper);border-radius:calc(5px*var(--tune-radius,1));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent);font-size:calc(18px*var(--tune-size,1));line-height:1.55}
.t-quote em,.t-one em{font-style:normal;font-weight:700}
@media(max-width:900px){.t-quotes{grid-template-columns:minmax(0,1fr)}}
.t-one{max-width:900px;margin:0 auto;padding:clamp(36px,5vw,64px);background:var(--sign);color:var(--onsign);border-radius:calc(6px*var(--tune-radius,1));text-align:center}
.t-one blockquote{font:var(--hw) calc(calc(clamp(26px,3vw,40px) * var(--hz))*var(--tune-size,1))/1.2 var(--fd);letter-spacing:-.02em;text-wrap:balance}
.t-one figcaption{margin-top:22px;font-weight:600}

/* ---------- closing ---------- */
.t-callout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px clamp(32px,6vw,96px);align-items:end;padding-top:calc(clamp(28px,3vw,40px)*var(--tune-space,1));border-top:3px solid var(--ink)}
.t-callout h2{font-size:calc(calc(clamp(36px,5vw,72px) * var(--hz))*var(--tune-size,1))}
.t-co-txt p{max-width:40ch;color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
.t-callout .t-acts{justify-content:flex-start;margin-top:24px}
@media(max-width:860px){.t-callout{grid-template-columns:minmax(0,1fr)}}
.t-close-board .t-sign{--chain-l:clamp(40px,5vw,64px)}
.t-close-board .t-ch-l,.t-close-board .t-ch-r{background:repeating-linear-gradient(to bottom,var(--chain) 0 8px,transparent 8px 11px)}
.t-close-board .t-close-beam{display:none}
.t-close-board .t-wrap{position:relative}
.t-close-board .t-wrap::before{content:"";position:absolute;left:var(--t-pad);right:var(--t-pad);top:0;height:4px;border-radius:calc(2px*var(--tune-radius,1));background:var(--line)}

/* ---------- services page ---------- */
.t-detail{display:grid;gap:clamp(28px,3.4vw,44px)}
.t-detail li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:start;scroll-margin-top:calc(var(--t-railh) + 24px)}
.t-dt-tag{display:flex;flex-direction:column;padding-top:18px;border-top:3px solid var(--ink)}
.t-dt-tag h2{font-size:calc(calc(clamp(26px,2.6vw,34px) * var(--hz))*var(--tune-size,1))}
.t-dt-tag .t-fee{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.t-dt-tag .t-fee span{color:var(--mute)}
.t-dt-body{padding-top:8px}
.t-dt-short{font-size:calc(clamp(19px,1.7vw,22px)*var(--tune-size,1));line-height:1.45;font-weight:600;margin-bottom:12px}
.t-dt-body > p:not(.t-dt-short){color:var(--mute)}
.t-dt-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:calc(15px*var(--tune-size,1))}
.t-dt-body dt{font-weight:600}
@media(max-width:780px){.t-detail li{grid-template-columns:minmax(0,1fr)}}
.t-rates{max-width:760px;margin:0 auto;padding:clamp(28px,4vw,48px);background:var(--paper);border-radius:calc(6px*var(--tune-radius,1));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.t-rates dl{margin-top:22px;border-top:3px solid var(--ink)}
.t-rates dl div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.t-rates dd{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.t-fq{border-top:3px solid var(--ink)}
.t-fq details{border-bottom:1px solid var(--line)}
.t-fq summary{position:relative;display:block;padding:20px 44px 20px 0;font:600 calc(19px*var(--tune-size,1))/1.4 var(--ft);cursor:pointer;list-style:none}
.t-fq summary::-webkit-details-marker{display:none}
.t-fq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;margin-top:-8px;background:linear-gradient(currentColor,currentColor) 50%/16px 2px no-repeat,linear-gradient(currentColor,currentColor) 50%/2px 16px no-repeat}
.t-fq details[open] summary::after{background:linear-gradient(currentColor,currentColor) 50%/16px 2px no-repeat}
.t-fq details p{padding:0 44px 22px 0;color:var(--mute)}
.t-fq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;border-top:3px solid var(--ink);padding-top:28px}
.t-fq-open dt{font-weight:600;font-size:calc(19px*var(--tune-size,1));line-height:1.4}.t-fq-open dd{margin-top:8px;color:var(--mute)}
@media(max-width:760px){.t-fq-open{grid-template-columns:minmax(0,1fr)}}

/* ---------- team page ---------- */
.t-people{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.t-n1.t-people{--n:2}
.t-person{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 26px 30px;background:var(--paper);border-radius:calc(6px*var(--tune-radius,1));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.t-mono{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sign);color:var(--onsign);font:var(--hw) calc(26px*var(--tune-size,1))/1 var(--fd);letter-spacing:-.02em}
.t-person h2{margin-top:18px;font-size:calc(24px*var(--tune-size,1))}
.t-role{margin-top:4px;font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.t-bio{margin-top:12px;font-size:calc(16px*var(--tune-size,1));color:var(--mute)}
.t-rows li{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.t-rows li:first-child{border-top:3px solid var(--ink)}
.t-rows h2{font-size:calc(24px*var(--tune-size,1))}
.t-rows .t-bio{margin:0;color:var(--mute)}
@media(max-width:760px){.t-people{grid-template-columns:minmax(0,1fr)}.t-rows li{grid-template-columns:56px minmax(0,1fr)}.t-rows .t-mono{width:56px;height:56px;font-size:calc(21px*var(--tune-size,1))}.t-rows .t-bio{grid-column:1/-1}}
.t-contact .t-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.t-contact{scroll-margin-top:calc(var(--t-railh) + 12px)}
.t-ct-info > p{margin-top:14px;color:var(--mute)}
.t-ct-info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;margin-top:26px;padding-top:20px;border-top:3px solid var(--ink)}
.t-ct-info dt{font-weight:600}.t-ct-info dd{overflow-wrap:anywhere}
.t-ct-week{margin-top:28px}.t-ct-week h3{font-size:calc(18px*var(--tune-size,1));margin-bottom:10px}
.t-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:clamp(22px,3vw,36px);background:var(--paper);border-radius:calc(6px*var(--tune-radius,1));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.t-form label{display:grid;gap:6px;font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.t-form .t-wide{grid-column:1/-1}
.t-form input,.t-form textarea,.t-form select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:calc(4px*var(--tune-radius,1));background:var(--paper);color:var(--ink);font:400 calc(16px*var(--tune-size,1))/1.4 var(--ft)}
.t-form input:focus,.t-form textarea:focus,.t-form select:focus{border-color:var(--acc);outline:2px solid var(--acc);outline-offset:0}
.t-fm-end{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.t-fm-end p{flex:1 1 220px;font-size:calc(14px*var(--tune-size,1));color:var(--mute)}
.t-reach{display:grid;padding:6px clamp(22px,3vw,36px);background:var(--paper);border-radius:calc(6px*var(--tune-radius,1));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.t-reach a{display:grid;gap:2px;padding:18px 0;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.t-reach a:first-child{border-top:0}
.t-reach span{font-size:calc(14px*var(--tune-size,1));color:var(--mute)}.t-reach b{font:var(--hw) calc(clamp(22px,2.6vw,32px)*var(--tune-size,1))/1.2 var(--fd);letter-spacing:-.02em;overflow-wrap:anywhere}
.t-reach a:hover b{text-decoration:underline}
@media(max-width:860px){.t-contact .t-wrap{grid-template-columns:minmax(0,1fr)}.t-form{grid-template-columns:minmax(0,1fr)}}
.t-legal{padding-bottom:calc(clamp(48px,6vw,80px)*var(--tune-space,1));font-size:calc(14px*var(--tune-size,1));color:var(--mute)}

/* opening hours as a week (shared/Week.astro) */
.wk{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;column-gap:16px}
.wk ol{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.wk li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:42px;border-bottom:1px solid var(--line);font-size:calc(15px*var(--tune-size,1))}
.wk-n{font-weight:600}
.wk-bar{position:relative;height:12px}
.wk-bar::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--sign);border-radius:calc(2px*var(--tune-radius,1))}
.wk-t{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk li.off{color:var(--mute)}.wk li.off .wk-n{font-weight:400}
.wk-scale{grid-column:2;display:flex;justify-content:space-between;margin:8px 0 0;font-size:calc(13px*var(--tune-size,1));color:var(--mute);font-variant-numeric:tabular-nums}

/* gallery (factory/sections/gallery): its --g-* tokens mapped to the look */
body.t-body{--g-max:var(--t-max);--g-pad:var(--t-pad);--g-bg:var(--bg);--g-paper:var(--paper);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--acc);--g-surface:var(--paper);--g-fd:var(--fd);--g-ft:var(--ft);--g-radius:calc(6px*var(--tune-radius,1));--g-top:var(--t-railh)}
.t-gal :is(.g,.g-sec){padding:calc(clamp(64px,8vw,112px)*var(--tune-space,1)) 0 0}

/* footer, legal pages, 404 */
/* legal pages and 404: plain text under the deep header bar */
.t-plain{padding-block:calc(clamp(48px,7vw,104px)*var(--tune-space,1))}
.t-plain h1{font-size:calc(calc(clamp(38px,5vw,68px) * var(--hz))*var(--tune-size,1));max-width:20ch}
.t-plain p,.t-plain li{max-width:68ch}
.t-foot{background:var(--deep);color:var(--ondeep);padding:calc(44px*var(--tune-space,1)) 0 calc(48px*var(--tune-space,1))}
.t-foot .t-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px}
.t-ft-name{font:700 calc(20px*var(--tune-size,1))/1.3 var(--fd)}
.t-ft-who p:not(.t-ft-name){color:var(--dmute);font-size:calc(15px*var(--tune-size,1))}
.t-ft-legal{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:calc(15px*var(--tune-size,1))}
.t-ft-legal a,.t-foot .langs a{color:var(--ondeep)}
.t-ft-legal a{text-decoration:none}.t-ft-legal a:hover,.t-ft-legal a[aria-current]{text-decoration:underline}
.t-foot .langs{margin-top:0}
.legal-page{max-width:760px;padding:calc(clamp(48px,6vw,88px)*var(--tune-space,1)) 0}
.legal-page h1{font-size:calc(clamp(38px,5vw,60px)*var(--tune-size,1));margin-bottom:28px}.legal-page h2{font-size:calc(26px*var(--tune-size,1));margin:calc(40px*var(--tune-space,1)) 0 12px}.legal-page h3{font-size:calc(20px*var(--tune-size,1));margin:28px 0 8px}
.legal-page p,.legal-page li{margin-bottom:10px}.legal-page ul{padding-left:20px;list-style:disc}
.legal-page table{border-collapse:collapse;margin:12px 0}.legal-page td,.legal-page th{padding:8px 16px 8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal-lang,.legal-page .draft{padding:14px 18px;background:var(--paper);border-radius:calc(4px*var(--tune-radius,1));margin-bottom:24px}
.nf{padding:calc(clamp(72px,10vw,144px)*var(--tune-space,1)) 0;max-width:720px}.nf h1{font-size:calc(clamp(40px,6vw,72px)*var(--tune-size,1))}.nf p{margin-top:20px;font-size:calc(19px*var(--tune-size,1));color:var(--mute)}
.nf ul{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
.nf ul a:not(.btn){font-weight:600}

/* ---------- motion ----------
   Basic: the cards turn (CSS), the nav's tags swing a little on hover. Advanced adds the hero moment below. */

/* Advanced hero moment, "the swing" (wow layer; .m-js = an Advanced page with its scripts running, see
   engine/shared/wow.js). The agent's board swings on its chains from the beam and settles like a real hanging sign
   (a damped pendulum, rotate only) while the photo behind eases back; afterwards the board leans toward the
   pointer. The "window" hero: the photo eases back, the glare runs across the glass once and the three homes drop
   in one after another.
   Transform and opacity only; reduced motion or no scripts: the hero is simply there. */
@media (prefers-reduced-motion:no-preference){
.m-js [data-wow] .t-swing{animation:t-swing 1.8s cubic-bezier(.33,0,.3,1) .1s backwards}
.m-js [data-wow] .t-hs-ph img{animation:t-push 2.2s cubic-bezier(.2,.7,.2,1) backwards}
.m-js [data-wow] .t-swing[data-tilt]{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.m-js [data-wow] .t-glare{animation:t-glare 1.4s cubic-bezier(.5,0,.3,1) .2s backwards}
.m-js [data-wow] .t-win-in > *{animation:t-drop .9s cubic-bezier(.3,1,.5,1) backwards}
.m-js [data-wow] .t-win-in > :nth-child(2){animation-delay:.12s}.m-js [data-wow] .t-win-in > :nth-child(3){animation-delay:.24s}
@keyframes t-swing{0%{rotate:-7deg}24%{rotate:5deg}45%{rotate:-2.8deg}64%{rotate:1.4deg}82%{rotate:-.5deg}100%{rotate:0deg}}
@keyframes t-push{from{scale:1.08}}
@keyframes t-glare{from{translate:-110% 0}}
@keyframes t-drop{from{translate:0 -28px;opacity:0}}
}
@media(min-width:1000px){.t-sec+.t-steps-sec{padding-top:calc(clamp(48px,6vw,88px)*var(--tune-space,1))}.t-keyboard{padding-block:calc(clamp(40px,5.2vw,76px)*var(--tune-space,1))}.t-hooks{margin-top:calc(clamp(40px,4.4vw,64px)*var(--tune-space,1))}.t-svc-key > p:not(.t-fee){margin:14px 0 38px;line-height:1.6}.t-svc-key{padding-top:calc(44px*var(--tune-space,1))}.t-svc-key .t-fee{padding-top:22px}.t-svc-key h3{margin-top:4px}.t-steps li{padding-top:38px}.t-step-n{margin-bottom:calc(44px*var(--tune-space,1))}.t-steps p{line-height:1.6}}

/* sales step 4 (photo-slice): on phones the first photo keeps more of the picture; the main button and the phone bar stay on the first screen */
@media (max-width:760px){.t-hero-sign{height:max(500px,calc(64svh - var(--t-railh)))}.t-hero-window{min-height:max(500px,calc(64svh - var(--t-railh)))}}