/* ==========================================================================================================
   SecureYrHome.com, redesign 2026-10: "After dark" (briefs/redesign-2026-10/secureyrhome/ART-DIRECTION.md).
   Graphite, one signal yellow, steel and white; Work Sans only; thin line drawings of locks, keys, doors and
   floor plans; every chamfer cut at the BOTTOM-RIGHT corner (buttons 10 px, plates 14 px, dark sections 48 px).
   Loaded after style.css (which keeps the inner-page rules of the earlier design). This file holds:
     1 fonts + tokens + base     2 buttons, text links, plates     3 header, mega menus, drawer
     4 home (hero, floor plan, brick bond, line map, key blade, lintel, masonry, plan table, door plates,
       magazine)                5 closing band (CtaBand)           6 footer (row index)
   ========================================================================================================== */

/* ---------- 1. fonts, tokens, base ---------- */
@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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}
@font-face{font-family:"Work Sans";src:url(../fonts/work-sans-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 --syh-graphite:#1B1E23;--syh-yellow:#FFC21A;--syh-yellow-hover:#FFD34D;--syh-steel:#F1F2F4;--syh-white:#FFFFFF;
 --syh-muted-dark:#A9AFB8;--syh-muted-light:#5B6470;--syh-line-dark:#3A3F47;--syh-input-dark:#6E7681;
 --syh-line-light:#D9DCE1;--syh-input-light:#777F8A;--syh-graphite-deep:#14171B;
 --syh-photo-grade:saturate(.62) contrast(1.06) brightness(.96);
 --syh-font:"Work Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
 --clip-btn:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
 --clip-btn-hover:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
 --clip-plate:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
 --clip-plate-in:polygon(0 0,100% 0,100% calc(100% - 13.6px),calc(100% - 13.6px) 100%,0 100%);
 --hdr:84px;
 --f:var(--syh-font);--bs-body-font-family:var(--syh-font)
}
@media (max-width:1199.98px){:root{--hdr:64px}}

body{font-family:var(--syh-font);font-size:17.5px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--syh-font)}
h1,h2{font-weight:800;letter-spacing:-.03em;line-height:1.06}
h3,h4{font-weight:700;letter-spacing:-.012em}
::selection{background:var(--syh-yellow);color:var(--syh-graphite)}
:focus-visible{outline:3px solid var(--syh-graphite);outline-offset:3px}
.on-dark :focus-visible,.y-hdr :focus-visible,.y-drawer :focus-visible,.y-foot :focus-visible,.y-cta :focus-visible,.h-hero :focus-visible,.fq-row .fq :focus-visible{outline-color:var(--syh-yellow)}
.container{max-width:1320px;--bs-gutter-x:48px}
@media (max-width:767.98px){.container{--bs-gutter-x:32px}}
.ic.flip{transform:scaleX(-1)}
/* line breaks (home, closing band, footer; inner pages set theirs in syh-inner.css): balanced headings, paragraphs
   without a lone last word, hyphenated compounds (sign-up, AI-driven) never split at a line end */
.nw{white-space:nowrap}
.y-home main :is(p,small,.if-ex),.y-cta p,.y-foot p{text-wrap:pretty}
.y-home main :is(h1,h2,h3,.lede,.sub,.lead-p),.y-cta :is(h2,p),.h-ins :is(.if-t,.ins-t) b,.tr-txt b,.h-guides .gd-body b,.ft-list b,.pc-f li>span{text-wrap:balance}
.y-skip{position:absolute;left:16px;top:12px;z-index:2000;padding:12px 18px;background:var(--syh-yellow);color:var(--syh-graphite);font-weight:600;text-decoration:none}
.y-skip:focus{color:var(--syh-graphite)}

