/* ---- strategy: marquee band (design-variants round, 2026-08-03, "01 marquee
   band"). Flow layout rather than the fixed .cv canvas: --h:auto lets the
   band size to its own content and the type / strip / rule stack normally,
   so the section drops from 1905px to roughly one screen. ---- */
.sec-strategy { --h:auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:54px 0 62px; overflow:hidden; background:#fff}
.sec-strategy::before{content:none}
.sec-strategy .mq-cv { position:relative; z-index:2; width:1200px; margin:0 auto }
.sec-strategy .mq-head { display:grid; grid-template-columns:1fr 300px; gap:0 60px; align-items:end }
.sec-strategy .mq-eyebrow { grid-column:1 / -1; margin:0 0 22px; font-family:'Garet', sans-serif; font-size:14px; font-weight:700; letter-spacing:2.3px; color:rgb(37, 57, 33); text-transform:uppercase }
.sec-strategy .mq-eyebrow i { display:inline-block; width:52px; height:1px; background:rgb(37, 57, 33); vertical-align:middle; margin-right:14px; opacity:0.5 }
.sec-strategy .mq-h { margin:0; max-width:760px; font-family:'Billmake', sans-serif; font-size:60px; line-height:0.98; letter-spacing:1px; color:rgb(37, 57, 33); text-transform:uppercase }
.sec-strategy .mq-h em { display:block; margin-top:8px; padding-left:0.06em; font-family:'Voyage', sans-serif; font-weight:400; font-style:normal; font-size:70px; line-height:1.02; letter-spacing:0; color:rgb(179, 43, 93); text-transform:none }
.sec-strategy .mq-note { margin:0 0 10px; padding-left:20px; border-left:2px solid rgb(192, 212, 68); font-family:'Garet', sans-serif; font-size:15px; line-height:26px; color:rgba(37, 57, 33, 0.82) }
.sec-strategy .mq-note b { display:block; margin-bottom:10px; font-family:'Luxury', sans-serif; font-weight:700; font-size:13px; letter-spacing:3px; text-transform:uppercase }

.sec-strategy .mq-strip { position:relative; z-index:2; margin-top:44px }
/* only the RIGHT edge fades. It signals the row continues past the viewport.
   This is a MASK on the strip, not an absolutely positioned overlay. The old
   ::after was abspos inside .mq-strip, which is overflow-x:auto -- and an
   abspos child of a scroll container SCROLLS WITH ITS CONTENT. So the moment
   the row was dragged, the 130px white gradient slid inland and washed out
   whichever tile it landed on (reported 2026-08-04; invisible at scrollLeft 0,
   which is why every static screenshot looked clean). A mask is applied to the
   element's own box and stays pinned to the right edge at any scroll offset.
   Fading to transparent over the white band reads identically to the old
   white gradient. */
.sec-strategy .mq-strip{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 130px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 130px),transparent);
}
/* static gallery: no auto-scroll (2026-08-04). The row still overflows the
   viewport, so it stays swipeable/scrollable by hand — that is the only way to
   reach clips 5 to 10 now that nothing advances on its own. Scrollbar hidden
   so it reads as a clean row; the edge fades signal there is more. */
/* 'contain' stops the scroll CHAINING to the page but still allows this
   element's own rubber-band overscroll, so a stray sideways swipe bounced the
   row past its ends and showed the white page behind it. The strip is full
   bleed and 308px tall, i.e. a target your thumb crosses on every vertical
   scroll, which is why it was so easy to hit (reported 2026-08-04).
   'none' keeps it scrollable but kills the bounce. */
.sec-strategy .mq-strip { overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:none }
.sec-strategy .mq-strip::-webkit-scrollbar { display:none }
/* full bleed both sides: the row starts hard against the left edge so a clip
   fills that corner rather than leaving a margin of blank paper (owner call,
   2026-08-04), and runs off the right edge */
.sec-strategy .mq-track { display:flex; gap:20px; width:max-content;
  padding-left:0; padding-right:20px }

.sec-strategy .mq-tile { position:relative; flex:0 0 auto; width:300px; height:432px; overflow:hidden; background:rgb(37, 57, 33); transition:transform .45s ease, box-shadow .45s ease }
.sec-strategy .mq-tile video { width:100%; height:100%; object-fit:cover; display:block }
.sec-strategy .mq-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55)); opacity:0; transition:opacity .45s ease }
.sec-strategy .mq-tile span { position:absolute; left:18px; bottom:16px; z-index:2; font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:rgb(242, 224, 220); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease }
.sec-strategy .mq-tile:hover { transform:translateY(-10px); box-shadow:0 18px 34px rgba(37,57,33,0.22) }
.sec-strategy .mq-tile:hover::after, .sec-strategy .mq-tile:hover span { opacity:1; transform:none }

.sec-strategy .mq-rule { position:relative; z-index:2; width:1200px; margin:40px auto 0; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(37,57,33,0.2); padding-top:22px }
.sec-strategy .mq-rule p { margin:0; font-family:'Garet', sans-serif; font-size:14px; letter-spacing:0.4px; color:rgb(37, 57, 33) }
.sec-strategy .mq-cta { display:inline-block; padding:15px 34px; border-radius:3px; font-family:'Luxury', sans-serif; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; text-align:center; transition:transform .3s ease, background-color .3s ease }
.sec-strategy .mq-cta [data-x="0"] { display:flex; justify-content:center; align-items:normal; gap:5px; flex-direction:row }
.sec-strategy .mq-cta [data-x="1"] { display:block }
.sec-strategy .mq-cta:hover { transform:translateY(-2px); background-color:rgb(37, 57, 33) !important }
.sec-featured { --h:225.8px; margin-top:16px }
.sec-featured .e-187 { left:291.7px; top:54.3px; width:84.6px; height:31.8px; opacity:0.55; overflow:clip; z-index:1; object-fit:cover }
.sec-featured .e-189 { left:428.1px; top:112px; width:178.9px; height:14px; white-space:nowrap; font-family:'Garet', sans-serif; font-size:14px; font-weight:700; line-height:14px; letter-spacing:2.3px; color:rgb(37, 57, 33); text-align:center; text-transform:uppercase; z-index:2 }
.sec-featured .e-191 { left:643.7px; top:41.3px; width:259.7px; height:57.8px; overflow:clip; filter:brightness(1) contrast(1) saturate(0) blur(0px) hue-rotate(0deg); z-index:3; object-fit:cover }
.sec-featured .e-194 { left:318.9px; top:64.4px; width:129.1px; height:161.5px; opacity:0.55; overflow:clip; z-index:4; object-fit:cover }
.sec-featured .e-196 { left:731.9px; top:64.4px; width:129.1px; height:161.5px; opacity:0.55; overflow:clip; z-index:5; object-fit:cover }
.sec-colophon { --h:45px; background-color:rgb(238, 131, 59) }
.sec-colophon .e-517 { left:0px; top:16.5px; width:1200px; height:12px; white-space:nowrap; font-family:'Garet', sans-serif; font-size:12px; font-weight:600; line-height:12px; letter-spacing:1.7px; color:rgb(37, 57, 33); text-align:center; text-transform:uppercase; z-index:1 }
/* ---- how it works: hover swap (design round 2026-08-03, variant 04) -----
   Not on the 1200px canvas: a hard 50/50 seam, the step list on the dark
   left half driving the clip on the right. */
.sec-process{
  height:auto; min-height:720px;
  display:grid; grid-template-columns:1fr 1fr;
  background:rgb(37,57,33); overflow:hidden; position:relative;
}
.sec-process::before{content:none}

.sec-process .bp-left{
  position:relative; background:rgb(37,57,33);
  padding:84px 0 76px clamp(96px,12vw,180px);
  display:flex; flex-direction:column; justify-content:center;
}
.sec-process .bp-left::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/JL_PAPER_4-scaled.jpg") 0 0/cover repeat;
  opacity:.24; mix-blend-mode:multiply;
}
.sec-process .bp-inner{position:relative; z-index:2; max-width:560px}

.sec-process .bp-eyebrow{
  margin:0 0 16px; font-family:'Luxury', sans-serif; font-size:12px;
  letter-spacing:3.6px; text-transform:uppercase; color:rgb(192,212,68);
}
.sec-process .bp-tag{margin:0 0 40px; line-height:.92}
.sec-process .bp-a{
  display:block; font-family:'Billmake', sans-serif; font-size:58px;
  letter-spacing:1px; text-transform:uppercase; color:rgb(242,224,220);
}
.sec-process .bp-b{
  /* the thin accent face, not Billmake. Voyage IS an italic drawing, so no
     font-style:italic here or it gets faux slanted on top of its own slant. */
  display:block; margin-top:8px; font-family:'Voyage', sans-serif;
  font-size:46px; color:rgb(192,212,68);
}

