/* Crown Concepts — "Piano Black" website concept, October 2026
   One typeface (Montserrat, the logo's face). Piano-black lacquer, pearl white, platinum.
   Sharp edges only: no radius anywhere. No gold, no yellow type. */
:root{
  --piano:#050506; --black:#0A0A0B; --panel:#0E0E10;
  --white:#F5F3EF; --pearl:#E9E6E0; --silver:#9C9890; --mute:#6E6A64; --body:#B3AFA8;
  --hair:rgba(255,255,255,.11); --hair-2:rgba(255,255,255,.22); --hair-ink:rgba(10,10,11,.16);
  --chrome:linear-gradient(180deg,#ffffff 0%,#ecebe8 42%,#a9a59e 68%,#f1efeb 100%);
  --logo:linear-gradient(180deg,#ffffff 0%,#f1efea 45%,#cfcbc4 78%,#f5f3ef 100%);
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --g:88px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body{background:var(--piano);color:var(--white);font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.95;letter-spacing:.015em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
sup{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0}
ol,ul{list-style:none}

/* ---------- type: one family, tracked wide ---------- */
.eyebrow{font-weight:500;font-size:9.5px;line-height:1.6;letter-spacing:.52em;text-transform:uppercase;color:var(--silver)}
.t-hero{font-weight:200;font-size:54px;line-height:1.55;letter-spacing:.5em;text-transform:uppercase}
.t-display{font-weight:200;font-size:34px;line-height:1.55;letter-spacing:.34em;text-transform:uppercase}
.t-title{font-weight:400;font-size:12px;line-height:1.6;letter-spacing:.38em;text-transform:uppercase}
.num{font-weight:200;font-size:13px;letter-spacing:.3em;color:var(--silver)}
.chrome,.chrome-lines span{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.chrome-lines span{display:block}
.center{text-align:center}
.center .t-hero{padding-left:.5em}
.center .t-display{padding-left:.34em}
.center .eyebrow{padding-left:.52em}
.center .t-title{padding-left:.38em}
.lead{color:var(--body);max-width:600px}
.center .lead{margin-left:auto;margin-right:auto}
.line{display:block;width:72px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0))}
.center .line{margin-left:auto;margin-right:auto}

/* ---------- crown + wordmark (logo set in the same Montserrat) ---------- */
.crown{display:block;-webkit-mask:url(img/crown-symbol.svg) center/contain no-repeat;mask:url(img/crown-symbol.svg) center/contain no-repeat;background:var(--logo)}
/* the official Crown Concepts lockup (vector, from the logo kit), with a soft platinum sheen */
.logo{display:block;width:150px;aspect-ratio:403/298;-webkit-mask:url(img/logo-lockup.svg) center/contain no-repeat;mask:url(img/logo-lockup.svg) center/contain no-repeat;background:var(--logo)}
.crown.ink{background:#0A0A0B}
.crest{display:flex;flex-direction:column;align-items:center;gap:13px}
.crest .crown{width:56px;height:44px}
.wm{font-weight:300;font-size:17px;line-height:1;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;text-align:center}
.wm small{display:block;font-weight:400;font-size:7.4px;letter-spacing:1.08em;padding-left:1.08em;margin-top:9px;color:var(--pearl)}

/* ---------- piano keys (buttons) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.4em;text-transform:uppercase;padding:21px 38px 21px calc(38px + .4em);white-space:nowrap;position:relative}
.key-white{color:#0A0A0B;background:linear-gradient(180deg,#ffffff 0%,#f3f1ec 49%,#e4e1db 50%,#f2f0eb 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.55)}
.key-black{color:var(--white);background:linear-gradient(180deg,#2b2b30 0%,#121215 49%,#060607 50%,#0e0e11 100%);border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.38);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.key-ink{color:var(--white);background:linear-gradient(180deg,#2b2b30 0%,#121215 49%,#060607 50%,#0e0e11 100%);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.key-outline-ink{color:#0A0A0B;border:1px solid rgba(10,10,11,.35)}
.btn-sm{padding:15px 22px 15px calc(22px + .4em);font-size:9px}
.tri{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.link{display:inline-flex;align-items:center;gap:16px;font-weight:500;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--white)}
.link::after{content:"";width:48px;height:1px;background:rgba(255,255,255,.6)}

/* ---------- lacquer panel: hard horizon + sharp glare = piano gloss ---------- */
.lacquer{position:relative;background:linear-gradient(180deg,#1b1b1f 0%,#111113 30%,#09090b 62%,#0b0b0d 100%);
  border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.24);box-shadow:0 40px 90px rgba(0,0,0,.65)}
.lacquer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.03) 30% 38%,rgba(255,255,255,0) 38% 41%,rgba(255,255,255,.018) 41% 43%,rgba(255,255,255,0) 43%)}

/* sharp framed picture with a hard-edged glare */
.pic{position:relative;overflow:hidden;background:#000;outline:1px solid var(--hair-2);outline-offset:6px}
.pic img{width:100%;height:100%;object-fit:cover}
.pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 0 56%,rgba(255,255,255,.04) 56% 62%,rgba(255,255,255,0) 62%),
             linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
.reflect{-webkit-box-reflect:below 16px linear-gradient(to bottom,rgba(0,0,0,0) 70%,rgba(0,0,0,.28) 100%)}

/* piano floor: a lit horizon line, then deep gloss */
.floor{position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,#121214 0%,#070708 45%,#050506 100%);border-top:1px solid rgba(255,255,255,.16)}
.floor::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}

/* ---------- nav ---------- */
.nav{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:44px var(--g) 0}
.nav-links{display:flex;gap:48px;font-weight:400;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--pearl)}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:48px}
.burger,.enq{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:900px;overflow:hidden;background:#050506 url(img/satin-hero.jpg) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 48% 34% at 50% 52%,rgba(5,5,6,.55),rgba(5,5,6,0) 100%);pointer-events:none}
.hero-body{position:absolute;left:0;right:0;top:50%;transform:translateY(-44%);z-index:2}
.hero-body .t-hero{margin-top:26px}
.hero-body .line{margin-top:34px;margin-bottom:30px}
.hero-sub{font-weight:300;font-size:15px;letter-spacing:.06em;color:#CFCBC4}
.hero-actions{display:flex;justify-content:center;gap:18px;margin-top:46px}
.hero-foot{position:absolute;left:var(--g);right:var(--g);bottom:44px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.hero-foot .eyebrow{color:#8a867f}
.scroll{display:flex;align-items:center;gap:16px}
.scroll::after{content:"";width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0))}

/* ---------- hero hook: black-and-white editorial photography ---------- */
.hook{display:none;position:absolute;pointer-events:none;z-index:1}
/* A — campaign: one large portrait on the right, melting into the silk; text moves left */
.hook-a .hook-a-img{display:block;top:0;bottom:0;right:0;width:58%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 18%,#000 46%),linear-gradient(180deg,transparent 0%,#000 24%,#000 66%,transparent 94%),radial-gradient(ellipse 46% 62% at 57% 50%,#000 42%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.18) 100%);-webkit-mask-composite:source-in}
/* her film, full colour, ungraded: scarf over her face, a slow reveal, rests on her smile */
.hook-film{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 30%}
.hook-a .hero-body,.hook-b .hero-body{left:var(--g);right:auto;width:740px;text-align:left}
.hook-a .hero-body .t-hero,.hook-b .hero-body .t-hero{font-size:40px;letter-spacing:.42em;padding-left:0;margin-right:-.42em;white-space:nowrap}
.hook-a .hero-body .eyebrow,.hook-b .hero-body .eyebrow{padding-left:0}
.hook-a .hero-body .line,.hook-b .hero-body .line{margin-left:0}
.hook-a .hero-actions,.hook-b .hero-actions{justify-content:flex-start}
.hook-a .hero::before,.hook-b .hero::before{background:radial-gradient(ellipse 40% 40% at 24% 52%,rgba(5,5,6,.6),rgba(5,5,6,0) 100%)}
/* campaign credit, like a fashion-house photo credit */
.hook-credit{display:none;position:absolute;right:var(--g);bottom:104px;z-index:2;color:#8a867f}
.hook-a .hook-credit{display:block}

/* B — triptych: three tall panels, captioned with the brand line */
.hook-b .hook-b-img{display:flex;gap:22px;align-items:flex-start;right:var(--g);top:176px}
.hook-b .hook-b-img figure{width:178px}
.tp{position:relative;height:500px;overflow:hidden;background:#000;outline:1px solid rgba(255,255,255,.22);outline-offset:7px;
  -webkit-box-reflect:below 18px linear-gradient(to bottom,rgba(0,0,0,0) 80%,rgba(0,0,0,.22) 100%)}
.tp img{width:100%;height:100%;object-fit:cover;display:block}
.tp::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,0) 0 55%,rgba(255,255,255,.05) 55% 62%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35))}
.hook-b-img figcaption{margin-top:28px;display:flex;align-items:baseline;gap:14px;font-weight:400;font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--pearl)}
.hook-b-img figcaption .num{font-size:11px;letter-spacing:.2em}