/* ---------- 2. buttons: the chamfer (one shape, bottom-right corner cut like the tip of a key blade) ---------- */
.y-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px 0 26px;border:0;border-radius:0;background:none;font:600 16px/1 var(--syh-font);letter-spacing:0;white-space:nowrap;color:var(--syh-graphite);text-decoration:none;cursor:pointer;transition:color .2s}
.y-btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--syh-yellow);clip-path:var(--clip-btn);transition:clip-path .28s cubic-bezier(.2,.7,.2,1),background-color .2s}
.y-btn::after{content:none;position:absolute;inset:1.5px;z-index:-1;clip-path:polygon(0 0,100% 0,100% calc(100% - 9.4px),calc(100% - 9.4px) 100%,0 100%);transition:clip-path .28s cubic-bezier(.2,.7,.2,1),background-color .2s}
.y-btn:hover{color:var(--syh-graphite)}
.y-btn:hover::before{background:var(--syh-yellow-hover);clip-path:var(--clip-btn-hover)}
.y-btn:hover::after{clip-path:polygon(0 0,100% 0,100% calc(100% - 15.4px),calc(100% - 15.4px) 100%,0 100%)}
.y-btn:active{transform:translateY(1px)}
.y-btn .ic{width:18px;height:18px}
.y-btn.lg{height:56px;padding:0 32px 0 30px;font-size:16.5px}
.y-btn.sm{height:44px;padding:0 22px 0 20px;font-size:15px}
.y-btn.w-100{width:100%}
/* secondary on graphite: a 1.5 px yellow outline that fills on hover */
.y-btn.glass{color:#fff}
.y-btn.glass::after{content:"";background:var(--syh-graphite)}
.y-btn.glass:hover{color:var(--syh-graphite)}
.y-btn.glass:hover::after{background:var(--syh-yellow-hover)}
/* secondary on steel and white: a graphite outline */
.y-btn.outline{color:var(--syh-graphite)}
.y-btn.outline::before{background:var(--syh-graphite)}
.y-btn.outline::after{content:"";background:#fff}
.y-btn.outline:hover{color:#fff}
.y-btn.outline:hover::before{background:var(--syh-graphite)}
.y-btn.outline:hover::after{background:var(--syh-graphite)}
.y-btn.outline .ic{color:currentColor}
/* graphite fill (on the yellow plate) */
.y-btn.dark{color:#fff}
.y-btn.dark::before{background:var(--syh-graphite)}
.y-btn.dark:hover{color:var(--syh-yellow)}
.y-btn.dark:hover::before{background:var(--syh-graphite)}

/* text link with an arrow: graphite with a yellow underline on light, white with a yellow arrow on graphite */
.y-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;line-height:1.3;color:var(--syh-graphite);text-decoration:none}
.y-link>span{padding-bottom:3px;background:linear-gradient(var(--syh-yellow),var(--syh-yellow)) 0 100%/100% 2px no-repeat;transition:background-size .25s}
.y-link .ic{width:18px;height:18px;flex:0 0 18px;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.y-link:hover{color:var(--syh-graphite)}
.y-link:hover>span{background-size:100% 4px}
.y-link:hover .ic{transform:translateX(4px)}
.y-link.on-dark{color:#fff}
.y-link.on-dark>span{background-size:0 2px}
.y-link.on-dark .ic{color:var(--syh-yellow)}
.y-link.on-dark:hover{color:var(--syh-yellow)}
.y-link.on-dark:hover>span{background-size:100% 2px}

/* plate: square, 1 px line, 14 px chamfer at the bottom-right; the line turns yellow on hover (outer layer = the line) */
.plate{position:relative;display:block;padding:1px;background:var(--syh-line-dark);clip-path:var(--clip-plate);transition:background-color .25s}
.plate-in{display:block;position:relative;height:100%;background:var(--syh-graphite);clip-path:var(--clip-plate-in)}
a:hover>.plate,a:focus-visible>.plate{background:var(--syh-yellow)}

/* ---------- 3. header: transparent over a top-dark page's photo, graphite with a yellow foot line once stuck ---------- */
.y-hdr{position:fixed;top:0;left:0;right:0;z-index:1030;height:var(--hdr);background:var(--syh-graphite);box-shadow:0 1px 0 var(--syh-yellow);transition:background-color .3s,box-shadow .3s}
body.top-dark .y-hdr:not(.stuck):not(.menu-open){background:linear-gradient(180deg,rgba(27,30,35,.62),rgba(27,30,35,0));box-shadow:none}
.y-bar{position:relative;height:100%;display:flex;align-items:center;gap:24px}
.y-brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* the logo (new 17 Oct: the "Night plate" mark + the name, logo-light.svg, drawn on a 40-unit grid): 40 px tall from
   1200 px (1 unit = 1 px, so the plate and its keyline sit on whole pixels), 36 px on tablets, 30 / 27 / 26 px on phones */
.y-brand img{display:block;height:40px;width:auto}
.y-nav{height:100%;margin-left:4px}
.y-nav>ul{display:flex;align-items:stretch;height:100%;list-style:none;margin:0;padding:0}
.y-nav>ul>li{display:flex}
.nv-a{position:relative;display:flex;align-items:center;gap:6px;height:100%;padding:0 12px;font-weight:500;font-size:15px;letter-spacing:0;white-space:nowrap;color:#fff;text-decoration:none}
.nv-a .cv{width:14px;height:14px;color:var(--syh-yellow);transition:transform .25s}
.nv-a:hover,.has-mega.open>.nv-a{color:var(--syh-yellow)}
.has-mega.open>.nv-a .cv{transform:rotate(180deg)}
.nv-a.is-active::after,.is-active>.nv-a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--syh-yellow)}
.y-acts{margin-left:auto;display:flex;align-items:center;gap:22px}
.y-call{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;text-decoration:none}
.y-call:hover{color:var(--syh-yellow)}
.yc-ic{display:flex;color:var(--syh-yellow)}
.yc-ic .ic{width:20px;height:20px}
.yc-t small{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
.y-hjoin{flex:0 0 auto}
/* the header Join Us: graphite with a 1.5 px yellow keyline and a solid yellow cut at the bottom-right corner (the
   in-page calls to action stay solid yellow); it fills yellow on hover (cross-site QA 2026-10-14) */
.y-btn.y-hjoin{color:#fff}
.y-btn.y-hjoin::after{content:"";background:var(--syh-graphite);clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%)}
.y-btn.y-hjoin:hover{color:var(--syh-graphite)}
.y-btn.y-hjoin:hover::after{background:var(--syh-yellow-hover)}
/* the phone/tablet "Menu" button: a 1 px outline with the site's bottom-right chamfer (drawn by ::before, so the clip
   never cuts the focus ring: the clip cuts the corner, the 10 px diagonal is drawn back in) and a three-bar glyph */
.y-burger{position:relative;isolation:isolate;display:none;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;border:0;border-radius:0;background:none;color:#fff;font:600 15px/1 var(--syh-font);cursor:pointer}
.y-burger::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--syh-input-dark);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M10 0 0 10' stroke='%236E7681' stroke-width='2'/%3E%3C/svg%3E") 100% 100%/10px 10px no-repeat border-box;clip-path:var(--clip-btn);transition:border-color .2s}
.y-burger .ic{width:22px;height:22px;color:var(--syh-yellow)}
.y-burger:hover::before{border-color:var(--syh-yellow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M10 0 0 10' stroke='%23FFC21A' stroke-width='2'/%3E%3C/svg%3E")}
.yb-t{padding-right:2px}
@media (max-width:1399.98px){
 .nv-a{padding:0 10px}
 .nv-a.is-active::after,.is-active>.nv-a::after{left:10px;right:10px}
 .y-bar{gap:18px}
 .y-acts{gap:16px}
 .yc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .yc-ic .ic{width:22px;height:22px}
}
@media (max-width:1199.98px){
 .y-nav,.y-call,.mega{display:none}
 .y-burger{display:inline-flex}
 .y-brand img{height:36px}
 .y-acts{gap:12px}
}
@media (max-width:575.98px){.y-bar{gap:12px}.y-acts{gap:8px}.y-brand img{height:30px}.y-hjoin.sm{height:44px;padding:0 15px 0 14px;font-size:14.5px}.y-burger{height:44px;gap:7px;padding:0 8px 0 12px;font-size:14.5px}.y-burger .ic{width:20px;height:20px}}
/* (Join Us was hidden here under 360 px; since 2026-10-15 it stays in the bar on every phone: see "photos and
   devices" at the end of this file) */

/* mega menus: graphite panels under the bar, yellow line icons, rows divided by hairlines */
.mega{position:absolute;top:100%;left:calc(var(--bs-gutter-x) * .5);right:calc(var(--bs-gutter-x) * .5);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:40}
.has-mega.open>.mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.mega-in{position:relative;display:grid;gap:36px;padding:32px 36px 36px;background:var(--syh-graphite);border:1px solid var(--syh-line-dark);border-top:0;color:#fff;max-height:calc(100vh - var(--hdr) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;clip-path:var(--clip-plate)}
.mega-in.sol{grid-template-columns:minmax(0,1fr) 320px}
.mega-in.gd{grid-template-columns:320px minmax(0,1fr) 280px}
.mega-in.ins{grid-template-columns:340px minmax(0,1fr)}
.mg-cap{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
.mg-trades{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1px solid var(--syh-line-dark)}
.mg-trade,.fl-a{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 12px 16px 14px;border-bottom:1px solid var(--syh-line-dark);color:#fff;text-decoration:none;transition:background-color .2s}
.mg-trade::before,.fl-a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--syh-yellow);transform:scaleY(0);transition:transform .2s}
.mg-trade:hover,.fl-a:hover,.has-fly.open>.fl-a{color:#fff}
.mg-trade:hover::before,.fl-a:hover::before,.has-fly.open>.fl-a::before{transform:scaleY(1)}
.mg-ic{display:flex;flex:0 0 28px;color:var(--syh-yellow)}
.mg-ic svg{width:26px;height:26px;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.mg-trade b,.fl-a b{display:block;font-weight:600;font-size:15.5px;line-height:1.3}
.mg-trade small,.fl-a small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--syh-muted-dark)}
.fl-a{align-items:center}
.fl-a .go{margin-left:auto;width:16px;height:16px;flex:0 0 16px;transform:rotate(-90deg);color:var(--syh-input-dark)}
.has-fly.open>.fl-a .go{color:var(--syh-yellow)}
.mg-links{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:22px}
.mega-in.sol .mg-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start}
.mega-in.sol .mg-cap{grid-column:1/-1}
.mega-in.sol .mg-trades{display:contents}
.mega-in.sol .mg-trade:nth-child(-n+2){border-top:1px solid var(--syh-line-dark)}
.mega-in.sol .mg-links{flex-direction:column;align-items:flex-start;gap:14px;margin:0;padding:20px 14px;border-bottom:1px solid var(--syh-line-dark)}
.mg-links a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:#fff;text-decoration:none}
.mg-links a .ic{width:17px;height:17px;color:var(--syh-yellow)}
.mg-links a:hover{color:var(--syh-yellow)}
.mg-promo{display:flex;flex-direction:column;background:var(--syh-line-dark);padding:1px;clip-path:var(--clip-plate);color:#fff;text-decoration:none;transition:background-color .25s}
.mg-promo:hover{background:var(--syh-yellow);color:#fff}
.mg-promo:focus-visible{outline-offset:-4px}
.mp-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--syh-graphite)}
.mg-promo.tall .mp-img{aspect-ratio:4/3}
.mp-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mg-promo:hover .mp-img img{transform:scale(1.04)}
.mp-txt{display:block;flex:1;padding:18px 20px 22px;background:var(--syh-graphite);clip-path:var(--clip-plate-in)}
.mp-txt b{display:block;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.mp-txt small{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--syh-muted-dark)}
.mp-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;font-size:14.5px;color:var(--syh-yellow)}
.mp-go .ic{width:16px;height:16px}
.fl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--syh-line-dark)}
.fly{position:absolute;top:32px;bottom:36px;left:calc(36px + 320px + 36px);right:calc(36px + 280px + 36px);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;overflow:auto}
.mega-in.ins .fly{left:calc(36px + 340px + 36px);right:36px}
.has-mega.open .has-fly.open>.fly{opacity:1;visibility:visible;transition:opacity .2s}
.fly-list,.fly-posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--syh-line-dark)}
.fly-list a{display:flex;align-items:center;gap:14px;padding:15px 6px;border-bottom:1px solid var(--syh-line-dark);font-weight:600;font-size:16px;color:#fff;text-decoration:none}
.fly-list a:hover{color:var(--syh-yellow)}
.fi{display:flex;color:var(--syh-yellow)}
.fi .ic{width:18px;height:18px}
.fly-posts a{display:block;padding:14px 6px;border-bottom:1px solid var(--syh-line-dark);color:#fff;text-decoration:none}
.fly-posts a:hover span{color:var(--syh-yellow)}
.fly-posts time{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--syh-muted-dark)}
.fly-posts span{display:block;margin-top:4px;font-weight:600;font-size:15.5px;line-height:1.35;transition:color .2s}
.fly-all{display:inline-flex;align-items:center;gap:8px;margin:16px 6px 0;font-weight:600;font-size:14.5px;color:var(--syh-yellow);text-decoration:none}
.fly-all:hover{color:var(--syh-yellow-hover)}
.fly-all .ic{width:16px;height:16px}
@media (min-width:1200px) and (max-width:1399.98px){
 .mega-in{padding:28px 30px 30px;gap:28px}
 .mega-in.gd{grid-template-columns:290px minmax(0,1fr) 250px}
 .fly{top:28px;left:calc(30px + 290px + 28px);right:calc(30px + 250px + 28px)}
 .mega-in.ins{grid-template-columns:310px minmax(0,1fr)}
 .mega-in.ins .fly{left:calc(30px + 310px + 28px);right:30px}
}
@media (min-width:1200px) and (max-height:820px){
 .mg-trade small,.fl-a small{display:none}
 .mg-trade,.fl-a{align-items:center;padding-top:11px;padding-bottom:11px}
 .mp-img{aspect-ratio:2/1}
 .fly-list a,.fly-posts a{padding-top:10px;padding-bottom:10px}
}

/* drawer (phones and tablets): a full-height graphite sheet */
.y-drawer.offcanvas-end{width:100%;max-width:480px;border:0;background:var(--syh-graphite);color:#fff}
.y-drawer .offcanvas-header{height:var(--hdr);flex:0 0 auto;justify-content:space-between;gap:12px;padding:0 16px 0 20px;border-bottom:1px solid var(--syh-yellow)}
.y-drawer .y-brand img{height:30px}
.y-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--syh-input-dark);border-radius:0;background:none;color:#fff;cursor:pointer}
.y-close .ic{width:22px;height:22px}
.y-close:hover{border-color:var(--syh-yellow);color:var(--syh-yellow)}
.y-drawer .offcanvas-body{display:flex;flex-direction:column;padding:6px 20px 28px}
.dr{display:flex;flex-direction:column}
.dr-t,.dr-l{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0 2px;border:0;border-bottom:1px solid var(--syh-line-dark);background:none;color:#fff;font:600 19px/1.2 var(--syh-font);letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer}
.dr-t .ic{width:20px;height:20px;color:var(--syh-yellow);transition:transform .25s}
.dr-t[aria-expanded="true"] .ic{transform:rotate(180deg)}
.dr-t::before,.dr-l::before{content:"";position:absolute;left:-20px;top:16px;bottom:16px;width:3px;background:var(--syh-yellow);transform:scaleY(0);transition:transform .2s}
.dr-t[aria-expanded="true"]::before,.dr-t.is-active::before,.dr-l.is-active::before{transform:scaleY(1)}
.dr-l:hover,.dr-t:hover{color:var(--syh-yellow)}
.dr-sub{border-bottom:1px solid var(--syh-line-dark)}
.dr-sub>a:first-child,.dr-sub>.dr-grp:first-child{margin-top:8px}
.dr-sub>a:last-child,.dr-sub>.dr-grp:last-child{margin-bottom:12px}
.dr-sub a{display:flex;align-items:center;gap:14px;min-height:46px;padding:4px 2px;font-weight:500;font-size:16px;color:#fff;text-decoration:none}
.dr-sub a:hover{color:var(--syh-yellow)}
.dr-sub a svg{width:20px;height:20px;flex:0 0 20px;color:var(--syh-yellow);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.dr-h{margin:14px 0 2px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
.dr-foot{margin-top:auto;padding-top:28px;display:grid;gap:4px}
.dr-foot .y-btn{margin-bottom:14px}
.dr-c{display:flex;align-items:center;gap:12px;min-height:44px;color:#fff;font-weight:500;text-decoration:none}
.dr-c .ic{width:20px;height:20px;color:var(--syh-yellow)}
.dr-c:hover{color:var(--syh-yellow)}

/* ---------- 4. home ---------- */
.y-home{background:var(--syh-graphite)}
.y-home main{background:#fff}
.h-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end;margin-bottom:56px}
.h-head h2{margin:0;font-size:46px;line-height:1.06;letter-spacing:-.03em;color:inherit;max-width:15em}
.h-head .sub{margin:0;max-width:46ch;font-size:17.5px;line-height:1.6;color:var(--syh-muted-light)}
.on-dark .h-head .sub{color:var(--syh-muted-dark)}
.h-head-r{display:grid;justify-items:start;gap:18px}
.h-head .sl-nav{display:none}
.on-dark h2,.on-dark h3{color:#fff}
.lead-p{font-size:18.5px;line-height:1.6}
/* the 48 px chamfer at the bottom-right of a dark section (and the hero), cut in the next section's colour */
.h-hero::after,.h-trades::after,.h-product::after,.h-plans::after,.y-cta::after{content:"";position:absolute;right:0;bottom:0;z-index:4;width:48px;height:48px;clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.h-hero::after,.h-product::after,.h-plans::after{background:var(--syh-steel)}
.y-cta::after{background:var(--syh-graphite)}
/* the trades end in the product's deeper graphite, so their chamfer shows and the line map opens a new spread */
.h-trades::after{background:var(--syh-graphite-deep)}

/* 0. hero: full-bleed night photo (R3); from 768 px the text stands on a graphite plate (bottom-right chamfer, 28 px)
   on the five trades' threshold strip, so the photo shows clear beside it (cross-site QA 2026-10-14: the old site's
   photo, loose text on a shade and check-icon notes are gone). Pexels 6422937: a whole house at blue hour */
.h-hero{--clip-hplate:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:max(680px,92vh);padding:0;background:var(--syh-graphite);color:#fff;overflow:hidden}
.h-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.08);transform-origin:0 40%;filter:saturate(.7) contrast(1.04) brightness(.92);z-index:-2}
.h-hero .hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,30,35,.6) 0,rgba(27,30,35,0) 190px),linear-gradient(90deg,rgba(27,30,35,.42) 0,rgba(27,30,35,.12) 52%,rgba(27,30,35,0) 70%)}
.h-hero .hero-in{padding-top:calc(var(--hdr) + 56px);padding-bottom:0}
.h-hero .hero-txt{position:relative;max-width:828px;padding:50px 56px 0;background:var(--syh-graphite);clip-path:var(--clip-hplate)}
.h-hero h1{margin:0 0 22px;max-width:11.6em;font-size:62px;line-height:.98;letter-spacing:-.035em;font-weight:800;color:#fff}
.h-hero .lede{margin:0 0 32px;max-width:36em;font-size:18px;line-height:1.55;font-weight:400;color:rgba(241,242,244,.86)}
.h-hero .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
/* the three notes: plain text at the plate's foot, each led by a small yellow square (the footer's bullet), no icons */
.hero-notes{display:grid;grid-template-columns:max-content minmax(0,1.15fr) minmax(0,1fr);gap:8px 28px;margin:38px -56px 0;padding:20px 56px 26px;border-top:1px solid var(--syh-line-dark);list-style:none;font-size:14.5px;line-height:1.45;color:var(--syh-muted-dark)}
.hero-notes li{position:relative;padding-left:17px;text-wrap:balance}
.hero-notes li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--syh-yellow)}
.y-tradebar{position:relative;z-index:2;background:var(--syh-graphite);border-top:1px solid var(--syh-line-dark)}
.tb-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--syh-line-dark)}
.tb-i{position:relative;display:flex;align-items:center;gap:14px;min-height:100px;padding:22px 20px 22px 22px;border-right:1px solid var(--syh-line-dark);font-weight:600;font-size:16px;line-height:1.25;color:#fff;text-decoration:none;transition:color .2s}
.tb-i::before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:2px;background:var(--syh-yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.tb-i:hover,.tb-i:focus-visible{color:#fff}
.tb-i:hover::before,.tb-i:focus-visible::before{transform:scaleX(1)}
.tb-i:focus-visible{outline-offset:-4px}
.tb-ic{display:flex;flex:0 0 auto;color:var(--syh-yellow)}
.tb-ic .ic{width:30px;height:30px}
.tb-i .go{margin-left:auto;width:18px;height:18px;flex:0 0 18px;color:var(--syh-input-dark);transition:transform .25s,color .25s}
.tb-i:hover .go,.tb-i:focus-visible .go{color:var(--syh-yellow);transform:translateX(3px)}

/* 1. intro: floor-plan rooms (X27) */
.h-intro{background:var(--syh-steel);color:var(--syh-graphite);padding:128px 0 140px}
.h-intro-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 72px;align-items:center}
.h-intro h2{margin:0 0 26px;font-size:46px;line-height:1.06;color:var(--syh-graphite)}
.h-intro .lead-p{margin:0;max-width:40ch;color:var(--syh-graphite)}
/* centred on the plan's body: the 36 px top padding matches the dimension line above the plan */
.h-intro-t{padding-top:36px}
.fp-wrap{position:relative;padding:36px 0 0 36px}
.fp-dim{position:absolute;pointer-events:none}
.fp-dim-x{left:36px;right:0;top:12px;height:0;border-top:1.5px solid var(--syh-input-light)}
.fp-dim-y{top:36px;bottom:0;left:12px;width:0;border-left:1.5px solid var(--syh-input-light)}
.fp-dim::before,.fp-dim::after{content:"";position:absolute;width:1.5px;height:14px;background:var(--syh-input-light)}
.fp-dim-x::before{left:0;top:-7.75px;transform:rotate(45deg)}
.fp-dim-x::after{right:0;top:-7.75px;transform:rotate(45deg)}
.fp-dim-y::before{top:0;left:-7.75px;transform:rotate(45deg)}
.fp-dim-y::after{bottom:0;left:-7.75px;transform:rotate(45deg)}
.fp-plan{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a a" "b c";margin:0;padding:7.5px;list-style:none;border:1.5px solid var(--syh-graphite)}
.fp-plan::before{content:"";position:absolute;inset:6px;border:1.5px solid var(--syh-graphite);pointer-events:none}
.fp-room{position:relative;display:flex;align-items:flex-start;gap:20px;padding:40px 36px 44px}
.fp-r1{grid-area:a;padding:44px 40px 52px}
.fp-r2{grid-area:b;padding-top:60px;padding-bottom:84px}
.fp-r3{grid-area:c;padding-top:60px;padding-bottom:84px;padding-left:48px}
.fp-r2::before,.fp-r3::before{content:"";position:absolute;left:0;right:0;top:0;height:7.5px;border-top:1.5px solid var(--syh-graphite);border-bottom:1.5px solid var(--syh-graphite);pointer-events:none}
.fp-r3::after{content:"";position:absolute;left:0;top:6px;bottom:0;width:7.5px;border-left:1.5px solid var(--syh-graphite);border-right:1.5px solid var(--syh-graphite);pointer-events:none}
.fp-room .pl-ic{display:flex;flex:0 0 auto;width:auto;height:auto;margin:0;border-radius:0;background:none;color:var(--syh-graphite)}
.fp-room .pl-ic .ic{width:34px;height:34px}
.fp-room h3{margin:2px 0 10px;font-size:22px;line-height:1.2;color:var(--syh-graphite)}
.fp-room p{margin:0;max-width:36ch;font-size:16px;line-height:1.6;color:var(--syh-muted-light)}
.fp-r1 p{max-width:31ch}
.fp-stair{position:absolute;right:44px;top:50%;width:170px;height:68px;margin-top:-34px;color:var(--syh-input-light);pointer-events:none}
.fp-door,.fp-win{position:absolute;display:block;overflow:visible;color:var(--syh-graphite);pointer-events:none}
.fp-patch{fill:var(--syh-steel)}
.fp-arc{stroke:var(--syh-input-light)}
.fp-door{width:64px;height:64px}
.fp-d1{top:0;left:22%}
.fp-d2{top:0;right:18%;transform:scaleX(-1)}
.fp-d3{left:0;bottom:16px;transform:rotate(-90deg)}
.fp-entry{bottom:-9px;right:16%;transform:rotate(180deg)}
.fp-win{width:96px;height:12px}
.fp-w1{top:-9px;right:12%}
.fp-w2{right:-9px;top:44%;width:12px;height:96px}

/* 2. trades: brick-bond plates (X28) */
.h-trades{position:relative;background:var(--syh-graphite);color:#fff;padding:124px 0 132px}
.bb-wrap{position:relative}
.bb-half{display:none}
.tr-card{display:block;height:100%;color:#fff;text-decoration:none}
.tr-card:hover{color:#fff}
.tr-card .plate{height:100%}
.tr-card .plate-in{display:flex;flex-direction:column}
/* one grade for every photo inside the page (trades, lintel, guides, FAQ, insights): colour pulled down, a cool
   graphite wash over it, so the stock photos read as one night-side family next to the single yellow */
.tr-img,.h-rules .ru-photo,.h-guides .gd-img,.h-faq .fq-ph,.h-ins .if-img,.h-ins .ins-img{position:relative}
.tr-img::after,.h-rules .ru-photo::after,.h-guides .gd-img::after,.h-faq .fq-ph::after,.h-ins .if-img::after,.h-ins .ins-img::after{content:"";position:absolute;inset:0;background:#24364A;mix-blend-mode:soft-light;opacity:.5;pointer-events:none;transition:opacity .4s}
.tr-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#000}
.tr-img img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--syh-photo-grade);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s}
.tr-card:hover .tr-img img{transform:scale(1.04);filter:saturate(.85) contrast(1.06)}
.tr-card:hover .tr-img::after{opacity:.25}
.tr-txt{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.tr-ic{display:flex;color:var(--syh-yellow)}
.tr-ic .ic{width:30px;height:30px}
.tr-txt b{display:block;margin:16px 0 8px;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.tr-txt small{display:block;font-size:15px;line-height:1.55;color:var(--syh-muted-dark)}
.tr-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-weight:600;font-size:15px;color:var(--syh-yellow)}
.tr-go .ic{width:17px;height:17px;transition:transform .25s}
.tr-card:hover .tr-go .ic{transform:translateX(4px)}
@media (min-width:992px){
 .bb-wrap{--bb-gap:24px}
 /* two classes: the generic .y-slider .sl-view rule (margin 0 -10px) comes later in this file */
 .y-slider.tr-slider .sl-view{overflow:visible;margin:0;padding:0}
 .tr-slider .sl-track{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--bb-gap);transform:none!important;transition:none}
 .tr-slider .y-slide{display:flex;flex-basis:auto!important;padding:0;grid-column:span 2}
 .tr-slider .y-slide:nth-child(4){grid-column:2/span 2}
 .tr-slider .y-slide:nth-child(5){grid-column:4/span 2}
 .tr-slider .sl-dots{display:none}
 .bb-half{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;width:calc((100% - 5 * var(--bb-gap)) / 6);height:calc(50% - var(--bb-gap) / 2);color:var(--syh-yellow);pointer-events:none}
 .bb-l{left:0}
 .bb-r{right:0}
 .bb-art{width:100%;max-width:150px;height:auto;opacity:.85}
 .bb-lit{stroke-width:3}
}

/* sliders (trades below 992 px, guides below 1200 px): plain track, square arrow buttons, short bar dots */
.y-slider .sl-view{overflow:hidden;margin:0 -10px;padding:0 0 4px}
.sl-track{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.y-slide{display:flex;flex:0 0 33.333%;padding:0 10px}
.y-slide>*{width:100%}
/* pager: square status lights, like the LEDs on an alarm panel (outline off, yellow on); 24 x 44 px tap areas */
.sl-dots{display:flex;justify-content:center;gap:0;margin-top:14px}
.sl-dots button{position:relative;width:24px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.sl-dots button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1.5px solid var(--syh-graphite);background:transparent;transition:background-color .25s,border-color .25s}
.on-dark .sl-dots button::before{border-color:var(--syh-input-dark)}
.sl-dots button.on::before{background:var(--syh-yellow)}
.on-dark .sl-dots button.on::before{border-color:var(--syh-yellow)}
.sl-dots button:hover::before{border-color:var(--syh-yellow)}
.sl-dots button:focus-visible{outline-offset:-6px}
.sl-nav{display:flex;gap:8px}
.sl-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--syh-input-light);border-radius:0;background:none;color:var(--syh-graphite);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.sl-btn .ic{width:20px;height:20px}
.sl-btn:hover:not(:disabled){background:var(--syh-graphite);border-color:var(--syh-graphite);color:#fff}
.on-dark .sl-btn{border-color:var(--syh-input-dark);color:#fff}
.on-dark .sl-btn:hover:not(:disabled){background:var(--syh-yellow);border-color:var(--syh-yellow);color:var(--syh-graphite)}
.sl-btn:disabled{opacity:.35;cursor:default}

/* 3. product: line-map spread (X29) */
.h-product{position:relative;margin-top:-1px;background:var(--syh-graphite-deep);color:#fff}
.h-product .tm-road>g>path:last-child{stroke:var(--syh-graphite-deep)}
.h-product .tm-home{fill:var(--syh-graphite-deep)}
.pd-art{position:absolute;left:0;top:0;bottom:0;width:min(calc(50% + 100px),calc(100% - 560px));overflow:hidden;color:var(--syh-yellow)}
.pd-art svg{position:absolute;inset:0;width:100%;height:100%}
.tm-street{opacity:.26}
.tm-road>g>path:first-child{stroke-opacity:.62}
.tm-band{opacity:.5}
.tm-out{opacity:.4}
.tm-legend{opacity:.6}
.h-product-in{max-width:1320px;margin:0 auto;padding:0 24px}
.pd-txt{width:460px;margin-left:auto;padding:128px 0 140px}
.pd-txt h2{margin:0 0 22px;font-size:46px;line-height:1.06}
.pd-txt .lead-p{margin:0;font-size:17.5px;color:rgba(241,242,244,.8)}
.ft-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:38px 0 40px;padding:0;list-style:none}
.ft-list .plate-in{display:flex;flex-direction:column;gap:16px;padding:22px 20px 26px}
.ft-ic{display:flex;color:var(--syh-yellow)}
.ft-ic .ic{width:28px;height:28px}
.ft-list b{display:block;font-weight:700;font-size:16.5px;line-height:1.3;color:#fff}
.ft-list small{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--syh-muted-dark)}
/* in the 2 x 2, every title keeps two lines, so the texts of a row start level */
@media (min-width:1200px),(min-width:768px) and (max-width:991.98px){.ft-list b{min-height:2.6em}}

/* 4. steps: key-bitting steps (X30) */
.h-steps{background:var(--syh-steel);color:var(--syh-graphite);padding:104px 0 96px}
.st-key{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;color:var(--syh-graphite)}
.st-bow{display:block;width:112px;height:104px;color:var(--syh-graphite)}
.st-line{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 32px;margin:0;padding:120px 0 0;list-style:none}
.st-line::before{content:"";position:absolute;left:0;right:0;top:20px;height:64px;pointer-events:none;background:
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/calc(100% - 40px) 1.5px no-repeat,
 linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 100%/calc(100% - 40px) 1.5px no-repeat,
 linear-gradient(var(--syh-input-light),var(--syh-input-light)) 0 31.25px/calc(100% - 64px) 1.5px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M0 .75H24L39.25 30V40L24 63.25H0' fill='none' stroke='%231B1E23' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 100% 0/40px 64px no-repeat}
.st-line li{position:relative}
.st-cut{position:absolute;left:0;top:-100px;width:56px;height:64px;overflow:visible;color:var(--syh-graphite)}
.st-patch{fill:var(--syh-steel)}
.st-n{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;color:var(--syh-graphite)}
.st-n::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--syh-yellow);clip-path:var(--clip-btn)}
.st-n::before{content:"";position:absolute;left:21.25px;bottom:100%;width:1.5px;height:36px;background:var(--syh-input-light)}
.st-line h3{margin:22px 0 10px;font-size:20px;line-height:1.25;color:var(--syh-graphite)}
.st-line p{margin:0;font-size:15.5px;line-height:1.6;color:var(--syh-muted-light)}
/* under the blade every title keeps two lines, so the five texts start on one line */
@media (min-width:992px){.st-line h3{min-height:2.5em}}

/* 5. rules: photo lintel and plates (X31) */
.h-rules{background:#fff;color:var(--syh-graphite);padding:128px 0 136px}
/* the head stacks in one left column (h2, then the lead under it), so the lintel photo carries the width */
.ru-head{display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px;justify-items:start;margin-bottom:48px}
.ru-head h2{margin:0;font-size:46px;line-height:1.06;max-width:14em;color:var(--syh-graphite)}
.ru-head .lead-p{margin:0;max-width:46ch;font-size:17.5px;color:var(--syh-muted-light)}
.ru-photo{position:relative;padding:0}
.h-rules .ru-photo>img{display:block;width:100%;height:auto;aspect-ratio:21/6;object-fit:cover;border-radius:0;filter:var(--syh-photo-grade)}
/* the yellow plate takes exactly one of four equal plate widths (the three white plates share the rest, gaps 20 px) */
.ru-row{display:grid;grid-template-columns:calc((100% - 60px) / 4) minmax(0,1fr);gap:20px}
.ru-card.plate{background:var(--syh-yellow)}
.ru-card .plate-in{background:var(--syh-yellow);padding:30px 26px 34px;color:var(--syh-graphite)}
.ru-card .ic{width:32px;height:32px;color:var(--syh-graphite)}
.ru-card p{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--syh-graphite)}
.ru-card b{display:block;margin:0 0 10px;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.012em}
.pr-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.pr-list .plate{background:var(--syh-line-light);height:100%}
.pr-list .plate-in{background:#fff;padding:30px 26px 34px}
.h-rules .pr-ic{display:flex;align-items:flex-start;justify-content:flex-start;width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;color:var(--syh-graphite)}
.h-rules .pr-ic .ic{width:32px;height:32px}
.pr-list h3{margin:18px 0 10px;font-size:20px;line-height:1.25;color:var(--syh-graphite)}
.pr-list p{margin:0;font-size:15.5px;line-height:1.6;color:var(--syh-muted-light)}

/* 6. guides: masonry of plate cards (A6) */
.h-guides{background:var(--syh-steel);color:var(--syh-graphite);padding:116px 0 104px}
.h-guides .gd-card{display:block;height:auto;border:0;border-radius:0;background:none;overflow:visible;color:var(--syh-graphite);text-decoration:none;box-shadow:none;transform:none}
.h-guides .gd-card:hover{box-shadow:none;transform:none;color:var(--syh-graphite)}
.h-guides .plate{background:var(--syh-line-light)}
.h-guides .plate-in{background:#fff}
.h-guides .gd-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--syh-line-light)}
.h-guides .gd-img img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--syh-photo-grade);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.h-guides .gd-card:hover .gd-img img{transform:scale(1.04)}
.h-guides .gd-body{display:flex;flex-direction:column;padding:20px 22px 26px}
.h-guides .gd-g{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--syh-muted-light)}
.h-guides .gd-g .ic{width:18px;height:18px;flex:0 0 18px;color:var(--syh-graphite)}
.h-guides .gd-body b{margin:12px 0 8px;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.012em;color:var(--syh-graphite)}
.h-guides .gd-body small{font-size:15px;line-height:1.55;color:var(--syh-muted-light)}
.h-guides .gd-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-top:0;font-weight:600;font-size:15px;color:var(--syh-graphite)}
.h-guides .gd-go .ic{width:17px;height:17px;color:var(--syh-graphite);transition:transform .25s}
.h-guides .gd-card:hover .gd-go .ic{transform:translateX(4px)}
@media (max-width:1199.98px){
 .gd-slider .gd-card,.gd-slider .plate{height:100%}
 .gd-slider .plate-in{display:flex;flex-direction:column}
 .gd-slider .gd-body{flex:1 1 auto}
 .gd-slider .gd-go{margin-top:auto;padding-top:18px}
}
/* from 1200 px the slider is off: the head runs the full width (h2 left, intro right) and under it the eight cards
   form a true four-column masonry, two per column, the photo heights stepping 3:4 / 4:3 / 1:1 (cross-site QA
   2026-10-14: no head column with a card under it, no offset column) */
@media (min-width:1200px){
 .h-guides .h-head{margin-bottom:56px}
 .gd-slider .sl-view{overflow:visible;margin:0;padding:0}
 .gd-slider .sl-track{display:block!important;column-count:4;column-gap:24px;width:auto!important;transform:none!important;transition:none}
 .gd-slider .y-slide{display:block;flex-basis:auto!important;width:100%;padding:0;margin:0 0 24px;break-inside:avoid}
 .gd-slider .y-slide:nth-child(2n){break-after:column}
 .gd-slider .sl-dots{display:none}
 .gd-card.r34 .gd-img{aspect-ratio:3/4}
 .gd-card.r11 .gd-img{aspect-ratio:1/1}
 .gd-card.r43 .gd-img{aspect-ratio:4/3}
}

/* 7. plans: three full-width plates stacked (cross-site QA 2026-10-14: no centred head over three columns, no raised
   yellow column): plan and price on the left, the blurb and the features in two columns in the middle, Get Started on
   the right; the recommended plate is marked by a yellow keyline and a yellow chamfer */
.h-plans{position:relative;background:var(--syh-graphite);color:#fff;padding:144px 0 136px}
.h-plans .pc-head{margin-bottom:56px}
.pc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0}
.pc{--pl-line:var(--syh-line-dark);--pl-w:1px;position:relative;display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr) 196px;grid-template-areas:"top b foot" "price f foot";grid-template-rows:auto 1fr;column-gap:48px;padding:34px 40px 36px;color:#fff;
 box-shadow:inset 0 0 0 var(--pl-w) var(--pl-line);
 background:linear-gradient(to bottom right,transparent calc(50% - 1.1px),var(--pl-line) calc(50% - 1.1px),var(--pl-line) 50%,transparent 50%) 100% 100%/22px 22px no-repeat,#20242A;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.pc-top{grid-area:top;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:0 0 14px}
.pc-tag{flex:0 0 100%;order:-1;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
.pc h3{margin:0;font-size:30px;font-weight:700;line-height:1.1;color:#fff}
.pc-badge{display:inline-block;margin:0;padding:6px 10px 5px;background:var(--syh-yellow);color:var(--syh-graphite);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.pc-price{grid-area:price;align-self:start;display:flex;align-items:flex-end;gap:14px;margin:0;padding:6px 0 0}
.pc-price b{font-size:58px;line-height:.9;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pc-price span{display:flex;flex-direction:column;padding-bottom:3px;font-size:14px;line-height:1.35;color:var(--syh-muted-dark)}
.pc-price s{color:var(--syh-muted-dark);text-decoration-thickness:1.5px}
.pc-b{grid-area:b;margin:0;padding:0 0 18px;max-width:64ch;font-size:15.5px;line-height:1.55;color:rgba(241,242,244,.8)}
.pc-f{grid-area:f;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start;margin:0;padding:0;list-style:none}
.pc-f li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--syh-line-dark);font-size:15px;line-height:1.5;color:#fff}
.pc-f .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--syh-yellow)}
.pc-foot{grid-area:foot;align-self:end;padding:0}
.pc.featured{--pl-line:var(--syh-yellow);--pl-w:1.5px}
.pc.featured .y-btn.dark{color:var(--syh-graphite)}
.pc.featured .y-btn.dark::before{background:var(--syh-yellow)}
.pc.featured .y-btn.dark:hover::before{background:var(--syh-yellow-hover)}
.pc-badge{order:2}
.pc .y-btn.glass::after{background:#20242A}
.pc-more{margin:48px 0 0}

/* 8. FAQ: door plates, a horizontal accordion (X33): four question plates (the open one widens), then the photo plate
   with the call and email lines (the plan's fifth plate) */
.h-faq{background:var(--syh-steel);color:var(--syh-graphite);padding:136px 0 136px}
.h-faq .h-head h2{margin:0;font-size:46px}
.h-faq .h-head .lead-p{margin:0;max-width:44ch;font-size:17.5px;color:var(--syh-muted-light)}
.fq-board{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.h-faq .fq-card{display:block;margin:0;border:0;border-radius:0;background:var(--syh-graphite);overflow:visible}
.h-faq .fq-card .plate-in{display:flex;flex-direction:column;background:var(--syh-graphite)}
.h-faq .fq-ph{display:block;flex:1 1 auto;min-height:190px;aspect-ratio:auto;overflow:hidden}
.h-faq .fq-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--syh-photo-grade)}
.h-faq .fq-lines{display:block;flex:0 0 auto;padding:6px 22px 14px}
.h-faq .ct-line{display:flex;align-items:center;gap:14px;padding:14px 0;color:#fff;font-weight:600;font-size:16px;text-decoration:none}
.h-faq .ct-line+.ct-line{border-top:1px solid var(--syh-line-dark)}
.h-faq .ct-line:hover{color:var(--syh-yellow)}
.h-faq .ct-ic{display:flex;width:auto;height:auto;flex:0 0 auto;border-radius:0;background:none;color:var(--syh-yellow)}
.h-faq .ct-ic .ic{width:22px;height:22px}
.h-faq .ct-line small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-muted-dark)}
.h-faq .ct-line:focus-visible{outline-color:var(--syh-yellow);outline-offset:2px}
.fq-row .fq{position:relative;margin:0 0 12px;border:0;border-radius:0;background:var(--syh-graphite);color:#fff;clip-path:var(--clip-plate);box-shadow:none}
.fq-row .fq:last-child{margin-bottom:0}
.fq-row .fq.open{border:0;box-shadow:none}
.fq-row h3{margin:0}
.fq-row .fq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:22px 22px 22px 24px;border:0;background:none;text-align:left;font:600 17px/1.35 var(--syh-font);letter-spacing:-.005em;color:#fff;cursor:pointer}
.fq-row .fq-q:hover{color:var(--syh-yellow)}
.fq-row .fq-q:focus-visible{outline-offset:-4px}
/* the toggle is the door's lever (no box): level when the plate is closed, pressed down 40deg when it is open. Only
   the handle turns, about the centre of its rose, so the rose stays upright and the open lever never reads as a 'T' */
.fq-row .fq-q i{display:flex;align-items:center;justify-content:flex-start;width:54px;height:32px;flex:0 0 54px;border:0;border-radius:0;background:none;color:var(--syh-muted-dark);transform:none;transition:color .2s}
.fq-row .fq-lever{display:block;width:54px;height:32px;overflow:visible}
.fq-row .fq-lever path{vector-effect:non-scaling-stroke}
.fq-row .fq-lever path:last-child{transform-box:fill-box;transform-origin:100% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fq-row .fq-q:hover i,.fq-row .fq.open .fq-q i{background:none;color:var(--syh-yellow);transform:none}
.fq-row .fq.open .fq-lever path:last-child{transform:rotate(-40deg)}
.fq-row .fq-a{padding:0 24px 30px}
.fq-row .fq-a p{margin:0;max-width:60ch;font-size:16px;line-height:1.62;color:rgba(241,242,244,.84)}
@media (min-width:1200px){
 .fq-board{grid-template-columns:minmax(0,1fr) 264px;align-items:stretch}
}
/* 1200-1399: a narrower photo plate and open plate keep the closed doors wide enough for 3-4 line questions */
@media (min-width:1200px) and (max-width:1399.98px){
 .fq-board{grid-template-columns:minmax(0,1fr) 220px}
 .fq-board .fq-row .fq.open{flex-grow:1.6}
}
/* desktop: four door plates side by side, the open one about 1.8 times as wide */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
 .fq-row{display:flex;gap:12px;align-items:stretch;min-height:380px}
 .fq-row .fq{display:flex;flex-direction:column;flex:1 1 0;min-width:0;margin:0;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1)}
 .fq-row .fq.open{flex-grow:1.8}
 .fq-row h3{display:flex;flex:1 1 auto}
 .fq-row .fq.open h3{flex:0 0 auto}
 .fq-row .fq-q{position:static;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:26px 18px 22px 22px;font-size:16px;line-height:1.3}
 .fq-row .fq-q i{height:44px}
 .fq-row .fq-q::after{content:"";position:absolute;inset:0;z-index:1}
 /* a closed plate is a panelled door: two moulded panels (the question at the head of the upper one) and between
    them the lock rail, with the lever at handle height on the latch edge */
 .fq-row .fq:not(.open){--rail:54%}
 .fq-row .fq:not(.open)::before,.fq-row .fq:not(.open)::after{content:"";position:absolute;left:10px;right:10px;border:1px solid var(--syh-line-dark);pointer-events:none;transition:border-color .25s}
 .fq-row .fq:not(.open)::before{top:10px;bottom:calc(100% - var(--rail) + 30px)}
 .fq-row .fq:not(.open)::after{top:calc(var(--rail) + 30px);bottom:10px}
 .fq-row .fq:not(.open):hover::before,.fq-row .fq:not(.open):hover::after{border-color:var(--syh-input-dark)}
 .fq-row .fq:not(.open) .fq-q span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;text-wrap:balance}
 .fq-row .fq:not(.open) .fq-q i{position:absolute;right:20px;top:calc(var(--rail) - 22px)}
 /* the open plate: its lever, pressed, beside the question. One door always stays open here: a click on the open
    question does nothing (a click on another door swaps them); the keyboard still toggles it as before */
 .fq-row .fq.open .fq-q{padding:28px 80px 4px 24px;font-size:21px;line-height:1.25;letter-spacing:-.012em;pointer-events:none}
 .fq-row .fq.open .fq-q::after{content:none}
 .fq-row .fq.open .fq-q i{position:absolute;right:22px;top:19px}
 .fq-row .collapsing{transition:none}
 .fq-row .fq-a{padding:20px 24px 32px}
}
@media (max-width:1199.98px){
 .fq-board .fq-card{order:2;margin-top:20px}
}
@media (min-width:768px) and (max-width:1199.98px){
 .h-faq .fq-card .plate-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .h-faq .fq-ph{min-height:220px}
 .h-faq .fq-lines{align-self:center;padding:14px 28px}
}

/* 9. insights: magazine, the lead story beside a ruled list (A5) */
.h-ins{background:#fff;color:var(--syh-graphite);padding:120px 0 136px}
.h-ins .h-head{grid-template-columns:minmax(0,1fr) auto}
.ins-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.h-ins .ins-feat{display:block;background:var(--syh-graphite);color:#fff;text-decoration:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.h-ins .ins-feat:hover{color:#fff}
.h-ins .if-img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--syh-line-dark)}
/* article photos come from the admin in any colour, so they take a firmer version of the grade */
.h-ins .if-img img,.h-ins .ins-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.42) contrast(1.06) brightness(.96);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.h-ins .ins-feat:hover img,.h-ins .ins-row:hover img{transform:scale(1.035)}
/* the index thumbnails are small and their colours unpredictable: cool monochrome, colour back on hover */
.h-ins .ins-img img{filter:grayscale(1) contrast(1.08) brightness(.98);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.h-ins .ins-row:hover .ins-img img{filter:saturate(.8)}
.h-ins .if-t{display:block;padding:26px 34px 34px}
/* the lead story is a graphite plate under its photo (cross-site QA 2026-10-14); the topic line in yellow */
.h-ins .ins-feat .if-t small{color:var(--syh-muted-dark)}
.h-ins .ins-feat .yc-cat{color:var(--syh-yellow)}
.h-ins .ins-feat .if-t b{color:#fff}
.h-ins .ins-feat .if-ex{color:var(--syh-muted-dark)}
.h-ins .if-t small,.h-ins .ins-t small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:14px;line-height:1.4;color:var(--syh-muted-light)}
.h-ins .yc-cat{display:inline;padding:0;border-radius:0;background:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--syh-graphite)}
.h-ins .if-t b{display:block;margin:14px 0 12px;max-width:22em;font-size:31px;line-height:1.14;font-weight:800;letter-spacing:-.025em}
.h-ins .if-ex{display:block;max-width:60ch;font-size:16.5px;line-height:1.6;color:var(--syh-muted-light)}
.h-ins .ins-feat:hover b,.h-ins .ins-row:hover b{text-decoration:underline;text-decoration-color:var(--syh-yellow);text-decoration-thickness:3px;text-underline-offset:5px}
.h-ins .ins-list{display:block;border-top:2px solid var(--syh-graphite)}
.h-ins .ins-row{position:relative;display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:start;padding:28px 0;border-bottom:1px solid var(--syh-line-light);color:var(--syh-graphite);text-decoration:none}
/* the index rows: chamfered thumbnails, a yellow bar at the row's left edge on hover */
.h-ins .ins-row::before{content:"";position:absolute;left:-18px;top:28px;bottom:28px;width:3px;background:var(--syh-yellow);transform:scaleY(0);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.h-ins .ins-row:hover::before,.h-ins .ins-row:focus-visible::before{transform:scaleY(1)}
.h-ins .ins-row:last-child{padding-bottom:28px}
.h-ins .ins-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:0;background:var(--syh-line-light);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.h-ins .ins-t b{display:block;margin-top:10px;font-size:19.5px;line-height:1.28;font-weight:700;letter-spacing:-.012em}

/* ---------- 5. closing band (CtaBand): C3, full-bleed night photo, centred call to action ---------- */
.y-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--syh-graphite);color:#fff;padding:136px 0 148px;text-align:center}
/* the photo is set low, so the lit arched windows of the house show above the heading instead of behind it; the shade
   sits behind the text block and thins out towards the edges, so the facade and the trees keep their glow */
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 96%;z-index:-2}
.cta-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 40% 46% at 50% 56%,rgba(27,30,35,.5),rgba(27,30,35,0) 100%),rgba(27,30,35,.3)}
@media (min-width:1600px){.cta-bg{object-position:50% 76%}}
.cta-in{display:flex;flex-direction:column;align-items:center}
/* the seal is the logo's mark (new 17 Oct, HomeArt KeyholeSeal): its graphite plate keeps the yellow keyline and
   keyhole clear of the lit windows; 56 px (48 px on phones) */
.cta-seal{display:block;width:56px;height:56px;margin-bottom:26px}
.cta-txt h2{margin:0 auto 20px;max-width:15em;font-size:54px;line-height:1.02;letter-spacing:-.035em;color:#fff}
.cta-txt p{margin:0 auto;max-width:40em;font-size:18px;line-height:1.6;color:rgba(241,242,244,.88)}
.cta-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 34px;margin-top:38px}

/* ---------- 6. footer: Ft10 row index (rows, never columns) ---------- */
.y-foot{background:var(--syh-graphite);color:var(--syh-muted-dark);padding:84px 0 40px;font-size:15px;line-height:1.6}
.y-foot a{color:#fff;text-decoration:none;transition:color .2s}
.y-foot a:hover{color:var(--syh-yellow)}
.yf-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:48px;padding-bottom:52px;border-bottom:1px solid var(--syh-line-dark)}
.yf-brand img{display:block;height:40px;width:auto}
.yf-brand p{margin:22px 0 0;max-width:36ch}
.yf-contact{display:grid;gap:14px;align-content:start;margin:0;padding:4px 0 0;list-style:none;color:#fff}
.yf-contact li{display:flex;align-items:flex-start;gap:12px}
.yf-contact .ic{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--syh-yellow)}
.yf-sub label{display:block;margin:0 0 14px}
.yf-sub label b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;color:#fff}
.yf-sub label span{display:block;margin-top:4px;font-size:14.5px}
.yf-row{display:flex}
.yf-row input{flex:1;min-width:0;height:52px;padding:0 16px;border:1.5px solid var(--syh-input-dark);border-right:0;border-radius:0;background:var(--syh-graphite);color:#fff;font:400 16px/1.2 var(--syh-font)}
.yf-row input::placeholder{color:var(--syh-muted-dark)}
.yf-row input:focus{outline:none;border-color:var(--syh-yellow)}
.yf-row input:focus-visible{outline:3px solid var(--syh-yellow);outline-offset:3px}
.yf-row .y-btn{height:52px;flex:0 0 auto}
.yf-err{display:none;margin-top:10px;font-size:14px;color:var(--syh-yellow)}
.yf-sub.bad .yf-err{display:block}
.yf-sub.bad .yf-row input{border-color:var(--syh-yellow)}
.yf-sub .mini-wait,.yf-sub .mini-done{margin-top:6px;color:#fff;font-weight:600}
[data-mini-form].done .yf-row{display:none}
.yf-sub .mini-done .ic{width:26px;height:26px;padding:4px;border-radius:0;background:var(--syh-yellow);color:var(--syh-graphite)}
.y-foot .spin{border-color:var(--syh-line-dark);border-top-color:var(--syh-yellow)}
.yf-index{border-bottom:1px solid var(--syh-line-dark)}
.yf-line{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--syh-line-dark)}
.yf-line:last-child{border-bottom:0}
.yf-line h4{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--syh-yellow)}
.yf-line ul{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:-6px 0 -6px -30px;padding:6px 0;list-style:none;clip-path:inset(0 0 0 22px)}
.yf-line li{position:relative;display:flex;align-items:center;margin-left:30px}
.yf-line li::before{content:"";position:absolute;left:-17px;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--syh-input-dark)}
.yf-line a{display:inline-block;padding:5px 0;font-weight:500;font-size:15.5px}
/* the required disclaimer reads as one block (never split mid-sentence into columns); the row's rule stays full width,
   the text keeps a measure of about 120 characters */