/* one row per step, all forced to the tallest so the three blocks are the
   same depth and their lime indicator bars are the same length. Without this
   each step sizes to its own copy and they stagger 94 / 117 / 140px. */
.sec-process .bp-list{
  list-style:none; margin:0 0 42px; padding:0;
  display:grid; grid-auto-rows:1fr;
}
.sec-process .bp-step{
  position:relative; display:grid; grid-template-columns:76px 1fr; gap:20px;
  align-items:baseline; padding:24px 0 24px 18px;
  border-top:1px solid rgba(242,224,220,.22);
  transition:padding-left .4s ease, background .4s ease;
  cursor:pointer;
}
.sec-process .bp-step:last-child{border-bottom:1px solid rgba(242,224,220,.22)}
.sec-process .bp-step::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:rgb(192,212,68); transform:scaleY(0); transform-origin:top;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.sec-process .bp-step.is-on{padding-left:30px; background:rgba(242,224,220,.06)}
.sec-process .bp-step.is-on::after{transform:scaleY(1)}

.sec-process .bp-n{
  font-family:'Billmake', sans-serif; font-size:40px; line-height:1; color:transparent;
  -webkit-text-stroke:1.2px rgba(242,224,220,.6); transition:color .4s ease;
}
.sec-process .bp-step.is-on .bp-n{color:rgb(192,212,68); -webkit-text-stroke-color:rgb(192,212,68)}
.sec-process .bp-k{
  display:block; margin-bottom:9px; font-family:'Luxury', sans-serif; font-size:11px;
  letter-spacing:3px; text-transform:uppercase; color:rgba(242,224,220,.6);
}
.sec-process .bp-step.is-on .bp-k{color:rgb(192,212,68)}
.sec-process .bp-txt p{
  margin:0; font-family:'Billmake', sans-serif; font-size:22px; line-height:1.34;
  text-transform:uppercase; letter-spacing:.4px; color:rgba(242,224,220,.72);
  transition:color .4s ease;
}
.sec-process .bp-step.is-on .bp-txt p{color:rgb(242,224,220)}

.sec-process .bp-cta{
  align-self:flex-start; display:inline-block; padding:16px 38px;
  background:rgb(179,43,93); color:rgb(242,224,220); text-decoration:none;
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.4px;
  text-transform:uppercase; transition:background .3s ease, color .3s ease;
}
.sec-process .bp-cta:hover{background:rgb(192,212,68); color:rgb(37,57,33)}

.sec-process .bp-media{position:relative; overflow:hidden; background:rgb(37,57,33); place-self:center; width:372px; height:536px; outline:1px solid rgba(242,224,220,.55); outline-offset:12px}
.sec-process .bp-media video,
.sec-process .bp-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1s ease, transform 1.6s ease;
}
.sec-process .bp-media video.is-on,
.sec-process .bp-media img.is-on{opacity:1; transform:scale(1)}
.sec-process .bp-mark{
  position:absolute; left:-1px; bottom:64px; z-index:3; padding:15px 26px 15px 34px;
  background:rgb(242,224,220); color:rgb(37,57,33);
  font-family:'Billmake', sans-serif; font-style:italic; font-size:31px; line-height:1;
}

@media (prefers-reduced-motion:reduce){
  .sec-process *{transition:none!important}
}

/* ---- meet Morgan: medallion band (design round 2026-08-03, variant 04) ----
   Not on the 1200px canvas: a full bleed green field, rectangular portrait on
   the left with a small turning badge at its lower right, story on the right. */
.sec-about{
  height:auto; min-height:100vh; margin-top:0;
  display:grid; grid-template-columns:44% 56%; align-items:center;
  padding:96px clamp(48px,5vw,86px);
  background:rgb(37,57,33); color:rgb(242,224,220);
  position:relative; overflow:hidden;
}
.sec-about::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/JL_TEXTURE_4-scaled.jpg") center/cover;
  opacity:.12; mix-blend-mode:screen;
}

/* small second photo of Morgan, bottom right (2026-08-07). Absolutely
   positioned so it adds to the section without moving ANYTHING in the existing
   two column grid. Same hairline ring + drop shadow as .ba-frame so it reads as
   part of the same band. */
.sec-about .ba-extra{
  position:absolute; right:clamp(48px,5vw,86px);
  /* anchored to the CENTRED content, not the section bottom: the column is
     vertically centred, so the rule sits at 50% + 165px at every height. A
     bottom: offset drifted into "24 HOUR TURNAROUND" as the window shortened.
     170x212 keeps the source 1024x1280 aspect, so nothing is cropped. */
  top:calc(50% + 180px);
  z-index:3; width:170px; height:212px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(242,224,220,.28), 0 18px 42px rgba(0,0,0,.32);
}

.sec-about .ba-media{position:relative; justify-self:center; z-index:2}
.sec-about .ba-frame{
  width:376px; height:498px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(242,224,220,.28), 0 26px 60px rgba(0,0,0,.28);
}
.sec-about .ba-frame img,
.sec-about .ba-frame video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.sec-about .ba-media:hover .ba-frame img,
.sec-about .ba-media:hover .ba-frame video{transform:scale(1.06)}

/* tangerine field, forest ink, her stacked mark at the centre (2026-08-04).
   238,131,59 sampled off BASK Icon_Tangerine.png, not eyeballed. Lime ring
   text scored 1.6:1 on this orange and vanished, so the ring went forest. */
.sec-about .ba-badge{
  position:absolute; right:-52px; bottom:-45px; width:164px; height:164px;
  display:grid; place-items:center; border-radius:50%; z-index:4;
  background:rgb(238,131,59); box-shadow:0 0 0 1px rgba(37,57,33,.45);
}
.sec-about .ba-ring{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  animation:ba-turn 18s linear infinite;
}
@keyframes ba-turn{to{transform:rotate(360deg)}}
.sec-about .ba-ring text{
  font-family:'Luxury', sans-serif; font-size:10px; letter-spacing:1.6px;
  fill:rgb(179,43,93); text-transform:uppercase;
}
/* her stacked lockup, painted as a MASK from the one vector file. The art is
   a single flat colour, so masking makes the colourway a CSS value: swap
   background for Blush 248,225,223 / Berry 199,37,104 / White #fff. */
.sec-about .ba-core{
  display:block; width:86px; height:86px;
  background:rgb(179,43,93);
  -webkit-mask:url(../img/bask-stacked.svg) center/contain no-repeat;
          mask:url(../img/bask-stacked.svg) center/contain no-repeat;
}

.sec-about .ba-stack{max-width:600px; justify-self:start; position:relative; z-index:2}
.sec-about .ba-eyebrow{
  margin:0 0 24px; font-family:'Luxury', sans-serif; font-size:11.5px;
  letter-spacing:3.6px; text-transform:uppercase; color:rgb(192,212,68);
}
.sec-about .ba-tag{margin:0; line-height:.95}
.sec-about .ba-a{
  display:block; font-family:'Billmake', sans-serif; font-size:70px;
  letter-spacing:1.4px; text-transform:uppercase; color:rgb(242,224,220);
}
.sec-about .ba-b{
  /* the thin accent face, not Billmake. Voyage IS an italic drawing, so no
     font-style:italic here or it gets faux slanted on top of its own slant. */
  display:block; margin-top:8px; font-family:'Voyage', sans-serif;
  font-size:43px; color:rgb(192,212,68);
}
.sec-about .ba-cols{
  margin:30px 0 0; column-count:2; column-gap:44px;
  font-family:'Garet', sans-serif; font-size:14px; line-height:1.9;
  color:rgba(242,224,220,.82);
}
.sec-about .ba-cols p{margin:0 0 14px}
.sec-about .ba-rule{
  margin:30px 0 0; display:flex; gap:20px; align-items:center; padding-top:18px;
  border-top:1px solid rgba(242,224,220,.24);
  font-family:'Garet', sans-serif; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:rgba(242,224,220,.6);
}
.sec-about .ba-rule span{white-space:nowrap}
.sec-about .ba-rule i{font-style:normal; color:rgb(238,131,59)}
.sec-about .ba-cta{
  display:inline-block; margin-top:30px; padding:17px 46px;
  background:rgb(179,43,93); color:rgb(242,224,220); text-decoration:none;
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.4px;
  text-transform:uppercase;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.sec-about .ba-cta:hover{
  background:rgb(192,212,68); color:rgb(37,57,33); transform:translateY(-2px);
}

@media (prefers-reduced-motion:reduce){
  .sec-about .ba-ring{animation:none}
  .sec-about *{transition:none!important}
}

/* ---- why: three plain columns (design round 2026-08-03, variant 04) -----
   Not on the 1200px canvas: a centred block on cream, the three benefits
   side by side held apart by hairlines only. No cards, no fills, no photos.
   Classes prefixed bw-. */
/* ---- services: tab bar with swapping detail (design round 2026-08-03,
   variant 08 carrying the folder-tab content format) ---------------------
   Replaces the old sec-services band + the three package bands. Not on the
   1200px canvas: a 1240px wrap on a full-bleed green band, like the hero. */
/* packages fills the window: the head and tabs keep their natural height and
   the pane area takes whatever is left, so the band is exactly one screen
   (2026-08-03). min-height keeps it usable on short windows. */
/* The deep top padding is doing real work: the process band's left half is the
   same dark green, so with a small pad the two bands read as one field and the
   packages head sits right under "Three steps to the day". Box sizing is
   border-box, so this stays inside the one screen height (2026-08-03). */
.sec-services{height:100vh;min-height:760px;background-color:rgb(37,57,33);
  padding:128px 0 52px;display:flex;align-items:stretch;overflow:hidden}
.sec-services::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/JL_PAPER_4-scaled.jpg");background-size:cover;
  opacity:.22;mix-blend-mode:multiply}
