/* Fresh Water home sections — ported 1:1 from the approved prototype (prototype/index.html v3.10)
   by Local website/_tools/port_home_css.py. Every rule is scoped under .fw-sec. Do not edit by hand:
   change the prototype or the RTL block at the end, then re-run the tool. */
:root{--mist:#f4f7fc;--ground:#fff;--on-dark:#fff;--display:var(--fw-font);--body:var(--fw-font);--num:var(--fw-font)}
.fw-home{margin:0!important;padding:0!important}
.fw-home > *{margin-block:0!important}
.fw-sec{box-sizing:border-box;font-size:var(--fs-body);line-height:1.6}
.fw-sec *{box-sizing:border-box}
.fw-sec a{color:inherit}
.fw-sec img{max-width:100%;display:block}
.fw-sec h1,.fw-sec h2,.fw-sec h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
.fw-sec p{margin:0}
.fw-sec .wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
@media (min-width:900px){
.fw-sec .wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.fw-sec .eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fw-sec .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,box-shadow .25s;cursor:pointer;border:0}
.fw-sec .btn:hover{transform:translateY(-2px)}
.fw-sec .btn:focus-visible,.fw-sec a:focus-visible,.fw-sec button:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.fw-sec .btn-navy{background:var(--navy);color:#fff}
.fw-sec .btn-navy:hover{box-shadow:0 12px 28px rgba(0,22,137,.25)}
.fw-sec .btn-pink{background:var(--magenta-strong);color:#fff}
.fw-sec .btn-pink:hover{box-shadow:0 12px 28px rgba(230,0,126,.3)}
.fw-sec .btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.fw-sec .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.fw-sec .btn-arrow svg{transition:transform .25s}
.fw-sec .btn-arrow:hover svg{transform:translateX(4px)}
.fw-sec .pink{color:var(--magenta)}

/* ===== Stage: hero → range line-up (one pin) ===== */
/* Flat ground: the hero video frames are baked to #f4f7fc, so the stage must match exactly. */
.fw-sec.stage{position:relative;overflow:hidden;background:var(--mist);margin-top:-72px}
.fw-sec .stage-inner{position:relative;min-height:min(972px, 100svh);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;padding-block:112px 32px}
.fw-sec .hero-copy{display:flex;flex-direction:column;gap:22px;max-width:540px;position:relative;z-index:3}
.fw-sec .hero-copy h1{font-size:clamp(44px,5.4vw,80px)}
.fw-sec .hero-copy .lead{font-size:20px;color:var(--muted);max-width:44ch}
.fw-sec .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.fw-sec .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid var(--line);padding-top:20px;margin-top:6px}
.fw-sec .facts b{display:block;font-size:16px}
.fw-sec .facts span{font-size:15px;color:var(--muted)}
.fw-sec .hero-visual{position:relative;align-self:stretch;min-height:420px}
.fw-sec .shadow{position:absolute;left:50%;bottom:2%;width:300px;height:34px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(ellipse, rgba(0,22,137,.28), rgba(0,22,137,0) 70%)}
/* Hero sequence: a 9:16 box holding the frame canvas. The box is 115% of the visual's height and sits so the
   bottle base in the frames (88.9% down) lands just above the visual's bottom. The top fades out so the falling
   water never shows a hard edge. #heroBottle sits at the exact spot the bottle occupies in the last frame. */
.fw-sec .seq{position:absolute;left:50%;bottom:-14.6%;height:132%;aspect-ratio:9/16;transform:translateX(-50%);z-index:2}
.fw-sec .seq canvas{position:absolute;inset:0;width:100%;height:100%;display:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 6%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.fw-sec .seq.on canvas{display:block}
.fw-sec #heroBottle{position:absolute;left:30.46%;top:15.94%;width:40%;height:73.91%;max-width:none;z-index:2;will-change:transform}
.fw-sec .seq.on #heroBottle{opacity:0}
/* Two bottles that slide out from behind the hero bottle after the hand-off, then fly to their slots. */
.fw-sec .flyer{position:absolute;max-width:none;z-index:1;opacity:0;will-change:transform;pointer-events:none}
.fw-sec #fly250{left:30.95%;top:43.7%;width:38.1%;height:46.5%}
.fw-sec #fly350{left:29.6%;top:36.86%;width:40.8%;height:52%}
/* Soften only the edge that sits behind the 500 (--fe = edge opacity; GSAP lifts it to 1 on the way to the line-up). */
.fw-sec .flyer{--fe:.52}
.fw-sec #fly250{-webkit-mask-image:linear-gradient(to right,#000 0,#000 62%,rgba(0,0,0,var(--fe)) 80%);mask-image:linear-gradient(to right,#000 0,#000 62%,rgba(0,0,0,var(--fe)) 80%)}
.fw-sec #fly350{-webkit-mask-image:linear-gradient(to left,#000 0,#000 60%,rgba(0,0,0,var(--fe)) 78%);mask-image:linear-gradient(to left,#000 0,#000 60%,rgba(0,0,0,var(--fe)) 78%)}
@media (max-width:899px){
.fw-sec .flyer{display:none}}
.fw-sec .range-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.fw-sec .range-copy{position:absolute;left:0;right:0;top:calc(72px + 28px);display:flex;flex-direction:column;align-items:flex-start;gap:30px;opacity:0}
.fw-sec .range-copy h2{font-size:clamp(40px,4.6vw,68px)}
/* Line-up: every slot keeps its image's true ratio. --H (the 5 Gallon height) is capped so the row of 8 always fits the track width. */
.fw-sec .lineup{--H:min(53svh,470px,calc((min(100vw,1320px) - 80px - 98px) / 2.14));position:absolute;left:0;right:0;bottom:54px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.fw-sec .slot{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;opacity:0}
.fw-sec .slot img{width:auto;max-width:none;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fw-sec .slot:hover img{transform:translateY(-10px)}
.fw-sec .slot .meta{text-align:center;line-height:1.25}
.fw-sec .slot .meta b{font-family:var(--num);font-weight:700;font-size:24px;display:block}
.fw-sec .slot .meta span{font-size:14px;color:var(--muted)}
.fw-sec .slot:hover .meta b{color:var(--magenta)}
.fw-sec .range-layer.live{pointer-events:auto}
.fw-sec .s200 img{height:calc(var(--H)*.415)}
.fw-sec .s250 img{height:calc(var(--H)*.457)}
.fw-sec .s350 img{height:calc(var(--H)*.511)}
.fw-sec .s500 img{height:calc(var(--H)*.617)}
.fw-sec .ssp img{height:calc(var(--H)*.681)}
.fw-sec .s1500 img{height:calc(var(--H)*.787)}
.fw-sec .s10 img{height:calc(var(--H)*.872)}
.fw-sec .s5g img{height:var(--H)}
@media (max-width:899px){
.fw-sec .s200 img{height:150px}
.fw-sec .s250 img{height:165px}
.fw-sec .s350 img{height:185px}
.fw-sec .s500 img{height:225px}
.fw-sec .ssp img{height:250px}
.fw-sec .s1500 img{height:290px}
.fw-sec .s10 img{height:320px}
.fw-sec .s5g img{height:360px}}
/* Base line: every bottle's BASE (not its reflection) sits on the same line. Values = measured base position in each approved image (img/real). */
.fw-sec .s200 img{margin-bottom:calc(var(--H) * 0.415 * -0.0518)}
.fw-sec .s250 img{margin-bottom:calc(var(--H) * 0.457 * -0.0855)}
.fw-sec .s350 img{margin-bottom:calc(var(--H) * 0.511 * -0.0509)}
.fw-sec .s500 img{margin-bottom:calc(var(--H) * 0.617 * -0.0507)}
.fw-sec .ssp img{margin-bottom:calc(var(--H) * 0.681 * -0.0427)}
.fw-sec .s1500 img{margin-bottom:calc(var(--H) * 0.787 * -0.0518)}
.fw-sec .s10 img{margin-bottom:calc(var(--H) * 0.872 * -0.0527)}
.fw-sec .s5g img{margin-bottom:calc(var(--H) * 1 * -0.0509)}
@media (max-width:899px){
.fw-sec .s200 img{margin-bottom:-7.8px}
.fw-sec .s250 img{margin-bottom:-14.1px}
.fw-sec .s350 img{margin-bottom:-9.4px}
.fw-sec .s500 img{margin-bottom:-11.4px}
.fw-sec .ssp img{margin-bottom:-10.7px}
.fw-sec .s1500 img{margin-bottom:-15.0px}
.fw-sec .s10 img{margin-bottom:-16.9px}
.fw-sec .s5g img{margin-bottom:-18.3px}}
@media (max-width:899px){
.fw-sec.stage{margin-top:-64px}
.fw-sec .stage-inner{grid-template-columns:1fr;min-height:0;padding-block:92px 24px}
.fw-sec .hero-visual{height:460px;align-self:auto}
.fw-sec .seq{height:115%;bottom:-10.8%}
.fw-sec .facts{grid-template-columns:1fr 1fr 1fr;gap:10px}
.fw-sec .range-layer{position:relative;inset:auto;pointer-events:auto}
.fw-sec .range-copy{position:relative;top:auto;opacity:1;padding-top:48px;flex-direction:column;align-items:flex-start}
.fw-sec .lineup{position:relative;bottom:auto;overflow-x:auto;justify-content:flex-start;gap:22px;padding-block:24px 8px;scroll-snap-type:x mandatory}
.fw-sec .slot{opacity:1;flex:0 0 auto;scroll-snap-align:start}
}
html.pinned .fw-sec .s500 img,html.pinned .fw-sec .s250 img,html.pinned .fw-sec .s350 img{visibility:hidden}

/* ===== Marquee ===== */
.fw-sec.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--page)}
.fw-sec.marquee .track{display:flex;gap:44px;white-space:nowrap;padding-block:26px;font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(40px,6vw,84px);align-items:center;will-change:transform}
.fw-sec.marquee .o{color:var(--magenta)}
.fw-sec.marquee i{width:16px;height:16px;border-radius:50%;background:var(--magenta);flex-shrink:0}

/* ===== Premium ===== */
.fw-sec.premium{--gx:50%;background:radial-gradient(38% 58% at var(--gx) 66%, rgba(101,154,207,.62) 0%, rgba(101,154,207,.22) 42%, rgba(101,154,207,0) 72%), radial-gradient(90% 60% at 50% 110%, rgba(101,154,207,.18), rgba(101,154,207,0) 60%), var(--navy);color:var(--on-dark);position:relative;overflow:hidden;padding-block:112px 120px}
.fw-sec.premium .ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:700;font-size:clamp(120px,22vw,330px);letter-spacing:-.05em;color:rgba(255,255,255,.04);white-space:nowrap;pointer-events:none}
.fw-sec.premium .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative}
.fw-sec.premium .eyebrow{color:var(--on-dark-muted)}
.fw-sec.premium h2{font-size:clamp(40px,4.6vw,68px)}
.fw-sec .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:64px;position:relative}
.fw-sec .pcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.fw-sec .pstage{position:relative;width:100%;height:440px;display:flex;align-items:flex-end;justify-content:center}
.fw-sec .pstage .disc{position:absolute;left:50%;bottom:60px;width:min(320px,95%);aspect-ratio:1;border-radius:50%;transform:translateX(-50%) scale(.92);background:radial-gradient(circle, rgba(156,195,234,.42) 0%, rgba(101,154,207,.16) 45%, rgba(101,154,207,0) 70%);opacity:.55;transition:opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1)}
.fw-sec .pcard:hover .disc{opacity:1;transform:translateX(-50%) scale(1.08)}
.fw-sec .pstage .floor{position:absolute;left:50%;bottom:30px;width:180px;height:22px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(ellipse, rgba(0,6,40,.55), rgba(0,6,40,0) 70%)}
.fw-sec .pgrid:hover .pcard:not(:hover) .pstage img{opacity:.55}
.fw-sec .pgrid .pcard .pstage img{transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s}
.fw-sec .pstage img{position:relative;height:420px;width:auto;max-width:none;filter:drop-shadow(0 26px 30px rgba(0,6,40,.45))}
.fw-sec .pstage .bob{position:relative;display:flex;align-items:flex-end;margin-bottom:22px;will-change:transform}
.fw-sec .pcard:hover .pstage img{transform:translateY(-12px) rotate(-2deg)}
.fw-sec .pcard h3{font-size:32px}
.fw-sec .pcard .tag{color:var(--on-dark-muted);font-size:16px}
.fw-sec .pcard .price{font-family:var(--num);font-weight:600;font-size:22px}
.fw-sec .pcard .price small{font-family:var(--body);font-size:15px;color:var(--on-dark-muted);font-weight:400}