.yf-disc{margin:0;padding:28px 0;max-width:none;border-bottom:1px solid var(--syh-line-dark);font-size:13.5px;line-height:1.75;color:var(--syh-muted-dark)}
@media (min-width:992px){.yf-disc{padding-right:max(0px,calc(100% - 120ch))}}
.yf-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;font-size:14px}
.yf-legal{display:flex;flex-wrap:wrap;gap:6px 24px}
.y-foot .yf-legal a{display:inline-block;padding:4px 0;color:var(--syh-muted-dark)}
.y-foot .yf-legal a:hover{color:var(--syh-yellow)}

/* ---------- responsive ---------- */
@media (max-width:1399.98px){
 .h-hero h1{font-size:58px}
}
@media (max-width:1199.98px){
 .h-hero h1{font-size:54px}
 .h-hero .hero-txt{max-width:720px;padding:44px 48px 0}
 .hero-notes{grid-template-columns:minmax(0,1fr);margin:34px -48px 0;padding:18px 48px 22px}
 .tb-i{min-height:92px;padding:18px 16px;gap:12px;font-size:15px}
 .tb-i .go{display:none}
 .h-intro-in{grid-template-columns:1fr;gap:40px}
 .h-intro-t{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
 .h-intro h2{margin:0}
 .pd-art{width:calc(100% - 520px)}
 .pd-txt{width:440px;padding:112px 0 124px}
 .ft-list{grid-template-columns:1fr}
 .h-guides .h-head .sl-nav{display:flex}
 .h-guides .h-head{grid-template-columns:minmax(0,1fr) auto;row-gap:20px}
 .h-guides .h-head .sub{grid-column:1;grid-row:2}
 .h-guides .h-head .sl-nav{grid-column:2;grid-row:2;align-self:end}
 .pc{grid-template-columns:minmax(0,230px) minmax(0,1fr);grid-template-areas:"top b" "price f" "foot f";grid-template-rows:auto auto 1fr;column-gap:40px;padding:32px 32px 34px}
 .pc-foot{align-self:end;padding-top:26px}
 .pc-price b{font-size:52px}
 .yf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .yf-sub{grid-column:1/-1}
}
@media (max-width:991.98px){
 .h-head{grid-template-columns:1fr;row-gap:18px;margin-bottom:40px}
 .h-head h2,.h-intro h2,.ru-head h2,.pd-txt h2,.h-faq .h-head h2{font-size:38px}
 .h-trades .h-head{grid-template-columns:minmax(0,1fr) auto}
 .h-trades .h-head h2{grid-column:1/-1}
 .h-trades .h-head .sub{grid-column:1}
 .h-trades .h-head .sl-nav{display:flex;grid-column:2;align-self:end}
 .h-guides .h-head .sub{grid-column:1/-1}
 .h-guides .h-head .sl-nav{grid-row:3;grid-column:1;justify-self:start}
 .tr-slider .y-slide{flex:0 0 50%}
 .h-intro-t{grid-template-columns:1fr;gap:20px}
 .fp-dim{display:none}
 .fp-wrap{padding:0}
 .pd-art{position:relative;width:100%;aspect-ratio:16/10}
 .pd-txt{width:auto;max-width:640px;margin:0;padding:64px 0 112px}
 .ft-list{grid-template-columns:1fr 1fr}
 /* the vertical key sits 5 px in, so its round bow starts on the gutter like everything else */
 .st-key{grid-template-columns:1fr;max-width:620px;margin-left:5px}
 .st-bow{width:112px;height:104px;margin:0 0 -4px -16px;transform:rotate(90deg)}
 .st-line{grid-template-columns:1fr;gap:0;padding:0 0 0 88px}
 .st-line::before{left:20px;right:auto;top:0;bottom:40px;width:40px;height:auto;background:
  linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/1.5px calc(100% - 28px) no-repeat,
  linear-gradient(var(--syh-graphite),var(--syh-graphite)) 100% 0/1.5px calc(100% - 28px) no-repeat,
  linear-gradient(var(--syh-input-light),var(--syh-input-light)) 19.25px 0/1.5px calc(100% - 36px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M.75 0V10L20 27.25L39.25 10V0' fill='none' stroke='%231B1E23' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 100%/40px 28px no-repeat}
 /* number and title on one line beside the cut, the text under both at the full width of the column */
 .st-line li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;padding:6px 0 40px}
 .st-line li .st-n{grid-row:1;margin:0}
 .st-line h3{margin:10px 0 0}
 .st-line p{grid-column:1/-1;margin-top:14px}
 .st-cut{left:-76.6px;top:12px;transform:rotate(90deg) scale(1,.62);transform-origin:28px 32px}
 .st-n::before{left:auto;right:100%;bottom:auto;top:21.25px;width:28px;height:1.5px}
 .ru-head{grid-template-columns:1fr;row-gap:16px}
 .h-rules .ru-photo>img{aspect-ratio:16/7}
 .ru-row{grid-template-columns:1fr;gap:16px}
 .pr-list{grid-template-columns:1fr;gap:16px}
 .ru-card .plate-in,.pr-list .plate-in{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:26px 22px 28px}
 .ru-card p,.pr-list h3{margin-top:2px}
 .ru-card p{grid-column:2}
 .h-plans .pc-head{margin-bottom:40px}
 .pc{display:block;padding:28px 24px 30px}
 .pc-top{padding-bottom:12px}
 .pc-price{padding:4px 0 20px}
 .pc-f{display:block;margin-top:4px}
 .pc-foot{padding-top:24px}
 .pc-more{margin-top:40px}
 .ins-grid{grid-template-columns:1fr;gap:40px}
 .yf-line{grid-template-columns:1fr;gap:8px}
}
@media (max-width:767.98px){
 .h-hero{display:block;min-height:0}
 .h-hero .hero-in{min-height:70vh;min-height:70svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--hdr) + 172px);padding-bottom:40px}
 /* phones: the photo is a band across the top, so the lit doorway shows between the header and the h1; the text
    below runs on graphite */
 .h-hero .hero-bg,.h-hero .hero-shade{inset:0 0 auto 0;height:440px}
 .h-hero .hero-bg{object-position:66% 50%;transform:none}
 /* phones: no plate, the text already runs on graphite under the photo band */
 .h-hero .hero-txt{max-width:none;padding:0;background:none;clip-path:none}
 .h-hero .hero-shade{background:linear-gradient(180deg,rgba(27,30,35,.5) 0,rgba(27,30,35,.1) 26%,rgba(27,30,35,.5) 56%,rgba(27,30,35,.86) 76%,#1B1E23 100%)}
 .h-hero .hero-acts .y-btn{flex:0 0 auto}
 .h-hero h1{font-size:44px;line-height:1;letter-spacing:-.035em;margin-bottom:18px}
 .h-hero .lede{font-size:17px;margin-bottom:26px}
 .h-hero .hero-acts{gap:16px 26px}
 .hero-notes{grid-template-columns:minmax(0,1fr);gap:8px;margin:26px 0 0;padding:0;border-top:0;font-size:14.5px}
 /* phones: the five trades as a two-column grid of graphite cells (the fifth full width) divided by hairlines, the
    hover bar on the cell's left edge */
 .y-tradebar .container{padding:0}
 .tb-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-left:0}
 .tb-i{min-height:66px;padding:11px 12px 11px 16px;gap:12px;border-right:1px solid var(--syh-line-dark);border-bottom:1px solid var(--syh-line-dark);font-size:15px;line-height:1.25;align-items:center}
 .tb-in>a:nth-of-type(2n){border-right:0}
 .tb-in>a:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
 .tb-ic .ic{width:24px;height:24px}
 .tb-i .go{display:none}
 .tb-i::before{left:0;right:auto;top:10px;bottom:10px;width:2px;height:auto;transform:scaleY(0);transform-origin:center}
 .tb-i:hover::before,.tb-i:focus-visible::before{transform:scaleY(1)}
 .h-hero::after,.h-trades::after,.h-product::after,.h-plans::after,.y-cta::after{width:32px;height:32px}
 .h-intro{padding:88px 0 96px}
 .h-head h2,.h-intro h2,.ru-head h2,.pd-txt h2,.h-faq .h-head h2{font-size:32px;line-height:1.08}
 .lead-p,.h-intro .lead-p{font-size:17px}
 .fp-plan{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}
 .fp-room,.fp-r1,.fp-r2,.fp-r3{padding:34px 22px 40px;gap:16px}
 .fp-r2,.fp-r3{padding-top:80px}
 .fp-stair{display:none}
 .fp-r3::after,.fp-d3,.fp-entry{display:none}
 .fp-room .pl-ic .ic{width:30px;height:30px}
 .fp-room h3{font-size:20px}
 .fp-d1{left:auto;right:14%;transform:scaleX(-1)}
 .fp-d2{right:auto;left:14%;transform:none}
 .fp-w1{right:18%}
 .h-trades{padding:88px 0 96px}
 .h-trades .h-head{grid-template-columns:minmax(0,1fr)}
 .h-trades .h-head .sl-nav{display:none}
 .tr-slider .y-slide{flex-basis:100%}
 .tr-txt{padding:22px 22px 26px}
 /* both phone sliders: swipe plus the pager (no arrows); the next card peeks in from the screen edge (the track is
    narrower than the view, so main.js still moves one card per step) */
 .h-guides .h-head .sl-nav{display:none}
 .gd-slider .gd-go{margin-top:0}
 .h-trades .y-slider .sl-view,.h-guides .y-slider .sl-view{margin:0 calc(var(--bs-gutter-x) * -.5) 0 0;padding:0 0 4px}
 .h-trades .sl-track,.h-guides .sl-track{width:calc(100% - 50px)}
 .h-trades .y-slide,.h-guides .y-slide{padding:0 12px 0 0}
 .h-product-in{padding:0 16px}
 .pd-art{margin:0 -16px;width:calc(100% + 32px)}
 .pd-txt{padding:52px 0 96px}
 .ft-list{grid-template-columns:1fr;gap:12px}
 .ft-list .plate-in{flex-direction:row;align-items:flex-start;gap:16px;padding:18px 18px 20px}
 .h-steps{padding:88px 0 80px}
 .h-rules{padding:88px 0 96px}
 .h-rules .ru-photo>img{aspect-ratio:16/9}
 .h-guides{padding:88px 0 88px}
 .h-plans{padding:88px 0 104px}
 .pc-price b{font-size:52px}
 .h-faq{padding:88px 0 88px}
 .fq-row .fq-q{gap:14px;padding:20px 16px 20px 20px;font-size:16.5px}
 .fq-row .fq-q i,.fq-row .fq-lever{width:44px;flex-basis:44px}
 .fq-row .fq-lever{height:26px}
 .fq-row .fq-a{padding:0 20px 24px}
 .h-ins{padding:88px 0 96px}
 .h-ins .if-t{padding:22px 22px 28px}
 .h-ins .if-t b{font-size:25px}
 .h-ins .ins-row{grid-template-columns:104px minmax(0,1fr);gap:16px;padding:20px 0}
 .h-ins .ins-t b{font-size:16.5px}
 .h-ins .h-head{grid-template-columns:1fr}
 .y-cta{padding:96px 0 104px}
 .cta-shade{background:radial-gradient(ellipse 80% 60% at 50% 55%,rgba(27,30,35,.38),rgba(27,30,35,0)),rgba(27,30,35,.62)}
 .cta-txt h2{font-size:36px}
 .cta-txt p{font-size:16.5px}
 .cta-seal{width:48px;height:48px}
 .y-foot{padding:64px 0 32px}
 .yf-top{grid-template-columns:1fr;gap:36px}
 .yf-brand img{height:34px}
 .yf-line ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;margin:0;padding:0;clip-path:none}
 .yf-line li{margin:0}
 .yf-line li::before{content:none}
 .yf-line a{padding:9px 0}
}
@media (max-width:575.98px){
 .yf-row{flex-direction:column;gap:12px}
 .yf-row input{flex:0 0 auto;border-right:1.5px solid var(--syh-input-dark)}
 .yf-row .y-btn{width:100%}
 .yf-bot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
 .y-btn::before,.y-btn::after,.tb-i::before,.plate,.fq-row .fq-lever path:last-child,.y-burger::before{transition:none}
}