.bsv-wrap{position:relative;z-index:2;width:1240px;max-width:calc(100vw - 80px);margin:0 auto;
  display:flex;flex-direction:column;min-height:0}

.bsv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:30px}
.bsv-eyebrow{font-family:'Luxury', sans-serif;font-size:12px;letter-spacing:3.6px;
  text-transform:uppercase;color:rgb(192,212,68);margin:0 0 14px}
.bsv-title{margin:0;line-height:.92}
.bsv-a{font-family:'Billmake', sans-serif;font-size:48px;letter-spacing:1.2px;
  text-transform:uppercase;color:rgb(242,224,220)}
.bsv-b{font-family:'Billmake', sans-serif; font-style:italic;font-size:50px;color:rgb(192,212,68);margin-left:.12em}
.bsv-note{margin:0 0 6px;font-size:13.5px;line-height:1.7;color:rgba(242,224,220,.62);
  max-width:270px;text-align:right}

.bsv-tabs{display:flex;border-top:1px solid rgba(242,224,220,.22);
  border-bottom:1px solid rgba(242,224,220,.22)}
.bsv-tab{flex:1;display:flex;align-items:baseline;gap:14px;background:none;border:0;
  cursor:pointer;text-align:left;padding:22px 26px;position:relative}
.bsv-tab+.bsv-tab{border-left:1px solid rgba(242,224,220,.22)}
.bsv-tab::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  background:rgb(192,212,68);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.bsv-tn{font-family:'Luxury', sans-serif;font-size:10px;letter-spacing:2.6px;color:rgba(192,212,68,.7)}
.bsv-tw{font-family:'Billmake', sans-serif;font-size:30px;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(242,224,220,.42);line-height:1;transition:color .35s ease}
.bsv-ta{margin-left:auto;font-family:'Billmake', sans-serif; font-style:italic;font-size:23px;
  color:rgba(242,224,220,.38);transition:color .35s ease}
.bsv-tab:hover .bsv-tw{color:rgba(242,224,220,.75)}
.bsv-tab.on .bsv-tw{color:rgb(242,224,220)}
.bsv-tab.on .bsv-ta{color:rgb(238,131,59)}
.bsv-tab.on::after{transform:scaleX(1)}

.bsv-panes{position:relative;flex:1;min-height:0}
.bsv-pane{position:absolute;inset:0;display:grid;grid-template-columns:1fr 430px;gap:56px;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.bsv-pane.on{opacity:1;visibility:visible}

.bsv-copy{position:relative;padding:44px 0 0;display:flex;flex-direction:column}
.bsv-wm{position:absolute;left:-30px;top:-8px;margin:0;z-index:0;pointer-events:none;
  font-family:'Billmake', sans-serif;font-size:290px;line-height:1;letter-spacing:2px;
  color:transparent;-webkit-text-stroke:1px rgba(242,224,220,.10)}
.bsv-copy > *:not(.bsv-wm){position:relative;z-index:1}
.bsv-kicker{font-family:'Luxury', sans-serif;font-size:11px;letter-spacing:2.8px;
  text-transform:uppercase;color:rgb(242,224,220);margin:0 0 16px}
.bsv-pname{margin:0;font-family:'Billmake', sans-serif;font-size:54px;letter-spacing:1.4px;
  text-transform:uppercase;color:rgb(242,224,220);line-height:.96}
.bsv-price{margin:8px 0 20px;font-family:'Billmake', sans-serif; font-style:italic;font-size:38px;color:rgb(238,131,59);line-height:1}
.bsv-blurb{margin:0 0 22px;font-family:'Garet', sans-serif;font-size:14.5px;line-height:1.8;
  color:rgba(242,224,220,.82);max-width:500px}
.bsv-incl{list-style:none;margin:0 0 30px;padding:0;max-width:460px}
.bsv-incl li{position:relative;padding:10px 0 10px 26px;font-size:14px;line-height:1.6;
  color:rgb(242,224,220);border-bottom:1px solid rgba(242,224,220,.16)}
.bsv-incl li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;
  border-radius:50%;background:rgb(238,131,59)}
.bsv-cta{align-self:flex-start;display:inline-block;padding:16px 44px;background:rgb(179,43,93);
  color:rgb(242,224,220);font-family:'Luxury', sans-serif;font-size:12px;letter-spacing:3.2px;
  text-transform:uppercase;text-decoration:none;transition:background .35s ease,color .35s ease}
.bsv-cta:hover{background:rgb(192,212,68);color:rgb(37,57,33)}

.bsv-shot{position:relative;overflow:hidden;background:rgb(37,57,33);margin:36px 0}
.bsv-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bsv-shot::after{content:"";position:absolute;inset:0;background:rgb(0,0,0);opacity:.10}
.bsv-pane.on .bsv-shot video{animation:bsv-zoom 18s ease-in-out infinite alternate}

@keyframes bsv-zoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .bsv-pane,.bsv-tab::after,.bsv-tw,.bsv-ta{transition:none!important}
  .bsv-pane.on .bsv-shot video{animation:none!important}
}


/* ---- contact band: raised card (design round 2026-08-03, variant 01) ----
   Off the 1200px canvas. The grid row is pinned because the reel's portrait
   aspect would otherwise drive the row height and stretch the card. */
.sec-inquire{
  height:auto; padding:76px 0 84px; background:rgb(37,57,33);
  display:flex; align-items:center; overflow:visible;
}
.sec-inquire::before{content:none}
.sec-inquire .bq-wrap{width:1200px; max-width:calc(100vw - 80px); margin:0 auto}

.sec-inquire .bq-head{text-align:center; margin-bottom:38px}
.sec-inquire .bq-eyebrow{
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.6px;
  text-transform:uppercase; color:rgb(192,212,68); margin:0 0 20px;
}
.sec-inquire .bq-tag{margin:0; line-height:.95}
.sec-inquire .bq-a,.sec-inquire .bq-c{
  display:block; font-family:'Billmake', sans-serif; font-size:42px;
  text-transform:uppercase; color:rgb(242,224,220);
}
.sec-inquire .bq-b{
  display:block; font-family:'Voyage', sans-serif; font-weight:400; font-size:50px;
  color:rgb(192,212,68); margin:2px 0;
}

.sec-inquire .bq-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:36px;
  /* the row was a hard 424px, which is exactly the height the form had before
     the launch wiring added the Email field: the Submit button then hung
     outside the blush card. minmax keeps the designed 424px whenever the
     content fits and lets the row grow instead of clipping when it does not. */
  grid-template-rows:minmax(424px, auto);
}