/* ===== Sport ===== */
.fw-sec.sport{position:relative;overflow:hidden;background:var(--page);padding-block:120px}
/* Sport: no text bands. One solid "770" sits behind the bottle, inside the visual column only, so it never touches the copy. */
.fw-sec .sgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.fw-sec .sgrid .vis{position:relative;display:flex;justify-content:center;align-items:center;overflow:visible;border-radius:32px;background:radial-gradient(70% 60% at 50% 45%,#fff 0%,rgba(255,255,255,0) 70%)}
.fw-sec .sgrid .vis .arm{position:absolute;top:22%;width:clamp(96px,9.5vw,140px);height:auto;pointer-events:none;overflow:visible}
.fw-sec .sgrid .vis .arm.r{left:calc(50% + clamp(92px,8vw,118px))}
.fw-sec .sgrid .vis .arm.l{right:calc(50% + clamp(92px,8vw,118px))}
.fw-sec .arm path{fill:var(--navy)}
.fw-sec .sgrid .vis img{position:relative;height:min(640px,70svh);width:auto;will-change:transform}
.fw-sec .scopy{display:flex;flex-direction:column;gap:22px;max-width:520px}
.fw-sec .scopy h2{font-size:clamp(40px,4.6vw,68px)}
.fw-sec .scopy .lead{font-size:20px;color:var(--muted)}
.fw-sec .specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fw-sec .specs div{background:#fff;border-radius:18px;padding:16px 18px}
.fw-sec .specs b{font-family:var(--num);font-size:24px;display:block}
.fw-sec .specs span{font-size:15px;color:var(--muted)}
.fw-sec .buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fw-sec .buy .p{font-family:var(--num);font-size:34px;font-weight:700}

/* ===== Home & office ===== */
.fw-sec.home{background:var(--page);padding-block:120px}
.fw-sec .hgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.fw-sec .jug{position:relative;height:560px;display:flex;align-items:flex-end;justify-content:center}
.fw-sec .jug .orb2{position:absolute;left:50%;top:48%;width:440px;max-width:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#fff,var(--ice) 70%)}
.fw-sec .jug img{position:relative;height:500px;width:auto}
.fw-sec .jug .shadow{bottom:16px;width:340px}
.fw-sec .hcopy{display:flex;flex-direction:column;gap:22px}
.fw-sec .hcopy h2{font-size:clamp(40px,4.6vw,68px)}
.fw-sec .hcopy .lead{font-size:20px;color:var(--muted);max-width:46ch}
.fw-sec .books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Hover uses the separate `translate` property so it never fights the GSAP transform on entry. */
.fw-sec .book{position:relative;border-radius:22px;padding:22px 24px;background:#fff;text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.fw-sec .book:hover{translate:0 -4px;box-shadow:0 18px 36px rgba(0,22,137,.1)}
.fw-sec .jug .float{position:relative;display:flex;align-items:flex-end;will-change:transform}
.fw-sec .book .n{font-family:var(--num);font-weight:700;font-size:30px;line-height:1.1}
.fw-sec .book .n em{font-style:normal;color:var(--magenta)}
.fw-sec .book .pr{font-weight:600}
.fw-sec .book .sub{font-size:15px;color:var(--muted)}
.fw-sec .book.best{background:var(--navy);color:#fff}
.fw-sec .book.best .sub{color:var(--on-dark-muted)}
.fw-sec .book.best .n em{color:#ff7ec2}
.fw-sec .book .flag{position:absolute;top:16px;right:16px;background:var(--magenta-strong);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.04em}

/* ===== Labels ===== */
.fw-sec.labels{background:var(--page);padding-block:120px;overflow:hidden}
.fw-sec .lgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.fw-sec .lcopy{display:flex;flex-direction:column;gap:22px}
.fw-sec .lcopy h2{font-size:clamp(40px,4.6vw,68px)}
.fw-sec .lcopy .lead{font-size:20px;color:var(--muted);max-width:46ch}
.fw-sec .uses{display:flex;flex-wrap:wrap;gap:8px}
.fw-sec .uses span{background:#fff;border-radius:999px;padding:8px 16px;font-size:16px;font-weight:500}
/* Private-label trio: real label-free 250 / 350 / 500ml renders. Each bottle carries a wrap label whose position (--t top, --h height, --l/--r sides, all % of the image) matches its straight body. Client logos cycle on the labels. */
.fw-sec .lvis{position:relative;height:560px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.6vw,22px)}
.fw-sec .lvis::after{content:"";position:absolute;left:8%;right:8%;bottom:2px;height:36px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,22,137,.2),rgba(0,22,137,0) 70%);z-index:0}
.fw-sec .pl{position:relative;margin:0;z-index:1;container-type:inline-size}
.fw-sec .pl{height:var(--ph);width:calc(var(--ph) * var(--ar))}
.fw-sec .pl img{display:block;height:100%;width:100%;max-width:none}
.fw-sec .p250{--ar:.4609;--ph:min(400px,29vw)}
.fw-sec .p350{--ar:.4409;--ph:min(450px,32.6vw)}
.fw-sec .p500{--ar:.3036;--ph:min(540px,39vw)}
.fw-sec .wrapl{position:absolute;top:var(--t);height:var(--h);left:var(--l);right:var(--r);border-radius:0;overflow:hidden;perspective:600px}
.fw-sec .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;padding:0 10cqw;text-align:center;background:var(--bg,#fff);color:var(--fg,#001689);transform-origin:center;backface-visibility:hidden}
.fw-sec .face b{display:block;font-family:var(--lf,var(--display));font-weight:700;font-size:var(--ls,12cqw);letter-spacing:-.02em;line-height:.95;max-width:100%;overflow-wrap:anywhere}
.fw-sec .face small{display:block;font-size:4.4cqw;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.fw-sec .face img{height:auto;max-height:62%;max-width:78%;object-fit:contain;filter:none}
.fw-sec .face img.full{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.fw-sec .face .mini{position:absolute;bottom:7%;left:0;right:0;font-size:3cqw;letter-spacing:.2em;opacity:.55;text-transform:uppercase}
/* Cylinder shading on top of every label, so it reads as wrapped round the bottle. */
.fw-sec .wrapl::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,10,60,.28) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,.32) 34%,rgba(255,255,255,0) 50%,rgba(0,10,60,.08) 78%,rgba(0,10,60,.32) 100%)}
.fw-sec .pl figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-family:var(--num);font-weight:700;font-size:20px;color:var(--navy)}

/* ===== Reorder + delivery ===== */
.fw-sec.service{background:var(--page);padding-block:112px}
.fw-sec .svgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fw-sec .card{border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:18px;min-width:0}
.fw-sec .card.light{background:#fff}
.fw-sec .card.dark{background:var(--navy);color:#fff}
.fw-sec .card h3{font-size:clamp(30px,3vw,42px)}
.fw-sec .order{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px;font-variant-numeric:tabular-nums}
.fw-sec .order div{display:flex;justify-content:space-between;gap:12px}
.fw-sec .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fw-sec .dgrid div{display:flex;gap:12px}
.fw-sec .dgrid i{width:9px;height:9px;border-radius:50%;background:var(--magenta);margin-top:8px;flex-shrink:0}
.fw-sec .dgrid span{color:var(--on-dark-muted);font-size:16px}
@media (max-width:899px){
.fw-sec .pgrid{grid-template-columns:1fr;gap:56px}
.fw-sec .pstage{height:380px}
.fw-sec .pstage img{height:330px}
.fw-sec .sgrid,.fw-sec .hgrid,.fw-sec .lgrid,.fw-sec .svgrid{grid-template-columns:1fr}
.fw-sec .sgrid .vis img{height:440px}
.fw-sec .sgrid .vis .arm{width:66px;top:24%}
.fw-sec .sgrid .vis .arm.r{left:calc(50% + 74px)}
.fw-sec .sgrid .vis .arm.l{right:calc(50% + 74px)}
.fw-sec .jug{height:440px}
.fw-sec .jug img{height:400px}
.fw-sec .lvis{height:360px;margin-bottom:24px}
.fw-sec .p250{--ph:220px}
.fw-sec .p350{--ph:250px}
.fw-sec .p500{--ph:294px}
.fw-sec .card{padding:28px}
.fw-sec .dgrid{grid-template-columns:1fr}
.fw-sec .specs{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
.fw-sec,.fw-sec *{transition:none!important;animation:none!important}}

/* ===== Arabic / RTL (same overrides as prototype/index-ar.html) ===== */
html[dir="rtl"] .fw-sec :where(h1,h2,h3){font-weight:800;letter-spacing:0;line-height:1.25}
html[dir="rtl"] .fw-sec.marquee .track{letter-spacing:0;line-height:1.25}
html[dir="rtl"] .fw-sec .eyebrow{letter-spacing:.04em}
html[dir="rtl"] .fw-sec .btn-arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .fw-sec .btn-arrow:hover svg{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .fw-sec .book .flag{right:auto;left:16px}
html[dir="rtl"] .fw-sec .book .n{direction:ltr;text-align:right}
/* the 350 comes out to the LEFT and the 250 to the RIGHT (mirrored slots), so soften the other edge */
html[dir="rtl"] .fw-sec #fly250{-webkit-mask-image:linear-gradient(to left,#000 0,#000 60%,rgba(0,0,0,var(--fe)) 78%);mask-image:linear-gradient(to left,#000 0,#000 60%,rgba(0,0,0,var(--fe)) 78%)}
html[dir="rtl"] .fw-sec #fly350{-webkit-mask-image:linear-gradient(to right,#000 0,#000 62%,rgba(0,0,0,var(--fe)) 80%);mask-image:linear-gradient(to right,#000 0,#000 62%,rgba(0,0,0,var(--fe)) 80%)}
html[dir="rtl"] .fw-sec .face b,html[dir="rtl"] .fw-sec .face small{font-family:var(--lf,"DM Sans",sans-serif)}
html[dir="rtl"] .fw-sec .slot .meta b,html[dir="rtl"] .fw-sec .book .n,html[dir="rtl"] .fw-sec .specs b,html[dir="rtl"] .fw-sec .buy .p,html[dir="rtl"] .fw-sec .pcard .price{font-weight:800}
/* Links on product images and names (prototype site.css) */
.fw-sec a.pstage,.fw-sec .slot,.fw-sec .pcard h3 a{text-decoration:none;color:inherit}
.fw-sec .pcard h3 a:hover{color:var(--magenta)}
/* WordPress: logged-in admin bar sits above the sticky header */
.admin-bar .fw-sec.stage{margin-top:-72px}