/* Music Companion — The Concert Hall. Extends the approved v1 direction across eight pages. */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#0D0C0A; --bg2:#161411; --gold:#F2A900; --gold-2:#C9A24B; --gold-ink:#8F6B10; --ivory:#F6F1E7; --ink:#171512; --wa:#25D366; --hair:rgba(242,169,0,.25); --hair-soft:rgba(242,169,0,.13); --dim:rgba(246,241,231,.62); --dimmer:rgba(246,241,231,.42); --ease:cubic-bezier(.16,1,.3,1); } html{scroll-behavior:smooth;scroll-padding-top:108px} body{background:var(--bg);color:var(--ivory);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} .container{width:min(1280px,92vw);margin:0 auto} .narrow{width:min(820px,92vw);margin:0 auto} .serif{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif} .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--bg);padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase} .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} .eyebrow::before{content:"";width:32px;height:1px;background:var(--gold);opacity:.6} .eyebrow.centered::after{content:"";width:32px;height:1px;background:var(--gold);opacity:.6} section{padding:120px 0;position:relative} section.tight{padding:88px 0} h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(34px,4vw,52px);line-height:1.12;font-weight:600;margin-top:20px;letter-spacing:.005em} h2 em{font-style:italic;color:var(--gold)} h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600} .sec-head{max-width:760px;margin-bottom:72px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .lede{color:var(--dim);font-size:15.5px;max-width:60ch;margin-top:20px} .center .lede{margin-left:auto;margin-right:auto} /* The reveal is decoration and must never be load bearing. Without the class the page is fully visible, so a failed or blocked script costs an animation rather than the entire site. site.js adds .js-reveal to on boot. */ .js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .62s var(--ease),transform .62s var(--ease);transition-delay:var(--d,0s)} .js-reveal .reveal.in{opacity:1;transform:none} /* revealed by the failsafe rather than by scrolling: appear at once, never animate, so a batch of them can never stutter a scroll in progress */ .js-reveal .reveal.reveal-instant{transition:none!important;transition-delay:0s!important} /* ---------- topbar ---------- */ .topbar{border-bottom:1px solid var(--hair-soft);font-size:12px;color:var(--dimmer);position:relative;z-index:60;background:var(--bg)} .topbar .container{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:9px;padding-bottom:9px} .topbar a{transition:color .3s} .topbar a:hover{color:var(--gold)} .tb-sep{margin:0 12px;color:rgba(242,169,0,.35)} .tb-left,.tb-right{display:flex;align-items:center;white-space:nowrap} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:background .45s,border-color .45s} header.scrolled{background:rgba(13,12,10,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--hair-soft)} /* The header box never changes height. It is sticky but still in the page flow, so shrinking it on scroll moved everything beneath it, Chrome scroll anchoring pulled scrollY back across the threshold, and the header flipped in a loop (measured 14 Sep 2026: 62 flips in 650ms parked at 52px). The bar is always the compact height; the larger logo at the top of the page is a transform. */ .hd-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:17px 0} .hd-logo{width:148px;height:auto;transform:scale(1.35);transition:transform .45s var(--ease)} header.scrolled .hd-logo{transform:none} .hd-nav{display:flex;align-items:center;gap:30px} .hd-nav.left{justify-content:flex-end;padding-right:48px} .hd-right{display:flex;align-items:center;gap:30px;padding-left:48px} .hd-nav a.nlink{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,231,.72);position:relative;padding:6px 0;transition:color .3s;white-space:nowrap} .hd-nav a.nlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .hd-nav a.nlink:hover,.hd-nav a.nlink[aria-current="page"]{color:var(--gold)} .hd-nav a.nlink:hover::after,.hd-nav a.nlink[aria-current="page"]::after{transform:scaleX(1)} .btn-enquire{display:inline-block;border:1px solid var(--gold-2);color:var(--gold);padding:12px 26px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:.35s;white-space:nowrap} .btn-enquire:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)} .burger{display:none;background:none;border:none;width:40px;height:40px;position:relative;z-index:210} .burger span{position:absolute;left:8px;right:8px;height:1.5px;background:var(--ivory);transition:.35s var(--ease)} .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:24px} .burger.open span:nth-child(1){top:19.5px;transform:rotate(45deg);background:var(--gold)} .burger.open span:nth-child(2){top:19.5px;transform:rotate(-45deg);background:var(--gold)} /* ---------- mobile menu ---------- */ .mnav{position:fixed;inset:0;z-index:200;background:rgba(13,12,10,.98);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;overflow-y:auto;padding:80px 20px 40px} .mnav.open{opacity:1;visibility:visible} .mnav a.mlink{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(24px,6vw,34px);font-weight:500;color:var(--ivory);padding:7px 0;transition:color .3s,transform .5s var(--ease);transform:translateY(14px);opacity:0} .mnav.open a.mlink{transform:none;opacity:1} .mnav a.mlink:hover,.mnav a.mlink[aria-current="page"]{color:var(--gold)} .mnav .mcontact{margin-top:34px;font-size:13px;color:var(--dimmer);text-align:center;line-height:2} .mnav .mcontact a{color:var(--gold)} body.menu-open header{z-index:210;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} /* ---------- buttons ---------- */ .btn-gold{display:inline-block;background:var(--gold);color:var(--bg);padding:16px 34px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:.35s;border:none} .btn-gold:hover{background:#FFC130;transform:translateY(-1px)} .btn-ghost{display:inline-block;border:1px solid rgba(246,241,231,.38);color:var(--ivory);padding:16px 34px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:.35s} .btn-ghost:hover{border-color:var(--ivory);background:rgba(246,241,231,.06)} a.tlink{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;position:relative;padding-bottom:5px} a.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} a.tlink:hover::after{transform:scaleX(1)} a.tlink .arr{transition:transform .35s var(--ease)} a.tlink:hover .arr{transform:translateX(4px)} /* ---------- home hero ---------- */ .hero{position:relative;min-height:94svh;display:flex;flex-direction:column;overflow:hidden} .hero-bg{position:absolute;inset:0;background-position:center 32%;background-size:cover;background-repeat:no-repeat} .hero-veil{position:absolute;inset:0;background: linear-gradient(to bottom,rgba(13,12,10,.88) 0%,rgba(13,12,10,.70) 30%,rgba(13,12,10,.38) 58%,rgba(13,12,10,.10) 78%,rgba(13,12,10,.96) 100%), radial-gradient(ellipse 80% 58% at 50% 42%,transparent 26%,rgba(13,12,10,.58) 100%)} .hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:104px 0 72px;isolation:isolate} /* A contained scrim behind the copy only. Darkening the whole gradient far enough to pass 4.5:1 would flatten the photograph, so the shadow sits under the text and the image keeps its edges. Measured by check-hero.mjs. */ .hero-inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1120px,104%);height:min(760px,104%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(13,12,10,.90) 0%,rgba(13,12,10,.86) 40%,rgba(13,12,10,.70) 68%,rgba(13,12,10,.30) 86%,transparent 100%)} .hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 12px rgba(13,12,10,.8)} .hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,6.4vw,76px);line-height:1.06;font-weight:600;max-width:17ch;margin:26px auto 0;letter-spacing:.005em;text-shadow:0 2px 22px rgba(13,12,10,.7)} .hero h1 em{font-style:italic;color:var(--gold)} .hero-sub{max-width:56ch;margin:26px auto 0;color:rgba(246,241,231,.94);font-size:15.5px;line-height:1.75;text-shadow:0 2px 14px rgba(13,12,10,.8)} .hero-ctas{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap} .hero-stats{position:relative;z-index:2;border-top:1px solid var(--hair-soft);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(13,12,10,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hstat{padding:28px 16px;text-align:center} .hstat+.hstat{border-left:1px solid var(--hair-soft)} .hstat b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;color:var(--gold);line-height:1.1} .hstat span{display:block;margin-top:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer)} .hstat a{transition:color .3s} .hstat a:hover b{color:#FFC130} /* ---------- inner page hero ---------- */ .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair-soft)} .phero-bg{position:absolute;inset:0;background-position:center 40%;background-size:cover;filter:saturate(.82)} /* Dark enough to read on, light enough to still be a photograph. The left third carries the copy, so the scrim leans there and lets the right side of the image breathe. Measured by check-hero.mjs. */ .phero-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,12,10,.88) 0%,rgba(13,12,10,.76) 34%,rgba(13,12,10,.60) 62%,rgba(13,12,10,.16) 100%),linear-gradient(to right,rgba(13,12,10,.74) 0%,rgba(13,12,10,.42) 48%,rgba(13,12,10,.04) 84%)} .phero-inner{position:relative;z-index:2;padding:92px 0 84px} .phero h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(34px,5.2vw,62px);line-height:1.08;font-weight:600;margin-top:20px;max-width:20ch;text-shadow:0 2px 18px rgba(13,12,10,.7)} .phero h1 em{font-style:italic;color:var(--gold)} .phero .lede{margin-top:22px;color:rgba(246,241,231,.92);max-width:62ch;text-shadow:0 1px 14px rgba(13,12,10,.88)} .crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,231,.86);text-shadow:0 1px 8px rgba(13,12,10,.9)} .crumb a{transition:color .3s} .crumb a:hover{color:var(--gold)} .crumb .sep{margin:0 10px;color:rgba(242,169,0,.4)} /* ---------- prose ---------- */ .prose p{color:var(--dim);font-size:15.5px;margin-top:22px;max-width:64ch} .prose h3{font-size:clamp(24px,2.6vw,30px);margin-top:52px} .prose h3+p{margin-top:16px} .prose ul{margin-top:20px;padding-left:0;list-style:none;max-width:64ch} .prose li{position:relative;padding-left:26px;color:var(--dim);font-size:15px;margin-top:12px} .prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--gold)} .prose li b{color:var(--ivory);font-weight:600} .prose a.inl{color:var(--gold);border-bottom:1px solid var(--hair);transition:border-color .3s} .prose a.inl:hover{border-bottom-color:var(--gold)} .pullq{border-left:2px solid var(--gold);padding:4px 0 4px 26px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(21px,2vw,26px);line-height:1.4;color:var(--ivory);margin-top:36px;max-width:34ch} .attrib{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-top:14px} /* ---------- marquee ---------- */ .brands{padding:88px 0;border-bottom:1px solid var(--hair-soft)} .brands-cap{text-align:center;margin-bottom:52px} .brands-cap p{margin-top:16px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:19px;color:rgba(246,241,231,.66);max-width:62ch;margin-left:auto;margin-right:auto} .mq{overflow:hidden;position:relative;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);padding:40px 0; -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)} .mq-track{display:flex;align-items:center;width:max-content;will-change:transform} .mq-set{display:flex;align-items:center;gap:96px;padding-right:96px} .mq-set img{width:auto;opacity:.82;transition:opacity .3s;flex:none} .mq-set img:hover{opacity:1} /* ---------- split ---------- */ .split{display:grid;grid-template-columns:1.04fr .96fr;gap:96px;align-items:center} /* `flip` not `rev`: .rev is the review card and collided here, turning every reversed section into a white card. */ .split.flip .sfig{order:-1} .sfig{position:relative;justify-self:end;width:min(470px,100%)} .sfig .frame{position:relative;z-index:1;border:1px solid var(--hair);padding:14px;background:var(--bg)} .sfig img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.92)} .sfig::after{content:"";position:absolute;inset:0;border:1px solid var(--hair);transform:translate(22px,22px);z-index:0;pointer-events:none} .split.flip .sfig{justify-self:start} @media (max-width:760px){.sfig::after{display:none}} /* ---------- cards ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .svc-grid.two{grid-template-columns:repeat(2,1fr);max-width:920px;margin:0 auto} .svc{background:var(--bg2);border:1px solid var(--hair-soft);transition:transform .55s var(--ease),border-color .55s;display:flex;flex-direction:column} .svc:hover{transform:translateY(-6px);border-color:var(--hair)} .svc .thumb{aspect-ratio:16/10;overflow:hidden} .svc .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:saturate(.88) brightness(.94)} .svc:hover .thumb img{transform:scale(1.06)} .svc-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:62px;line-height:1;font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(242,169,0,.42);padding:26px 34px 0} .svc h3{font-size:27px;padding:10px 34px 0} .svc p{color:var(--dim);font-size:14.5px;padding:14px 34px 0} .svc p.first{flex:1} .svc .tlink{margin:24px 34px 34px} /* ---------- instruments ---------- */ .instruments{background:var(--bg2);overflow:hidden} .inst-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:80px 0;border-top:1px solid var(--hair-soft)} .inst-row.first{border-top:none;padding-top:0} .inst-row.flip .inst-stage{order:2} .inst-row.flip .inst-meta{order:1} .inst-stage{position:relative;text-align:center;padding:24px 0 0} .inst-stage::before{content:"";position:absolute;inset:-12% -16%;background:radial-gradient(ellipse 55% 46% at 50% 52%,rgba(242,169,0,.13),transparent 70%);pointer-events:none} .piano-fig{position:relative;display:inline-block;overflow:hidden;line-height:0} .piano-img{width:min(430px,80vw);height:auto} .sheen{position:absolute;top:0;bottom:0;left:-70%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,244,220,.13),transparent);transform:skewX(-14deg);animation:sheen 8.5s ease-in-out infinite;pointer-events:none;will-change:transform} @keyframes sheen{0%,58%{transform:translateX(0) skewX(-14deg)}88%,100%{transform:translateX(500%) skewX(-14deg)}} .piano-refl{line-height:0;height:132px;overflow:hidden;position:relative;opacity:.2; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 82%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 82%)} .piano-refl img{width:min(430px,80vw);height:auto;margin:0 auto;transform:scaleY(-1);filter:blur(.4px)} .inst-meta .no{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);font-weight:600} .inst-meta h3{font-size:clamp(36px,3.6vw,50px);line-height:1.1;margin-top:16px} .inst-meta .cap{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;color:rgba(246,241,231,.58);margin-top:8px} .inst-meta .copy{color:var(--dim);font-size:15px;margin-top:20px;max-width:46ch} .spec{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;border-top:1px solid var(--hair-soft);padding-top:22px} .spec div{min-width:0} .spec .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)} .spec .v{font-size:15px;color:var(--ivory);margin-top:5px} .availability{display:inline-flex;align-items:center;gap:10px;margin-top:24px;border:1px solid var(--hair-soft);background:rgba(242,169,0,.05);padding:11px 18px;font-size:12.5px;color:rgba(246,241,231,.78)} .availability::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-2);flex:none} /* ---------- reviews (ivory) ---------- */ .reviews{background:var(--ivory);color:var(--ink)} .reviews .eyebrow{color:var(--gold-ink)} .reviews .eyebrow::before,.reviews .eyebrow.centered::after{background:var(--gold-ink)} .reviews h2 em{color:var(--gold-ink)} .reviews .lede{color:rgba(23,21,18,.62)} .agg{display:flex;align-items:center;gap:28px;margin-top:44px;flex-wrap:wrap} .agg .num{font-family:'Cormorant Garamond',Georgia,serif;font-size:80px;font-weight:600;line-height:.9} .agg-stars{position:relative;font-size:24px;letter-spacing:5px;line-height:1;color:rgba(23,21,18,.16);display:inline-block} .agg-stars .fg{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold);white-space:nowrap} .agg .agg-cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(23,21,18,.55);line-height:1.9} .agg .agg-cap a{border-bottom:1px solid rgba(23,21,18,.28);transition:border-color .3s} .agg .agg-cap a:hover{border-bottom-color:var(--ink)} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .rev{background:#FFFDF8;border:1px solid rgba(23,21,18,.09);padding:40px 34px;display:flex;flex-direction:column;box-shadow:0 26px 46px -34px rgba(23,21,18,.28);transition:transform .5s var(--ease),box-shadow .5s} .rev:hover{transform:translateY(-4px);box-shadow:0 34px 54px -34px rgba(23,21,18,.36)} .rev .qmark{font-family:'Cormorant Garamond',Georgia,serif;font-size:64px;line-height:.6;color:var(--gold);height:26px} .rev .stars{color:var(--gold);letter-spacing:3px;font-size:14px;margin-top:14px} .rev .txt{font-family:'Cormorant Garamond',Georgia,serif;font-size:18.5px;font-style:italic;line-height:1.62;color:rgba(23,21,18,.86);margin-top:18px} .rev .txt p+p{margin-top:14px} .rev-more{align-self:flex-start;background:none;border:none;border-bottom:1px solid currentColor;color:var(--gold-ink);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:16px;padding:0 0 3px;transition:color .3s} .rev-more:hover{color:var(--ink)} .rev .who{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .rev .who b{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase} .rev .who span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(23,21,18,.45)} .chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px} .chip{border:1px solid rgba(23,21,18,.14);background:#FFFDF8;padding:11px 20px;font-size:12.5px;color:rgba(23,21,18,.72)} .chip .s{color:var(--gold);letter-spacing:2px;margin-left:8px} /* ---------- clients ---------- */ .clients{padding:96px 0;border-top:1px solid var(--hair-soft);text-align:center} .brands+.clients{border-top:0} .clients .lede{margin-left:auto;margin-right:auto} .client-row{display:flex;justify-content:center;align-items:center;gap:72px;flex-wrap:wrap;margin-top:56px} .client-row .cl{opacity:.55;transition:opacity .45s} .client-row .cl:hover{opacity:1} .client-row img{width:auto} .clients .tail{margin-top:52px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:var(--dimmer);max-width:58ch;margin-left:auto;margin-right:auto} .cl-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 44px;margin-top:48px;text-align:left} .cl-list div{border-top:1px solid var(--hair-soft);padding:18px 0;font-size:15px;color:rgba(246,241,231,.82)} /* ---------- gallery ---------- */ .gal-strip{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 20px;cursor:grab;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold-2) transparent;-webkit-overflow-scrolling:touch} .gal-strip.dragging{cursor:grabbing;scroll-snap-type:none} .gal-strip::-webkit-scrollbar{height:4px} .gal-strip::-webkit-scrollbar-track{background:rgba(246,241,231,.06)} .gal-strip::-webkit-scrollbar-thumb{background:var(--gold-2)} .gal-strip img{height:320px;width:auto;border-radius:4px;flex:none;scroll-snap-align:start;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;transition:transform .7s var(--ease);filter:saturate(.92)} .gal-strip img:hover{transform:scale(1.025)} .gal-hint{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer);margin-top:8px} /* ---------- faq ---------- */ .faq{border-top:1px solid var(--hair-soft);margin-top:48px} .faq details{border-bottom:1px solid var(--hair-soft)} .faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(20px,2.1vw,24px);font-weight:600;color:var(--ivory);transition:color .3s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--gold)} .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;background:var(--gold);transition:transform .35s var(--ease)} .faq summary::before{content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;background:var(--gold);transform:rotate(90deg);transition:transform .35s var(--ease),opacity .35s} .faq details[open] summary::before{transform:rotate(0);opacity:0} .faq .ans{padding:0 8% 30px 0;color:var(--dim);font-size:15px} .faq .ans p+p{margin-top:14px} /* Buyer questions: direct, self-contained answers for high-intent search and AI discovery. */ .buyer-answers{background:linear-gradient(145deg,rgba(176,143,78,.11),rgba(255,255,255,.018));border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)} .buyer-answers .sec-head{max-width:820px} .buyer-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .buyer-answer{padding:26px 28px;border:1px solid var(--hair-soft);background:rgba(9,9,12,.64);box-shadow:0 18px 45px rgba(0,0,0,.14)} .buyer-answer h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(21px,2vw,27px);line-height:1.12;color:var(--ivory);margin:0 0 13px} .buyer-answer p{color:var(--dim);font-size:15px;line-height:1.72;margin:0} /* ---------- visit ---------- */ .visit{background:var(--bg2);border-top:1px solid var(--hair-soft)} .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start} .v-lines{margin-top:44px;border-bottom:1px solid var(--hair-soft)} .v-line{display:flex;gap:28px;padding:24px 0;border-top:1px solid var(--hair-soft)} .v-line .lbl{flex:none;width:112px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);padding-top:5px} .v-line .val{color:rgba(246,241,231,.82);font-size:15px;line-height:1.8;min-width:0;overflow-wrap:anywhere} .v-line .val a{transition:color .3s} .v-line .val a:hover{color:var(--gold)} .v-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap} .map-frame{border:1px solid var(--hair-soft);background:var(--bg);padding:12px;margin-top:0} .map-frame iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(1) invert(.92) contrast(.86)} /* ---------- enquiry composer ---------- */ .form-card{border:1px solid var(--hair-soft);background:var(--bg);padding:44px 40px} .form-card h3{font-size:26px;margin-bottom:10px} .form-card .fhint{color:var(--dimmer);font-size:13px;margin-bottom:26px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} form{display:grid;gap:16px} .fld label{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px} input,textarea,select{width:100%;background:#0D0C0A;border:1px solid var(--hair-soft);color:var(--ivory);padding:15px 16px;font:inherit;font-size:14px;transition:border-color .3s;border-radius:0} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px;background-repeat:no-repeat} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)} textarea{min-height:118px;resize:vertical} ::placeholder{color:rgba(246,241,231,.28)} .wa-note{font-size:12px;color:var(--dimmer);line-height:1.6} .wa-note b{color:rgba(246,241,231,.72);font-weight:600} /* ---------- CTA band ---------- */ .band{border-top:1px solid var(--hair);background:var(--bg2);text-align:center;padding:104px 0} .band h2{max-width:20ch;margin-left:auto;margin-right:auto} .band .lede{margin-left:auto;margin-right:auto} .band .v-ctas{justify-content:center} /* ---------- sticky contact FABs ---------- */ .fabs{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:12px;align-items:flex-end} .fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.6);transition:transform .3s var(--ease),box-shadow .3s} .fab:hover{transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(0,0,0,.68)} .fab svg{width:27px;height:27px;display:block} .fab-wa{background:var(--wa)} .fab-wa svg{fill:#fff} .fab-call{background:var(--bg2);border:1px solid var(--hair)} .fab-call svg{fill:var(--gold)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--hair);padding:80px 0 44px;background:var(--bg)} @media (pointer:coarse){footer{padding-bottom:150px}} .f-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:56px;padding-bottom:52px;border-bottom:1px solid var(--hair-soft)} .flogo{width:190px} .f-blurb{color:var(--dimmer);font-size:13.5px;margin-top:22px;max-width:34ch;line-height:1.75} .f-col h3{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:18px} .f-col a,.f-col p{display:block;font-size:13.5px;color:rgba(246,241,231,.66);padding:5px 0;transition:color .3s} .f-col a:hover{color:var(--gold)} .f-bot{display:flex;justify-content:space-between;align-items:baseline;gap:10px 28px;flex-wrap:wrap;padding-top:26px} .f-bot .legal{flex:1 1 auto;min-width:0} .f-bot .legal:last-child{flex:0 0 auto;text-align:right} .legal{font-size:12px;color:rgba(246,241,231,.38);letter-spacing:.02em} .legal a{color:rgba(246,241,231,.5)} .legal a:hover{color:var(--gold)} /* ---------- responsive ---------- */ @media (max-width:1180px){ .hd-nav.left{padding-right:26px} .hd-right{padding-left:26px;gap:22px} .hd-nav{gap:22px} .hd-logo{width:126px;transform:scale(1.2)} } @media (max-width:1080px){ /* The copy spans the full width here, so the scrim cannot lean left. */ .phero-veil{background:linear-gradient(to bottom,rgba(13,12,10,.90) 0%,rgba(13,12,10,.78) 48%,rgba(13,12,10,.92) 100%)} .hd-nav.left,.hd-nav.right{display:none} .burger{display:block} .hd-grid{display:flex;justify-content:space-between;align-items:center;padding:14px 0} .hd-logo,header.scrolled .hd-logo{width:150px;transform:none} .hd-right{padding-left:0;gap:16px} .hd-right .btn-enquire{padding:10px 18px} .split,.visit-grid{grid-template-columns:1fr;gap:64px} .split.flip .sfig{order:0} .sfig{justify-self:start} .svc-grid,.svc-grid.two{grid-template-columns:1fr;max-width:560px;margin:0 auto} .rev-grid{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto} .inst-row{grid-template-columns:1fr;gap:40px;padding:64px 0} .inst-row.flip .inst-stage{order:0} .inst-row.flip .inst-meta{order:1} .inst-meta{text-align:center} .inst-meta .copy{margin-left:auto;margin-right:auto} .spec{justify-content:center} .client-row{gap:48px} .f-top{grid-template-columns:1fr;gap:44px} } @media (max-width:760px){ .buyer-answer-grid{grid-template-columns:1fr} .buyer-answer{padding:22px 20px} section{padding:84px 0} section.tight{padding:64px 0} .topbar .tb-left{display:none} .topbar .container{justify-content:center} } @media (max-width:400px){ .topbar .tb-right{white-space:normal;text-align:center;justify-content:center;flex-wrap:wrap} .topbar .container{gap:0} .hd-grid{gap:12px} .hd-logo{width:120px} .hd-right{gap:12px} .hd-right .btn-enquire{padding:9px 12px;letter-spacing:.1em} .hero{min-height:100svh} .hero-inner{padding:72px 0 56px} .hero-stats{grid-template-columns:1fr 1fr} .hstat:nth-child(3){border-left:none} .hstat{border-top:1px solid var(--hair-soft)} .hstat:nth-child(-n+2){border-top:none} .hstat b{font-size:26px} .phero-inner{padding:64px 0 60px} .mq-set{gap:64px;padding-right:64px} .form-card{padding:32px 24px} .frow{grid-template-columns:1fr} .gal-strip img{height:220px} .sfig::after{display:none} .client-row{gap:36px 44px} .agg .num{font-size:64px} .v-line{gap:18px} .v-line .lbl{width:92px} .band{padding:80px 0} .fabs{right:14px;bottom:14px} .fab{width:52px;height:52px} } @media (max-width:420px){ .hero-ctas .btn-gold,.hero-ctas .btn-ghost,.v-ctas .btn-gold,.v-ctas .btn-ghost{width:100%;text-align:center} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .js-reveal .reveal{opacity:1!important;transform:none!important} html{scroll-behavior:auto} } /* ---------- print ---------- */ @media print{ .fabs,.burger,.mnav,.topbar,.mq,.gal-strip{display:none!important} body{background:#fff;color:#111} .js-reveal .reveal{opacity:1!important;transform:none!important} } /* ---------- model cards (the names people search by) ---------- */ .mdl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px} .mdl{border:1px solid var(--hair-soft);background:var(--bg2);padding:32px 34px;transition:border-color .5s,transform .5s var(--ease)} .mdl:hover{border-color:var(--hair);transform:translateY(-4px)} .mdl .mk{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600} .mdl h3{font-size:30px;line-height:1.1;margin-top:10px} .mdl .sz{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:rgba(246,241,231,.56);margin-top:4px} .mdl p{color:var(--dim);font-size:14.5px;margin-top:16px} .mdl .ask{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .mdl .ask .arr{transition:transform .35s var(--ease)} .mdl:hover .ask .arr{transform:translateX(4px)} /* ---------- numbered steps ---------- */ .steps{counter-reset:s;margin-top:44px;border-top:1px solid var(--hair-soft)} .steps li{list-style:none;counter-increment:s;border-bottom:1px solid var(--hair-soft);padding:26px 0 26px 74px;position:relative} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:24px;font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;line-height:1;font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(242,169,0,.5)} .steps b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:600;color:var(--ivory)} .steps span{display:block;color:var(--dim);font-size:14.5px;margin-top:8px;max-width:62ch} @media (max-width:1080px){ .mdl-grid{grid-template-columns:1fr} .steps li{padding-left:60px} } /* ---------- product plate (manufacturer cutouts live on white) ---------- */ .prod-fig{justify-self:end;width:min(500px,100%)} .prod-fig .plate{background:var(--ivory);border:1px solid var(--hair);padding:26px 22px;display:grid;place-items:center} .prod-fig img{width:100%;height:auto;max-height:330px;object-fit:contain;mix-blend-mode:multiply} .prod-fig figcaption{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);text-align:right} .split.flip .prod-fig{justify-self:start} .split.flip .prod-fig figcaption{text-align:left} @media (max-width:1080px){ .prod-fig{justify-self:start} .prod-fig figcaption{text-align:left} } /* ---------- grouped client list ---------- */ .cl-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px;margin-top:56px;text-align:left} .cl-group h3{font-family:inherit;line-height:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--hair-soft);margin-bottom:6px} .cl-group div{font-size:14.5px;color:rgba(246,241,231,.8);padding:9px 0;border-bottom:1px solid var(--hair-soft)} /* Photo rows and viewing gallery videos, added 17 Sep 2026 with the media she sent. */ .ph-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:44px} .ph-row figure{margin:0} .ph-row img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--hair-soft);filter:saturate(.92);display:block} .ph-row figcaption,.vid figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)} .vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;max-width:1000px;margin:48px auto 0} .vid-grid.one{max-width:340px} .vid{margin:0} .vid figcaption{text-align:center} .vid video,.sfig video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block} .vid video{border:1px solid var(--hair)} .sfig.wide img{aspect-ratio:4/3} .gal-more{margin-top:18px} @media (max-width:760px){ .vid-grid{grid-template-columns:repeat(2,1fr);gap:12px} .vid-grid.one{grid-template-columns:1fr;max-width:280px} .ph-row{grid-template-columns:repeat(2,1fr);gap:12px} .ph-row figcaption,.vid figcaption{font-size:9.5px;letter-spacing:.12em} } /* Viewing gallery photographs as cards under the featured instruments, 17 Sep 2026. */ .floor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .floor-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--hair-soft);transition:border-color .45s,transform .55s var(--ease)} .floor-card:hover{border-color:var(--hair);transform:translateY(-3px)} .floor-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.92)} .floor-card .mk{padding:18px 22px 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);font-weight:600} .floor-card .ty{padding:6px 22px 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;color:var(--ivory)} .floor-card .go{padding:12px 22px 22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} @media (max-width:760px){ .floor-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:36px} .floor-card .mk{padding:12px 12px 0;font-size:9.5px;letter-spacing:.14em} .floor-card .ty{padding:4px 12px 0;font-size:19px} .floor-card .go{padding:8px 12px 14px;font-size:9.5px;letter-spacing:.1em} } /* Bigger tap areas on touch screens, no change to layout. 17 Sep 2026. */ @media (pointer:coarse){ a.tlink::before,.mdl .ask::before,.rev-more::before{content:"";position:absolute;inset:-12px -8px} .mdl .ask,.rev-more{position:relative} } /* Staged instrument cards under the featured rows, same light and reflection at a smaller size. 17 Sep 2026. */ .inst-links{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:22px} .stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px;padding-top:80px;border-top:1px solid var(--hair-soft)} .stage-card{display:flex;flex-direction:column;align-items:center;text-align:center} .stage-fig{position:relative;display:block;width:100%;padding-top:10px} .stage-fig::before{content:"";position:absolute;inset:-6% -4% 10%;background:radial-gradient(ellipse 50% 44% at 50% 55%,rgba(242,169,0,.12),transparent 70%);pointer-events:none} .stage-img{position:relative;display:block;height:230px;width:auto;max-width:86%;margin:0 auto;object-fit:contain;transition:transform .7s var(--ease)} .stage-card:hover .stage-img{transform:translateY(-4px)} .stage-refl{display:block;height:54px;overflow:hidden;opacity:.18;line-height:0;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 85%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 85%)} .stage-refl img{height:230px;width:auto;max-width:86%;object-fit:contain;margin:0 auto;display:block;transform:scaleY(-1);filter:blur(.4px)} .stage-card .no{margin-top:18px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600} .stage-card h3{font-size:clamp(28px,2.6vw,36px);line-height:1.1;margin-top:12px} .stage-card .copy{color:var(--dim);font-size:14.5px;margin-top:12px;max-width:34ch;flex:1} .stage-card .tlink{margin-top:18px} @media (max-width:1080px){.stage-img,.stage-refl img{height:190px}} @media (max-width:760px){ .stage-grid{grid-template-columns:1fr;gap:56px;padding-top:64px} .stage-img,.stage-refl img{height:200px} .inst-links{justify-content:center} } /* Category cards on the home page, and thumbnails on model cards. 17 Sep 2026. */ .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px} .cat-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--hair-soft);transition:border-color .45s,transform .55s var(--ease)} .cat-card:hover{border-color:var(--hair);transform:translateY(-4px)} .cat-img{display:block;aspect-ratio:16/10;overflow:hidden} .cat-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:transform 1.2s var(--ease)} .cat-card:hover .cat-img img{transform:scale(1.03)} .cat-body{display:flex;flex-direction:column;padding:26px 30px 30px} .cat-body .mk{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600} .cat-body .ty{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,3vw,40px);font-weight:600;color:var(--ivory);line-height:1.1;margin-top:10px} .cat-body .list{color:var(--dim);font-size:14.5px;margin-top:12px} .cat-body .go{margin-top:20px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .mdl-thumb{display:block;margin:-32px -34px 26px;aspect-ratio:16/10;overflow:hidden;background:var(--bg)} .mdl-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)} .mdl-thumb.cut{padding:22px 0 12px;background:radial-gradient(ellipse 58% 52% at 50% 58%,rgba(242,169,0,.13),transparent 72%),var(--bg)} .mdl-thumb.cut img{object-fit:contain;filter:none} @media (max-width:760px){ .cat-grid{grid-template-columns:1fr;gap:16px;margin-top:36px} .cat-body{padding:20px 20px 24px} } /* Clips cropped below the player's face are wider than a phone video. */ .vid-grid.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1000px} .vid-grid.wide.one{max-width:620px} .vid-grid.wide video{aspect-ratio:576/480} .who-vid{max-width:560px;margin:40px auto 0} .who-vid video{width:100%;aspect-ratio:576/480;object-fit:cover;background:#000;border:1px solid var(--hair);display:block} .who-vid figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);text-align:center} @media (max-width:760px){.vid-grid.wide{grid-template-columns:1fr}} /* Living background, 17 Sep 2026, in the spirit of the Bowed Strings site: warm light drifting, piano strings that shimmer, a few notes rising. It is fixed behind the page, and the dark sections are made see-through or part see-through so it shows between the content. Cards, photographs, the heroes and the light reviews section stay solid. Only transform and opacity animate, and all of it stops for anyone who asks for reduced motion. */ .mc-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .mc-bg .glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(242,169,0,.13),rgba(242,169,0,0) 64%);will-change:transform} .mc-bg .g1{width:72vw;height:72vw;left:-26vw;top:-28vw;animation:mc-drift1 30s ease-in-out infinite} .mc-bg .g2{width:62vw;height:62vw;right:-22vw;bottom:-28vw;animation:mc-drift2 36s ease-in-out infinite} .mc-bg .strings{position:absolute;left:0;top:47%;width:100%;height:240px} .mc-bg .str{position:absolute;left:0;width:100%;height:60px;will-change:transform;animation:mc-vib 4.2s ease-in-out infinite} .mc-bg .str svg{width:100%;height:100%;display:block;overflow:visible} .mc-bg .str path{fill:none;stroke:#C9A24B;stroke-width:1;stroke-opacity:.15;vector-effect:non-scaling-stroke} .mc-bg .str:nth-child(2){animation-duration:3.3s;animation-delay:.5s} .mc-bg .str:nth-child(3){animation-duration:2.7s;animation-delay:1s} .mc-bg .str:nth-child(4){animation-duration:5.1s;animation-delay:.2s} .mc-bg .str:nth-child(5){animation-duration:3.8s;animation-delay:1.4s} .mc-bg .str:nth-child(6){animation-duration:4.6s;animation-delay:.8s} .mc-bg .nt{position:absolute;bottom:-60px;width:21px;height:21px;color:#C9A24B;opacity:0;animation:mc-rise 22s linear infinite;will-change:transform,opacity} .mc-bg .nt svg{width:100%;height:100%;display:block} @keyframes mc-vib{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-1)}} @keyframes mc-rise{0%{transform:translateY(0) rotate(-8deg);opacity:0}8%{opacity:.34}80%{opacity:.14}100%{transform:translateY(-112vh) rotate(10deg);opacity:0}} @keyframes mc-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vw) scale(1.1)}} @keyframes mc-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-9vw) scale(1.08)}} /* let it show between the content */ section:where(:not(.hero):not(.phero):not(.reviews)){background-color:transparent!important} section.instruments,section.visit,section.band,section[style*="--bg2"]{background-color:rgba(22,20,17,.55)!important} footer{background-color:transparent!important} @media (max-width:760px){.mc-bg .strings{top:52%}.mc-bg .str path{stroke-opacity:.09}} @media (prefers-reduced-motion:reduce){.mc-bg .glow,.mc-bg .str{animation:none}.mc-bg .nt{display:none}} .mc-still .mc-bg .glow,.mc-still .mc-bg .str,.mc-still .mc-bg .nt{animation-play-state:paused} /* Measured 24 Sep 2026 across four phone widths. Every selector below rendered at 9.5 to 11px on a touch screen, which is fine under a mouse and too small in a hand. 12px is the floor. Specificity here matches the rules being overridden, which is why the tag names and parents are spelled out: a bare .tlink loses to a.tlink and nothing changes. Desktop is untouched. */ @media (pointer:coarse){ .eyebrow,.hero-eyebrow,.crumb,.attrib,.gal-hint,.btn-enquire, .inst-meta .no,.spec .k,.rev .who span,.v-line .lbl,.fld label, .f-col h3,.cl-group h3,.cat-body .go, .mdl .mk,.floor-card .mk,.cat-body .mk,.stage-card .no, .mdl .ask,.rev-more{font-size:12px} .mdl .mk,.cat-body .mk,.stage-card .no{letter-spacing:.14em} a.tlink,a.btn-gold,a.btn-ghost,button.btn-gold,button.btn-ghost,a.ask{font-size:12px} .prod-fig figcaption,.ph-row figcaption,.vid figcaption,.who-vid figcaption{font-size:12px;letter-spacing:.1em} /* the stat labels sit four across at the foot of the hero. At 12px the old .22em tracking pushed the row 5px past a 430px screen. */ .hstat span{font-size:12px;letter-spacing:.1em} .hstat{padding-left:10px;padding-right:10px} } /* The JUPA dealer certificates, 28 Sep 2026. A wide photograph of the two certificates standing among the pianos, so it keeps its own 16:9 frame rather than the 4:5 crop .ph-row imposes. */ .cert-fig{margin:44px 0 0;max-width:900px} .cert-fig img{width:100%;height:auto;display:block;border:1px solid var(--hair-soft);filter:saturate(.92)} .cert-fig figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)} @media (max-width:760px){ .cert-fig{margin-top:32px} .cert-fig figcaption{font-size:9.5px;letter-spacing:.12em} }