/* the form rides on a raised blush card, lifted off the dark band */
.sec-inquire .bq-card{
  height:100%; background:rgb(242,224,220); padding:34px 36px 32px;
  box-shadow:0 26px 60px rgba(0,0,0,.34);
  opacity:0; transform:translateY(26px);
  animation:bq-rise .8s .1s cubic-bezier(.2,.75,.2,1) forwards;
}
.sec-inquire .bq-card form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sec-inquire .bq-full{grid-column:1/-1}
.sec-inquire .bq-card input,
.sec-inquire .bq-card select,
.sec-inquire .bq-card textarea{
  width:100%; padding:14px 16px; border:1px solid rgba(37,57,33,.28); background:transparent;
  font-family:'Garet', sans-serif; font-size:14px; color:rgb(37,57,33); border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.sec-inquire .bq-card input::placeholder,
.sec-inquire .bq-card textarea::placeholder{color:rgba(37,57,33,.55)}
.sec-inquire .bq-card input:focus,
.sec-inquire .bq-card select:focus,
.sec-inquire .bq-card textarea:focus{
  outline:none; border-color:rgb(238,131,59); box-shadow:0 0 0 3px rgba(238,131,59,.14);
}
.sec-inquire .bq-card textarea{min-height:88px; resize:none}
.sec-inquire .bq-card button{
  grid-column:1/-1; margin-top:6px; padding:17px; background:rgb(179,43,93);
  color:rgb(242,224,220); border:0; font-family:'Luxury', sans-serif; font-size:13px;
  letter-spacing:3.4px; text-transform:uppercase; cursor:pointer;
  transition:background .3s ease;
}
.sec-inquire .bq-card button:hover{background:rgb(37,57,33)}

/* the badge overhangs, so only the inner frame clips */
.sec-inquire .bq-media{position:relative; height:100%; background:#000;
  opacity:0; transform:translateY(26px);
  animation:bq-rise .8s .24s cubic-bezier(.2,.75,.2,1) forwards;}
.sec-inquire .bq-frame{position:absolute; inset:0; overflow:hidden}
.sec-inquire .bq-media video{width:100%; height:100%; object-fit:cover; display:block}
/* her stacked mark, lime, hung off the top right corner of the clip
   (2026-08-04, replacing the "Hi I'm Morgan" bubble). Masked from the one
   vector file. The BOX is sized to the ARTWORK, not to the square viewBox:
   mask-size is deliberately larger than the box so the SVG's own padding is
   cropped away and the overhang can be measured off the letterforms. */
.sec-inquire .bq-badge{
  position:absolute; right:-30px; top:-32px; width:88px; height:114px;
  /* her tangerine, sampled from bask-logos/"BASK Stacked Logo_Tangerine.png"
     (#EE833B) — the same value the About badge circle already uses. The mark
     is the SVG as a mask filled with brand colour rather than the 304KB PNG,
     so this is her orange logo without the weight. */
  background:rgb(238,131,59);
  /* mask-position is EXPLICIT, not center. The artwork's ink centre sits at
     (1000.4, 1031.6) in the 2000 viewBox, i.e. 1.6% BELOW centre, so centring
     the image pushed the bottom of the SK past the box and clipped it. These
     offsets put the ink dead centre with ~2px of air all round. */
  -webkit-mask:url(../img/bask-stacked.svg) -37.5px -27px/163px 163px no-repeat;
          mask:url(../img/bask-stacked.svg) -37.5px -27px/163px 163px no-repeat;
  transform:rotate(-7deg); z-index:2;
}

@keyframes bq-rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .sec-inquire *{animation:none!important; opacity:1!important; transform:none!important}
  .sec-inquire .bq-badge{transform:rotate(-7deg)!important}
}

/* ---- closing band: full bleed closer (design round 2026-08-03, variant 01)
   Off the 1200px canvas. The footage carries the whole band, dropped back
   behind one centred line. */
.sec-cta{
  height:700px; overflow:hidden; display:grid; place-items:center;
  background:rgb(37,57,33); position:relative;
}
.sec-cta::before{content:none}
.sec-cta .bc-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:bc-drift 30s ease-in-out infinite alternate;
}
.sec-cta::after{
  content:""; position:absolute; inset:0; background:rgb(0,0,0); opacity:.62;
}

.sec-cta .bc-inner{position:relative; z-index:3; text-align:center; padding:0 40px}
.sec-cta .bc-eyebrow{
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:4px;
  text-transform:uppercase; color:rgb(192,212,68); margin:0 0 26px;
  opacity:0; animation:bc-up .8s .1s ease forwards;
}
.sec-cta .bc-line{
  margin:0; font-family:'Voyage', sans-serif; font-weight:400; font-size:64px; line-height:1.14;
  color:rgb(242,224,220); max-width:820px;
  opacity:0; animation:bc-up .9s .22s cubic-bezier(.2,.75,.2,1) forwards;
}
.sec-cta .bc-cta{
  display:inline-block; margin-top:40px; padding:19px 56px; background:rgb(179,43,93);
  color:rgb(242,224,220); font-family:'Luxury', sans-serif; font-size:13px;
  letter-spacing:3.4px; text-transform:uppercase; text-decoration:none;
  opacity:0; animation:bc-up .9s .38s cubic-bezier(.2,.75,.2,1) forwards;
  transition:background .3s ease, transform .3s ease;
}
.sec-cta .bc-cta:hover{background:rgb(192,212,68); color:rgb(37,57,33); transform:translateY(-2px)}

.sec-cta .bc-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:center; gap:44px; padding:16px 0;
  border-top:1px solid rgba(242,224,220,.18);
  font-family:'Luxury', sans-serif; font-size:11.5px; letter-spacing:3px;
  text-transform:uppercase; color:rgba(242,224,220,.82);
  opacity:0; animation:bc-up .9s .5s ease forwards;
}
.sec-cta .bc-foot span{display:flex; align-items:center; gap:44px}
.sec-cta .bc-foot span:not(:last-child)::after{
  content:""; width:4px; height:4px; border-radius:50%; background:rgb(238,131,59);
}