/* ---------- photos and devices 2026-10-14 ---------- */
/* small phones: "Join SecureYrHome" fits the step column (it ran 12 px past it at 320 px) */
@media (max-width:374.98px){
 .st-line li{column-gap:14px}
 .st-line h3{font-size:18px}
}
/* tablets (768-991 px): the five trade links under the hero stand icon over name, so "Residential Locksmiths" and
   "Fence & Gate Contractors" no longer run into the cell edge and the hero's corner cut */
@media (min-width:768px) and (max-width:991.98px){
 .tb-i{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-height:0;padding:16px 14px 18px}
}
/* phones: the slider dots get a wider tap area (the drawn square stays 9 px) */
@media (max-width:575.98px){.sl-dots button{width:32px}}
/* phones under 390 px: logo, Join Us and Menu (355 px) were wider than the bar (328 px at 360): the Menu button was cut
   off by the screen edge at 360 px and ran into the right gutter at 375 px (the header is fixed, so the page itself
   never scrolled sideways). A step smaller logo and slimmer buttons fit all three inside the 16 px gutters. */
@media (max-width:389.98px){
 .y-bar{gap:10px}
 .y-acts{gap:6px}
 .y-brand img{height:27px}
 .y-hjoin.sm{padding:0 12px 0 11px;font-size:14px}
 .y-burger{gap:6px;padding:0 7px 0 10px;font-size:14px}
}
/* under 360 px Join Us stays in the bar too (it used to be hidden there): the Menu button shows its three-bar glyph
   only (screen readers still get its name, "Open menu") */
