/* ============================================================================
   THE BESPOKE OAK COLLECTION — landing page (virtual URL /bespoke-oak-collection/)
   All selectors are bo- prefixed and scoped under .bo-page: cannot clobber the
   theme, the design system or WooCommerce. Poppins + Cormorant Garamond.
   ========================================================================== */
.bo-page{--bo-navy:#122B4C;--bo-deep:#0a1f3a;--bo-ink:#182033;--bo-body:#59616b;--bo-green:#4ad55d;--bo-green-ink:#072617;--bo-green-text:#237a3a;--bo-bg:#eef2f7;--bo-line:rgba(18,43,76,.12);--bo-wline:rgba(255,255,255,.14);--bo-font:'Poppins',system-ui,sans-serif;--bo-serif:'Cormorant Garamond',Georgia,serif;
 font-family:var(--bo-font);color:var(--bo-ink);-webkit-font-smoothing:antialiased}
.bo-page *{box-sizing:border-box}
.bo-page img{max-width:100%;display:block}
.bo-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.bo-sec{padding:clamp(56px,7vw,104px) 0}
.bo-sec--dark{background:var(--bo-deep);color:#fff}
.bo-sec--light{background:var(--bo-bg)}
.bo-ey{display:inline-flex;align-items:center;gap:10px;color:var(--bo-green-text);font-size:12px;font-weight:600;letter-spacing:3.2px;text-transform:uppercase}
.bo-ey::before{content:"";width:28px;height:2px;background:currentColor}
.bo-sec--dark .bo-ey{color:var(--bo-green)}
.bo-h2{font-size:clamp(30px,3.8vw,48px);font-weight:800;letter-spacing:-1.2px;line-height:1.05;color:var(--bo-navy);margin:14px 0 0}
.bo-sec--dark .bo-h2{color:#fff}
.bo-h2 em{font-family:var(--bo-serif);font-style:italic;font-weight:600;color:var(--bo-green-text)}
.bo-sec--dark .bo-h2 em{color:var(--bo-green)}
.bo-lead{color:var(--bo-body);font-size:clamp(15px,1.5vw,17px);line-height:1.65;max-width:640px;margin:16px 0 0}
.bo-sec--dark .bo-lead{color:rgba(255,255,255,.78)}
.bo-center{text-align:center}.bo-center .bo-lead{margin-left:auto;margin-right:auto}
/* hero */
.bo-hero{position:relative;overflow:hidden;background:var(--bo-deep);color:#fff}
.bo-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.56) saturate(108%);transform:scale(1.05);animation:bo-kb 26s ease-in-out infinite alternate}
@keyframes bo-kb{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.13) translate(-1.2%,1%)}}
@media(prefers-reduced-motion:reduce){.bo-hero__bg{animation:none}}
.bo-hero__tint{position:absolute;inset:0;background:linear-gradient(112deg,rgba(6,17,32,.92) 0%,rgba(6,17,32,.68) 46%,rgba(6,17,32,.22) 100%)}
.bo-hero__in{position:relative;z-index:2;display:flex;align-items:center;padding:clamp(32px,3.5vw,46px) 0 clamp(46px,4.5vw,60px)}
.bo-hero__grid{width:100%}
.bo-hero__k{display:inline-flex;align-items:center;gap:12px;color:var(--bo-green);font-size:12px;font-weight:700;letter-spacing:3.4px;text-transform:uppercase}
.bo-hero__k::before{content:"";width:30px;height:2px;background:currentColor}
.bo-hero__t{font-size:clamp(36px,4.4vw,56px);font-weight:800;letter-spacing:-1.8px;line-height:1.0;margin:16px 0 0;color:#fff}
.bo-hero__t em{font-family:var(--bo-serif);font-style:italic;font-weight:500;color:var(--bo-green)}
.bo-hero__d{color:rgba(255,255,255,.82);font-size:clamp(15px,1.5vw,16.5px);line-height:1.6;max-width:560px;margin:18px 0 0}
.bo-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.bo-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:14px 28px;border-radius:0;font:800 13px/1 var(--bo-font);letter-spacing:.6px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background .18s,box-shadow .18s,border-color .18s,color .18s}
.bo-btn--green{background:linear-gradient(135deg,#57e06b,#37c34c);color:var(--bo-green-ink);box-shadow:0 16px 34px -10px rgba(74,213,93,.55)}
.bo-btn--green:hover{box-shadow:0 20px 44px -10px rgba(74,213,93,.75);color:var(--bo-green-ink)}
.bo-btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.5)}
.bo-btn--ghost:hover{background:rgba(255,255,255,.15);color:#fff}
.bo-btn--navy{background:var(--bo-navy);color:#fff}
.bo-btn--navy:hover{background:#0a1f3a;color:#fff}
.bo-hero__stats{display:inline-grid;grid-template-columns:repeat(4,auto);margin-top:clamp(24px,3vw,34px);border:1px solid rgba(255,255,255,.16);border-radius:0;background:rgba(8,26,49,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:18px 10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.bo-hst{position:relative;padding:0 28px;border-left:1px solid rgba(255,255,255,.12)}
.bo-hst:first-child{border-left:0}
.bo-hst b i{font-style:normal;color:var(--bo-green)}
.bo-hst b{display:block;font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-1px;color:#fff}
.bo-hst>span:last-child{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
/* lively stat visuals: real swatch chips, pattern thumbs, layer diagram, UK flag */
.bo-hst__vis{display:flex;align-items:center;height:30px;margin-bottom:9px}
.bo-hst__chips,.bo-hst__pats{display:flex;align-items:center}
.bo-hst__chips img{width:26px;height:26px;border-radius:50%;border:2px solid #0d2440;object-fit:cover;margin-left:-9px}
.bo-hst__chips img:first-child{margin-left:0}
.bo-hst__chips i{margin-left:6px;font-style:normal;font-size:10.5px;font-weight:800;color:var(--bo-green)}
.bo-hst__pats img{width:26px;height:26px;border-radius:6px;border:2px solid #0d2440;object-fit:cover;margin-left:-8px}
.bo-hst__pats img:first-child{margin-left:0}
.bo-hst__layer{display:flex;flex-direction:column;gap:2px;width:34px}
.bo-hst__layer i{height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.bo-hst__layer i.oak{height:8px;background:linear-gradient(90deg,#c89a63,#a97a45)}
.bo-hst__uk{width:40px;height:27px;display:block;border-radius:5px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
/* trust bento */
.bo-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:36px;text-align:left}
.bo-thero{grid-column:1/-1;position:relative;border-radius:0;overflow:hidden;min-height:178px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.bo-thero__ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,31,58,.9) 0%,rgba(10,31,58,.5) 48%,rgba(10,31,58,.12) 100%)}
.bo-thero__b{position:relative;padding:18px 22px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;width:100%}
.bo-thero__k{display:block;font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--bo-green)}
.bo-thero__t{margin-top:8px;font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.7px;line-height:1.06;color:#fff}
.bo-thero__t em{font-family:var(--bo-serif);font-style:italic;font-weight:500;color:var(--bo-green)}
.bo-thero__list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.bo-thero__list li{position:relative;padding-left:22px;color:rgba(255,255,255,.78);font-size:11.5px;line-height:1.45}
.bo-thero__list li::before{content:"";position:absolute;left:2px;top:5px;width:7px;height:4px;border-left:2px solid var(--bo-green);border-bottom:2px solid var(--bo-green);transform:rotate(-45deg)}
.bo-tc{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;border:1px solid var(--bo-wline);border-top:2px solid rgba(74,213,93,.5);border-radius:0 0 8px 8px;padding:15px 16px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));overflow:hidden;transition:border-color .18s,transform .18s,background .18s}
.bo-tc:hover{border-color:rgba(74,213,93,.4);border-top-color:var(--bo-green);transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.bo-tc__n{position:absolute;top:0;right:12px;font-family:var(--bo-serif);font-style:italic;font-size:38px;line-height:1.1;color:rgba(255,255,255,.07);pointer-events:none}
.bo-tc__i{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:rgba(74,213,93,.1);border:1px solid rgba(74,213,93,.32);color:var(--bo-green);grid-row:1/4;align-self:start}
.bo-tc__i svg{width:24px;height:24px}
/* lively icon tiles: real oak swatch behind a white glyph, a different tone per card */
.bo-tc__i--tex{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;background:none;border:2px solid rgba(74,213,93,.4)}
.bo-tc__i--tex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.bo-tc:hover .bo-tc__i--tex img{transform:scale(1.15)}
.bo-tc__g{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,rgba(10,31,58,.5),rgba(10,31,58,.25));color:#fff}
.bo-tc__g svg{width:24px;height:24px}
.bo-tc b{display:block;grid-column:2;font-size:13px;font-weight:700;color:#fff;letter-spacing:.2px;line-height:1.3}
.bo-tc b+span{display:block;grid-column:2;margin-top:2px;font-size:9px;color:var(--bo-green);letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.bo-tc__d{grid-column:2;margin:6px 0 0;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.72)}
/* Made-in-UK seal on the hero panel */
.bo-thero__seal{position:absolute;top:16px;right:16px;width:98px;height:98px;transform:rotate(-8deg);filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));z-index:2;transition:transform .35s ease}
.bo-thero:hover .bo-thero__seal{transform:rotate(0deg) scale(1.04)}
.bo-thero__seal svg{width:100%;height:100%;display:block}
/* pattern cards */
.bo-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;text-align:left}
.bo-pc{position:relative;border:1px solid var(--bo-line);border-radius:0;background:#fff;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.bo-pc:hover{border-color:rgba(18,43,76,.3);box-shadow:0 26px 52px -28px rgba(16,35,61,.35);transform:translateY(-4px)}
.bo-pc__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.bo-pc__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bo-pc:hover .bo-pc__img img{transform:scale(1.06)}
.bo-pc__tag{position:absolute;top:14px;left:14px;z-index:2;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:rgba(10,31,58,.72);backdrop-filter:blur(6px);padding:6px 11px;border-radius:0}
.bo-pc__b{padding:18px 20px 20px}
.bo-pc__t{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--bo-navy);margin:0}
.bo-pc__f{margin-top:11px;border-top:1px solid var(--bo-line);padding-top:11px;display:grid;gap:6px}
.bo-pc__f div{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.bo-pc__f span{color:var(--bo-body)}
.bo-pc__f b{color:var(--bo-navy);font-weight:600;white-space:nowrap}
/* pattern TILES v2: pure image tiles; formats slide up on hover / [+] tap; tile = compose */
.bo-pt{position:relative;border-radius:0;overflow:hidden;aspect-ratio:16/12;cursor:pointer;background:#1a140e;border:1px solid var(--bo-line);transition:box-shadow .2s,transform .2s}
.bo-pt::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.22);border-radius:0;pointer-events:none;z-index:3;transition:border-color .25s}
.bo-pt:hover{transform:translateY(-3px);box-shadow:0 26px 52px -26px rgba(16,35,61,.45)}
.bo-pt:hover::after{border-color:rgba(74,213,93,.55)}
.bo-pt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bo-pt:hover>img{transform:scale(1.06)}
.bo-pt__ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:15px 16px;background:linear-gradient(180deg,rgba(10,31,58,0) 54%,rgba(10,31,58,.38) 76%,rgba(10,31,58,.86) 100%);text-align:left}
.bo-pt__ov::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,31,58,.14),rgba(10,31,58,.6) 42%,rgba(10,31,58,.96));opacity:0;transition:opacity .3s}
.bo-pt:hover .bo-pt__ov::before,.bo-pt.is-open .bo-pt__ov::before{opacity:1}
.bo-pt:hover .bo-pt__meta,.bo-pt.is-open .bo-pt__meta{display:none}
.bo-pt__head{display:flex;align-items:flex-end;gap:10px}
.bo-pt__t{margin:0;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.4px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.bo-pt__meta{display:block;margin-top:2px;color:rgba(255,255,255,.75);font-size:11.5px;font-weight:600}
.bo-pt__x{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:background .15s,transform .25s}
.bo-pt__x:hover{background:rgba(255,255,255,.2)}
.bo-pt.is-open .bo-pt__x{transform:rotate(45deg)}
.bo-pt__formats{max-height:0;overflow:hidden;transition:max-height .45s ease}
.bo-pt:hover .bo-pt__formats,.bo-pt.is-open .bo-pt__formats{max-height:200px}
.bo-pt__frow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0 4px;border-bottom:1px solid rgba(255,255,255,.14);font-size:11.5px;color:rgba(255,255,255,.88)}
.bo-pt__frow>span{min-width:0}
.bo-pt__frow small{display:inline;color:rgba(255,255,255,.5);font-size:10px;margin-left:7px}
.bo-pt__frow b{color:#fff;font-weight:700;white-space:nowrap}
.bo-pt__frow:first-child{border-top:1px solid rgba(255,255,255,.14);margin-top:9px}
.bo-pt__cta{display:inline-flex;align-items:center;gap:7px;margin-top:9px;color:var(--bo-green);font-size:12px;font-weight:800;letter-spacing:.3px}
.bo-pt__cta span{transition:transform .2s}
.bo-pt:hover .bo-pt__cta span{transform:translateX(4px)}
@media(hover:hover){.bo-pt__x{display:none}}
/* compact pattern cards: name on the image, formats collapsible, jump into configurator */
.bo-pgrid--compact{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.bo-pgrid--compact .bo-pt{aspect-ratio:16/14}
.bo-pc__tag{transition:opacity .2s}
.bo-pt:hover .bo-pc__tag,.bo-pt.is-open .bo-pc__tag{opacity:0}
.bo-pgrid--compact .bo-pt__t{font-size:16.5px}
.bo-pgrid--compact .bo-pt__meta{font-size:10.5px}
.bo-pgrid--compact .bo-pt__frow{font-size:10.5px}
.bo-pgrid--compact .bo-pt__frow small{font-size:9.5px}
/* client 2026-07-13: no pack sizes on the tiles — the m² per pack lives in the studio */
.bo-pt__frow b{display:none}
.bo-pgrid--compact .bo-pt__cta{font-size:11px}
.bo-pc--compact .bo-pc__img{aspect-ratio:16/9}
.bo-pc__ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 16px 12px;background:linear-gradient(180deg,rgba(10,31,58,0),rgba(10,31,58,.82));text-align:left}
.bo-pc__t2{margin:0;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.4px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.bo-pc__meta{display:block;margin-top:2px;color:rgba(255,255,255,.78);font-size:11.5px;font-weight:600}
.bo-pc__b2{padding:10px 16px 12px;display:flex;flex-direction:column;gap:4px}
.bo-pc__det summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--bo-body);padding:5px 0}
.bo-pc__det summary::-webkit-details-marker{display:none}
.bo-pc__det summary::after{content:"+";font-size:16px;color:var(--bo-green-text);margin-left:auto;line-height:1}
.bo-pc__det[open] summary::after{content:"\2212"}
.bo-pc__det .bo-pc__f{margin-top:4px;border-top:1px solid var(--bo-line);padding-top:8px}
.bo-pc__det .bo-pc__f small{display:block;color:rgba(89,97,107,.75);font-size:10.5px;margin-top:1px}
.bo-pc__go{display:flex;align-items:center;gap:7px;border:0;background:none;padding:7px 0 2px;font:800 12.5px var(--bo-font);letter-spacing:.3px;color:var(--bo-green-text);cursor:pointer;border-top:1px solid var(--bo-line)}
.bo-pc__go span{transition:transform .18s}
.bo-pc__go:hover span{transform:translateX(4px)}
/* editorial break */
.bo-edit{position:relative;overflow:hidden;background:var(--bo-deep);color:#fff;text-align:center}
.bo-edit__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.38)}
.bo-edit__in{position:relative;z-index:2;padding:clamp(80px,11vw,150px) 20px}
.bo-edit__t{font-family:var(--bo-serif);font-style:italic;font-weight:500;font-size:clamp(30px,4.6vw,58px);line-height:1.15;letter-spacing:-.5px;max-width:900px;margin:0 auto;color:#fff}
.bo-edit__t b{color:var(--bo-green);font-style:normal;font-family:var(--bo-serif)}
.bo-edit__s{margin-top:18px;color:rgba(255,255,255,.65);font-size:13px;letter-spacing:2.4px;text-transform:uppercase;font-weight:600}
.bo-legend{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:rgba(255,255,255,.6);font-size:12.5px}
.bo-legend i{width:8px;height:8px;border-radius:50%;background:var(--bo-green);display:inline-block}
.bo-legend--light{color:var(--bo-body);margin-top:12px}
/* configurator */
.bo-studio{margin-top:46px;border:1px solid var(--bo-wline);border-radius:0;background:rgba(255,255,255,.03);overflow:hidden;text-align:left}
.bo-studio__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--bo-wline);flex-wrap:wrap}
.bo-studio__live{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bo-studio__live i{width:8px;height:8px;border-radius:50%;background:var(--bo-green);box-shadow:0 0 10px rgba(74,213,93,.8);animation:bo-pulse 2.2s infinite}
@keyframes bo-pulse{50%{opacity:.45}}
.bo-studio__tools{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.bo-studio__code{font-size:11px;font-weight:600;letter-spacing:.8px;color:var(--bo-green);background:rgba(74,213,93,.1);border:1px solid rgba(74,213,93,.35);border-radius:0;padding:6px 14px;white-space:nowrap}
/* square CTAs: 4px is the house control radius (--hfx-r-ctl) */
.bo-view{display:inline-flex;border:1px solid rgba(255,255,255,.2);border-radius:0;overflow:hidden}
.bo-view button{border:0;background:none;color:rgba(255,255,255,.65);font:700 10px var(--bo-font);letter-spacing:1.2px;text-transform:uppercase;padding:7px 15px;cursor:pointer;transition:background .15s,color .15s}
.bo-view button.on{background:var(--bo-green);color:#08240f}
.bo-stage{position:relative;background:#0d1420;overflow:hidden;border-radius:0}
.bo-stage canvas{width:100%;height:auto;display:block;transition:transform .6s ease}
/* room view: fixed horizon at 32% — the opaque wall hides the floor's far edge, so the
   perspective can be pushed hard without the floor ever looking cut off */
.bo-stage.room{aspect-ratio:1160/400}
/* room floor: the perspective is painted INTO the canvas (row-sliced one-point
   projection, see renderCanvas) — the element itself just fills the area below
   the wall, so wall + floor read as one photographed room. */
.bo-stage.room canvas{position:absolute;top:38%;left:0;width:100%;height:62%;transform:none}
.bo-stage.room::before{content:"";position:absolute;left:0;right:0;top:0;height:38%;background:url('bespoke/room-wall.jpg?v=4') center bottom/cover no-repeat,linear-gradient(180deg,#0b1c34 0%,#122744 72%,#1a3154 100%);z-index:2;pointer-events:none}
.bo-stage.room::after{content:"";position:absolute;left:0;right:0;top:38%;bottom:0;background:linear-gradient(180deg,rgba(10,12,16,.55) 0%,rgba(10,12,16,.18) 12%,rgba(10,12,16,0) 32%),radial-gradient(80% 70% at 84% 8%,rgba(255,238,205,.15),rgba(255,238,205,0) 60%),linear-gradient(0deg,rgba(4,8,14,.28),rgba(4,8,14,0) 22%);z-index:2;pointer-events:none}
.bo-stage__cap{position:absolute;left:16px;bottom:14px;z-index:3;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(8,26,49,.6);backdrop-filter:blur(4px);border-radius:0;padding:6px 14px;display:none}
.bo-stage__cap.show{display:inline-block}
.bo-stage .bo-ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:13px;letter-spacing:1px}
.bo-studio__body{display:grid;grid-template-columns:1.15fr 1.05fr 1fr;align-items:stretch;border-top:1px solid var(--bo-wline)}
.bo-studio__body>*{border-right:1px solid var(--bo-wline);min-width:0}
.bo-studio__body>*:last-child{border-right:0}
.bo-sstep__col{display:flex;flex-direction:column}
.bo-sstep__col>.bo-sstep:first-child{border-bottom:1px solid var(--bo-wline);flex:1}
.bo-sstep{padding:16px 18px}
.bo-sstep__h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bo-sstep__n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7);font-size:11px;font-weight:800;flex:none;transition:background .2s,border-color .2s,color .2s}
.bo-sstep__n.done{background:var(--bo-green);border-color:var(--bo-green);color:#08240f}
.bo-sstep__h b{font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.2px}
.bo-sstep__hint{margin-left:auto;font-size:10px;color:rgba(255,255,255,.5);text-align:right}
.bo-pthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bo-pth{position:relative;border:1.5px solid rgba(255,255,255,.16);border-radius:0;overflow:hidden;background:none;padding:0;cursor:pointer;transition:border-color .15s,transform .15s}
.bo-pth:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.bo-pth img{width:100%;aspect-ratio:13/9;object-fit:cover;display:block}
.bo-pth span{position:absolute;left:0;right:0;bottom:0;font:600 10px var(--bo-font);color:rgba(255,255,255,.92);padding:16px 4px 5px;text-align:center;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(transparent,rgba(8,20,38,.88))}
.bo-pth.on{border-color:var(--bo-green);box-shadow:0 0 0 3px rgba(74,213,93,.22)}
.bo-pth.on span{color:var(--bo-green)}
.bo-fams{display:block}
.bo-fam__l{font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.45);margin:13px 0 7px}
.bo-fam__l:first-child{margin-top:0}
.bo-fam__row{display:flex;flex-wrap:wrap;gap:7px}
.bo-cc{position:relative;width:46px;border-radius:0;overflow:hidden;border:2px solid transparent;outline:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;background:none;transition:transform .12s}
.bo-cc:hover{transform:translateY(-2px)}
.bo-cc img{aspect-ratio:1;object-fit:cover;width:100%;display:block}
.bo-cc span{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:8px 2px 3px;text-align:center}
.bo-cc.on{border-color:var(--bo-green);outline-color:transparent;box-shadow:0 0 0 3px rgba(74,213,93,.25)}
.bo-cc.off{opacity:.5;filter:grayscale(.75) brightness(.8);cursor:not-allowed}
.bo-cc.off::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:1.5px;background:rgba(255,255,255,.65);transform:rotate(-45deg);pointer-events:none}
.bo-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.18);border-radius:0;padding:8px 12px;font:600 11.5px var(--bo-font);color:#fff;background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .15s,background .15s}
.bo-chip.on{border-color:var(--bo-green);background:rgba(74,213,93,.12)}
.bo-fmt{display:grid;grid-template-columns:1fr;gap:8px}
.bo-fmt .bo-chip{display:block;width:100%;text-align:left;padding:9px 12px}
.bo-fmt .bo-chip>span{display:block;font-weight:700;font-size:11.5px}
.bo-fmt small{display:block;margin-top:3px;color:rgba(255,255,255,.55);font-weight:500;font-size:10px;line-height:1.4}
.bo-sstep__col .bo-sstep{padding:12px 18px}
.bo-sstep__col .bo-sstep__h{margin-bottom:9px}
.bo-sstep__col .bo-m2row input{padding:6px 2px;font-size:13.5px;width:90px}
.bo-sstep__col .bo-m2row span{font-size:11px}
.bo-fmt .bo-chip{padding:7px 11px}
.bo-m2row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bo-m2row input{width:110px;border:0;border-bottom:1.5px solid rgba(255,255,255,.3);border-radius:0;padding:10px 2px;font:600 15px var(--bo-font);color:#fff;outline:0;background:transparent;transition:border-color .15s}
.bo-m2row input:focus{border-color:var(--bo-green)}
.bo-m2row span{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}
.bo-m2row span b{color:var(--bo-green);font-weight:700}
.bo-studio__foot{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;padding:14px 22px;border-top:1px solid var(--bo-wline);background:rgba(74,213,93,.06);flex-wrap:wrap}
.bo-specs{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bo-specs__t{font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--bo-green);line-height:1.5;border-right:1px solid var(--bo-wline);padding-right:20px}
.bo-specs>span{font-size:8.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.5);min-width:0}
.bo-specs>span b{display:block;font-family:var(--bo-font);font-style:normal;font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.2px;text-transform:none;margin-top:2px;white-space:nowrap}
.bo-studio__cta{display:flex;gap:8px;flex-wrap:wrap}
.bo-studio__cta .bo-btn{min-height:44px;padding:10px 20px;font-size:11px;letter-spacing:.4px}
.bo-studio__note{margin:16px auto 0;font-size:11px;color:rgba(255,255,255,.45);line-height:1.5;text-align:center;max-width:640px}
/* collections — expanding panels */
.bo-kx{display:flex;gap:10px;margin-top:36px;height:390px}
.bo-kp{position:relative;flex:1;border-radius:0;overflow:hidden;cursor:pointer;transition:flex .55s cubic-bezier(.22,.8,.24,1);background-size:cover;background-position:center;min-width:64px}
.bo-kp.on{flex:3.4}
.bo-kp__ov{position:absolute;inset:0;background:linear-gradient(190deg,rgba(10,31,58,.1) 30%,rgba(10,31,58,.92) 88%);transition:background .3s}
.bo-kp__side{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;opacity:1;transition:opacity .25s}
.bo-kp__side span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-size:13px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.bo-kp.on .bo-kp__side{opacity:0}
.bo-kp__b{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;opacity:0;transform:translateY(14px);transition:opacity .35s .18s,transform .35s .18s;min-width:300px}
.bo-kp.on .bo-kp__b{opacity:1;transform:none}
.bo-kp__kind{font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--bo-green-ink);background:var(--bo-green);padding:4px 10px;border-radius:0}
.bo-kp__kind--rm{color:#3b2a12;background:#e9c491}
.bo-kp__t{margin-top:12px;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.6px;color:#fff}
.bo-kp__g{margin-top:3px;font-family:var(--bo-serif);font-style:italic;font-size:15px;color:rgba(255,255,255,.75)}
.bo-kp__f{margin-top:12px;display:grid;gap:4px}
.bo-kp__f div{font-size:11.5px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-kp__sw{display:flex;gap:5px;margin-top:14px;align-items:center}
.bo-kp__sw img{width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.35);object-fit:cover}
.bo-kp__sw b{margin-left:5px;font-size:11px;color:rgba(255,255,255,.8);font-weight:700;white-space:nowrap}
/* grades compact */
.bo-ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:left}
/* ritual */
.bo-rit{background:linear-gradient(160deg,#0d2440,#0a1f3a);color:#fff;position:relative;overflow:hidden}
.bo-rit__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.28) saturate(110%)}
.bo-rit .bo-h2{color:#fff}.bo-rit .bo-h2 em{color:var(--bo-green)}.bo-rit .bo-ey{color:var(--bo-green)}.bo-rit .bo-lead{color:rgba(255,255,255,.78)}
.bo-rit.bo-sec{padding:clamp(44px,5.5vw,76px) 0}
.bo-rit__row{display:flex;align-items:stretch;gap:12px;margin-top:36px;text-align:left}
.bo-rc2{flex:1;display:flex;gap:14px;align-items:flex-start;border:1px solid var(--bo-wline);border-radius:0;padding:16px 18px;background:rgba(8,26,49,.62);backdrop-filter:blur(6px);transition:border-color .2s,transform .2s}
.bo-rc2:hover{border-color:rgba(74,213,93,.45);transform:translateY(-2px)}
.bo-rc2__vis{position:relative;display:flex;align-items:center;flex:none;margin-top:3px}
.bo-rc2__vis img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.35);margin-left:-11px}
.bo-rc2__vis img:first-child{margin-left:0}
.bo-rc2__vis img.dim{filter:brightness(.5)}
.bo-rc2__ok{position:absolute;right:-7px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--bo-green);color:#08240f;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #0a1f3a}
.bo-rc2__tx b{display:flex;align-items:baseline;gap:9px;color:#fff;font-size:14px;font-weight:800;letter-spacing:-.2px}
.bo-rc2__tx b i{font-family:var(--bo-serif);font-style:italic;font-weight:600;font-size:19px;color:var(--bo-green)}
.bo-rc2__tx p{margin:5px 0 0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.55}
.bo-rit__ln{flex:none;align-self:center;width:32px;height:1px;background:linear-gradient(90deg,rgba(74,213,93,.15),var(--bo-green));position:relative}
.bo-rit__ln::after{content:"";position:absolute;right:-1px;top:-3.5px;border:4px solid transparent;border-left-color:var(--bo-green)}
.bo-rit__cta{display:flex;justify-content:center;margin-top:30px}
/* enquiry */
.bo-quote{display:grid;grid-template-columns:1fr;margin-top:44px;align-items:start;text-align:left}
.bo-qcard{display:grid;grid-template-columns:.8fr 1.55fr;border-radius:0;overflow:hidden;box-shadow:0 50px 100px -46px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.08)}
.bo-qside{position:relative;background-size:cover;background-position:center;min-height:100%}
.bo-qside__ov{position:absolute;inset:0;background:linear-gradient(165deg,rgba(8,26,49,.88) 0%,rgba(8,26,49,.7) 100%)}
.bo-qside__in{position:relative;padding:32px 28px 28px;display:flex;flex-direction:column;gap:20px;height:100%}
.bo-qside__t{font-family:var(--bo-serif);font-size:clamp(24px,2.2vw,30px);line-height:1.25;color:#fff}
.bo-qside__t em{font-style:italic;color:var(--bo-green)}
.bo-qside__tr{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:10px}
.bo-qside__tr li{position:relative;padding-left:24px;color:rgba(255,255,255,.82);font-size:12.5px}
.bo-qside__tr li::before{content:"";position:absolute;left:2px;top:5px;width:8px;height:5px;border-left:2px solid var(--bo-green);border-bottom:2px solid var(--bo-green);transform:rotate(-45deg)}
.bo-qf{display:grid;gap:18px;align-content:start;padding:30px 32px 26px;background:#fff}
.bo-qf__chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:#8cf19c;background:rgba(74,213,93,.14);border:1px solid rgba(74,213,93,.4);border-radius:0;padding:6px 13px;white-space:nowrap;align-self:flex-start}
.bo-qf__chip i{width:7px;height:7px;border-radius:50%;background:var(--bo-green);box-shadow:0 0 8px rgba(74,213,93,.8)}
.bo-qf label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--bo-navy)}
.bo-qf input,.bo-qf textarea{border:0;border-bottom:1.5px solid rgba(16,35,61,.18);border-radius:0;padding:10px 2px;font:500 14px var(--bo-font);color:var(--bo-ink);outline:0;width:100%;resize:vertical;background:transparent;transition:border-color .18s}
.bo-qf input:focus,.bo-qf textarea:focus{border-color:var(--bo-green)}
.bo-qf__2{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.bo-qf__ok{display:none;background:rgba(74,213,93,.12);border:1px solid rgba(74,213,93,.4);color:var(--bo-green-text);border-radius:0;padding:14px 16px;font-size:13.5px;font-weight:600}
.bo-qf__foot{display:flex;align-items:center;justify-content:flex-end;margin-top:2px}
.bo-qf__send{letter-spacing:1.6px;text-transform:uppercase;font-size:12px}
.bo-qf__send span{display:inline-block;margin-left:6px;transition:transform .2s}
.bo-qf__send:hover span{transform:translateX(4px)}
.bo-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
@media(max-width:960px){
 .bo-hero__grid{grid-template-columns:1fr}
 .bo-hero__in{min-height:0}
 .bo-trust{grid-template-columns:1fr 1fr}.bo-thero{grid-column:span 2;grid-row:auto;min-height:250px}
 .bo-pgrid{grid-template-columns:repeat(2,1fr)}
 .bo-rit__row{flex-direction:column}
 .bo-rit__ln{display:none}
 .bo-studio__body{grid-template-columns:1fr 1fr}
 .bo-studio__body>*{border-bottom:1px solid var(--bo-wline)}
 .bo-studio__body>*:nth-child(2n){border-right:0}
 .bo-sstep__col{grid-column:1/-1}
 .bo-specs{gap:12px 16px}
 .bo-kx{flex-direction:column;height:auto}
 .bo-kp{min-height:76px;flex:none}
 .bo-kp.on{flex:none;min-height:340px}
 .bo-kp__side{bottom:auto;top:50%;transform:translateY(-50%);justify-content:flex-start;left:22px}
 .bo-kp__side span{writing-mode:horizontal-tb;transform:none}
}
@media(max-width:600px){
 /* Statszeile mobil (31.08.2026): zentriert und hochwertig -- vorher lief
    das nowrap-Label "Solid oak wear layer" in die Nachbarspalte
    ("...WEAR LAYERBESPOKE MADE", Screenshot des Eigentuemers). */
 .bo-hero__stats{display:grid;width:100%;grid-template-columns:repeat(2,1fr);row-gap:24px;column-gap:10px;padding:22px 14px;text-align:center}
 .bo-hst{padding:0 6px;border-left:0}
 .bo-hst__vis{justify-content:center}
 .bo-hst>span:last-child{white-space:normal;line-height:1.45;letter-spacing:1.1px;max-width:16ch;margin-left:auto;margin-right:auto}
 .bo-pgrid{grid-template-columns:1fr}
 .bo-qf__2{grid-template-columns:1fr}
 .bo-trust{grid-template-columns:1fr;gap:9px}.bo-tc{padding:14px 15px}
 .bo-pthumbs{grid-template-columns:repeat(3,1fr)}
 .bo-pth img{aspect-ratio:4/3}
 .bo-studio__body{grid-template-columns:1fr}
 .bo-studio__body>*{border-right:0}
 .bo-studio__cta{width:100%}
 .bo-studio__cta .bo-btn{flex:1;justify-content:center}
 .bo-qcard{grid-template-columns:1fr}
 .bo-qside__in{padding:22px 20px}
 .bo-qf{padding:22px 20px}
 .bo-qf__send{width:100%;justify-content:center}
 .bo-qf__send{justify-content:center}
}

/* ===== bespoke mobile rework (2026-07-15) — carousel + compact trust cards ===
   Mobile only. Section 1 ("From wide planks…") becomes a swipe carousel instead
   of a tall stack; Section 2 ("Engineered for living…") trust cards get a clean,
   compact single-column layout (the old grid squeezed them to ~32px = verbuckt). */
@media(max-width:600px){
	/* Section 1 — pattern tiles as a horizontal swipe band */
	.bo-pgrid--compact{display:flex!important;grid-template-columns:none!important;gap:12px!important;
		overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
		margin:24px -5vw 0!important;padding:4px 5vw 14px!important;scroll-padding-left:5vw}
	.bo-pgrid--compact::-webkit-scrollbar{display:none}
	.bo-pgrid--compact .bo-pt{flex:0 0 80vw!important;max-width:80vw!important;scroll-snap-align:start;aspect-ratio:16/13!important}

	/* Section 2 — trust cards: force clean single column, compact rows */
	.bo-trust{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:26px!important}
	.bo-thero{grid-column:1/-1!important;min-height:190px!important}
	.bo-tc{grid-template-columns:44px 1fr!important;column-gap:12px!important;row-gap:1px!important;
		align-items:start!important;padding:14px 15px!important;min-height:0!important;
		border-top-width:1px!important;border-radius:0!important;width:auto!important}
	.bo-tc__i,.bo-tc__i--tex{grid-row:1/4!important;align-self:start!important;margin-top:2px!important;width:44px!important;height:44px!important}
	.bo-tc b{grid-column:2!important;font-size:14px!important;line-height:1.25!important}
	.bo-tc b+span{grid-column:2!important;margin-top:1px!important}
	.bo-tc__d{grid-column:2!important;margin-top:5px!important;font-size:12px!important;line-height:1.45!important;color:rgba(255,255,255,.75)!important}
	.bo-tc__n{font-size:24px!important;top:6px!important;right:12px!important}
}

/* =====================================================================
   Kontaktsektion: helle Flaeche, Foto statt Schleier   (31.08.2026)
   ---------------------------------------------------------------------
   In einem Stueck entfernbar.

   1. HELLE FLAECHE. Die Sektion trug bo-sec--dark. Der Entwurf zeigt sie
      auf dem hellen Grund der Seite, und die Grundklassen sind dafuer schon
      gebaut. Der Modifikator ist weg; hier stehen nur die Feinheiten, die
      der helle Grund braucht.

   2. DAS FOTO WAR DA -- ES ERTRANK NUR.
      .bo-qside traegt Picture-4.png seit jeher. Darueber lag
      .bo-qside__ov mit rgba(8,26,49,.88) bis .70 -- ein Schleier, der das
      Bild praktisch zudeckt.

      GEMESSEN, nicht geschaetzt. Das Bild wurde von der laufenden Seite
      geladen (1254 x 1254; es kommt als WebP zurueck, obwohl es .png
      heisst -- Cloudflare/Rocket konvertiert) und im Browser Pixel fuer
      Pixel ausgewertet:

          Zone oben (dort steht der Titel)   Luminanz 0,3610
          Zone unten (dort steht die Liste)  Luminanz 0,0714
          gesamt                             Luminanz 0,2167

      Das Foto ist oben HELL und unten dunkel -- genau umgekehrt zum
      Textbedarf. Weisser Titel ohne Schleier haette dort nur 2,56:1.
      Modelliert ueber die Deckkraft:

          20 %  3,08:1      50 %  4,46:1
          30 %  3,43:1      60 %  5,24:1
          40 %  3,88:1      88 %  10,27:1  (bisher)

      Ab rund 52 % haelt die hellste Zone die 4,5:1. Gewaehlt sind 65 %
      oben und 35 % unten: oben liegt der Titel auf dem hellen Teil des
      Fotos und braucht die Deckung, unten ist das Foto ohnehin dunkel und
      die Liste haette dort selbst ohne Schleier 8,65:1. So bleibt vom Bild
      so viel stehen wie moeglich, ohne dass eine Zeile unter AA faellt.

   3. DIE KARTE. Der Schatten war fuer die dunkle Flaeche gerechnet und
      wirkt auf Hell wie ein Fleck; er wird flacher. Die obere Kante
      bekommt die gruene Linie aus dem Entwurf.

   ---------------------------------------------------------------------
   OFFEN, und das gehoert dazu: die Entwurfsdatei selbst konnte nicht
   gelesen werden -- die Design-MCP verlangt eine Anmeldung, die in einer
   nicht-interaktiven Sitzung nicht laeuft. Layout, Aufbau und Texte
   stimmten bereits mit dem Entwurf ueberein; was hier NEU aus dem
   Bildschirmfoto abgeleitet ist, sind die helle Flaeche, die gruene
   Kartenkante und die Schattenstaerke. Exakte Hexwerte, Abstaende und
   Zustaende (Hover, Fokus) sind gegen die echte Datei zu pruefen.
   ===================================================================== */

/* Die Seite setzt nirgends eine Grundschrift: bespoke-oak.css wird ohne
   Abhaengigkeit eingebunden (inc/core.php:1023), und die Huelle heisst
   .bo-page, nicht .hfv2-page -- die Regeln des Designsystems greifen hier
   also nicht. Heute kommt die Schrift vom Theme. Das faellt erst auf, wenn
   das Theme sie einmal nicht mehr setzt; dann stuende die ganze Seite in
   der Standardschrift des Browsers. --bo-font ist genau das, was heute
   dargestellt wird. */
.bo-page{font-family:var(--bo-font)}

.bo-sec--light-enq{background:var(--bo-bg);color:var(--bo-ink)}

/* RUECKFALLFARBE HINTER DEM FOTO.
   .bo-qside traegt nur ein background-image. Laedt es nicht -- langsame
   Verbindung, 404 nach einer Umbenennung in der Mediathek -- stuende der
   weisse Text auf dem hellgrauen Sektionsgrund: gemessen 1,12:1, also
   unlesbar. Mit der Navy-Grundfarbe darunter bleibt er bei 16,5:1, egal was
   mit dem Bild passiert.
   Gefunden, weil die Kontrastpruefung genau diesen Fall gemeldet hat. */
.bo-sec--light-enq .bo-qside{background-color:var(--bo-deep)}

/* Der Schleier: oben deckend, unten offen — siehe Messung im Kopf. */
.bo-sec--light-enq .bo-qside__ov{
	background:linear-gradient(165deg,
		rgba(8,26,49,.65) 0%,
		rgba(8,26,49,.52) 55%,
		rgba(8,26,49,.35) 100%);
}
.bo-sec--light-enq .bo-qcard{
	border:1px solid var(--bo-line);
	border-top:3px solid var(--bo-green);
	border-radius:0;
	box-shadow:0 24px 60px -34px rgba(18,43,76,.34);
}
/* Auf hellem Grund braucht das Formular keinen eigenen Rahmen mehr. */
.bo-sec--light-enq .bo-qf{background:#fff}

/* DIE DREIERLISTE WURDE ABGESCHNITTEN.
   .bo-qside__in steht auf height:100%, die Kartenhoehe kommt aber aus der
   Formularspalte. Im Render gemessen: Inhalt der linken Spalte 448px, Karte
   388px -- und .bo-qcard traegt overflow:hidden. Die letzten Zeilen der Liste
   ("Samples from 1.99", "No newsletters, no lists") verschwanden also still.

   Mit min-height statt height waechst die Spalte, wenn ihr Inhalt mehr
   braucht, und die Rasterzeile waechst mit. Kein Beschnitt mehr, egal wie
   lang die Liste einmal wird. */
.bo-sec--light-enq .bo-qside__in{height:auto;min-height:100%}

/* DIE FORMULARFELDER.
   Sie standen als Unterstrich (border-bottom 1,5px, Grund transparent) und
   mit `font:500 14px`. Der Entwurf zeigt GEFUELLTE Felder, und MASTER-PROMPT 2
   fuehrt dasselbe Primitiv: "Formularfeld -- gefuellt, ohne Rahmen,
   Mono-Beschriftung darueber, >= 16 px Schrift".

   Die 14px waren dabei nicht nur eine Stilfrage: iOS zoomt beim Fokus in jedes
   Feld unter 16px hinein und kommt von selbst nicht zurueck. Auf einem
   Anfrageformular ist das der Moment, in dem jemand aufgibt.

   Gerechnet auf dem gefuellten Grund #f1f3f6:
       Eingabetext #182033   14,61:1
       Platzhalter #59616b    5,64:1
   Die Haarlinie bleibt: ohne sie steht das Feld mit 1,11:1 gegen die weisse
   Karte und ist als Bedienelement kaum auszumachen.

   Weil der Rahmen weg ist, braucht der Fokus eine eigene Anzeige -- ein
   Innenring in Gruen. `outline:0` ohne Ersatz waere hier ein Rueckschritt. */
.bo-sec--light-enq .bo-qf input,
.bo-sec--light-enq .bo-qf textarea{
	background:#f1f3f6;
	border:1px solid var(--bo-line);
	border-radius:0;
	padding:13px 14px;
	font:500 16px var(--bo-font);
}
.bo-sec--light-enq .bo-qf input:focus,
.bo-sec--light-enq .bo-qf textarea:focus{
	border-color:var(--bo-green-text);
	box-shadow:inset 0 0 0 2px var(--bo-green-text);
}
.bo-sec--light-enq .bo-qf label{
	font-family:var(--bo-mono,ui-monospace,'IBM Plex Mono',Menlo,monospace);
	margin-bottom:7px;
	display:block;
}

@media(max-width:860px){
	/* Einspaltig sitzt der Text direkt auf dem Foto, ohne die dunkle Spalte
	   daneben — dort deckt der Schleier durchgehend staerker. */
	.bo-sec--light-enq .bo-qside__ov{
		background:linear-gradient(180deg,rgba(8,26,49,.72) 0%,rgba(8,26,49,.62) 100%);
	}
}

/* =============================================================================
   HERO AUF DAS MASS DER KATEGORIESEITEN  (2026-08-31, v1.11.45)

   Gemessen vorher: 667px bei 1440 und 783px bei 375, gegen 520 bzw. 336 des
   Kategorie-Heros. .bo-hero hatte gar keine min-height -- die Hoehe kam
   vollstaendig aus dem Inhalt, und der groesste Posten war die
   Statistik-Zeile (234px bei 375). Die steht jetzt als eigenes Band
   darunter (siehe pages/bespokeoak.php), damit der Hero die Zielhoehe
   ueberhaupt erreichen kann.

   Dieselben Werte wie .hf-hero--compact in hf-hero-optik.css.
   In einem Stueck rueckbaubar: diesen Block und das Band im PHP entfernen.
   ========================================================================== */
.bo-hero__in{
  min-height:clamp(400px,86vw,520px);
  padding:clamp(28px,3vw,40px) 0 clamp(32px,3.2vw,44px)
}
.bo-hero__d{max-width:520px;margin-top:14px}
.bo-hero__cta{margin-top:20px}

/* Das ausgeloeste Band. Flaeche wie die eingelassenen Karten der
   Startseiten-Sektionen, damit es als Fortsetzung des Heros liest und nicht
   als fremder Block. */
.bo-statband{background:var(--bo-deep,#0a1f3a);padding:18px 0}
.bo-statband .bo-hero__stats{margin:0;padding:0;border:0}

@media(max-width:760px){
  .bo-hero__in{min-height:clamp(300px,64vw,420px);padding:24px 0 28px}
  .bo-statband{padding:14px 0}
}

/* =============================================================================
   NUR MOBIL — Hero-Knoepfe und Vorspann  (2026-08-31, v1.11.48)

   Gemessen bei 320/375/414 px: die beiden Knoepfe waren 192 und 242 px breit
   und brachen dadurch ungleich um -- auf dem Telefon ist die volle Spalte die
   Norm, sonst steht der zweite Knopf halb angeschnitten. Der Vorspann nahm
   bei 320 px 144 px ein, der Hero insgesamt 63 % der Bildschirmhoehe.

   Desktop bleibt unberuehrt: alles steht in einer Media Query bis 760 px.
   ========================================================================== */
@media(max-width:760px){
  .bo-hero__cta{display:flex;flex-direction:column;gap:10px;width:100%}
  .bo-hero__cta .bo-btn{width:100%;justify-content:center}
  .bo-hero__t{font-size:clamp(28px,8.5vw,34px)}
  .bo-hero__d{font-size:14.5px;line-height:1.5;max-width:none}
}