@keyframes bc-up{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes bc-drift{from{transform:scale(1.05)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@media (prefers-reduced-motion:reduce){
  .sec-cta *{animation:none!important; opacity:1!important; transform:none!important}
}

/* NAV-BASK-START */
/* ---- no header bar at all (2026-08-03) --------------------------------
   The white strip is gone entirely: the page opens straight onto the hero and
   the only navigation is a floating button top right. .sec-top is collapsed
   rather than removed so the burger keeps its existing JS binding. */
.sec-top{
  height:0!important; min-height:0!important; padding:0!important;
  background:none!important; overflow:visible!important; z-index:70;
}
.sec-top .cv{height:0!important; width:auto!important; overflow:visible!important}
.sec-top .cv > *{display:none!important}

/* the one control, floating over whatever section is behind it, so it carries
   her primary as a disc to stay legible on the light bands as well as the dark */
.sec-top .cv > .burger{
  display:flex!important; position:fixed!important;
  top:26px; right:30px; left:auto!important; bottom:auto!important;
  width:56px!important; height:56px!important; border-radius:50%;
  background:rgb(179,43,93); align-items:center; justify-content:center; gap:6px;
  box-shadow:0 6px 22px rgba(0,0,0,.24); z-index:80; cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.sec-top .cv > .burger span{
  width:24px; height:2px; background:rgb(242,224,220); display:block;
  transition:transform .3s ease;
}
.sec-top .cv > .burger:hover{background:rgb(37,57,33); transform:scale(1.06)}

/* the generated per element geometry for the menu. strip_own's
   '^\.menu-panel\b' pattern ALSO matched these ('.menu-panel .m-4 {...}'),
   so this step was deleting the entire menu layout and re-adding only the
   styling overrides below: all nine elements collapsed onto 0,0 and the photo
   rendered at its intrinsic size (reported 2026-08-04). They now live inside
   the step's own CSS, so the strip-and-append cycle is idempotent.
   Geometry only; faces and colours come from the Bask overrides below.
   Text boxes are height:auto because Bask's type is far larger than the
   source's and must not be boxed to the old line heights. */
.menu-cv{height:1042px!important}
.menu-panel .m-4{left:126px; top:106px; width:414px; height:621.6px; overflow:clip; object-fit:cover}
.menu-panel .m-6{left:126px; top:747.6px; width:414px; height:auto}
.menu-panel .m-7{left:126px; top:816.6px; width:auto; height:auto;
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:2.3px; text-transform:uppercase}
.menu-panel .m-9{left:126px; top:864.6px}
.menu-panel .m-11{left:710px; top:315.3px; width:auto; height:auto}
.menu-panel .m-14{left:710px; top:409.3px; width:auto; height:auto}
.menu-panel .m-17{left:710px; top:503.3px; width:auto; height:auto}
.menu-panel .m-20{left:710px; top:597.3px; width:auto; height:auto}
.menu-panel .m-23{left:710px; top:691.3px; width:auto; height:auto}

/* Bask's menu: her mark, her tagline, her email, and labels that point at
   sections which actually exist on this page */
.menu-panel .m-9{width:150px!important; height:auto!important; object-fit:contain!important}
.menu-panel .m-6{font-family:'Voyage', sans-serif; font-weight:400!important; font-size:30px!important;
  line-height:1.2!important; text-transform:none!important; color:rgb(37,57,33)!important}
.menu-panel .m-7{color:rgb(179,43,93)!important}
.menu-panel a[class^="m-"]{text-decoration:none}
.menu-panel h2 a{color:inherit; text-decoration:none; transition:color .25s ease}
.menu-panel h2 a:hover{color:rgb(179,43,93)}

/* the overlay extraction never captured per-span rules for these labels, so
   they were falling back to a system sans; set them in the site's own faces */
.menu-panel h2[class^="m-"]{font-family:'Billmake', sans-serif!important}
.menu-panel h2[class^="m-"] [data-x="0"]{
  font-family:'Luxury', sans-serif; font-size:14px; letter-spacing:3px;
  color:rgb(179,43,93); vertical-align:22px; margin-right:6px;
}
.menu-panel h2[class^="m-"] [data-x="1"]{
  font-family:'Billmake', sans-serif; font-size:40px; text-transform:uppercase;
  letter-spacing:.5px; color:rgb(37,57,33);
}

/* the close control has to clear the floating button */
.menu-close{top:22px!important; right:26px!important; z-index:95}
/* NAV-BASK-END */

/* ---- add ons: two quiet columns (design round 2026-08-03, round 2 variant 02)
   Off the 1200px canvas. Her blush ground and paper wash kept, the five
   shadowed cards replaced by one ruled line per item: three items in the left
   column, two in the right, price flush right in both. Classes prefixed bx-. */
.sec-addons{height:auto; background-color:rgb(242,224,220); padding:76px 0 82px}
/* rev round 1 (2026-08-18): paper wash dropped for a solid ground, and the head
   became a left rail: small photo labeled Add ons, all the text to the right. */
.sec-addons .bx-wrap{
  position:relative; z-index:2; width:1100px; max-width:calc(100vw - 80px); margin:0 auto;
  display:grid; grid-template-columns:300px 1fr; column-gap:76px; align-items:start;
}

.sec-addons .bx-side{position:relative}
.sec-addons .bx-photo{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover; margin-top:26px;
}
.sec-addons .bx-eyebrow{
  font-family:'Luxury',sans-serif; font-size:11px; letter-spacing:3.4px;
  text-transform:uppercase; color:rgb(179,43,93); margin:0 0 12px;
}
.sec-addons .bx-title{
  margin:0; font-family:'Billmake',sans-serif; font-size:38px; letter-spacing:1.4px;
  text-transform:uppercase; color:rgb(37,57,33); line-height:1; font-weight:400;
}
.sec-addons .bx-note{
  margin:0 0 26px; max-width:420px; text-align:left;
  font-family:'Garet',sans-serif; font-size:13.5px; line-height:1.7; color:rgba(37,57,33,.6);
}

.sec-addons .bx-cols{
  display:grid; grid-template-columns:1fr;
}
.sec-addons .bx-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:26px;
  padding:20px 0; border-top:1px solid rgba(37,57,33,.2);
  text-decoration:none; color:rgb(37,57,33);
}
.sec-addons .bx-item:last-child{border-bottom:1px solid rgba(37,57,33,.2)}
.sec-addons .bx-name{
  margin:0; font-family:'Luxury',sans-serif; font-size:13px; letter-spacing:1.8px;
  text-transform:uppercase; color:rgb(37,57,33); font-weight:400;
  transition:color .3s ease;
}
.sec-addons .bx-d{
  margin:8px 0 0; font-family:'Garet',sans-serif; font-size:12.5px; line-height:1.6;
  color:rgba(37,57,33,.58);
}
.sec-addons .bx-amt{
  font-family:'Voyage',sans-serif; font-weight:400; font-size:26px; line-height:1; color:rgb(179,43,93);
  white-space:nowrap;
}
.sec-addons .bx-amt small{
  display:block; font-family:'Garet',sans-serif; font-size:10px; letter-spacing:1.4px;
  text-transform:uppercase; color:rgba(37,57,33,.5); margin-top:5px; text-align:right;
}
.sec-addons .bx-item:hover .bx-name{color:rgb(179,43,93)}

.sec-addons .bx-foot{
  display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:42px;
}
.sec-addons .bx-foot p{
  margin:0; font-family:'Garet',sans-serif; font-size:13.5px; line-height:1.7;
  color:rgba(37,57,33,.6);
}
.sec-addons .bx-cta{
  display:inline-block; padding:15px 42px; background:rgb(179,43,93); color:rgb(242,224,220);
  font-family:'Luxury',sans-serif; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; transition:background .3s ease;
}
.sec-addons .bx-cta:hover{background:rgb(37,57,33)}

@media (prefers-reduced-motion:reduce){
  .sec-addons .bx-name,.sec-addons .bx-cta{transition:none}
}

/* ---- why: three plain columns (design round 2026-08-03, variant 04) -----
   Not on the 1200px canvas: a centred block on cream, the three benefits
   side by side held apart by hairlines only. No cards, no fills, no photos.
   Classes prefixed bw-. */
/* ---- reviews: banner rules (design round 2026-08-03, variant 05) --------
   Not on the 1200px canvas: the forest band goes full width, the quote sits
   between two edge to edge hairlines, and the labels sit in gaps in those
   rules. Built for ONE review (all she supplied). Classes prefixed br-. */
/* ---- why: three plain columns (design round 2026-08-03, variant 04) -----
   Not on the 1200px canvas: a centred block on cream, the three benefits
   side by side held apart by hairlines only. No cards, no fills, no photos.
   Classes prefixed bw-. */
.sec-why{
  height:auto; min-height:760px; background-color:#faf7f1;
  display:flex; align-items:center; justify-content:center;
  padding:96px 40px; overflow:hidden;
}
.sec-why::before{content:none}
.sec-why .bw-inner{
  width:1080px; max-width:100%; text-align:center;
  opacity:0; animation:bw-in .9s .1s cubic-bezier(.2,.75,.25,1) forwards;
}
.sec-why .bw-eyebrow{
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.8px;
  text-transform:uppercase; color:rgb(179,43,93); margin:0 0 18px;
}
.sec-why .bw-title{
  /* all Voyage accents pinned to the face's true weight (2026-08-03):
     400 everywhere, no synthesized bold */
  margin:0 0 66px; font-family:'Voyage', sans-serif; font-size:64px;
  line-height:1; color:rgb(37,57,33); font-weight:400;
}
.sec-why .bw-title em{font-style:normal; color:rgb(179,43,93)}
.sec-why .bw-cols{display:grid; grid-template-columns:repeat(3,1fr)}
.sec-why .bw-col{
  padding:0 40px; text-decoration:none; color:rgb(37,57,33);
  border-left:1px solid rgba(37,57,33,.16);
}
.sec-why .bw-col:first-child{border-left:0}
/* her sun mark in place of the plain dot. Painted as a MASK rather than an
   <img> so the single-colour art still takes the lime -> magenta hover the
   dot had, and one file serves both states. */
.sec-why .bw-dot{
  display:block; width:46px; height:46px; margin:0 auto 20px;
  background:rgb(192,212,68);
  -webkit-mask:url(../img/bask-icon.svg) center/contain no-repeat;
          mask:url(../img/bask-icon.svg) center/contain no-repeat;
  transition:background .35s ease, transform .5s cubic-bezier(.2,.75,.25,1);
}
.sec-why .bw-col:hover .bw-dot{
  background:rgb(179,43,93); transform:rotate(45deg);
}
.sec-why .bw-n{
  display:block; font-family:'Luxury', sans-serif; font-size:11px;
  letter-spacing:2.8px; color:rgb(238,131,59); margin-bottom:16px;
}
.sec-why .bw-claim{
  margin:0; font-family:'Billmake', sans-serif; font-size:22px; line-height:1.4;
  letter-spacing:2px; text-transform:uppercase; font-weight:400;
  transition:color .35s ease;
}
.sec-why .bw-col:hover .bw-claim{color:rgb(179,43,93)}
.sec-why .bw-cta{
  display:inline-block; margin-top:70px; padding:16px 46px;
  background:rgb(37,57,33); color:#faf7f1;
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.4px;
  text-transform:uppercase; text-decoration:none;
  transition:background .35s ease;
}
.sec-why .bw-cta:hover{background:rgb(179,43,93)}
@keyframes bw-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sec-why *{animation:none!important; opacity:1!important}
}

/* ---- reviews: banner rules (design round 2026-08-03, variant 05) --------
   Not on the 1200px canvas: the forest band goes full width, the quote sits
   between two edge to edge hairlines, and the labels sit in gaps in those
   rules. Built for ONE review (all she supplied). Classes prefixed br-. */
.sec-reviews{
  position:relative; height:auto; min-height:600px;
  background-color:rgb(37,57,33); overflow:hidden;
  display:flex; align-items:center; padding:88px 0;
}
.sec-reviews::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/JL_TEXTURE_6-scaled.jpg") repeat; opacity:.08;
  mix-blend-mode:screen;
}
.sec-reviews .br-inner{
  position:relative; z-index:2; width:100%;
  opacity:0; animation:br-in .9s .1s cubic-bezier(.2,.75,.25,1) forwards;
}
.sec-reviews .br-line{display:flex; align-items:center; gap:26px}
.sec-reviews .br-bar{flex:1; height:1px; background:rgba(242,224,220,.28)}
.sec-reviews .br-label{
  font-family:'Luxury', sans-serif; font-size:12px; letter-spacing:3.6px;
  text-transform:uppercase; color:rgb(192,212,68); white-space:nowrap;
}
.sec-reviews .br-line-top .br-label{margin-left:60px}
.sec-reviews .br-line-top .br-bar:first-child{max-width:60px}
.sec-reviews .br-line-foot .br-label{color:rgba(242,224,220,.7); margin-right:60px}
.sec-reviews .br-line-foot .br-bar:last-child{max-width:60px}
.sec-reviews .br-quote{
  margin:0 auto; max-width:1200px; padding:56px 120px;
  font-family:'Voyage', sans-serif; font-weight:400; font-size:31px;
  line-height:1.56; color:rgb(242,224,220); text-align:center;
}
@keyframes br-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sec-reviews *{animation:none!important; opacity:1!important}
}