@media (max-width:359.98px){
 .y-brand img{height:26px}
 .y-burger{gap:0;padding:0 11px}
 .y-burger .yb-t{display:none}
}

/* ---------- fresh-eyes device check 2026-10-15 ---------- */
/* phones (under 768 px): both home sliders show whole cards only. The next card used to peek in at the screen edge:
   a strip of its photo (at some slider positions part of a face, e.g. the father in Away From Home) and the cut-off
   start of its title. The view now holds exactly the cards in view (the same gutters as on tablets); the pager
   below still shows that there are more */
@media (max-width:767.98px){
 .h-trades .y-slider .sl-view,.h-guides .y-slider .sl-view{margin:0 -10px}
 .h-trades .sl-track,.h-guides .sl-track{width:auto}
 .h-trades .y-slide,.h-guides .y-slide{padding:0 10px}
}
/* home FAQ card: the woman's hair runs to the photo's right edge, so the frame keeps that edge (97% cut it slightly) */
.fq-ph img[src*="pexels-photo-7616812."]{object-position:100% 40%!important}
/* desktop mega menu (Solutions) promo: the man's hair reaches the photo's top edge; at 50% 30% the 16:10 frame cut the
   top of it and the 2:1 frame of shorter screens (max-height 820 px) cut more. The frame keeps the photo's top edge */
