/* Homepage blocks under review (story, forest facts, videos, clients, questions). Loaded only on the preview
   addresses (?home_preview=a|b|c). Colors and type come from the homepage's own tokens (home_v2.twig). */

.hs-h1{font-size:clamp(40px,5.3vw,80px)!important;max-width:900px!important;line-height:1.03}

/* Shared pieces */
.hs-story,.hs-watch,.hs-clients,.hs-faq{padding:96px 0}
.hs-story h2,.hs-watch h2,.hs-clients h2,.hs-faq h2{font-size:clamp(36px,4vw,58px);line-height:1.04;margin:18px 0 0}
.hs-story h2 em,.hs-watch h2 em,.hs-clients h2 em,.hs-faq h2 em{font-style:italic;color:var(--wood)}
.hs-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.hs-copy p{margin:18px 0 0;max-width:60ch;color:var(--muted);font-size:17px;line-height:1.7}
.hs-copy .btn,.hs-copy .btn-row{margin-top:28px}
.hs-split figure{margin:0}
.hs-split figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.hs-split figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* Story */
.hs-story{background:var(--paper-2);border-top:1px solid var(--rule)}
.hs-story .hs-split{margin-top:6px}
.hs-years{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--green)}
.hs-years li{position:relative;padding:20px 24px 0 0}
.hs-years li::before{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--green)}
.hs-years b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:40px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.hs-years span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted);max-width:26ch}

/* Inside the dark forest section */
.hs-forest{border-top:1px solid rgba(255,255,255,.22);padding-top:44px}
.hs-forest-story{max-width:760px;margin-bottom:44px}
.hs-forest-story p:not(.kicker){margin:14px 0 0;font-size:18px;line-height:1.7;color:rgba(255,255,255,.9)}
.hs-forest-story a{border-bottom:1px solid rgba(255,255,255,.6);font-weight:600;white-space:nowrap}
.hs-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.hs-facts div{min-width:0}
.hs-facts dt{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(46px,5.4vw,78px);line-height:1;color:#E6D3B8;font-variant-numeric:tabular-nums}
.hs-facts dd{margin:10px 0 0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);max-width:26ch}
.hs-how{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:52px}
.hs-how figure{margin:0}
.hs-how img{width:100%;border-radius:2px}
.hs-how figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.hs-how ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hs-how li{padding:16px 0;border-top:1px solid rgba(255,255,255,.22);font-size:15px;line-height:1.55;color:rgba(255,255,255,.82)}
.hs-how li b{display:block;font-size:16px;color:#fff;margin-bottom:2px}
.hs-forest-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}

/* Videos */
.hs-watch{background:var(--paper)}
.hs-watch--dark{background:var(--green-deep);color:#fff}
.hs-watch--dark h2 em{color:#E6D3B8}
.hs-watch-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end}
.hs-watch-head p{margin:0;font-size:17px;color:var(--muted)}
.hs-watch--dark .hs-watch-head p{color:rgba(255,255,255,.8)}
.hs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.hs-tabs button{font:600 13px/1 'Figtree',system-ui,sans-serif;letter-spacing:.04em;padding:12px 18px;border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);cursor:pointer}
.hs-tabs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.hs-vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px;margin-top:28px}
.hs-vid{display:block;min-width:0}
.hs-vid[hidden]{display:none}
.hs-shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#18241A}
.hs-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hs-vid:hover .hs-shot img{transform:scale(1.04)}
.hs-play{position:absolute;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center}
.hs-play::after{content:"";margin-left:3px;border-left:13px solid var(--green-deep);border-top:8px solid transparent;border-bottom:8px solid transparent}
.hs-vid small{display:block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.hs-vid b{display:block;margin-top:4px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:23px;line-height:1.15}
.hs-vid:hover b{text-decoration:underline;text-underline-offset:4px}
.hs-vids--dark small,.hs-watch--dark .hs-vid small{color:#DCE5D6}
.hs-vids--4{margin-top:52px}
.hs-watch .textlink{display:inline-block;margin-top:40px}
.hs-feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:start}
.hs-vid--big b{font-size:clamp(26px,2.6vw,38px)}
.hs-vid--big .hs-play{width:72px;height:72px;left:22px;bottom:22px}
.hs-list{display:grid;gap:0}
.hs-vid--row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.2)}
.hs-vid--row:first-child{border-top:0;padding-top:0}
.hs-vid--row small{margin-top:0}
.hs-vid--row b{font-size:20px}
.hs-vid--row .hs-play{width:32px;height:32px;left:8px;bottom:8px}
.hs-vid--row .hs-play::after{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}