/* ---- footer: reel panel (design round 2026-08-03, variant 03) -----------
   Not on the 1200px canvas: a hard 41/59 seam, a looping clip on the left and
   the sign off, form, nav and contact details on the green right panel. */
.sec-footer{
  height:auto; min-height:470px;
  display:grid; grid-template-columns:41% 59%;
  background-color:rgb(37,57,33); overflow:hidden; position:relative;
}

.sec-footer .bf-reel{position:relative; overflow:hidden; background:#000}
/* absolutely positioned: a flow level video sizes the grid row to its own
   1080px intrinsic height and pushes the colophon off the fold */
.sec-footer .bf-reel video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.sec-footer .bf-reel:hover video{transform:scale(1.09)}
.sec-footer .bf-reel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.2) 44%,
    rgba(0,0,0,.08) 72%, rgba(0,0,0,.62) 100%);
}
.sec-footer .bf-live{
  position:absolute; left:38px; top:34px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Luxury',sans-serif; font-size:10px; letter-spacing:2.8px;
  text-transform:uppercase; color:rgba(242,224,220,.9);
}
.sec-footer .bf-live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:rgb(238,131,59);
  animation:bf-pulse 2.4s ease-in-out infinite;
}
@keyframes bf-pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)}}
.sec-footer .bf-cap{position:absolute; left:38px; right:38px; bottom:34px; z-index:3}
.sec-footer .bf-cap img{
  width:126px; height:59.9px; display:block; margin:0 0 14px;
  object-fit:contain; filter:brightness(2) saturate(0);
}
.sec-footer .bf-cap p{
  margin:0; font-family:'Luxury',sans-serif; font-size:10.5px; letter-spacing:3.2px;
  text-transform:uppercase; color:rgb(192,212,68);
}

.sec-footer .bf-stack{
  padding:48px clamp(44px,4.6vw,78px) 46px;
  display:flex; flex-direction:column; justify-content:center;
}
.sec-footer .bf-sign{
  margin:0 0 6px; font-family:'Voyage',sans-serif; font-size:52px; line-height:1.02;
  color:rgb(192,212,68);
}
.sec-footer .bf-lede{
  margin:0 0 30px; max-width:430px; font-family:'Garet',sans-serif;
  font-size:14px; line-height:1.85; color:rgba(242,224,220,.76);
}

.sec-footer .bf-send{
  align-self:flex-start; display:inline-flex; align-items:center; padding:16px 38px;
  background:rgb(179,43,93); color:rgb(242,224,220); text-decoration:none;
  border-radius:2px; white-space:nowrap;
  font-family:'Luxury',sans-serif; font-size:12px; letter-spacing:3.4px;
  text-transform:uppercase; transition:background .35s ease, color .35s ease;
}
.sec-footer .bf-send:hover{background:rgb(192,212,68); color:rgb(37,57,33)}

.sec-footer .bf-nav{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 0; padding:0; list-style:none;
}
.sec-footer .bf-nav a{
  font-family:'Garet',sans-serif; font-size:12.5px; letter-spacing:2.2px;
  text-transform:uppercase; color:rgb(176,196,118); text-decoration:none;
  position:relative; padding-bottom:3px;
}
.sec-footer .bf-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:rgb(192,212,68); transition:width .32s ease;
}
.sec-footer .bf-nav a:hover{color:rgb(192,212,68)}
.sec-footer .bf-nav a:hover::after{width:100%}

.sec-footer .bf-meta{
  display:flex; flex-wrap:wrap; gap:12px 30px; margin:34px 0 0; padding-top:24px;
  border-top:1px solid rgba(242,224,220,.18);
  font-family:'Garet',sans-serif; font-size:12.5px; letter-spacing:1.2px;
  color:rgba(242,224,220,.62);
}
.sec-footer .bf-meta a{
  color:rgb(176,196,118); text-decoration:none;
  border-bottom:1px solid rgba(192,212,68,.5); padding-bottom:1px;
  transition:color .3s ease;
}
.sec-footer .bf-meta a:hover{color:rgb(192,212,68)}
.sec-footer .bf-ig{display:inline-flex; align-items:center; gap:8px}
.sec-footer .bf-ig svg{width:15px; height:15px; fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .sec-footer *{transition:none!important; animation:none!important}
}



/* ---- hero: black scrim over a FIXED background video (round 3 variant 04,
   with the owner's changes, 2026-08-04) ----------------------------------
   clip-path on the band clips the position:fixed video without becoming its
   containing block, so the page scrolls over a still frame. */
.sec-hero{
  position:relative; height:100vh; overflow:hidden;
  display:grid; place-items:center; background:rgb(37,57,33);
  clip-path:inset(0);
}
.sec-hero::before{content:none}

.sec-hero .bh-duo{position:fixed; inset:0; overflow:hidden}
.sec-hero .bh-duo video,
.sec-hero .bh-duo img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:bh-slow 34s ease-in-out infinite alternate;
}
.sec-hero .bh-duo::after{content:""; position:absolute; inset:0; background:#000; opacity:.52}

.sec-hero .bh-inner{position:relative; z-index:4; text-align:center; padding:0 40px}

.sec-hero .bh-mark{
  display:block; width:132px; margin:0 auto 30px;
  opacity:0; animation:bh-up .8s .04s ease forwards;
}
.sec-hero .bh-eyebrow{
  font-family:'Luxury',sans-serif; font-size:12px; letter-spacing:4px;
  text-transform:uppercase; color:rgb(238,131,59); margin:0 0 26px;
  opacity:0; animation:bh-up .8s .1s ease forwards;
}
.sec-hero .bh-tag{margin:0; line-height:.88}
.sec-hero .bh-a{
  display:block; font-family:'Billmake',sans-serif; font-size:clamp(72px,9vw,124px);
  text-transform:uppercase; color:rgb(242,224,220);
  opacity:0; animation:bh-up .9s .2s cubic-bezier(.2,.75,.2,1) forwards;
}
.sec-hero .bh-b{
  display:block; font-family:'Voyage',sans-serif; font-size:clamp(84px,10.4vw,142px);
  color:rgb(192,212,68); margin-top:-.04em;
  opacity:0; animation:bh-up .9s .32s cubic-bezier(.2,.75,.2,1) forwards;
}
.sec-hero .bh-body{
  margin:30px auto 0; max-width:470px; font-family:'Garet',sans-serif;
  font-size:15px; line-height:1.75; color:rgb(242,224,220);
  opacity:0; animation:bh-up .9s .44s ease forwards;
}
.sec-hero .bh-cta{
  display:inline-block; margin-top:34px; padding:18px 52px; background:rgb(179,43,93);
  color:rgb(242,224,220); font-family:'Luxury',sans-serif; font-size:13px;
  letter-spacing:3.4px; text-transform:uppercase; text-decoration:none;
  opacity:0; animation:bh-up .9s .54s ease forwards;
  transition:background .3s ease, transform .3s ease;
}
.sec-hero .bh-cta:hover{background:rgb(192,212,68); color:rgb(37,57,33); transform:translateY(-2px)}

/* the moving banner the earlier hero carried, brought back along the base.
   The list is duplicated so the -50% translate loops without a seam. */
.sec-hero .bh-ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:6; overflow:hidden;
  background:rgba(37,57,33,.92); padding:15px 0;
  border-top:1px solid rgba(242,224,220,.16);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  opacity:0; animation:bh-up .9s .66s ease forwards;
}
.sec-hero .bh-ticker ul{
  display:flex; gap:64px; margin:0; padding:0; list-style:none; width:max-content;
  animation:bh-slide 30s linear infinite;
}
.sec-hero .bh-ticker:hover ul{animation-play-state:paused}
.sec-hero .bh-ticker li{
  font-family:'Luxury',sans-serif; font-size:13px; letter-spacing:3.2px;
  text-transform:uppercase; color:rgb(192,212,68); white-space:nowrap;
  display:flex; align-items:center; gap:64px;
}
.sec-hero .bh-ticker li::after{
  content:""; width:5px; height:5px; border-radius:50%; background:rgb(238,131,59);
}