.mp-img img[src*="pexels-photo-8367722."]{object-position:50% 0%!important}

/* ---------- fresh-eyes device check 3, 2026-10-16 (final fix after three independent look passes at 7 sizes) ---------- */
/* 3a. closing band (every page but /get-started): from 768 px the heading, the paragraph and the text link ran over the
   lit facade, the white window frames and the balustrade of the photo, so the paragraph fell to about 3:1 against the
   brightest parts behind it. The shade is now deep behind the text block (about 70-80 %) and thins out to 44 % at the
   band's edges, so the lit house still glows around it; the paragraph is solid steel white. No glow, no text shadow */
@media (min-width:768px){.cta-shade{background:radial-gradient(ellipse 72% 66% at 50% 55%,rgba(27,30,35,.74) 0,rgba(27,30,35,.66) 50%,rgba(27,30,35,.2) 100%),rgba(27,30,35,.3)}}
@media (max-width:767.98px){.cta-shade{background:radial-gradient(ellipse 80% 60% at 50% 55%,rgba(27,30,35,.46),rgba(27,30,35,0)),rgba(27,30,35,.62)}}
.cta-txt p{color:var(--syh-steel)}
/* 3b. labels at the site's label size, 12 px (the art direction's uppercase labels): the header's "Talk to us" above the
   phone number (it was 11 px) and the 11.5 px labels of the drawer, the guide cards, the plan badge, the FAQ card and the
   insights topics */