/* Clients */
.hs-clients{background:var(--paper);border-top:1px solid var(--rule)}
.hs-clients figure img{aspect-ratio:16/10}
.hs-names{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hs-names li{border:1px solid var(--rule);background:#fff;padding:9px 14px;font-size:14px;border-radius:2px}

/* Questions */
.hs-faq{background:var(--paper-2);border-top:1px solid var(--rule)}
.hs-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:start}
.hs-faq details{border-top:1px solid var(--rule);padding:20px 0}
.hs-faq details:last-of-type{border-bottom:1px solid var(--rule)}
.hs-faq summary{cursor:pointer;font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;line-height:1.2;list-style-position:outside}
.hs-faq details p{margin:10px 0 0;max-width:64ch;color:var(--muted);font-size:16.5px;line-height:1.7}
.hs-faq details a{color:var(--green);font-weight:600;border-bottom:1px solid currentColor;white-space:nowrap}

/* Preview bar + video window */
.hs-switch{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 100px);padding:6px;background:#FFF3C4;color:#5A4500;border:1px solid #E6CF73;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:12.5px;font-weight:700;overflow-x:auto;white-space:nowrap}
.hs-switch span{padding:0 10px;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.hs-switch a{padding:9px 13px;border-radius:3px}
.hs-switch a:hover{background:rgba(90,69,0,.12)}
.hs-switch a[aria-current="page"]{background:#5A4500;color:#FFF3C4}
.hs-player{width:min(1100px,94vw);padding:0;border:0;background:#000;overflow:visible}
.hs-player::backdrop{background:rgba(10,16,11,.86)}
.hs-player-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.hs-player-x{position:absolute;right:0;top:-46px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.hs-story :focus-visible,.hs-watch :focus-visible,.hs-clients :focus-visible,.hs-faq :focus-visible,.hs-forest :focus-visible,.hs-switch :focus-visible,.hs-player :focus-visible{outline:3px solid var(--wood);outline-offset:3px}

@media (max-width:1100px){
  .hs-vids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hs-story,.hs-watch,.hs-clients,.hs-faq{padding:56px 0}
  .hs-split,.hs-how,.hs-watch-head,.hs-feature,.hs-faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .hs-watch-head{gap:12px}
  .hs-years{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;margin-top:40px}
  .hs-years b{font-size:34px}
  .hs-facts{grid-template-columns:minmax(0,1fr);gap:22px}
  .hs-forest{padding-top:32px}
  .hs-vids{gap:28px 16px}
  .hs-vid b{font-size:20px}
  .hs-faq summary{font-size:23px}
  .hs-switch{left:10px;right:76px;transform:none;max-width:none;bottom:10px}
}
@media (max-width:520px){
  .hs-vids{grid-template-columns:minmax(0,1fr)}
  .hs-vids--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .hs-vids--4 .hs-vid b{font-size:17px}
  .hs-vids--4 .hs-play{width:36px;height:36px;left:8px;bottom:8px}
  .hs-vid--row{grid-template-columns:112px minmax(0,1fr);gap:14px}
}

/* ---------- Preview E (owner's reference: ennisandbrown.co.uk) ---------- */

/* Facts strip under the hero */
.hs-strip{background:#fff;border-bottom:1px solid var(--rule)}
.hs-strip-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hs-strip-row>div{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:start;padding:22px 22px 22px 0}
.hs-strip-row>div+div{padding-left:22px;border-left:1px solid var(--rule)}
.hs-strip svg{grid-row:span 2;width:28px;height:28px;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hs-strip h3{font-family:'Figtree',system-ui,sans-serif;font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.3}
.hs-strip p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* Live workshop clip */
.hs-live .hs-watch-head h2{margin-top:12px}
.hs-livebox{position:relative;display:block;aspect-ratio:16/9.6;overflow:hidden;border-radius:2px;background:#18241A}
.hs-livebox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-livebox::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,22,15,.85) 0%,rgba(14,22,15,0) 45%)}
.hs-live-tag{position:absolute;z-index:2;left:18px;top:18px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:2px;background:rgba(14,22,15,.62);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hs-live-tag i{width:8px;height:8px;border-radius:50%;background:#E25C45;box-shadow:0 0 0 3px rgba(226,92,69,.3)}
.hs-live-cap{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;display:flex;align-items:center;gap:16px;color:#fff}
.hs-live-cap .hs-play{position:static;flex-shrink:0;width:64px;height:64px}
.hs-live-cap small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#DCE5D6}
.hs-live-cap b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1.1}
.hs-livebox:hover .hs-live-cap b{text-decoration:underline;text-underline-offset:5px}
.hs-list-more{justify-self:start;margin-top:16px;color:#fff}
.hs-len{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:2px;background:rgba(0,0,0,.72);color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* Story band */
.hs-band{background:var(--green-ink);color:#fff;overflow:hidden}
.hs-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.hs-band-copy{text-align:center}
.hs-band-copy .kicker{justify-content:center}
.hs-band-copy h2{font-size:clamp(34px,3.6vw,52px);line-height:1.05;margin:14px 0 18px}
.hs-band-copy h2 em{font-style:italic;color:#E6D3B8}
.hs-band-copy p:not(.kicker){margin:0 auto;max-width:54ch;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.88)}
.hs-band-copy .btn{margin-top:24px}
.hs-band-pics{position:relative;height:340px}
.hs-band-pics img{position:absolute;width:72%;aspect-ratio:4/3;object-fit:cover;border:6px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hs-band-pics--l img:first-child{left:0;top:6px;transform:rotate(-5deg)}
.hs-band-pics--l img:last-child{right:0;bottom:6px;transform:rotate(4deg)}
.hs-band-pics--r img:first-child{right:0;top:6px;transform:rotate(5deg)}
.hs-band-pics--r img:last-child{left:0;bottom:6px;transform:rotate(-4deg)}

/* Founder clip in the corner */
.hs-float{position:fixed;z-index:94;left:16px;bottom:72px;width:184px;border-radius:4px;overflow:hidden;background:var(--green-deep);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.hs-float[hidden]{display:none}
.hs-float a{display:block;color:#fff}
.hs-float video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.hs-float a>span{display:block;padding:9px 12px 10px}
.hs-float small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#DCE5D6}
.hs-float b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:17px}
.hs-float-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;cursor:pointer}

/* Tighter spacing everywhere on this preview (owner: too much white space between blocks) */
.hs-compact .hero{min-height:min(100vh,720px)}
.hs-compact .hs-watch{padding:56px 0}
.hs-compact .hs-feature{margin-top:28px}
.hs-compact .cats{padding-bottom:8px}
.hs-compact .furniture{padding:32px 0}
.hs-compact .favs{padding:32px 0}
.hs-compact .forest .wrap{padding-top:52px;padding-bottom:44px}
.hs-compact .forest-story{margin:14px 0 0}
.hs-compact .forest-story h2{margin-bottom:20px}
.hs-compact .hs-forest{margin-top:36px;padding-top:32px}
.hs-compact .hs-vids--4{margin-top:32px}
.hs-compact .hs-forest-links{margin-top:28px}

@media (max-width:900px){
  .hs-strip-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-strip-row>div{padding:16px 12px 16px 0;grid-template-columns:24px minmax(0,1fr);column-gap:10px}
  .hs-strip-row>div+div{padding-left:12px}
  .hs-strip-row>div:nth-child(3){padding-left:0;border-left:0}
  .hs-strip-row>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .hs-strip svg{width:22px;height:22px}
  .hs-strip h3{font-size:14px}
  .hs-strip p{font-size:12.5px}
  .hs-live-cap .hs-play{width:48px;height:48px}
  .hs-band-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:40px;padding-bottom:40px}
  .hs-band-pics{height:200px}
  .hs-band-pics--r{display:none}
  .hs-band-pics img{width:62%}
  .hs-float{width:150px;bottom:66px;left:10px}
  .hs-float b{font-size:16px}
  .hs-compact .hs-watch{padding:36px 0}
  .hs-compact .forest .wrap{padding-bottom:28px}
  .hs-compact .hs-forest{margin-top:24px;padding-top:24px}
}
@media (prefers-reduced-motion:reduce){.hs-band-pics img{transform:none!important}}

.hs-band{border-top:1px solid rgba(255,255,255,.12)}

/* Facts strip at the foot of the dark Watch section */
.hs-live .hs-strip{margin-top:36px;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.18)}
.hs-live .hs-strip-row>div{padding-top:24px;padding-bottom:0}
.hs-live .hs-strip-row>div+div{border-left-color:rgba(255,255,255,.18)}
.hs-live .hs-strip svg{stroke:#DCE5D6}
.hs-live .hs-strip h3{color:#fff}
.hs-live .hs-strip p{color:rgba(255,255,255,.75)}
.hs-live .hs-list-more{margin-top:8px}
@media (max-width:900px){
  .hs-live .hs-strip{margin-top:24px}
  .hs-live .hs-strip-row>div{padding-top:16px;padding-bottom:16px}
  .hs-live .hs-strip-row>div:nth-child(n+3){border-top-color:rgba(255,255,255,.18)}
}

/* Clients line under the hero */
.hs-clientsline{background:#fff;border-bottom:1px solid var(--rule)}
.hs-clientsline .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;padding-top:14px;padding-bottom:14px;font-size:14.5px;color:var(--muted);text-align:center}
.hs-clientsline b{color:var(--ink);font-weight:700}
.hs-clientsline a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border-bottom:1px solid currentColor;padding-bottom:2px}
/* Popular projects line in the Structures card */
.hs-popular{margin:26px 0 0;font-size:15px;line-height:1.6;color:var(--muted);text-align:center}
.hs-popular a{color:var(--green);font-weight:600;border-bottom:1px solid rgba(83,117,75,.45)}
.hs-popular a:hover{border-bottom-color:currentColor}

/* The category tiles rise over the Structures photo; on phones they started on top of its buttons. */
@media (max-width:900px){.hs-compact .cat-row{margin-top:20px}}

/* founder clip (owner, Oct 14): clean video, the name in a band under it. The interview is 4:3 inside a 16:9 video,
   so a 4:3 frame shows it whole with no black side bars (the wide intro shots lose only their side edges). */
.hs-float{width:200px;border-radius:8px}
.hs-float a>.hs-float-media{position:relative;display:block;padding:0;aspect-ratio:4/3;overflow:hidden;background:#1b2a1f}
.hs-float-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .4s}
.hs-float-media.is-playing img{opacity:0}
/* YouTube's player is drawn at 640x360 and shrunk to the frame's height (150/360), centred, so it keeps its clean desktop look */
.hs-float-yt{position:absolute;left:-33.33px;top:0;width:640px;height:360px;border:0;transform-origin:0 0;transform:scale(.41667);pointer-events:none}
.hs-float a>.hs-float-cap{display:block;padding:7px 10px 8px}
.hs-float small{font-size:8.5px}
.hs-float b{display:block;font-size:14px}
.hs-float-x{width:22px;height:22px;font-size:14px;right:5px;top:5px;z-index:2}
@media (max-width:700px){.hs-float{width:168px}.hs-float-yt{left:-28px;transform:scale(.35)}.hs-float b{font-size:13px}}

/* the four facts as their own dark band between the categories and Customer Favorites (owner, Oct 14) */
.hs-strip-band{background:#1E2B20;margin:56px 0 0}
.hs-strip-band .hs-strip{background:transparent;border:0}
.hs-strip-band .hs-strip-row>div{padding-top:30px;padding-bottom:30px}
.hs-strip-band .hs-strip-row>div+div{border-left-color:rgba(255,255,255,.18)}
.hs-strip-band .hs-strip svg{stroke:#DCE5D6}
.hs-strip-band .hs-strip h3{color:#fff}
.hs-strip-band .hs-strip p{color:rgba(255,255,255,.75)}
@media (max-width:760px){.hs-strip-band{margin-top:36px}.hs-strip-band .hs-strip-row>div{padding-top:18px;padding-bottom:18px}.hs-strip-band .hs-strip-row>div:nth-child(n+3){border-top-color:rgba(255,255,255,.18)}}

/* Popular Projects as five link cards (owner, Oct 14, option C) - shared by the homepage and the category page */
.fr-popular{margin:28px 0 0}
.fr-popular h3{font:500 26px/1.1 'Cormorant Garamond',Georgia,serif;color:#1E2B20;margin:0 0 14px;letter-spacing:0}
.fr-popular__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fr-popular__grid a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;background:#fff;border:1px solid #D9D8CE;border-radius:10px;font:600 14.5px/1.3 Figtree,system-ui,sans-serif;color:#26302A;text-decoration:none;transition:border-color .15s}
.fr-popular__grid a::after{content:"\2192";color:#53754B;flex:0 0 auto}
.fr-popular__grid a:hover{border-color:#1F4D36}
.fr-popular__grid a:focus-visible{outline:3px solid #53754B;outline-offset:2px}
@media (max-width:900px){.fr-popular__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fr-popular__grid{grid-template-columns:1fr}}

/* founder clip (owner, Oct 14): a small horizontal card - a wide 16:9 clip with the name beside it, not a tall block */
.hs-float{width:300px;border-radius:10px}
.hs-float a{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center}
.hs-float a>.hs-float-media{aspect-ratio:16/9;height:auto}
.hs-float-yt{left:0;transform:scale(.234375)}
.hs-float a>.hs-float-cap{padding:8px 30px 8px 12px}
.hs-float b{font-size:15px;line-height:1.15}
@media (max-width:700px){.hs-float{width:240px}.hs-float a{grid-template-columns:120px minmax(0,1fr)}.hs-float-yt{transform:scale(.1875)}.hs-float b{font-size:13.5px}}
/* (owner, Oct 14) only the clip: a 16:9 rectangle, nothing under or beside it, the whole picture (no cropped sides) */
.hs-float{width:260px;border-radius:10px}
.hs-float a{display:block}
.hs-float a>.hs-float-media{aspect-ratio:16/9}
.hs-float-media img{object-fit:cover}
.hs-float-yt{left:0;top:0;transform:scale(.40625)}
@media (max-width:700px){.hs-float{width:200px}.hs-float-yt{transform:scale(.3125)}}
/* the video itself is 4:3 inside YouTube's 16:9 player (black bars at the sides): the player is enlarged and shifted
   so the picture fills the 16:9 card edge to edge - no black sides, a little trimmed top and bottom */
.hs-float-yt{left:-43.3px;top:-24.4px;transform:scale(.5417)}
@media (max-width:700px){.hs-float-yt{left:-33.3px;top:-18.75px;transform:scale(.41667)}}
/* (owner, Oct 14) bottom-right corner, just above the chat bubble; large when the page opens, small once scrolled.
   The player inside is sized from the card width W: scale = W/480, left = -80*scale, top = -(360*scale - W*9/16)/2 */
.hs-float{left:auto;right:20px;bottom:96px;transition:width .45s ease}
.hs-float-yt{transition:transform .45s ease,left .45s ease,top .45s ease}
.hs-float.is-big{width:480px}
.hs-float.is-big .hs-float-yt{left:-80px;top:-45px;transform:scale(1)}
.hs-float.is-big .hs-float-x{width:30px;height:30px;font-size:18px;right:8px;top:8px}
@media (max-width:700px){
  .hs-float{right:12px;bottom:84px}
  .hs-float.is-big{width:300px}
  .hs-float.is-big .hs-float-yt{left:-50px;top:-28.1px;transform:scale(.625)}
}
@media (prefers-reduced-motion:reduce){.hs-float,.hs-float-yt{transition:none}}
/* the player is drawn at 1280x720 and always shrunk, so YouTube never shows its own title or pause button over the
   clip (card width W: scale = W/960, left = -160*scale, top = -(720*scale - W*9/16)/2) */
.hs-float-yt{width:1280px;height:720px;left:-43.33px;top:-24.38px;transform:scale(.27083)}
.hs-float.is-big .hs-float-yt{left:-80px;top:-45px;transform:scale(.5)}
@media (max-width:700px){
  .hs-float-yt{left:-33.33px;top:-18.75px;transform:scale(.20833)}
  .hs-float.is-big .hs-float-yt{left:-50px;top:-28.13px;transform:scale(.3125)}
}

/* Watch section (owner, Oct 14): the headline on the left, one moving row of videos per chapter on the right.
   A row stops under the mouse (it then follows the mouse, see the script); the video under the mouse lifts, the others fade. */
.hs-reels{padding:84px 0;overflow:hidden}
.hs-reels-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:40px;align-items:center}
.hs-reels-intro{padding-left:max(24px,calc((100vw - 1240px)/2 + 24px))}
.hs-reels-intro h2{margin-top:12px;font-size:clamp(40px,4.4vw,60px);line-height:1.02}
.hs-reels-intro>p{margin:18px 0 28px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.8)}
.hs-reels-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hs-reels-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 14px;background:#fff;color:var(--green-deep);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hs-reels-btn .hs-f-play{width:24px;height:24px;background:var(--green-deep)}
.hs-reels-btn .hs-f-play::after{border-left-color:#fff}
.hs-reels-all{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.hs-reels-rows{display:flex;flex-direction:column;gap:14px;min-width:0}
.hs-reel-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;transition:opacity .4s}
.hs-reels-rows:hover .hs-reel-row{opacity:.45}
.hs-reels-rows .hs-reel-row:hover{opacity:1}
.hs-reel-name{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:30px;line-height:1;color:#E6D3B8}
.hs-reel-name small,.hs-reel-name span{display:block;font-family:inherit;font-style:normal}
.hs-reel-name small{margin-bottom:5px;font-family:Figtree,system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:#DCE5D6}
.hs-reel-name span{margin-top:6px;padding-right:12px;font-family:Figtree,system-ui,sans-serif;font-size:11px;line-height:1.3;color:rgba(255,255,255,.6)}
.hs-reel{overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hs-reel-track{display:flex;width:max-content;animation:hs-reel var(--dur,60s) linear infinite}
.hs-reel-track.is-rev{animation-direction:reverse}
.hs-reel.is-scrub .hs-reel-track{animation:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@keyframes hs-reel{to{transform:translateX(-50%)}}
.hs-reel-run{display:flex;gap:14px;padding-right:14px}
.hs-f{position:relative;flex:none;width:208px;overflow:hidden;border-radius:6px;outline:1px solid rgba(255,255,255,.14);color:#fff;transition:width .5s,transform .35s,opacity .35s}
.hs-reel-row:hover .hs-f{width:272px}
.hs-reel:hover .hs-f{opacity:.6}
.hs-reel .hs-f:hover,.hs-reel .hs-f:focus-visible{opacity:1;transform:translateY(-4px)}
/* the whole YouTube cover shows (16:9, height:auto so the img's height attribute can't squash it into a crop) */
.hs-f img,.hs-f video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#18241A;transition:filter .4s}
.hs-f:hover img,.hs-f:hover video{filter:brightness(1.08)}
.hs-f-sq{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background-size:cover;background-position:center}
.hs-f-sq::before{content:"";position:absolute;inset:-12px;background:inherit;filter:blur(10px) brightness(.55)}
.hs-f .hs-f-sq img{position:relative;width:auto;height:100%;margin:0 auto;aspect-ratio:4/3;object-fit:contain;background:none}
.hs-f-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:9px;padding:46px 10px 9px;background:linear-gradient(transparent,rgba(8,14,10,.72) 40%,rgba(8,14,10,.95))}
.hs-f-cap small{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#DCE5D6;margin-bottom:2px}
.hs-f-cap b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:15px;line-height:1.12}
.hs-f-play{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#fff}
.hs-f-play::after{content:"";position:absolute;left:10px;top:8px;border-left:8px solid var(--green-deep);border-top:5px solid transparent;border-bottom:5px solid transparent}
.hs-f-live{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:20px;background:rgba(0,0,0,.55);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hs-f-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#E25C45}
@media (max-width:980px){
  .hs-reels{padding:60px 0}
  .hs-reels-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hs-reels-intro{padding:0 20px}
  .hs-reel-row{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:20px}
  .hs-reel-name{font-size:26px}.hs-reel-name small,.hs-reel-name span{display:inline;margin:0 8px 0 0}.hs-reel-name span{margin:0 0 0 10px}
}
/* Phones and visitors who ask for less motion: the rows stand still and scroll sideways by finger. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .hs-reel{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .hs-reel::-webkit-scrollbar{display:none}
  .hs-reel-track{animation:none}
  .hs-reel-run[aria-hidden]{display:none}
  .hs-reels-rows:hover .hs-reel-row,.hs-reel:hover .hs-f{opacity:1}
  .hs-reel-row:hover .hs-f{width:208px}
}
@media (hover:none) and (max-width:700px){.hs-f,.hs-reel-row:hover .hs-f{width:180px}}
/* (owner, Oct 14: "not this big") the opening size is 360px wide */
.hs-float.is-big{width:360px}
.hs-float.is-big .hs-float-yt{left:-60px;top:-33.75px;transform:scale(.375)}
@media (max-width:700px){.hs-float.is-big{width:260px}.hs-float.is-big .hs-float-yt{left:-43.33px;top:-24.38px;transform:scale(.27083)}}
/* (owner, Oct 14) keep Raul's whole head: the picture is pinned to the top of the card, only the bottom is trimmed */
.hs-float-yt,.hs-float.is-big .hs-float-yt{top:0}
@media (max-width:700px){.hs-float-yt,.hs-float.is-big .hs-float-yt{top:0}}
.hs-float a>.hs-float-media{overflow:hidden}