@keyframes bh-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bh-up{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@keyframes bh-slow{from{transform:scale(1.05)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .sec-hero *{animation:none!important; opacity:1!important; transform:none!important}
}

/* ==========================================================================
   MOBILE LAYER (2026-08-04) -- per-section re-flow at <=900px.
   Additive only: one media block, appended last so it beats the desktop
   rules on file order at equal specificity. Desktop is byte-identical
   (verified by pixel-diffing every segment at 1440 and 1200).
   ========================================================================== */
@media (max-width: 900px) {

  /* body carries overflow-x:hidden, which propagates to the viewport and is
     enough in Chrome (audited: zero overflow at 320/375/390/430). iOS Safari
     honours it far less reliably, so pin it on html too and refuse horizontal
     overscroll outright. Belt and braces against the sideways-swipe-to-white. */
  html { overflow-x: hidden; }
  html, body { overscroll-behavior-x: none; }

  /* ---- hero ------------------------------------------------------------ */
  /* the backdrop stays position:fixed on phones too (owner call, 2026-08-04),
     so the page scrolls over a still frame exactly as it does on desktop.
     This is the same family as background-attachment:fixed, which iOS Safari
     is historically bad at -- it works because .sec-hero clips with clip-path,
     and clip-path does NOT become a containing block for a fixed child the way
     transform would. Do not add a transform to .sec-hero or the effect dies. */
  .sec-hero { height: 100svh; min-height: 540px; }
  .sec-hero .bh-inner { padding: 0 22px 64px; }
  .sec-hero .bh-mark { width: 96px; margin-bottom: 20px; }
  .sec-hero .bh-eyebrow { font-size: 10.5px; letter-spacing: 3px; margin-bottom: 16px; }
  .sec-hero .bh-a { font-size: clamp(38px, 12.5vw, 62px); }
  .sec-hero .bh-b { font-size: clamp(44px, 14.5vw, 72px); }
  .sec-hero .bh-body { font-size: 14px; margin-top: 20px; max-width: 34ch; }
  .sec-hero .bh-cta { margin-top: 26px; padding: 15px 38px; font-size: 12px; }
  .sec-hero .bh-ticker { padding: 11px 0; }
  .sec-hero .bh-ticker ul,
  .sec-hero .bh-ticker li { gap: 30px; }
  .sec-hero .bh-ticker li { font-size: 10.5px; letter-spacing: 2.2px; }

  /* ---- what we do ------------------------------------------------------ */
  /* NOTE for every wrapper below: these carry a fixed desktop width (1200 /
     1240 / 1100 / 1080) inside sections that are display:flex. Resetting them
     to width:auto is NOT enough -- a flex item with auto width shrink-wraps to
     its content, so the bands came out 40 to 90px narrower than the screen.
     They need an explicit width:100% AND max-width:100%: the desktop rule caps
     them at calc(100vw - 80px), which is a sane 80px gutter on a laptop but
     eats a fifth of a 390px phone on top of the 22px padding added here. */
  .sec-strategy { min-height: 0; padding: 54px 0 46px; }
  .sec-strategy .mq-cv { width: 100%; margin-inline: 0; padding: 0 22px; }
  .sec-strategy .mq-head { grid-template-columns: 1fr; gap: 24px; }
  .sec-strategy .mq-h { font-size: 34px; max-width: none; }
  .sec-strategy .mq-h em { font-size: 38px; }
  .sec-strategy .mq-note { margin-bottom: 0; font-size: 14px; }
  .sec-strategy .mq-tile { width: 214px; height: 308px; }
  /* the edge fade is a third of a phone screen at its desktop width */
  .sec-strategy .mq-strip {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent);
  }
  .sec-strategy .mq-rule {
    width: 100%; margin-top: 28px; padding: 20px 22px 0;
    flex-direction: column; align-items: flex-start; gap: 16px;
  }
  .sec-strategy .mq-cta { width: 100%; }

  /* ---- how it works ---------------------------------------------------- */
  .sec-process { grid-template-columns: 1fr; min-height: 0; }
  .sec-process .bp-left { padding: 56px 22px 40px; }
  .sec-process .bp-a { font-size: 34px; }
  .sec-process .bp-b { font-size: 30px; }
  .sec-process .bp-tag { margin-bottom: 28px; }
  .sec-process .bp-step { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 0 18px 14px; }
  .sec-process .bp-n { font-size: 28px; }
  .sec-process .bp-txt p { font-size: 17px; }
  .sec-process .bp-media {
    width: min(280px, calc(100% - 60px)); height: auto; aspect-ratio: 372 / 536;
    margin: 0 auto 60px; outline-offset: 8px;
  }
  .sec-process .bp-mark { bottom: 34px; padding: 11px 18px 11px 24px; font-size: 22px; }
  .sec-process .bp-cta { width: 100%; text-align: center; }

  /* ---- meet Morgan ----------------------------------------------------- */
  .sec-about { grid-template-columns: 1fr; min-height: 0; padding: 60px 22px 68px; gap: 44px; }
  .sec-about .ba-frame { width: min(300px, 78vw); height: auto; aspect-ratio: 376 / 498; }
  .sec-about .ba-badge { width: 112px; height: 112px; right: -8px; bottom: -26px; }
  .sec-about .ba-core { width: 60px; height: 60px; }
  .sec-about .ba-a { font-size: 40px; }
  .sec-about .ba-b { font-size: 27px; }
  .sec-about .ba-cols { column-count: 1; font-size: 14.5px; line-height: 1.8; }
  .sec-about .ba-rule { flex-wrap: wrap; gap: 8px 14px; font-size: 9.5px; }
  .sec-about .ba-cta { width: 100%; text-align: center; }
  /* no room for the second photo once the section stacks */
  .sec-about .ba-extra { display: none; }

  /* ---- why you'll love bask -------------------------------------------- */
  .sec-why { min-height: 0; padding: 60px 22px 64px; }
  .sec-why .bw-inner { width: 100%; }
  .sec-why .bw-title { font-size: 38px; margin-bottom: 38px; }
  .sec-why .bw-cols { grid-template-columns: 1fr; gap: 30px; }
  /* the hairlines were vertical dividers between three columns; stacked they
     have to become horizontal rules or they draw down the left of each item */
  .sec-why .bw-col {
    padding: 28px 0 0; border-left: 0;
    border-top: 1px solid rgba(37, 57, 33, .16);
  }
  .sec-why .bw-col:first-child { border-top: 0; padding-top: 0; }
  .sec-why .bw-dot { width: 38px; height: 38px; margin-bottom: 14px; }
  .sec-why .bw-claim { font-size: 19px; }
  .sec-why .bw-cta { margin-top: 44px; width: 100%; text-align: center; }

  /* ---- services -------------------------------------------------------- */
  .sec-services { height: auto; min-height: 0; padding: 60px 0 64px; }
  .bsv-wrap { width: 100%; max-width: 100%; margin-inline: 0; padding: 0 22px; }
  /* the head is a desktop two-column row: title left, note right, joined by
     align-items:flex-end + text-align:right. Stacked into a column, flex-end
     packs BOTH against the right edge of the screen and the note keeps its
     right rag, so the whole block read as right aligned (reported 2026-08-04). */
  .bsv-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bsv-note { max-width: none; text-align: left; }
  .bsv-a { font-size: 32px; }
  .bsv-b { font-size: 34px; margin-left: 0; }
  .bsv-tabs { flex-direction: column; }
  .bsv-tab { padding: 16px 0; }
  .bsv-tab + .bsv-tab { border-left: 0; border-top: 1px solid rgba(242, 224, 220, .22); }
  .bsv-tw { font-size: 24px; }
  .bsv-ta { font-size: 20px; }
  /* the panes are absolutely stacked and crossfaded on desktop; that needs a
     fixed-height parent. Stacked they flow instead, and the inactive ones are
     removed from layout rather than just made transparent. */
  .bsv-panes { flex: none; }
  .bsv-pane { position: static; display: none; grid-template-columns: 1fr; gap: 24px; }
  .bsv-pane.on { display: grid; }
  .bsv-copy { padding-top: 30px; }
  .bsv-wm { display: none; }
  .bsv-pname { font-size: 38px; }
  .bsv-price { font-size: 30px; }
  .bsv-incl { margin-bottom: 24px; }
  .bsv-cta { align-self: stretch; text-align: center; }
  .bsv-shot { height: 280px; margin: 0 0 8px; }

  /* ---- add ons --------------------------------------------------------- */
  .sec-addons { padding: 58px 0 62px; }
  .sec-addons .bx-wrap {
    width: 100%; max-width: 100%; margin-inline: 0; padding: 0 22px;
    grid-template-columns: 1fr; row-gap: 30px;
  }
  .sec-addons .bx-photo { aspect-ratio: 4/3; }
  .sec-addons .bx-note { max-width: none; text-align: left; }
  .sec-addons .bx-title { font-size: 28px; }
  /* the desktop band is grid-auto-flow:column over 3 explicit rows, so
     setting one column alone just pushes the overflow into an IMPLICIT second
     column. The flow and the row template have to be reset too. */
  .sec-addons .bx-cols {
    grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none;
  }
  .sec-addons .bx-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-addons .bx-cta { width: 100%; text-align: center; }

  /* ---- reviews --------------------------------------------------------- */
  .sec-reviews { min-height: 0; padding: 56px 0; }
  .sec-reviews .br-quote { padding: 32px 22px; font-size: 18px; line-height: 1.55; }
  .sec-reviews .br-line-top .br-label { margin-left: 22px; }
  .sec-reviews .br-line-foot .br-label { margin-right: 22px; }
  .sec-reviews .br-label { font-size: 10px; }

  /* ---- closing band ---------------------------------------------------- */
  .sec-cta { height: auto; min-height: 0; padding: 96px 0 0; }
  .sec-cta .bc-inner { padding: 0 22px; }
  .sec-cta .bc-line { font-size: 34px; }
  .sec-cta .bc-cta { padding: 16px 40px; font-size: 12px; }
  /* pinned to the band's floor on desktop; stacked it just follows the copy */
  .sec-cta .bc-foot {
    position: static; margin-top: 76px; flex-direction: column;
    align-items: center; gap: 8px; padding: 20px 22px; font-size: 10px;
  }
  .sec-cta .bc-foot span { gap: 8px; }
  .sec-cta .bc-foot span:not(:last-child)::after { display: none; }

  /* ---- contact --------------------------------------------------------- */
  .sec-inquire { padding: 58px 0 64px; }
  .sec-inquire .bq-wrap { width: 100%; max-width: 100%; margin-inline: 0; padding: 0 22px; }
  .sec-inquire .bq-a, .sec-inquire .bq-c { font-size: 30px; }
  .sec-inquire .bq-b { font-size: 34px; }
  /* the desktop grid is ONE row of 424px with two columns (form | clip).
     Collapsed to a single column it becomes TWO rows, and grid-template-rows
     still pinned the first at 424px -- so the card stayed 424px tall while its
     stacked fields need 586px, and the textarea and Submit button spilled out
     of the card entirely (reported 2026-08-07). Both the track and the card's
     height:100% have to go back to auto. */
  .sec-inquire .bq-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 26px; }
  .sec-inquire .bq-card { height: auto; }
  .sec-inquire .bq-card { padding: 26px 20px 24px; }
  .sec-inquire .bq-card form { grid-template-columns: 1fr; }
  /* the media column stretched to the form's height; stacked it needs its own */
  .sec-inquire .bq-media { height: 300px; }
  /* the mark keeps its overhang, re-derived for the smaller box: mask-size
     shrinks with it and the offsets re-centre the ink (see the desktop rule) */
  .sec-inquire .bq-badge {
    width: 66px; height: 86px; right: -8px; top: -22px;
    -webkit-mask: url(../img/bask-stacked.svg) -28px -20px/122px 122px no-repeat;
            mask: url(../img/bask-stacked.svg) -28px -20px/122px 122px no-repeat;
  }

  /* ---- footer ---------------------------------------------------------- */
  .sec-footer { grid-template-columns: 1fr; min-height: 0; }
  .sec-footer .bf-reel { height: 340px; }
  .sec-footer .bf-cap img { width: 104px; height: auto; }
  .sec-footer .bf-stack { padding: 44px 22px 40px; }
  .sec-footer .bf-sign { font-size: 34px; }
  .sec-footer .bf-lede { font-size: 14px; }
  .sec-footer .bf-send { width: 100%; justify-content: center; }
  .sec-footer .bf-nav { gap: 10px 18px; }
  .sec-footer .bf-meta { flex-direction: column; gap: 10px; }

  /* ---- colophon: the last canvas section ------------------------------- */
  .sec-colophon { --h: auto; height: auto; padding: 13px 22px; }
  .sec-colophon .e-517 {
    position: static; width: auto; height: auto;
    font-size: 9.5px; line-height: 1.5; letter-spacing: 1.2px;
  }

  /* ---- menu contents --------------------------------------------------- */
  /* flow order: logo, nav, photo, tagline, email. The canvas is authored for
     desktop (photo first, links last); letting that stand on a phone opened the
     menu onto a 346x520 photo with the first link at y=783 of an 844px screen.
     The photo is an accent here, not the subject: 120x150 keeps the source
     1024x1280 aspect exactly, so nothing is cropped. */
  .menu-panel .m-9 { order: 1; width: 104px !important; margin: 0 0 24px; }
  .menu-panel h2[class^="m-"] { order: 2; margin: 0 0 12px; }
  .menu-panel .m-4 {
    order: 3; width: 120px !important; height: 150px !important;
    aspect-ratio: auto; object-fit: cover; margin: 20px 0 0;
    box-shadow: 0 0 0 1px rgba(37,57,33,.18);
  }
  .menu-panel .m-6 { order: 4; margin: 20px 0 0; font-size: 22px !important;
    white-space: normal; line-height: 1.25; }
  .menu-panel .m-7 { order: 5; display: inline-block; margin-top: 10px; }
  .menu-panel h2[class^="m-"] [data-x="0"] { font-size: 11px; vertical-align: 14px; }
  .menu-panel h2[class^="m-"] [data-x="1"] { font-size: 30px; }

  /* the one floating control */
  .sec-top .cv > .burger {
    top: 16px !important; right: 16px !important;
    width: 48px !important; height: 48px !important;
  }
}