.yc-t small,.dr-h,.h-guides .gd-g,.pc-badge,.h-faq .ct-line small,.h-ins .yc-cat{font-size:12px}
/* 3c. tap targets on phones: the closing band's text link, the footer's legal links and contact lines are 42-44 px tall
   (24-30 px before); the visual spacing barely changes */
@media (max-width:767.98px){
 .cta-acts .y-link{padding:10px 0}
 .yf-legal{gap:0 24px}
 .y-foot .yf-legal a{padding:10px 0}
 .yf-contact{gap:0}
 .yf-contact li>a,.yf-contact li>span{display:block;padding:9px 0}
 .yf-contact .ic{margin-top:11px}
}
/* the slider pagers (trades below 992 px, guides below 1200 px): 40 px wide tap areas (36 px for the eight guide dots
   under 360 px, so they still fit the 288 px column); the drawn 9 px square is unchanged */
@media (max-width:1199.98px){.sl-dots button{width:40px}}
@media (max-width:359.98px){.gd-slider .sl-dots button{width:36px}}
/* 3d. home guides slider on phones: the cards keep one height (the slider's) and "Read the guide" sits on the card's foot,
   as from 768 px (it followed the text, which left an empty band under it in the shorter cards) */
@media (max-width:767.98px){.gd-slider .gd-go{margin-top:auto}}
/* 3e. home product, tablets (768-991): the 2 x 2 plates span the container like the line map above them (the text keeps
   its 640 px measure) */