/* ---------- guest list (client marks) ---------- */
.guests{padding:52px var(--g) 56px;background:#030304;border-bottom:1px solid var(--hair)}
.guests .logos{display:flex;justify-content:center;align-items:center;gap:56px;margin-top:28px}
.guests .logos img{height:22px;width:auto;opacity:.5;filter:grayscale(1)}
.guests .logos img.tall{height:31px}

/* ---------- experience: statement + guest row on a piano floor ---------- */
.experience{position:relative;overflow:hidden;padding:150px var(--g) 0;background:linear-gradient(180deg,#050506,#0b0b0d 70%)}
.experience .t-display{margin-top:26px}
.experience .lead{margin-top:30px}
.guest-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:96px;padding-bottom:230px}
.guest-row .pic{height:440px}
.experience .floor{height:223px}
.experience .row-cap{position:absolute;left:0;right:0;bottom:56px;z-index:3}

/* ---------- instrument ---------- */
.instrument{padding:160px var(--g);background:var(--piano);display:grid;grid-template-columns:520px 1fr;gap:130px;align-items:center}
.instrument .pic{height:660px}
.instrument .pic img{object-position:50% 65%}
.instrument .t-display{margin-top:26px}
.instrument .lead{margin-top:28px;max-width:520px}
.features{margin-top:46px;border-top:1px solid var(--hair)}
.features li{display:grid;grid-template-columns:70px 1fr;padding:24px 0;border-bottom:1px solid var(--hair)}
.features .num{padding-top:2px}
.features .t-title{font-size:11px;margin-bottom:6px}
.features p{font-size:14.5px;color:var(--body);line-height:1.8}
.instrument .link{margin-top:46px}

/* ---------- order of the evening ---------- */
.evening{position:relative;background:var(--piano);padding-bottom:160px}
.evening-band{position:relative;height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.evening-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(1) contrast(1.05) brightness(.5)}
.evening-band::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 45% 40% at 50% 45%,rgba(5,5,6,.6),rgba(5,5,6,0) 100%),linear-gradient(180deg,rgba(5,5,6,.7) 0%,rgba(5,5,6,.3) 40%,rgba(5,5,6,.95) 100%)}
.evening-band .center{position:relative;z-index:2;margin-top:-60px}
.evening-band .t-display{margin-top:24px}
.steps{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:-150px var(--g) 0}
.step{padding:46px 38px 50px}
.step .num{font-size:30px;letter-spacing:.12em;color:var(--white);font-weight:200}
.step .t-title{margin-top:34px;font-size:11px}
.step p{margin-top:12px;font-size:14px;line-height:1.85;color:var(--body)}
.step .rule{display:block;width:28px;height:1px;background:rgba(255,255,255,.4);margin-top:28px}