/* ---- head stacking, up to 1000px -----------------------------------------
   The main mobile layer breaks at 900px, but a phone in LANDSCAPE is wider
   than that -- an iPhone Pro Max is 932 CSS px -- so rotating the handset
   dropped these two heads back to the desktop two-column row and threw the
   descriptions to the right edge (reported 2026-08-07). These are the only
   rules that need to reach past 900: the head is a title/note pair joined by
   align-items:flex-end + text-align:right, which only reads correctly while
   they are genuinely side by side. 1000px clears every phone in landscape
   without touching iPad landscape (1024+) or any laptop. */
@media (max-width: 1000px) {
  .bsv-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bsv-note { max-width: none; text-align: left; }
  .sec-addons .bx-wrap { grid-template-columns: 1fr; row-gap: 30px; }
  .sec-addons .bx-photo { aspect-ratio: 4/3; }
  .sec-addons .bx-note { max-width: none; text-align: left; }
}

/* ---------------------------------------------------------------------------
   iOS zooms the whole page when a focused input renders under 16px. Both forms
   were inert until launch, so no keyboard had ever opened on them; they take
   real inquiries now, so the phone sizes go up. Desktop keeps her 14px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sec-inquire .bq-card input,
  .sec-inquire .bq-card select,
  .sec-inquire .bq-card textarea,
  .popup input,
  .popup select,
  .popup textarea { font-size: 16px; }
}

/* The add-ons band ships even with nothing in it: src/site_prices.js can only
   fill a container that already exists, so deleting it would make her first
   add-on land nowhere. It hides itself while the reconciled list is empty. */
#add-ons:not(:has([data-bc-pkg])) { display: none; }