@media (min-width:768px) and (max-width:991.98px){
 .pd-txt{max-width:none}
 .pd-txt h2,.pd-txt .lead-p{max-width:640px}
}
/* 3f. home, 992-1199 px (small laptops, tablets in landscape) */
@media (min-width:992px) and (max-width:1199.98px){
 /* product: the plates stay a 2 x 2 (one column made the section 1150 px tall and the map a thin strip), and the
    territory map keeps its own 9:10 shape, centred in its column, so the whole outline and its houses show */
 .pd-txt{width:460px}
 .pd-art{width:calc(100% - 540px)}
 .ft-list{grid-template-columns:1fr 1fr}
 .ft-list b{min-height:2.6em}
 .pd-art svg{top:50%;bottom:auto;height:auto;aspect-ratio:9/10;transform:translateY(-50%)}
 /* steps: the tablets' vertical key (five columns of about 150 px wrapped every text to 8-10 short lines) */
 .st-key{grid-template-columns:1fr;max-width:620px;margin-left:5px}
 .st-bow{width:112px;height:104px;margin:0 0 -4px -16px;transform:rotate(90deg)}
 .st-line{grid-template-columns:1fr;gap:0;padding:0 0 0 88px}
 .st-line::before{left:20px;right:auto;top:0;bottom:40px;width:40px;height:auto;background:
  linear-gradient(var(--syh-graphite),var(--syh-graphite)) 0 0/1.5px calc(100% - 28px) no-repeat,
  linear-gradient(var(--syh-graphite),var(--syh-graphite)) 100% 0/1.5px calc(100% - 28px) no-repeat,
  linear-gradient(var(--syh-input-light),var(--syh-input-light)) 19.25px 0/1.5px calc(100% - 36px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M.75 0V10L20 27.25L39.25 10V0' fill='none' stroke='%231B1E23' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 100%/40px 28px no-repeat}
 .st-line li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;padding:6px 0 40px}
 .st-line li .st-n{grid-row:1;margin:0}
 .st-line h3{margin:10px 0 0;min-height:0}
 .st-line p{grid-column:1/-1;margin-top:14px}
 .st-cut{left:-76.6px;top:12px;transform:rotate(90deg) scale(1,.62);transform-origin:28px 32px}
 .st-n::before{left:auto;right:100%;bottom:auto;top:21.25px;width:28px;height:1.5px}
 /* rules: the yellow "Not a security company." note runs as a full-width strip above the three plates (four across
    left about 177 px of text in each) */
 .ru-row{grid-template-columns:1fr}
 .ru-card .plate-in{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;align-items:start;padding:26px 26px 28px}
 .ru-card p{grid-column:2;margin-top:2px;max-width:72ch}
}
/* 3g. home FAQ, 1200-1399 px: the photo plate is 248 px wide (220) and its call and email lines a step smaller, so the
   address stays on one line (it broke after the @) */
@media (min-width:1200px) and (max-width:1399.98px){
 .fq-board{grid-template-columns:minmax(0,1fr) 248px}
 .h-faq .fq-lines{padding:6px 16px 14px}
 .h-faq .ct-line{gap:10px;font-size:15px}
 .h-faq .ct-ic .ic{width:18px;height:18px}
 .h-faq .ct-line[href^="mailto:"]>span:last-child{font-size:14px;white-space:nowrap}
}
/* 3h. small phones (under 375 px): more width for the text. The key of the steps moves 8 px towards the gutter (its bow
   a step smaller, so it still starts on the gutter) and the steps 16 px with it; the rule plates put their icon above
   the title instead of beside it (186 px of text before) */
@media (max-width:374.98px){
 .st-key{margin-left:-3px}
 .st-bow{width:96px;height:89px;margin:0 0 -4px -8px}
 .st-line{padding-left:80px}
 .st-cut{left:-68.6px}
 .st-n::before{width:20px}
 .ru-card .plate-in,.pr-list .plate-in{grid-template-columns:minmax(0,1fr);row-gap:14px}
 .ru-card p{grid-column:auto}
}
/* 3i. wide screens (2200 px and up): the page used to sit in a 1320 px column with 600 px of blank either side, its
   text and plates at their 1440 px sizes. From 2200 px every content column (.container, the line map's inner
   column) and so the header bar's content, the sections' content, the closing band's text and the footer are scaled
   with CSS zoom (1.15; 4/3 from 2400 px, so the content of a 2560 px screen is the 1920 px layout one third larger).
   The full-bleed parts (section backgrounds, heads, photo bands, the closing photo) are not zoomed, so every photo
   frame keeps the shape it has without the zoom (lengths in vw and vh are multiplied by a zoom, and browsers differ
   there). The header box is not zoomed either: its height grows with --hdr, and inside the zoomed columns --hdr is
   84 px again, which the zoom turns into the header's height, so sticky offsets and the scripts that read the header
   height stay exact. The mega menus' vh limit is divided by the zoom (see also syh-inner.css 3j) */
@media (min-width:2200px){
 :root{--zf:1.15;--hdr:calc(84px * var(--zf))}
 .container,.h-product-in{zoom:var(--zf);--hdr:84px}
 .mega-in{max-height:calc(100vh / var(--zf) - var(--hdr) - 24px)}
}
@media (min-width:2400px){:root{--zf:1.3333}}

/* ---------- fresh-eyes device check 4, 2026-10-16 (the last findings of the third look pass) ---------- */
/* 4a. footer: the disclaimer keeps a readable measure from 768 px, about 90-95 characters a line (it ran 145-150 at
   120ch from 992 px and the full container width on tablets) */
@media (min-width:768px){.yf-disc{padding-right:max(0px,calc(100% - 76ch))}}
/* 4b. the closing band carries 2 px of graphite below its edge (painted with the band, over the footer's own graphite):
   the band's height is fractional, and where it met the footer a 1 px hairline of the white page background showed
   (articles and guides at 1024-2560) */
.y-cta{box-shadow:0 2px 0 var(--syh-graphite)}

/* ---------- in-between widths, 2026-10-16 ---------- */
/* 5a. home floor plan, 1200-1399 px: the plan column is about 590 px wide there, and the stair drawing (170 px, 44 px
   in from the right) sat under the end of the first room's text ("wherever the" ran over its treads). A smaller
   stair, closer to the wall, keeps 25-30 px clear of the longest line */
@media (min-width:1200px) and (max-width:1399.98px){
 .fp-stair{right:30px;width:125px;height:50px;margin-top:-25px}
}

/* ---------- logo review fixes, 2026-10-18 ---------- */
/* 6a. print (people print the guides and checklists). Browsers print without background graphics unless asked, so the
   graphite header bar and footer came out white: the logo's white name (logo-light.svg) vanished, and Join Us, Menu
   and the footer text printed pale grey. The header and footer now print in their own colours. On a top-dark page the
   header is a fading shade over the photo, and the photo does not print by default, so in print the header is the
   graphite bar it becomes once stuck. It prints once, at the top of page 1: as a fixed box it was repeated at the top
   of every page, over the first lines of each page */
@media print{
 .y-hdr{position:absolute}
 body.top-dark .y-hdr:not(.stuck):not(.menu-open){background:var(--syh-graphite);box-shadow:0 1px 0 var(--syh-yellow)}
 .y-hdr,.y-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 6b. Windows High Contrast (forced colours): a light theme paints the header bar, the menu sheet and the footer in its
   own light Canvas colour, and the logo's white name vanished. The logo links keep a graphite block (8 px round the
   logo, drawn by a shadow, so nothing moves); the yellow focus ring (3 px at 3 px) stays on that block */
@media (forced-colors:active){
 .y-brand,.yf-brand a{forced-color-adjust:none;background:var(--syh-graphite);box-shadow:0 0 0 8px var(--syh-graphite)}
}
/* 6c. the footer logo link was an inline box round a block image, so its keyboard focus ring had nothing to draw round
   and did not show; as a block as wide as the logo it rings the logo (the same place and size as before) */
.yf-brand a{display:block;width:fit-content}