/* Crown Piano Black — WordPress layer: masthead, phone menu, page template, page content, Contact Form 7.
   The look itself (type, keys, lacquer, silk, homepage sections) is in piano.css. */

body{position:relative;margin:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;color:#000;padding:10px 14px;font-size:12px}
.masthead{position:absolute;top:0;left:0;right:0;z-index:30}
.admin-bar .masthead{top:0}
button.burger{background:none;border:0;padding:8px 0;cursor:pointer}
.burger i{transition:transform .25s,width .25s}

/* phone menu */
.menu-panel{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:110px 28px 40px;
  background:#050506 url(img/satin-band.jpg) center/cover no-repeat}
.menu-panel[hidden]{display:none}
.menu-panel nav{display:flex;flex-direction:column;align-items:center;gap:22px}
.menu-panel nav a{font-weight:300;font-size:13px;letter-spacing:.36em;padding-left:.36em;text-transform:uppercase;color:var(--pearl);text-align:center}
.menu-panel .btn{min-width:260px}
.menu-panel .eyebrow{font-size:8px;letter-spacing:.3em;text-align:center}
body.menu-open{overflow:hidden}
body.menu-open .masthead{position:fixed;z-index:50}
body.menu-open .burger i:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .burger i+i{width:24px;transform:translateY(-4px) rotate(-45deg)}

/* homepage: the page's own WordPress content (intro, client logos, Google schema) */
.intro{padding:72px var(--g) 66px;background:#030304;border-bottom:1px solid var(--hair)}
.intro .cc-lead{max-width:760px;margin:0 auto;font-size:16px;line-height:1.95;color:var(--body)}
.intro .cc-buttons{display:none}
.intro > p:not(.cc-lead):not(.cc-buttons){margin-top:22px}
.intro > p a{display:inline-flex;align-items:center;gap:16px;font-weight:500;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--white)}
.intro > p a::after{content:"";width:48px;height:1px;background:rgba(255,255,255,.6)}
.cc-logos{margin-top:46px}
.cc-logos-label{font-weight:500;font-size:9.5px;line-height:1.6;letter-spacing:.52em;padding-left:.52em;text-transform:uppercase;color:var(--silver)}
.cc-logos-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 54px;margin-top:28px}
.cc-logos-row img{height:26px;width:auto;opacity:.55;filter:grayscale(1)}
.cc-logos-row img.cc-square{height:34px}

/* every other page */
.page-hero{position:relative;min-height:540px;overflow:hidden;display:flex;align-items:flex-end;background:#050506 url(img/satin-hero.jpg) center/cover no-repeat}
.page-photo{position:absolute;top:0;bottom:0;right:0;width:52%;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%),linear-gradient(180deg,transparent 0%,#000 26%,#000 70%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%),linear-gradient(180deg,transparent 0%,#000 26%,#000 70%,transparent 100%);mask-composite:intersect}
.page-head{position:relative;z-index:2;padding:190px var(--g) 76px;max-width:820px}
.page-head .t-display{margin-top:22px;font-size:34px;line-height:1.5}
.page-head .line{margin-top:30px}
.page-body{max-width:820px;margin:0 auto;padding:96px 24px 110px}
.page-body > *:first-child{margin-top:0}
.page-body h2{font-weight:200;font-size:23px;line-height:1.6;letter-spacing:.22em;text-transform:uppercase;margin:70px 0 22px;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-body h3{font-weight:500;font-size:11px;line-height:1.7;letter-spacing:.38em;text-transform:uppercase;color:var(--white);margin:44px 0 12px}
.page-body h4{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--white);margin:30px 0 10px}
.page-body p{font-size:16px;line-height:1.95;color:var(--body);margin:0 0 22px}
.page-body .cc-lead,.page-body > p:first-child{font-size:18px;line-height:1.9;color:#CFCBC4}
.page-body a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.page-body strong,.page-body b{color:var(--white);font-weight:500}
.page-body ul,.page-body ol{margin:0 0 28px;padding:0;list-style:none;border-bottom:1px solid var(--hair)}
.page-body li{position:relative;padding:13px 0 13px 36px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.8;color:var(--body)}
.page-body ul li::before{content:"";position:absolute;left:0;top:27px;width:16px;height:1px;background:var(--silver)}
.page-body ol{counter-reset:n}
.page-body ol li::before{counter-increment:n;content:counter(n,decimal-leading-zero);position:absolute;left:0;top:14px;font-size:11px;letter-spacing:.24em;color:var(--silver)}
.page-body figure{margin:48px 0}
.page-body figure img,.page-body .wp-block-image img{display:block;width:100%;height:auto;outline:1px solid var(--hair2);outline-offset:7px}
.page-body figcaption{margin-top:18px;font-size:9.5px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--silver);text-align:center}
.page-body hr{border:0;height:1px;background:var(--hair);margin:56px 0}
.page-body blockquote{margin:44px 0;padding:6px 0 6px 30px;border-left:1px solid rgba(255,255,255,.4)}
.page-body table{width:100%;border-collapse:collapse;margin:0 0 28px}
.page-body td,.page-body th{padding:12px 10px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--body);text-align:left}
.page-body .has-text-align-center{text-align:center}

/* the site's button pairs (old builder classes) become piano keys */
.cc-buttons{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0}
.cc-buttons a,.page-body a.button{color:var(--white)!important;display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.4em;text-transform:uppercase;
  padding:21px 34px 21px calc(34px + .4em);text-decoration:none;white-space:nowrap;
  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,.45)}
.cc-buttons a:first-child,.page-body .cc-buttons a.button:first-child{color:#0A0A0B!important;border-color:transparent;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,.5)}

/* the guest portraits inside page text: a fixed, centred portrait size so every page matches */
.page-body figure:not(.cc-video){text-align:center}
.page-body figure:not(.cc-video) img{display:inline-block;width:100%;max-width:420px;height:auto}

/* the site's video films */
.page-body figure.cc-video{text-align:center;margin:56px auto!important}
.page-body video{display:inline-block;width:100%;max-width:400px;height:auto;background:#000;outline:1px solid var(--hair2);outline-offset:7px}

/* Contact Form 7 in the Piano Black style */
.wpcf7{margin:46px 0 0}
.wpcf7 .column,.wpcf7 form > p{font-weight:500;font-size:9px;line-height:1.7;letter-spacing:.36em;text-transform:uppercase;color:var(--silver)}
.wpcf7 form{display:flex;flex-wrap:wrap;column-gap:40px;row-gap:6px}
.wpcf7 form > *{flex:1 1 100%;min-width:0}
.wpcf7 form > .hidden-fields-container{display:none}
.wpcf7 .column{float:none;width:auto;margin:0 0 18px;flex:1 1 100%}
.wpcf7 .column.one-second{flex:1 1 calc(50% - 20px)}
.wpcf7 .column.one-third{flex:1 1 calc(33.333% - 27px)}
.wpcf7 h2,.wpcf7 h3{flex:1 1 100%;margin:44px 0 18px!important;font-weight:500!important;font-size:9.5px!important;letter-spacing:.46em!important;text-transform:uppercase;
  color:var(--silver)!important;background:none!important;-webkit-text-fill-color:currentColor;padding-top:26px;border-top:1px solid var(--hair)}
.wpcf7 form > h2:first-of-type{margin-top:0!important;padding-top:0;border-top:0}
.wpcf7 label{display:block;font-weight:500;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--silver)}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 input[type=time],.wpcf7 input[type=url],.wpcf7 select,.wpcf7 textarea{
  display:block;width:100%;margin-top:8px;padding:12px 0 12px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.26);border-radius:0;
  color:var(--white);font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.04em;text-transform:none;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:#6f6b65;letter-spacing:.04em}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{border-bottom-color:rgba(255,255,255,.75)}
.wpcf7 input[type=date]{color-scheme:dark}
.wpcf7 select{padding-right:26px;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239C9890'/%3E%3C/svg%3E") right 4px center no-repeat}
.wpcf7 select option{background:#0E0E10;color:var(--white)}
.wpcf7 textarea{min-height:120px;resize:vertical}
.wpcf7 .wpcf7-list-item{display:inline-block;margin:10px 8px 0 0}
.wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid rgba(255,255,255,.16);cursor:pointer;color:var(--body);font-size:8.5px;letter-spacing:.3em}
.wpcf7 .wpcf7-list-item input{accent-color:#ECE9E3;margin:0}
.wpcf7 .wpcf7-list-item label:has(input:checked){color:#0A0A0B;border-color:transparent;background:linear-gradient(180deg,#ffffff 0%,#f3f1ec 49%,#e4e1db 50%,#f2f0eb 100%)}
.wpcf7 input[type=submit],.wpcf7 .wpcf7-submit{margin-top:26px;cursor:pointer;border:0;border-radius:0;font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;
  padding:22px 40px 22px calc(40px + .4em);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,.5)}
.wpcf7 .wpcf7-spinner{background:var(--silver)}
.wpcf7 .wpcf7-not-valid-tip{font-size:11px;letter-spacing:.04em;color:#e6a2a2;margin-top:6px;text-transform:none}
.wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:16px 18px;border:1px solid rgba(255,255,255,.22);color:var(--pearl);font-size:13px}
.wpcf7 p{margin:0 0 12px}
.page-body .wpcf7 + p,.page-body .wpcf7 p small{font-size:12px;color:var(--mute)}

/* laptops/tablets: keep the menu on one line each side of the crest */
.nav-links a{white-space:nowrap}
@media (min-width:641px) and (max-width:1240px){.nav-links{gap:24px;letter-spacing:.26em}.nav-right{gap:24px}.nav-right .btn{padding-left:20px;padding-right:20px}}
@media (min-width:641px) and (max-width:960px){.masthead .nav-links:first-child a:nth-child(3){display:none}}

/* gallery page: full-length guests, eyes on one line (the crops share an eye line and head size) */
.gallery-intro{padding-bottom:64px;text-align:center}
.gallery{padding:0 var(--g) 140px}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:64px 22px;max-width:1500px;margin:0 auto}
.gallery-grid .pic{aspect-ratio:600/960}
.gallery-grid .pic img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.gallery-grid .pic:hover img{transform:scale(1.03)}
@media (max-width:1100px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:40px 18px;max-width:760px}}

/* phone */
@media (max-width:640px){
  .masthead{padding-top:26px}
  .page-hero{min-height:480px}
  .page-photo{width:100%;opacity:.7;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 50%,transparent 82%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 50%,transparent 82%)}
  .page-head{padding:200px 22px 54px}
  .page-head .t-display{font-size:21px;letter-spacing:.24em}
  .page-body{padding:60px 22px 80px}
  .page-body h2{font-size:18px;letter-spacing:.2em;margin-top:54px}
  .page-body p{font-size:15px}
  .cc-buttons{flex-direction:column}
  .cc-buttons a{width:100%}
  .wpcf7 .column.one-second,.wpcf7 .column.one-third{flex-basis:100%}
  .intro{padding:54px 22px}
  .cc-logos-row{gap:22px 30px}
  .cc-logos-row img{height:20px}.cc-logos-row img.cc-square{height:26px}
  .gallery{padding:0 16px 90px}
  .gallery-grid{gap:26px 10px}
  .gallery-grid .pic{outline-offset:3px}
}

/* phones: iPhone Safari can drop CSS masks on <video>, so the film fades into the silk with overlays instead */
@media (max-width:640px){
  .hook-a .hook-a-img{-webkit-mask-image:none!important;mask-image:none!important;top:70px;height:500px}
  .hook-a .hook-a-img::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,#050506 0%,rgba(5,5,6,0) 16%,rgba(5,5,6,0) 58%,rgba(5,5,6,.85) 86%,#050506 100%),
               linear-gradient(90deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,0) 16%,rgba(5,5,6,0) 84%,rgba(5,5,6,.55) 100%)}
  .hook-film{object-position:52% 26%}
}