/* B.Circle site, built from direction v2 (Synergeus). Shared tokens and chrome for index, services and gallery.
   Page sections live inline in each page. */
:root{
  /* Design tokens: every tuned decision lives here (set with the tweak panel, removed 14 Oct 2026). */
  /* palette */
  --bg:#000000;--fg:#ffffff;--beige:#d9d1c1;--red:#D71921;--card:#0b0b0b;
  --dim-a:0.61;--dim:rgba(255,255,255,var(--dim-a));--line:rgba(255,255,255,.14);
  /* type */
  --sans:"Inter Tight",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--wm-font:"Roboto Serif",Georgia,serif;
  --h1-scale:0.75;--h1-lh:1.15;--h1-ls:0.014em;--h2-scale:1.02;
  /* nav: logo, and the glass behind the pill, socials and call */
  --logo-h:55px;--wm-size:25.5px;
  --nav-tint:#ffffff;--nav-tint-a:0.13;--nav-blur:6px;--nav-line-a:0.25;--nav-hl:0.19;--nav-rim:0.4;
  /* back to top, liquid glass; the tint keeps the white arrow at 3:1 or better over a white surface */
  --top-size:61px;--top-tint:#ffb3b3;--top-tint-a:0.4;--top-blur:8px;--top-rim:0.8;--top-hl:0.25;
  /* layout */
  --sec-y:72px;--r-card:16px;--r-story:26px;--story-max:455px;
  /* hero film */
  --film-y:33%;--ov-top:0.58;--ov-mid:0.21;--ov-bot:0.72;
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);--rv-y:28px;--rv-dur:.8s;--mq-dur:22s;--rev-dur:6s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:#2b2b2b var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--fg)}
::selection{background:var(--fg);color:#000}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#2b2b2b;border-radius:9999px}
a{color:inherit}
img,video,iframe{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--beige);outline-offset:3px;border-radius:9999px}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.f{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html{scroll-padding-top:90px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:12px 32px}
.nav-row{position:relative;display:flex;align-items:center;min-height:56px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo img{height:var(--logo-h);width:auto} /* 34px in v2, enlarged 66% at the owner's request */
.logo,.wm{min-width:0}
.wm{overflow:hidden;display:flex;flex-direction:column;align-items:flex-end;line-height:1;font-family:var(--wm-font);font-weight:800;font-stretch:75%;font-variation-settings:"opsz" 72}
.wm b{font-weight:800;font-size:var(--wm-size);letter-spacing:.01em}
.wm small{font-size:12px;letter-spacing:.08em;margin-top:3px}
/* nav glass, shared by the pill, socials, call and burger */
.pill,.soc,.callp,.burger{background:color-mix(in srgb,var(--nav-tint) calc(var(--nav-tint-a)*100%),transparent);
  backdrop-filter:blur(var(--nav-blur));-webkit-backdrop-filter:blur(var(--nav-blur));border:1px solid rgba(255,255,255,var(--nav-line-a));
  box-shadow:inset 0 1px 1px rgba(255,255,255,var(--nav-hl))}
.pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:6px 8px;border-radius:9999px;border-color:rgba(255,255,255,calc(var(--nav-line-a) - .02))}
.pill a{font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;padding:8px 14px;border-radius:9999px;white-space:nowrap;transition:background .2s}
.pill a:hover,.pill a[aria-current=page]{background:rgba(255,255,255,.12);color:#fff}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.callp{height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:9999px;color:#fff;text-decoration:none;font-size:14px;font-weight:500;transition:background .2s}
.callp:hover{background:rgba(60,60,60,.85)}
.soc{width:38px;height:38px;border-radius:9999px;display:grid;place-items:center;color:#fff;text-decoration:none;transition:background .2s}
.soc:hover{background:rgba(60,60,60,.85)}
.btn-w{background:#fff;color:#000;font-size:14px;font-weight:500;padding:10px 20px;border-radius:9999px;text-decoration:none;white-space:nowrap}
.burger{display:none;width:40px;height:40px;border-radius:9999px;place-items:center}
/* liquid glass rim: a gradient hairline, bright at top and bottom. Strength 0 (the nav default) draws nothing. */
.soc,.callp,.burger{position:relative}
.pill,.soc,.callp,.burger{--rim:var(--nav-rim)}
.pill::before,.soc::before,.callp::before,.burger::before,.totop::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,calc(.45*var(--rim))) 0%,rgba(255,255,255,calc(.15*var(--rim))) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,calc(.15*var(--rim))) 80%,rgba(255,255,255,calc(.45*var(--rim))) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.mnav{display:none}

/* buttons */
.cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;font-size:15px;font-weight:500;padding:6px 7px 6px 22px;border-radius:9999px;text-decoration:none;transition:transform .3s var(--ease)}
.cta:hover{transform:translateY(-2px)}
.cta b{width:28px;height:28px;border-radius:9999px;background:#000;color:#fff;display:grid;place-items:center}
.btn-o{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.32);border-radius:9999px;padding:11px 20px;text-decoration:none;font-size:15px;transition:background .2s}
.btn-o:hover{background:rgba(255,255,255,.08)}
.offer{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;background:var(--red);border:1px solid var(--red);transition:transform .3s var(--ease)}
.offer:hover{transform:translateY(-2px)}
.offer b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;color:#fff}
.cta.red{background:var(--red);color:#fff}
.glass{border-radius:20px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);backdrop-filter:blur(56px);-webkit-backdrop-filter:blur(56px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* sections */
section.s{padding:var(--sec-y) 48px}
.head{text-align:center;margin:0 auto 56px;max-width:760px}
.head h2{font-size:calc(clamp(44px,5vw,72px)*var(--h2-scale));line-height:1;letter-spacing:-1px;font-weight:400}
.head h2 span{display:block}
.head p{font-size:16px;color:var(--dim);margin-top:16px;line-height:1.6}
.ph{padding:170px 48px 72px;text-align:center}
.ph h1{font-size:clamp(52px,7vw,104px);line-height:.95;letter-spacing:-1.5px;font-weight:400}
.ph h1 span{display:block}
.ph p{color:var(--dim);max-width:52ch;margin:20px auto 0;line-height:1.6;font-size:17px}
.ph .row{justify-content:center;margin-top:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.chips a{padding:8px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.2);font-size:14px;text-decoration:none;color:rgba(255,255,255,.88)}
.chips a:hover{background:rgba(255,255,255,.08)}
.band{text-align:center;padding:var(--sec-y) 24px;border-top:1px solid var(--line)}
.band h2{font-size:calc(clamp(44px,6vw,88px)*var(--h2-scale));line-height:.98;font-weight:400;letter-spacing:-1px}
.band p{color:var(--dim);margin:20px auto 32px;max-width:46ch;line-height:1.6}
.band .row{justify-content:center}

/* footer and the always-visible booking button */
footer{border-top:1px solid rgba(255,255,255,.1);padding:28px 40px 104px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--dim)}
footer .row{gap:8px}
.fab{position:fixed;right:20px;bottom:20px;z-index:45;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;font-weight:500;font-size:15px;
  padding:12px 20px;border-radius:9999px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .5s var(--ease),visibility .5s}
.home .fab:not(.show){transform:translateY(170%);visibility:hidden} /* hidden, so it leaves the tab order too */
.totop{--rim:var(--top-rim);position:fixed;left:50%;bottom:20px;z-index:44;width:var(--top-size);height:var(--top-size);border-radius:9999px;display:grid;place-items:center;color:#fff;
  background:color-mix(in srgb,var(--top-tint) calc(var(--top-tint-a)*100%),transparent);background-blend-mode:luminosity;
  backdrop-filter:blur(var(--top-blur));-webkit-backdrop-filter:blur(var(--top-blur));box-shadow:inset 0 1px 1px rgba(255,255,255,var(--top-hl));
  opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.totop.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.totop svg{width:20px;height:20px}
.totop:hover{background:color-mix(in srgb,var(--top-tint) calc(var(--top-tint-a)*100% + 15%),transparent)}
/* below 480px the centred button would sit on the booking button, so it rides above it */
@media (max-width:480px){.totop{bottom:80px}}

/* reveal: hidden only once the head script has set .js */
.js .rv{opacity:0;transform:translateY(var(--rv-y));transition:opacity var(--rv-dur) var(--ease),transform var(--rv-dur) var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1299px){
  .pill{display:none}
  .callp{padding:0;width:38px;justify-content:center}
  .callp span{display:none}
  .burger{display:grid}
  .mnav.open{display:grid;gap:2px;margin-top:10px;padding:12px;border-radius:24px;background:rgba(14,14,14,.95);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1)}
  .mnav a{padding:12px 14px;border-radius:14px;text-decoration:none;font-size:17px}
  .mnav a:hover{background:rgba(255,255,255,.08)}
}
@media (max-width:1000px){
  section.s{padding:calc(var(--sec-y)*.75) 16px}
  .ph{padding:130px 20px 48px}
  footer{padding:24px 20px 104px}
}
@media (max-width:620px){
  .nav-r .btn-w{display:none}
}
@media (max-width:560px){
  .nav{padding:10px 14px}
  .nav-r{gap:6px}
  .logo{gap:8px}
  .logo img{height:calc(var(--logo-h)*48/56)}
  .wm b{font-size:calc(var(--wm-size)*21/27)}
  .wm small{font-size:10px}
}
@media (max-width:379px){.logo img{height:calc(var(--logo-h)*40/56)}.wm b{font-size:calc(var(--wm-size)*18/27)}.wm small{font-size:9px}.nav-r .soc,.callp{width:34px;height:34px}.burger{width:36px;height:36px}}
/* ---- home-page components, shared by site/index.html and the v2a/v2b/v2c content variants ---- */
/* hero */
.hero{position:relative;overflow:hidden;min-height:100vh;background:#000}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--film-y)}
.hero .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,var(--ov-top)) 0%,rgba(0,0,0,var(--ov-mid)) 50%,rgba(0,0,0,var(--ov-bot)) 100%)}
.hero-c{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 24px 24px}
.hero h1{text-align:center;font-size:calc(clamp(40px,5.4vw,90px)*var(--h1-scale));line-height:var(--h1-lh);letter-spacing:var(--h1-ls);font-weight:400;white-space:nowrap}
.hero h1 .serif{letter-spacing:0}
.hero-ctas{margin-top:28px;justify-content:center}
.story-wrap{margin-top:32px;perspective:1200px}
/* 455px tall at most; on shorter windows it gives up height so nav + headline + CTAs + card fit in 100vh */
.story{height:clamp(200px,calc(100vh - 330px),var(--story-max));aspect-ratio:310/455;container-type:size;border-radius:var(--r-story);background:#1a1a1a;overflow:hidden;position:relative;transform-style:preserve-3d;will-change:transform;touch-action:pan-y;user-select:none;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.story img.on{opacity:1}
.story .warm{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(160deg,rgba(217,209,193,.5),rgba(217,209,193,.12) 45%,rgba(0,0,0,.2))}
.bars{position:absolute;top:20px;left:20px;right:20px;display:flex;gap:5px;z-index:20}
.bars i{flex:1;height:3px;border-radius:9999px;background:rgba(255,255,255,.3);overflow:hidden}
.bars i::after{content:"";display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.bars i.done::after{transform:scaleX(1)}
.bars i.now::after{animation:fill 3s linear forwards}
.story:hover .bars i.now::after,.story:focus-within .bars i.now::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.story .low{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(0deg,#050505 15%,rgba(5,5,5,0))}
.story .st{position:absolute;left:clamp(12px,7.7cqw,24px);right:clamp(12px,7.7cqw,24px);bottom:calc(14px + 13cqh);z-index:10;font-size:clamp(17px,8.3cqh,38px);line-height:1.05;letter-spacing:-.5px;font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.35);pointer-events:none}
.story .st em{font-family:var(--serif);font-weight:400}
.story .st.swap{animation:sw .5s var(--ease)}
@keyframes sw{from{opacity:0;transform:translateY(12px)}}
.story .tag{position:absolute;left:clamp(12px,7.7cqw,24px);bottom:clamp(10px,5.3cqh,24px);z-index:10;background:rgba(255,255,255,.96);color:#0a0a0a;font-size:clamp(10px,2.9cqh,13px);font-weight:500;padding:clamp(5px,2cqh,9px) clamp(10px,5cqw,16px);white-space:nowrap;border-radius:9999px;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.tap{position:absolute;top:0;bottom:0;width:50%;z-index:15}
.pz{position:absolute;top:34px;right:16px;z-index:25;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story.paused .bars i.now::after,.mq:hover .mq-row,.hero:has(.story.paused) .mq-row{animation-play-state:paused}
.tap.prev{left:0}.tap.next{right:0}
.tap:focus-visible{outline:2px solid #fff;outline-offset:-8px;border-radius:24px}
.bl{position:absolute;bottom:40px;left:40px;z-index:10}
.bl .lbl{font-size:21px;line-height:1.2;color:rgba(255,255,255,.88);font-weight:400;margin-bottom:18px}
.mq{width:430px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-row{display:flex;gap:54px;width:max-content;animation:mq var(--mq-dur) linear infinite}
.mq-row span{flex-shrink:0;font-size:22px;color:rgba(255,255,255,.82);white-space:nowrap}
.mq-row span:nth-child(odd){font-family:var(--serif);font-style:italic;font-size:25px}
/* brand logos, recoloured white to match the text; the ticker dims them like its old text */
.mq-row{align-items:center}.mq-row .bm{height:30px;width:auto;flex-shrink:0;opacity:.82}.mq-row .bm.w{height:22px}.mq-row .bm.t{height:40px}.mq-row .bm.s{height:56px}
.brands .bm{height:56px;width:auto;max-width:100%;object-fit:contain;object-position:center}.brands .bm.w{height:36px}.brands .bm.t{height:72px}.brands .bm.s{height:92px}
@media (max-width:640px){.brands .bm{height:40px}.brands .bm.w{height:26px}.brands .bm.t{height:54px}.brands .bm.s{height:68px}}
@keyframes mq{to{transform:translateX(-50%)}}
.br{position:absolute;bottom:40px;right:40px;z-index:10;max-width:430px;text-align:right}
.br p{font-size:21px;line-height:1.4;margin-bottom:12px}
.br a{font-size:21px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1200px;margin:0 auto}
.review{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);padding:28px;min-height:260px;display:flex;flex-direction:column;gap:18px}
.rv-top{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}
.stars{margin-left:auto;color:var(--beige);letter-spacing:2px;font-size:16px}
.g{width:32px;height:32px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-weight:700;font-size:16px}
.review .q{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.3}
.review .who{margin-top:auto;font-size:15px;color:#fff;font-weight:500}
.below{display:flex;justify-content:center;margin-top:36px}

/* about */
.about{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;max-width:1200px;margin:0 auto}
/* About: one rotating card, the hero card's behaviour at the column's width */
.story.about-card{height:auto;width:100%;max-width:460px;aspect-ratio:3/4;container-type:normal;margin:0 auto;transform:none}
.about figure{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;max-height:640px;background:#111}
.about figure img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:calc(clamp(44px,5vw,72px)*var(--h2-scale));line-height:1;letter-spacing:-1px;font-weight:400}
.about p{color:rgba(255,255,255,.78);line-height:1.7;margin-top:20px;max-width:52ch;font-size:17px}
.about ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px}
.about li{border:1px solid rgba(255,255,255,.2);border-radius:9999px;padding:8px 14px;font-size:14px}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto}
.svc{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;text-decoration:none;background:#111}
.svc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc:hover>img{transform:scale(1.05)}
.svc .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 55%)}
.svc .gl{position:absolute;left:14px;right:14px;bottom:14px;padding:18px 18px 18px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:rgba(0,0,0,.34)}
.svc h3{font-size:24px;font-weight:500;letter-spacing:-.3px;line-height:1.1}
.svc h3 em{font-family:var(--serif);font-weight:400}
.svc p{font-size:14px;color:rgba(255,255,255,.85);margin-top:6px;line-height:1.45}
.svc .go{width:36px;height:36px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;flex-shrink:0}
.standin{position:absolute;inset:0;background:radial-gradient(80% 70% at 70% 15%,#efe9de 0%,#c9bfad 45%,#5d564b 100%)}
.standin.d{background:radial-gradient(70% 60% at 30% 20%,#3a3631 0%,#141311 55%,#050505 100%)}
.standin img{position:absolute;right:-14%;top:10%;width:72%;opacity:.12}
.soon{position:absolute;top:16px;left:16px;font-size:12px;padding:6px 12px;border-radius:9999px;background:rgba(0,0,0,.6);color:#fff}

/* products */
.brands{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brands li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 28px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center}
.brands b{font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.5px;line-height:1.1;overflow-wrap:anywhere}
.brands li:nth-child(odd) b{font-family:var(--serif);font-style:italic}
.brands span{font-size:14px;color:var(--dim)}

/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;font-size:19px;font-weight:500;border-radius:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.32);display:grid;place-items:center;flex-shrink:0;transition:transform .3s var(--ease),background .3s,color .3s}
.faq details[open] summary i{transform:rotate(45deg);background:#fff;color:#000}
.faq details p{padding:0 4px 26px;color:rgba(255,255,255,.78);line-height:1.65;max-width:64ch}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;max-width:1200px;margin:0 auto}
.visit h2{font-size:calc(clamp(44px,5vw,76px)*var(--h2-scale));line-height:.98;font-weight:400;letter-spacing:-1px}
.visit .offer{margin-top:24px}
.visit dl{display:grid;gap:18px;margin:32px 0}
.visit dt{font-size:13px;color:var(--dim);margin-bottom:4px}
.visit dd{font-size:17px;line-height:1.5}
.map{border-radius:var(--r-card);overflow:hidden;min-height:450px;border:1px solid var(--line);background:#111}
.map iframe{width:100%;height:100%;min-height:450px;border:0}

/* stack the hero on narrow screens, and on wide windows too short for headline + CTAs + a 250px card */
@media (max-width:1279px),(max-height:519px){
  .hero{min-height:auto}
  .story{height:clamp(200px,calc(100svh - 380px),var(--story-max))}
  .hero-c{position:relative;padding:120px 20px 40px}
  .bl,.br{position:relative;left:auto;right:auto;bottom:auto;padding:0 20px 36px;max-width:none}
  .mq{width:100%;max-width:560px}
  .br p,.br a{font-size:18px}
  .br p{max-width:46ch;margin-left:auto}
}
@media (max-width:767px){.hero h1{white-space:normal;font-size:calc(clamp(38px,11vw,54px)*var(--h1-scale));line-height:1.02}}
@media (max-width:1000px){
  .reviews,.svcs{grid-template-columns:1fr 1fr}
  .about,.visit{grid-template-columns:1fr;gap:40px}
  .about figure{aspect-ratio:4/3}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:640px){
  .reviews,.svcs{grid-template-columns:1fr}
  .svc{aspect-ratio:4/4.4}
  .brands li{padding:24px 18px}
  .faq summary{font-size:17px}
}
/* owner round 14 Oct 2026 */
/* Services stands out wherever it is offered */
.pill a.hl,.mnav a.hl{background:var(--red);color:#fff}
.pill a.hl:hover,.mnav a.hl:hover{background:color-mix(in srgb,var(--red) 82%,#000)}
.br a.hl{display:inline-flex;font-size:16px;font-weight:500;color:#fff;background:var(--red);padding:10px 20px;border-radius:9999px;text-decoration:none;transition:transform .3s var(--ease)}
.br a.hl:hover{transform:translateY(-2px)}
.btn-o.red{background:var(--red);border-color:var(--red);color:#fff}
.btn-o.red:hover{background:color-mix(in srgb,var(--red) 82%,#000)}
/* one-line headings: they shrink with the window instead of wrapping */
.ol{white-space:nowrap}
.head h2.ol{font-size:min(calc(clamp(44px,5vw,72px)*var(--h2-scale)),8.2vw)}
.ph h1.ol{font-size:min(clamp(52px,7vw,104px),10vw)}
footer .copy{flex-basis:100%;font-size:13px}
/* testimonials: one card at a time once site.js adds .rot; without script all four show */
.reviews.rot{grid-template-columns:1fr;max-width:820px}
.reviews.rot .review{grid-area:1/1;transition:opacity .6s var(--ease),visibility .6s}
.reviews.rot .review:not(.on){opacity:0;visibility:hidden}
.dots{display:flex;justify-content:center;gap:4px;margin-top:16px}
.dots button{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.dots button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s,transform .3s}
.dots button[aria-current=true]::after{background:#fff;transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}}

/* Kanpeki shown as Japanese text, "you are beautiful", at the owner's request */
.jp{font-family:"Noto Serif JP",serif;font-weight:600;font-style:normal;letter-spacing:.04em;white-space:nowrap}
.mq-row .jp{font-size:22px;color:rgba(255,255,255,.82)}
.brands b.jp{font-family:"Noto Serif JP",serif;font-style:normal;font-size:clamp(22px,2.2vw,30px)}