/* ---------- collection ---------- */
.collection{padding:160px var(--g) 170px;background:linear-gradient(180deg,#050506,#0b0b0d)}
.collection .t-display{margin-top:26px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:86px}
.card{padding:16px 16px 34px}
.card .pic{height:380px;outline:none}
.card .tag{position:absolute;left:14px;top:14px;z-index:2;font-weight:500;font-size:8px;letter-spacing:.36em;text-transform:uppercase;padding:9px 12px;color:var(--white);background:rgba(5,5,6,.78);border:1px solid rgba(255,255,255,.3)}
.card .num{display:block;margin-top:30px;padding:0 10px}
.card .t-title{margin-top:12px;padding:0 10px;font-size:11.5px}
.card p{margin-top:10px;padding:0 10px;font-size:14px;line-height:1.8;color:var(--body)}

/* ---------- engagements ---------- */
.engage{padding:150px var(--g) 160px;background:var(--piano)}
.head-split{display:flex;justify-content:space-between;align-items:flex-end}
.engage .t-display{margin-top:26px}
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:80px}
.eng-grid .pic{height:560px}
.eng-grid figcaption{margin-top:30px}
.eng-grid figcaption b{display:block;margin-top:12px;font-weight:300;font-size:14px;letter-spacing:.28em;text-transform:uppercase}

/* ---------- the house (pearl white) ---------- */
.house{background:var(--white);color:var(--black);padding:150px var(--g);display:grid;grid-template-columns:1.1fr 1fr;gap:120px;align-items:center}
.house .crown{width:44px;height:35px;margin-bottom:34px}
.house .eyebrow{color:#6b675f}
.house .quote{font-weight:200;font-size:38px;line-height:1.55;letter-spacing:.24em;text-transform:uppercase;margin-top:26px}
.house p{font-size:15.5px;line-height:2;color:#3a3833;max-width:500px}
.sig{margin-top:38px;padding-top:28px;border-top:1px solid var(--hair-ink);max-width:500px}
.sig b{display:block;font-weight:500;font-size:11px;letter-spacing:.42em;text-transform:uppercase}
.sig span{display:block;margin-top:8px;font-weight:400;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:#7a766e}

/* ---------- cities ---------- */
.cities{padding:150px var(--g);background:linear-gradient(180deg,#050506,#0b0b0d)}
.cities .t-display{margin-top:26px}
.city-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.city{padding:60px 40px 58px;text-align:center}
.city+.city{border-left:1px solid var(--hair)}
.city h3{font-weight:200;font-size:28px;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;margin:18px 0 14px}
.city p{font-size:14px;color:var(--body);max-width:300px;margin:0 auto 30px}

/* ---------- invitation ---------- */
.invite{position:relative;overflow:hidden;padding:150px var(--g);background:#050506 url(img/satin-band.jpg) center/cover no-repeat}
.invite-card{position:relative;z-index:2;width:800px;margin:0 auto;padding:74px 80px 78px}
.invite-card .crown{width:48px;height:38px;margin:0 auto 30px}
.invite-card .t-display{margin-top:22px;font-size:36px}
.invite-card .lead{margin-top:24px;max-width:500px}
.invite-actions{display:flex;justify-content:center;gap:18px;margin-top:46px}

/* ---------- footer ---------- */
.foot{background:#030304;border-top:1px solid var(--hair);padding:96px var(--g) 46px}
.foot-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px;align-items:start}
.foot .crest{align-items:flex-start}
.foot .crest .logo{width:140px}
.foot .wm{text-align:left;padding-left:0;font-size:14px}
.foot .wm small{padding-left:0}
.foot-col .eyebrow{margin-bottom:22px}
.foot-col a{display:block;font-size:13px;color:var(--body);line-height:2.3;letter-spacing:.04em}
.foot-bottom{margin-top:80px;padding-top:30px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center}
.foot-bottom .eyebrow{color:#77736c}

/* ---------- private enquiries page ---------- */
.enquire{position:relative;min-height:1000px;overflow:hidden;background:#050506 url(img/satin-hero.jpg) center/cover no-repeat}
.enquire::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,6,.2),rgba(5,5,6,.75) 60%)}
.enq-grid{position:relative;z-index:2;display:grid;grid-template-columns:430px 1fr;gap:110px;padding:70px 120px 120px;align-items:start}
.enq-grid .pic{height:600px}
.enq-grid .pic img{object-position:50% 30%}
.enq-form{padding:58px 64px 60px}
.enq-form .t-display{margin-top:22px;font-size:28px;white-space:nowrap}
.enq-form .lead{margin-top:16px;font-size:14.5px}
.fields{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:28px;margin-top:40px}
.field{display:flex;flex-direction:column;gap:10px}
.field.full{grid-column:1/-1}
.field label{font-weight:500;font-size:8.5px;letter-spacing:.44em;text-transform:uppercase;color:var(--silver)}
.field .input{font-weight:300;font-size:15px;letter-spacing:.06em;color:var(--white);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.26);min-height:36px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.field .input.ph{color:#66625c}
.field .chev{width:8px;height:8px;border-right:1px solid var(--silver);border-bottom:1px solid var(--silver);transform:rotate(45deg) translate(-3px,-3px)}
.field .textarea{min-height:70px;align-items:flex-start}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{font-weight:500;font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;padding:15px 16px;text-align:center;border:1px solid rgba(255,255,255,.16);color:var(--body)}
.choice.on{color:#0A0A0B;border-color:transparent;background:linear-gradient(180deg,#ffffff 0%,#f3f1ec 49%,#e4e1db 50%,#f2f0eb 100%)}
.enq-actions{display:flex;align-items:center;gap:30px;margin-top:40px}
.enq-actions small{font-size:11.5px;line-height:1.7;color:#8a867f;max-width:280px}

/* ---------- phone ---------- */
@media (max-width:640px){
  :root{--g:22px}
  body{font-size:15px}
  .nav{grid-template-columns:48px 1fr 48px;padding:30px 22px 0}
  .nav-links,.nav-right .btn{display:none}
  .burger{display:flex;flex-direction:column;gap:7px}
  .burger i{display:block;width:24px;height:1px;background:var(--white)}
  .burger i+i{width:15px}
  .nav-right{gap:0}
  .enq{display:block;font-weight:500;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--pearl)}
  .crest .crown{width:40px;height:32px}
  .nav .logo{width:104px}
  .hero{height:844px;background-position:62% 50%}
  .hero-body{transform:translateY(-46%)}
  .t-hero{font-size:23px;letter-spacing:.42em;line-height:1.9}
  .center .t-hero{padding-left:.42em}
  .hero-body .eyebrow{font-size:7.5px;letter-spacing:.36em;padding:0 20px}
  .hero-sub{font-size:13.5px;padding:0 30px}
  .hero-actions{flex-direction:column;align-items:stretch;padding:0 30px}
  .hero-foot{bottom:28px;justify-content:center}
  .hero-foot .scroll{display:none}
  .hero-foot .eyebrow{font-size:7.5px;letter-spacing:.36em}
  .t-display{font-size:20px;letter-spacing:.26em;text-wrap:balance}
  .t-display br{display:none}
  .experience .row-cap{font-size:7.5px;letter-spacing:.34em}
  .center .t-display{padding-left:.26em}
  .hook-a .hook-a-img{width:100%;top:78px;bottom:auto;height:470px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 62%,transparent 94%),linear-gradient(90deg,#000,#000);}
  .hook-a .hero-sub{font-size:13px;letter-spacing:.04em}
  .hook-film{object-position:52% 30%}
  .hook-a .hero-body,.hook-b .hero-body{left:0;right:0;width:auto;top:auto;bottom:74px;transform:none;text-align:center}
  .hook-a .hero-body .t-hero,.hook-b .hero-body .t-hero{font-size:20px;letter-spacing:.36em;line-height:1.9;padding-left:.36em;margin-right:0;white-space:normal}
  .hook-a .hero-body .eyebrow,.hook-b .hero-body .eyebrow{padding-left:.34em}
  .hook-a .hero-body .line,.hook-b .hero-body .line{margin:18px auto 14px}
  .hook-a .hero-actions,.hook-b .hero-actions{justify-content:center;margin-top:24px}
  .hook-credit,.hook-a .hook-credit{display:none}
  .hook-b .hook-b-img{display:none}
  .guests{padding:40px 22px}
  .guests .logos{flex-wrap:wrap;gap:24px 30px}
  .guests .logos img{height:18px}.guests .logos img.tall{height:25px}
  .experience{padding-top:100px}
  .guest-row{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:60px;padding-bottom:150px}
  .guest-row .pic{height:200px;outline-offset:3px}
  .guest-row .pic:nth-child(n+4){display:none}
  .experience .floor{height:150px}
  .experience .row-cap{bottom:40px}
  .instrument{grid-template-columns:1fr;gap:60px;padding:100px 22px}
  .instrument .pic{height:440px}
  .evening{padding-bottom:100px}
  .evening-band{height:440px}
  .steps{grid-template-columns:1fr 1fr;gap:10px;margin:-110px 16px 0}
  .step{padding:30px 20px 32px}
  .step .num{font-size:24px}
  .step .t-title{margin-top:20px;font-size:9.5px;letter-spacing:.3em}
  .step p{font-size:13px}
  .collection{padding:100px 22px}
  .cards{grid-template-columns:1fr 1fr;gap:10px;margin-top:56px}
  .card{padding:8px 8px 22px}
  .card .pic{height:220px}
  .card .tag{left:8px;top:8px;font-size:6px;padding:6px 7px;letter-spacing:.24em}
  .card .num{margin-top:18px;padding:0 6px}
  .card .t-title{font-size:9px;letter-spacing:.26em;padding:0 6px}
  .card p{font-size:12.5px;padding:0 6px}
  .engage{padding:100px 22px}
  .head-split{flex-direction:column;align-items:flex-start;gap:30px}
  .eng-grid{grid-template-columns:1fr;gap:56px;margin-top:50px}
  .eng-grid .pic{height:460px}
  .house{grid-template-columns:1fr;gap:40px;padding:100px 26px}
  .house .quote{font-size:22px;letter-spacing:.2em}
  .cities{padding:100px 22px}
  .city-row{grid-template-columns:1fr;margin-top:50px}
  .city{padding:42px 10px}
  .city+.city{border-left:0;border-top:1px solid var(--hair)}
  .city h3{font-size:22px}
  .invite{padding:90px 16px}
  .invite-card{width:auto;padding:56px 24px 54px}
  .invite-card .t-display{font-size:22px}
  .invite-actions{flex-direction:column}
  .foot{padding:70px 22px 40px}
  .foot-top{grid-template-columns:1fr 1fr;gap:40px 20px}
  .foot .crest{grid-column:1/-1}
  .foot-bottom{flex-direction:column;gap:14px;align-items:flex-start}
}